.gallery-section { border-top:1px solid var(--line); }
.showcase-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.showcase-card { min-width:0; }
.showcase-card figcaption { padding:20px 2px 0; }
.showcase-card h3 { font-size:16px; font-weight:550; margin-bottom:8px; }
.showcase-card p { font-size:14px; color:var(--muted); line-height:1.7; }
/* Hosting choices share equal cards and one explanation of device sync. */
.hosting-section { position:relative; background:#101013; border-top:1px solid var(--line); }
.hosting-anchor { position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; }
.hosting-intro .body-copy { max-width:640px; margin-top:20px; font-size:16px; }
.hosting-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:32px; }
.hosting-option { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:28px; border:1px solid var(--line); border-radius:14px; background:var(--panel); scroll-margin-top:24px; }
.hosting-option > .icon { width:28px; height:28px; margin-bottom:20px; color:var(--accent-text); stroke-width:1.4; }
.hosting-option h3 { font-size:24px; font-weight:500; line-height:1.25; letter-spacing:-.025em; }
.hosting-option p { margin-top:16px; color:var(--muted); font-size:15px; line-height:1.8; }
.hosting-option ul { margin:20px 0 16px; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.75; }
.hosting-option li + li { margin-top:8px; }
.hosting-option li::marker { color:var(--faint); }
.hosting-guide { display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:16px; color:var(--accent-text); font-size:14px; }
.hosting-guide:hover { color:var(--text); }
.hosting-option .hosting-guide { margin-top:auto; }
.hosting-flow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; align-items:center; margin-top:40px; padding-top:32px; border-top:1px solid var(--line); }
.hosting-flow h3 { font-size:26px; font-weight:500; line-height:1.25; letter-spacing:-.025em; }
.hosting-flow-copy p { max-width:440px; margin-top:16px; color:var(--muted); font-size:15px; line-height:1.8; }
.hosting-flow .sync-map { padding:0; }
.hosting-privacy { padding-top:24px; border-top:1px solid var(--line); }
@media(max-width:850px) { .hosting-flow { gap:40px; } }
@media(max-width:700px) {
 .hosting-options,.hosting-flow { grid-template-columns:minmax(0,1fr); gap:24px; }
 .hosting-option { padding:24px; }
 .hosting-flow-copy p { max-width:none; }
}
.install-section { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; border-top:1px solid var(--line); }
.install-intro .body-copy { max-width:350px; margin-top:22px; font-size:15px; }
.install-note { margin-top:22px; color:var(--faint); font-size:13px; line-height:1.8; }
.install-steps { padding:0; margin:0; list-style:none; display:grid; gap:28px; align-content:start; }
.install-steps li { display:flex; gap:18px; }.install-steps li > span { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border:1px solid var(--line-strong); border-radius:50%; color:var(--accent-text); font:12px ui-monospace,monospace; }
.install-steps li > div { min-width:0; flex:1; }
.install-steps li + li { border-top:1px solid var(--line); padding-top:24px; }
.install-steps .install-help { margin-top:8px; font-size:14px; }
.install-steps h3 { font-size:16px; font-weight:550; margin:4px 0 10px; }.install-steps p { font-size:14px; line-height:1.85; color:var(--muted); }.install-steps a { color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }.install-steps b { font-weight:500; color:var(--text); }.install-steps code { overflow-wrap:anywhere; font-size:13px; background:#ffffff08; padding:3px 5px; border-radius:4px; }
.faq-section { border-top:1px solid var(--line); display:grid; grid-template-columns:.85fr 1.2fr; gap:70px; }
.faq-intro { margin-top:20px; max-width:300px; color:var(--muted); font-size:14px; line-height:1.8; }
.faq-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:32px; margin:0; }
.faq-list > div { padding-top:20px; border-top:1px solid var(--line); }
.faq-list dt { margin-bottom:12px; font-size:15px; font-weight:500; line-height:1.5; }
.faq-list dd { margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.faq-list a { color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
.closing-section { border-top:1px solid var(--line); padding-block:70px; text-align:center; }
.closing-section .actions { justify-content:center; }
.closing-source { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--muted); font-size:14px; }
.closing-source:hover { color:var(--text); }
@media(max-width:850px) { .install-section { gap:32px; }.faq-section { gap:30px; } }
@media(max-width:700px) { .install-section { grid-template-columns:minmax(0,1fr); gap:32px; }.install-intro .body-copy { max-width:440px; } }
@media(max-width:600px) { .showcase-grid,.faq-section { grid-template-columns:1fr; gap:32px; }.closing-section { padding-block:50px; } }


.sync-showcase { border-top:1px solid var(--line); }
.sync-screenshot { display:block; }
.sync-screenshot img { width:100%; height:auto; }

.reminder-recording { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:64px; margin-top:64px; padding-block:24px; }
.reminder-recording figcaption { max-width:420px; }
.reminder-recording h3 { font-size:clamp(26px,3vw,36px); line-height:1.15; letter-spacing:-.035em; font-weight:550; margin-bottom:20px; }
.reminder-recording p { color:var(--muted); font-size:16px; line-height:1.7; }
.recording-media { min-width:0; }
.reminder-recording video { display:block; width:100%; height:auto; border-radius:10px; background:#111; }
.reminder-recording .recording-description { margin-top:14px; font-size:14px; }


@media(max-width:700px) { .reminder-recording { grid-template-columns:1fr; gap:24px; margin-top:40px; }.reminder-recording figcaption { max-width:100%; } }

.sync-showcase > .reminder-recording { margin-top:0; }

.reminder-recording h3 { font-size:clamp(23px,2.3vw,30px); font-weight:450; line-height:1.25; letter-spacing:-.025em; }

.how-steps { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:24px; counter-reset:how; }
.how-steps li { position:relative; padding-left:32px; counter-increment:how; }
.how-steps li::before { content:counter(how); position:absolute; left:0; top:1px; color:var(--accent-text); font-size:13px; }
.how-steps h3 { font-size:15px; font-weight:500; margin-bottom:6px; }
.how-steps p { color:var(--muted); font-size:14px; line-height:1.7; }

.sync-map { min-width:0; padding:24px 0; }
.sync-map-hub { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:28px 20px; background:radial-gradient(ellipse at center,#8b5cf612,transparent 70%); }
.sync-map-hub > .icon { width:38px; height:38px; color:var(--accent-text); stroke-width:1.3; margin-bottom:4px; }
.sync-map-hub > span { font-size:17px; font-weight:500; }
.sync-map-hub small { color:var(--muted); font-size:13px; }
.sync-map-branches { display:flex; justify-content:space-around; position:relative; width:60%; margin:12px auto 4px; padding-top:14px; color:var(--accent-text); font-size:19px; }
.sync-map-branches::before { content:''; position:absolute; inset:0 0 auto; height:14px; border:1px solid var(--line-strong); border-bottom:0; border-radius:10px 10px 0 0; }
.sync-map-devices { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.sync-map-devices > div { display:flex; flex-direction:column; align-items:center; gap:9px; padding:20px 8px; text-align:center; }
.sync-map-devices .icon { width:25px; height:25px; color:var(--muted); stroke-width:1.4; }
.sync-map-devices strong { font-size:14px; font-weight:500; }
.sync-map-devices span { color:var(--muted); font-size:13px; }
.sync-map-services { display:grid; grid-template-columns:repeat(3,1fr); margin-top:24px; padding:20px 0; border-block:1px solid var(--line); text-align:center; }
.sync-map-services > div + div { border-left:1px solid var(--line); }
.sync-map-services span { font-size:13px; color:var(--text); }
.sync-map-services p { margin-top:6px; font-size:12px; color:var(--muted); }
.sync-map-note { margin-top:18px; color:var(--faint); font-size:13px; line-height:1.7; }
.sync-map-note a { color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }

.project-showcase { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:64px; align-items:center; }
.project-showcase figcaption { max-width:420px; }
.project-showcase h3 { font-size:clamp(23px,2.3vw,30px); font-weight:450; line-height:1.25; letter-spacing:-.025em; margin-bottom:20px; }
.project-showcase p { color:var(--muted); font-size:16px; line-height:1.7; }
.project-showcase img { width:min(100%,340px); height:auto; justify-self:center; border-radius:10px; }
@media(max-width:700px) { .project-showcase { grid-template-columns:1fr; gap:32px; } }

.notification-showcase img { width:100%; max-width:590px; }

.screenshot-gallery .showcase-grid { row-gap:44px; }
.screenshot-gallery .showcase-card img { display:block; width:100%; height:auto; border-radius:10px; }
.phone-gallery .showcase-grid { max-width:760px; margin-inline:auto; gap:48px; }
.phone-gallery .showcase-card { max-width:340px; width:100%; justify-self:center; }
@media(max-width:600px) { .phone-gallery .showcase-grid { gap:40px; } }

/* Product demonstrations keep text and media together. */
.reminder-recording { grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); gap:48px; }
.reminder-recording h2 { margin-bottom:18px; }
@media(max-width:700px) { .reminder-recording { grid-template-columns:1fr; gap:28px; } }

/* Product captures retain their complete content and natural proportions. */
.product-image { width:100%; min-width:0; }
.product-image img { display:block; width:100%; height:auto; }
:root { --dialog-frame-gutter:24px; }
/* Show 24 rendered pixels of the original capture around each dialog. Padding
   keeps that context consistent at every viewport size, while the content box
   preserves the dialog's proportions. The mask stays outside its native corners.
   overflow:clip prevents scroll-into-view from moving the image inside its frame. */
.product-image--dialog {
 --source-width:2698; --dialog-radius:44;
 --dialog-x:549; --dialog-y:290; --dialog-width:1600; --dialog-height:1120;
 box-sizing:content-box;
 width:calc(100% - 2 * var(--dialog-frame-gutter));
 padding:var(--dialog-frame-gutter);
 position:relative;
 aspect-ratio:var(--dialog-width) / var(--dialog-height);
 overflow:clip;
 border-radius:calc(var(--dialog-frame-gutter) + (100% - 2 * var(--dialog-frame-gutter)) * var(--dialog-radius) / var(--dialog-width)) / calc(var(--dialog-frame-gutter) + (100% - 2 * var(--dialog-frame-gutter)) * var(--dialog-radius) / var(--dialog-height));
}
.product-image--dialog img {
 position:absolute;
 width:calc((100% - 2 * var(--dialog-frame-gutter)) * var(--source-width) / var(--dialog-width)); max-width:none; height:auto;
 left:calc(var(--dialog-frame-gutter) - (100% - 2 * var(--dialog-frame-gutter)) * var(--dialog-x) / var(--dialog-width));
 top:calc(var(--dialog-frame-gutter) - (100% - 2 * var(--dialog-frame-gutter)) * var(--dialog-y) / var(--dialog-height));
}
.product-image--sync-dialog {
 --source-width:3714; --dialog-radius:64;
 --dialog-x:805; --dialog-y:390; --dialog-width:2104; --dialog-height:1472;
}
.product-image--vault { --dialog-x:385; --dialog-width:2944; }

/* The desktop capture includes outer padding; overlap it far enough to meet
   the visible window edge without cropping or changing the original image. */
.hero-devices { --hero-overlap:clamp(48px,5vw,64px); display:grid; grid-template-columns:minmax(0,1fr) 18%; align-items:end; gap:0; max-width:1080px; margin-inline:auto; padding-bottom:24px; }
.hero-devices .hero-screenshot { width:calc(100% + var(--hero-overlap)); }
.hero-devices .hero-phone { z-index:1; transform:translateY(24px); box-shadow:inset 0 0 0 1px #09090b,-12px 16px 32px #0006; }
@media(max-width:600px) {
 .hero-devices { grid-template-columns:minmax(0,1fr); padding-bottom:0; }
 .hero-devices .hero-screenshot { width:100%; }
 .hero-devices .hero-phone { display:none; }
}

.header-github { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; border:1px solid var(--line); border-radius:8px; color:var(--muted); }
.header-github:hover { color:var(--text); background:var(--panel); border-color:var(--line-strong); }


.plugin-notification-demo { margin-top:0; margin-bottom:40px; padding-block:0 40px; border-bottom:1px solid var(--line); }
.plugin-notification-demo h3 { margin-bottom:16px; }
.plugin-notification-demo .recording-media { display:flex; justify-content:center; }
.plugin-notification-demo video { width:auto; max-width:100%; max-height:440px; }

.plugin-notification-demo video { background:transparent; }

/* Related features stay visible together, without tabs or hidden panels. */
.feature-group { margin-top:56px; scroll-margin-top:24px; }
.feature-group-heading { display:flex; justify-content:space-between; align-items:baseline; gap:40px; margin-bottom:28px; }
.feature-group-heading h3 { font-size:28px; font-weight:500; letter-spacing:-.025em; line-height:1.25; }
.feature-group-heading p { max-width:440px; font-size:15px; color:var(--muted); line-height:1.75; }
.reminders-mobile,.sync-showcase > .notification-story { margin-top:56px; }
@media(max-width:850px) {
 .feature-group-heading { display:block; }
 .feature-group-heading p { margin-top:12px; max-width:560px; }
}
@media(max-width:600px) {
 .feature-group,.reminders-mobile,.sync-showcase > .notification-story { margin-top:48px; }
 .feature-group-heading h3 { font-size:25px; }
}


/* Encryption pairs the content flow with setup and privacy details. */
.encryption-feature { margin-top:56px; padding-top:48px; border-top:1px solid var(--line); scroll-margin-top:24px; }
.encryption-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:72px; }
.encryption-status { display:inline-flex; align-items:center; padding:5px 9px; margin-bottom:20px; border:1px solid #bca7ef26; border-radius:5px; color:var(--accent-text); font-size:12px; line-height:1.4; }
.encryption-copy h3 { margin:0 0 18px; font-size:clamp(28px,3vw,36px); font-weight:500; letter-spacing:-.035em; line-height:1.2; text-wrap:balance; }
.encryption-description { max-width:390px; color:var(--muted); font-size:16px; line-height:1.75; }
.encryption-guide { display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:12px; color:var(--accent-text); font-size:14px; }
.encryption-guide:hover { color:var(--text); }
.encryption-diagram { min-width:0; padding:32px 20px; border:1px solid var(--line); border-radius:16px; background:#121215; }
.encryption-diagram figcaption { margin-bottom:28px; color:var(--faint); font-size:13px; text-align:center; }
.encryption-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.encryption-flow li { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
.encryption-flow li + li::before { content:""; position:absolute; top:27px; left:calc(-50% - 6px); width:calc(100% - 54px); margin-left:27px; height:1px; background:var(--line-strong); }
.encryption-node { position:relative; display:grid; place-items:center; width:54px; height:54px; margin-bottom:18px; border:1px solid var(--line-strong); border-radius:12px; background:#16161b; color:var(--muted); }
.encryption-node .icon { width:23px; height:23px; stroke-width:1.4; }
.encryption-node--server { color:var(--accent-text); border-color:#bca7ef33; background:#1c1826; }
.encryption-flow strong { font-size:13px; font-weight:500; line-height:1.5; }
.encryption-flow li > span:last-child { margin-top:5px; color:var(--faint); font-size:12px; line-height:1.5; }
.encryption-details { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:72px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.encryption-details p { color:var(--faint); font-size:14px; line-height:1.8; }
.encryption-details strong { display:block; margin-bottom:6px; color:var(--muted); font-weight:500; }
@media(max-width:850px) { .encryption-layout { grid-template-columns:minmax(0,1fr); gap:32px; }.encryption-description { max-width:520px; }.encryption-diagram { max-width:580px; width:100%; }.encryption-details { grid-template-columns:minmax(0,1fr); gap:20px; } }
@media(max-width:600px) { .encryption-feature { margin-top:48px; padding-top:40px; }.encryption-diagram { padding:26px 12px; }.encryption-flow { gap:8px; }.encryption-flow li + li::before { left:calc(-50% - 4px); }.encryption-flow strong { max-width:86px; }.encryption-flow li > span:last-child { max-width:88px; }.encryption-details { margin-top:24px; } }

/* Reading uses the same visible feature cards and complete, lossless captures. */
.reading-section { border-top:1px solid var(--line); }
.reading-intro { margin-bottom:36px; }
.reading-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0 0; }
.reading-details > div { padding:24px; border:1px solid var(--line); border-radius:12px; background:#121215; }
.reading-details dt { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:500; letter-spacing:-.015em; }
.reading-details .icon { width:18px; height:18px; color:var(--accent-text); stroke-width:1.5; }
.reading-details dd { margin:14px 0 0; color:var(--muted); font-size:14px; line-height:1.75; }
.reading-guide { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:20px; font-size:14px; color:var(--faint); }
.reading-guide a { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--accent-text); }
.reading-guide a:hover { color:var(--text); }
@media(max-width:850px) { .reading-details > div { padding:20px 18px; } }
@media(max-width:700px) { .reading-intro { margin-bottom:28px; }.reading-details { grid-template-columns:minmax(0,1fr); }.reading-details > div { padding:24px; } }


/* A restrained backdrop marks conflict management as a key capability. */
#conflict-management { position:relative; isolation:isolate; padding-block:28px; }
#conflict-management::before { content:""; position:absolute; z-index:-1; inset:0 -24px; border-radius:20px; background:radial-gradient(ellipse at 50% 0%,#8b5cf615,transparent 78%); pointer-events:none; }
#conflict-management .feature-group-heading h3 { color:#d8cbed; }
@media(max-width:600px) { #conflict-management::before { inset:0 -12px; } }
.recovery-feature { display:grid; grid-template-columns:160px minmax(0,1fr); gap:36px; align-items:center; margin-top:40px; padding:28px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.recovery-window { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--accent-text); }
.recovery-window strong { font-size:54px; font-weight:450; line-height:1.1; }
.recovery-window span { font-size:13px; }
.recovery-feature h3 { font-size:20px; font-weight:450; margin-bottom:12px; }
.recovery-feature p { color:var(--muted); font-size:14px; line-height:1.75; }
.recovery-feature p strong { font-weight:500; color:var(--text); }
.recovery-feature .recovery-note { margin-top:12px; font-size:14px; }
@media(max-width:600px) { .recovery-feature { grid-template-columns:1fr; gap:24px; padding:24px; }.recovery-window { align-items:flex-start; } }

/* Explicit layout avoids image wrappers inheriting text-column placement. */
.embedded-reminders { margin-top:48px; }
.embed-heading { max-width:640px; margin-bottom:24px; }
.embedded-reminders h3 { font-size:28px; font-weight:500; letter-spacing:-.025em; margin-bottom:12px; }
.embedded-reminders p,.embedded-reminders li { color:var(--muted); font-size:14px; line-height:1.75; }
.embed-demo { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,.75fr); gap:40px; align-items:center; }
.embedded-note-image { width:100%; justify-self:center; }
.embed-example { min-width:0; }
.embedded-reminders h4 { font-size:15px; font-weight:500; margin:0 0 12px; }
.embedded-reminders pre { margin:0 0 12px; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:auto; }
.embedded-reminders code { font-size:12px; color:var(--accent-text); overflow-wrap:anywhere; }
.embedded-reminders pre code { font-size:14px; line-height:1.8; }
.embedded-reminders .embed-help { font-size:14px; margin-top:12px; }
.embed-documentation a { color:var(--accent-text); display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.embedded-reminders ul { margin:0; padding-left:18px; }
.embedded-reminders li + li { margin-top:10px; }
@media(max-width:1000px) {
 .embed-demo { grid-template-columns:1fr; gap:24px; }
}

.reminder-recording video::-webkit-media-controls-fullscreen-button { display:none; }

/* Notifications close the reminder workflow after planning and scheduling. */
.notification-story { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); max-width:1040px; margin:0 auto; gap:64px; padding:48px 64px; border:0; border-radius:24px; background:radial-gradient(ellipse at 78% 65%,#8b5cf61a,transparent 60%),#121215; }
.notification-story figcaption { max-width:440px; }
.notification-story h3 { max-width:420px; margin-bottom:18px; font-size:clamp(2rem,3.6vw,2.75rem); font-weight:500; letter-spacing:-.045em; line-height:1.1; text-wrap:balance; }
.notification-story .recording-media { justify-content:center; }
.notification-story video { max-height:480px; }
@media(max-width:700px) {
 .notification-story { grid-template-columns:1fr; gap:32px; padding:32px 24px; border-radius:16px; }
 .notification-story figcaption { max-width:none; }
 .notification-story video { max-height:340px; }
}

/* The idle phone remains visible while the recording fades for replay. */
.plugin-notification-demo .gallery-video-trigger { background:url("/assets/screenshots/plugin-notifications-idle.png") center / 100% 100% no-repeat; }
.reminder-recording video { opacity:1; transition:opacity 350ms ease; }
.reminder-recording video.is-restarting { opacity:0; }
@media(prefers-reduced-motion:reduce) { .reminder-recording video { transition:none; } }



#installation-steps { scroll-margin-top:100px; }
#crate-repository { scroll-margin-top:120px; }
@media(max-width:1000px) { .faq-section { grid-template-columns:1fr; gap:28px; }.faq-intro { max-width:none; } }
@media(max-width:600px) { .faq-list { grid-template-columns:1fr; gap:24px; } }

.reminders-mobile > .feature-group { max-width:1000px; margin-inline:auto; }

.copy-button { flex-shrink:0; min-height:36px; min-width:60px; padding:7px 10px; border:1px solid var(--line-strong); border-radius:5px; background:#ffffff04; color:#c4c4cc; font-size:12px; white-space:nowrap; }
.copy-button:hover { background:#ffffff09; color:var(--text); }
.copy-button:disabled { cursor:wait; }
.copy-field { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.repository-copy { margin-top:14px; }
.install-steps .copy-field code { background:none; padding:0; font-size:13px; user-select:all; }
.copy-feedback:empty { display:none; }
.install-steps .copy-feedback { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }

/* The sync overview opens wide; related details stay in compact cards below. */
.sync-intro { grid-template-columns:minmax(0,1fr); gap:36px; padding:0; }
.sync-intro figcaption,.reading-intro { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:16px 80px; max-width:none; }
.sync-intro h2,.reading-intro h2 { max-width:430px; margin:0; }
.sync-intro p,.reading-intro p { max-width:480px; color:var(--muted); font-size:16px; line-height:1.7; }
.sync-intro .recording-media { max-width:1040px; width:100%; margin-inline:auto; }
.sync-intro video { border-radius:16px; }
#sync { border-top:0; }
@media(max-width:850px) { .sync-intro figcaption,.reading-intro { column-gap:40px; }.notification-story { padding:36px 32px; gap:32px; } }
@media(max-width:700px) { .sync-intro figcaption,.reading-intro { grid-template-columns:1fr; gap:22px; }.sync-intro { gap:28px; }.notification-story { padding:32px 24px; } }
@media(max-width:600px) { .embedded-reminders h3 { font-size:25px; } }