/* Content-led layout shared by the landing page, guides and feedback form. */
.site-header,main,footer { width:100%; min-width:0; }
:where(.hero,.story,.learning-section,.faq,.download-options,.feedback,.form-row,.paired-panels)>* { min-width:0; }
:where(h1,h2,h3,p,code,summary,.file-content,.version) { overflow-wrap:anywhere; }
h1,h2 { text-wrap:balance; }
p { max-width:65ch; }
:where(.eyebrow,.platform,.version,.file-meta,.beta-note,.visual-label,.visual-caption,.line-number,.collection-chip,.learning-footnote,.paired-note b,.paired-note p,.feature-shot figcaption,.sync-pair figcaption,.app-hero figcaption,footer,.theme-picker,.notes-file small) { font-size:.75rem!important; }
.site-header { min-height:88px; height:auto; padding-block:20px; gap:20px; }
.site-header .brand { flex-shrink:0; white-space:nowrap; }
.site-header nav { flex-wrap:wrap; align-items:center; gap:12px 24px; }
.site-header a,footer a,.guide-link,.text-link,summary { min-height:44px; display:flex; align-items:center; }
.button { min-height:48px; justify-content:center; white-space:normal; text-align:center; }
.theme-picker select { min-height:44px; }
footer { flex-wrap:wrap; }
footer>div { flex-wrap:wrap; align-items:center; }
.notes-file header { flex-wrap:wrap; }
.file-content { font-size:.75rem; }
.paired-note p { line-height:1.6; }
.feedback-document :is(input,textarea,select) { font-size:1rem; }
@media(max-width:1023px) {
 .story:has(.feature-shot),.sync-story,.learning-section { grid-template-columns:1fr; gap:32px; }
 .story { padding-block:56px; }
 .story-copy>p:not(.eyebrow) { max-width:65ch; }
 .sync-pair { order:2; }
 .feature-shot { width:100%; }
 .learning-section { padding:32px; }
 .faq { grid-template-columns:1fr; gap:24px; }
 .landing .features { gap:24px; }
}
@media(max-width:767px) {
 .site-header,main,footer { padding-inline:max(20px,env(safe-area-inset-left)); }
 .site-header { flex-wrap:wrap; gap:4px 16px; padding-block:12px; }
 .site-header .brand { font-size:1.125rem; gap:8px; }
 .site-header .brand img { width:30px; height:30px; }
 .site-header nav { width:100%; justify-content:space-between; gap:8px; font-size:.8125rem; }
 .site-header nav a:first-child { display:flex; }
 .landing .hero { padding:32px 0; }
 .landing h1 { font-size:clamp(2.125rem,7.5vw,3rem); line-height:1.12; letter-spacing:-.045em; }
 .landing h1 em { letter-spacing:-.035em; }
 .landing .intro { font-size:1rem; line-height:1.65; }
 .hero-actions { flex-wrap:wrap; gap:12px; }
 .landing .features { grid-template-columns:1fr; gap:28px; padding-block:12px 36px; }
 .features article { display:grid; grid-template-columns:28px minmax(0,1fr); gap:6px 12px; }
 .features article>img { grid-row:1/3; }
 .features p { grid-column:2; font-size:.9375rem; }
 .story-copy h2,.learning-section h2,.faq h2,.landing .section-heading h2,.feedback h2,.how-section h2 { font-size:1.875rem; line-height:1.2; letter-spacing:-.035em; }
 .story-copy>p:not(.eyebrow),.learning-section p { font-size:1rem; }
 .story,.sync-story { padding-block:40px; }
 .learning-section { padding:24px; border-radius:14px; }
 .download-options { grid-template-columns:1fr; }
 .landing .download-card { padding:24px; }
 .download-card p,.faq details p,.feedback p:not(.eyebrow) { font-size:.9375rem; }
 .feedback { flex-direction:column; align-items:stretch; gap:24px; padding:24px; }
 .feedback .button { align-self:stretch; }
 .how-section { grid-template-columns:1fr; gap:24px; }
 .document h1 { font-size:2rem; letter-spacing:-.035em; }
 footer { display:flex; align-items:flex-start; gap:16px; padding-bottom:max(24px,env(safe-area-inset-bottom)); }
 footer>div { gap:8px 16px; }
 .theme-picker { flex-wrap:wrap; }
 .form-row { grid-template-columns:1fr; gap:0; }
}
@media(max-width:430px) {
 .hero-actions { flex-direction:column; align-items:stretch; }
 .hero-actions .text-link { justify-content:center; font-size:.875rem; }
 .sync-pair-heading { flex-wrap:wrap; font-size:.75rem; }
 .paired-panels { grid-template-columns:1fr; gap:16px; }
 .paired-image { max-width:240px; margin-inline:auto; }
 .paired-image>img { max-height:260px; object-fit:contain; }
 .sync-pair { padding:16px; }
 .landing h1 br { display:none; }
 .learning-section { padding:20px; }
}
.guide-link { min-width:0; overflow-wrap:anywhere; }
.download-card>div { gap:12px; align-items:flex-start; }
.download-card>div>* { min-width:0; }
.version { max-width:65%; }
/* Navigation: one-tap appearance controls and a compact disclosure on phones. */
.site-header { gap:16px; }
.site-header nav { margin-left:auto; order:1; gap:16px; font-size:.8125rem; }
.nav-themes { order:2; display:flex; flex-shrink:0; border:1px solid var(--line); border-radius:10px; padding:2px; }
.nav-themes button { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; cursor:pointer; }
.nav-themes button[aria-pressed=true] { background:var(--soft); color:var(--accent); }
.nav-themes button:hover { background:var(--soft); }
.menu-toggle { display:none; }
#site-menu[hidden] { display:none; }
@media(max-width:1023px) and (min-width:768px) { .site-header {flex-wrap:wrap} .site-header nav {order:3;width:100%;justify-content:flex-end} .nav-themes {margin-left:auto} }
@media(max-width:767px) {
 .site-header {display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;}
 .site-header .brand {font-size:1rem;gap:6px;}
 .site-header .brand img {width:24px;height:24px;}
 .nav-themes {order:initial;}
 .menu-toggle {display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;}
 .site-header nav {order:initial;grid-column:1/-1;margin:0;padding:12px 0 4px;border-top:1px solid var(--line);flex-direction:column;align-items:stretch;gap:4px;}
 .site-header nav a {padding:8px 12px;border-radius:8px;font-size:1rem;}
 .site-header nav a:hover {background:var(--soft);}
}
@media(max-width:380px) {
 .site-header {grid-template-columns:minmax(0,1fr) auto;}
 .menu-toggle {grid-column:2;grid-row:1;}
 .nav-themes {grid-column:1/-1;justify-self:end;}
}
/* Keep the mobile disclosure opaque and in document flow, including Safari. */
.site-header,.landing .site-header { height:auto; min-height:80px; }
@media(max-width:767px) {
 .site-header,.landing .site-header { grid-template-columns:minmax(0,1fr) auto auto; position:relative; z-index:2; background:var(--paper); }
 .site-header .nav-themes { grid-column:2; grid-row:1; justify-self:auto; }
 .site-header .menu-toggle { grid-column:3; grid-row:1; }
 .site-header #site-menu { position:static; inset:auto; width:100%; height:auto; min-height:0; grid-column:1/-1; grid-row:2; display:flex; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px; box-sizing:border-box; }
 .site-header #site-menu[hidden] {display:none;}
}
/* Contact: a focused email surface with a separate feedback route. */
.contact-page {max-width:1200px;display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:start;padding-block:80px 96px;}
.contact-heading h1 {font-size:clamp(2.5rem,4.2vw,3.5rem);font-weight:500;line-height:1.1;letter-spacing:-.045em;margin:0 0 24px;}
.contact-heading h1 em {font-family:Georgia,serif;font-weight:400;}
.contact-heading>p:last-child {font-size:1rem;color:var(--muted);line-height:1.75;}
.contact-options {min-width:0;}
.contact-email {padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:16px;}
.contact-symbol {display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--soft);margin-bottom:24px;}
.contact-email h2,.contact-feedback h2 {font-size:1.25rem;font-weight:550;letter-spacing:-.025em;margin:0 0 8px;}
.contact-email>p,.contact-feedback p {font-size:.9375rem;color:var(--muted);line-height:1.65;margin:0;}
.contact-address {display:block;font-size:clamp(1rem,2vw,1.35rem);letter-spacing:-.02em;margin:24px 0;overflow-wrap:anywhere;}
.contact-actions {display:flex;flex-wrap:wrap;gap:12px;}
.contact-actions .button {font:500 .875rem var(--font);cursor:pointer;text-decoration:none;}
.contact-actions .primary img {filter:brightness(0) invert(1);}
.contact-email .contact-hint {font-size:.75rem;margin-top:20px;}
#contact-status:empty {display:none;}
.contact-email #contact-status:not(:empty) {margin-top:16px;color:var(--accent);}
.contact-feedback {padding:28px 0;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);}
.contact-feedback p {max-width:32ch;}
.contact-feedback-link {display:flex;align-items:center;gap:8px;min-height:44px;flex-shrink:0;font-size:.875rem;font-weight:550;}
.contact-safety {font-size:.75rem;color:var(--muted);margin:16px 0 0;line-height:1.6;}
.landing footer>p {max-width:none;flex-shrink:0;}
@media(min-width:1100px){.landing footer>p {white-space:nowrap;}}
@media(max-width:900px){.contact-page {grid-template-columns:1fr;gap:32px;padding-block:40px 64px;max-width:720px;}}
@media(max-width:430px){.contact-email {padding:24px;}.contact-feedback {flex-direction:column;align-items:flex-start;gap:8px;}.contact-actions {flex-direction:column;}.contact-heading>p:last-child br{display:none;}}
.landing footer>p {min-width:0;max-width:100%;flex-shrink:1;}
@media(min-width:1100px){.landing footer {gap:20px;}.landing footer>p{font-size:.75rem;}}

/* Static product illustrations retain their full canvas at every viewport. */
.simplified-visual > img{display:block;width:100%;height:auto}.simplified-visual > .theme-dark-shot{display:none}html[data-theme="dark"] .simplified-visual > .theme-light-shot{display:none}html[data-theme="dark"] .simplified-visual > .theme-dark-shot{display:block}.evidence-visual.simplified-visual{max-width:460px;margin-inline:auto}.hero-crop img{height:auto;object-fit:contain}

/* A quiet creator note, using the existing editorial type and cobalt accent. */
.creator{display:grid;grid-template-columns:88px minmax(0,680px);justify-content:center;align-items:start;gap:32px;padding:64px 32px;margin-bottom:48px;border-top:1px solid var(--line)}
.creator-avatar{width:88px;height:88px;display:grid;place-items:center;background:var(--soft);border:1px solid var(--line);border-radius:24px;color:var(--accent);font-size:28px;font-weight:600;letter-spacing:-.06em}
.creator-copy .eyebrow{margin:0 0 16px}.creator h2{font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.04em;margin:0 0 20px}.creator h2 em{font-family:Georgia,serif;font-weight:400}.creator-copy>p:not(.eyebrow){color:var(--muted);line-height:1.75;margin:0 0 24px;font-size:16px}
@media(max-width:640px){.creator{grid-template-columns:1fr;gap:24px;padding:36px 4px;margin-bottom:32px}.creator-avatar{width:64px;height:64px;border-radius:18px;font-size:23px}.creator h2{font-size:30px}}

/* Creator: copy left, a proportional portrait right. */
.landing .creator{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);justify-content:stretch;align-items:center;gap:clamp(32px,6vw,88px);padding:64px 0;text-align:left}
.creator-copy{max-width:660px}.creator-portrait{width:100%;max-width:360px;justify-self:end;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--soft)}
.creator-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 67%}
@media(max-width:640px){.landing .creator{grid-template-columns:1fr;padding:36px 0;gap:28px}.creator-portrait{justify-self:start;max-width:300px}.creator-copy{max-width:none}}

/* Landing rhythm: cohesion through alignment, with generous space to pause. */
.landing{--section-space:112px;--section-inset:80px;--closing-space:72px}
.landing .hero{padding-block:88px 88px}
.landing .app-hero{margin-bottom:64px}
.landing .features{padding-block:16px 64px}
.landing .story{padding-block:var(--section-space);column-gap:88px}
.landing .learning-section{padding:72px 64px;column-gap:72px}
.landing .download-section{padding-block:var(--section-inset)}
.landing .section-heading{margin-bottom:40px}
.landing .faq{padding-block:var(--section-inset)}
.landing .creator{padding-block:var(--section-inset);margin-bottom:var(--closing-space)}
.landing .feedback{padding:48px;margin-bottom:var(--closing-space)}
.landing .feature-shot{width:100%;max-width:620px;justify-self:end}
.landing .sync-pair{width:100%;max-width:560px;justify-self:start}
@media(max-width:1023px){
 .landing{--section-space:88px;--section-inset:64px;--closing-space:64px}
 .landing .story{column-gap:48px;row-gap:40px}
 .landing .learning-section{padding:48px;gap:40px}
 .landing .feature-shot,.landing .sync-pair{justify-self:center}
}
@media(max-width:767px){
 .landing{--section-space:72px;--section-inset:64px;--closing-space:56px}
 .landing .hero{padding-block:48px 56px}
 .landing .app-hero{margin-bottom:48px}
 .landing .features{padding-block:8px 48px;gap:32px}
 .landing .story{row-gap:36px}
 .landing .learning-section{padding:32px 24px;gap:40px}
 .landing .section-heading{margin-bottom:32px}
 .landing .creator{gap:36px}
 .landing .feedback{padding:32px 24px;gap:28px}
}