/* didact.digital v2 for the app pages. Loaded after each page's own <style>, so it wins on equal specificity.
   Same language as the home page: paper ground, glass pill nav, centred hero, rounded tiles, pill buttons,
   light and dark. The pages keep their own tokens (--paper, --ink, ...); this file gives them v2 values. */
:root{
  --paper:#FAF9F7; --band:#F0EFEC; --ink:#1A1917; --muted:#6E6C68; --line:#E6E4E0; --white:#FFFFFF; --stone:#E6E4E0;
  --accent:#1A1917; --radius:24px; --mist:#A1A09B;
  --glass:rgba(250,249,247,.42); --glass-edge:rgba(255,255,255,.75); --glass-shade:rgba(26,25,23,.08);
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:"Onest",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:16px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#000000; --band:#181818; --ink:#F5F5F2; --muted:#A1A09B; --line:#272727; --white:#1F1F1F; --stone:#272727; --accent:#F5F5F2;
  --glass:rgba(24,24,24,.45); --glass-edge:rgba(255,255,255,.18); --glass-shade:rgba(0,0,0,.4);
}}
:root[data-theme=dark]{color-scheme:dark;
  --paper:#000000; --band:#181818; --ink:#F5F5F2; --muted:#A1A09B; --line:#272727; --white:#1F1F1F; --stone:#272727; --accent:#F5F5F2;
  --glass:rgba(24,24,24,.45); --glass-edge:rgba(255,255,255,.18); --glass-shade:rgba(0,0,0,.4);
}
:root[data-theme=light]{color-scheme:light}
@media (min-width:768px){:root{--gutter:24px}}

html{scroll-behavior:smooth;scroll-padding-top:96px;scrollbar-color:auto;overflow-x:clip}
body{font:400 16px/24px var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection,.hero ::selection,footer ::selection{background:var(--ink);color:var(--paper)}
section.ink ::selection{background:#F5F5F2;color:#000}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:8px}
h1,h2,h3{font-weight:700;letter-spacing:-.04em;text-wrap:balance}
p,li,dd{text-wrap:pretty}
.wrap{max-width:1200px;padding:0 var(--gutter)}
code,.brew-box code,.step code,.illus-note pre{font-family:var(--mono)}
/* Text pages (privacy, legal notice, thanks, welcome, newsletter): narrow column clear of the nav */
:root{--graphite:var(--muted)}
main.wrap{max-width:820px;padding-top:144px}
main p,main ul li{color:color-mix(in srgb,var(--ink) 82%,var(--paper))}
main a{color:var(--ink)}
main ~ footer .wrap{justify-content:flex-start;max-width:820px}

/* Wordmark: ink on light ground, paper on dark */
.wm-paper{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .wm-ink{display:none}:root:not([data-theme=light]) .wm-paper{display:block}}
:root[data-theme=dark] .wm-ink{display:none}:root[data-theme=dark] .wm-paper{display:block}

/* Buttons: pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:0;font:600 16px/24px var(--sans);padding:8px 16px;border-radius:9999px;border:1px solid transparent;box-shadow:none;transition:transform .5s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:var(--ink);opacity:.86;box-shadow:none}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--ink);box-shadow:none}

/* Navigation: the home page's Liquid Glass pill */
nav{position:fixed;top:12px;left:50%;right:auto;z-index:50;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);border:0;border-radius:9999px;isolation:isolate;
  background:var(--glass);-webkit-backdrop-filter:blur(12px) saturate(1.8);backdrop-filter:blur(12px) saturate(1.8);
  box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-edge),inset 0 -8px 16px -12px var(--glass-shade),0 8px 32px -8px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.06);
  transition:box-shadow .5s var(--ease)}
.scrolled nav{box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-edge),inset 0 -8px 16px -12px var(--glass-shade),0 16px 48px -12px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.08)}
nav::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) nav::after{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 55%)}}
:root[data-theme=dark] nav::after{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 55%)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:auto;max-width:none;gap:16px;padding:6px 6px 6px 20px}
.nav-left{display:flex;align-items:center;gap:12px;min-width:0}
/* the wordmark is Onest Bold drawn at about 20px, so the app name is set the same way and both sit on one baseline */
.didact-mark{display:flex;align-items:center;height:20px}
/* the drawn baseline sits 107/141 down the 20px image (15.2px); Onest's baseline in a 20px line sits at 16.5px */
.didact-mark img{height:20px;width:auto;position:relative;top:calc(16.5px - 20px * 107 / 141)}
.didact-mark img.wm-ink{display:block}
.nav-left .sep{color:var(--line);font-size:20px;line-height:20px}
nav .wordmark{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:20px;line-height:20px;font-weight:700;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}
nav .wordmark img{width:24px;height:24px;border-radius:6px}
.nav-links{display:flex;align-items:center;gap:4px}
nav .nav-links a{display:block;font:500 14px/20px var(--sans);padding:8px 12px;border-radius:9999px;text-decoration:none;color:var(--muted);transition:color .3s var(--ease),background-color .3s var(--ease)}
nav .nav-links a:hover,nav .nav-links a.active{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
nav .nav-links a.nav-cta{margin-left:4px;padding:8px 16px;font-weight:600;color:var(--paper);background:var(--ink);border:0;box-shadow:none}
nav .nav-links a.nav-cta:hover{color:var(--paper);background:var(--ink);opacity:.86}
.lang-toggle{display:flex;align-items:center;gap:4px;height:36px;padding:0 10px;border:0;border-radius:9999px;background:none;color:var(--muted);font:500 13px/16px var(--mono);cursor:pointer}
.lang-toggle:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);border-color:transparent}
.lang-menu{top:calc(100% + 12px);border-radius:16px;background:var(--white);border:0;box-shadow:0 0 0 1px var(--line),0 24px 48px -16px rgba(0,0,0,.28)}
.lang-switcher .lang-menu a{color:var(--ink);border-radius:10px}
.lang-switcher .lang-menu a:hover,.lang-switcher .lang-menu a.active{background:var(--band)}
.theme-btn{position:relative;flex:none;width:36px;height:36px;border:0;border-radius:9999px;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:color .3s var(--ease),background-color .3s var(--ease)}
.theme-btn:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.theme-btn:active{transform:scale(.94)}
.theme-btn svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease),opacity .3s var(--ease)}
.theme-btn .i-moon{opacity:0;transform:rotate(-60deg) scale(.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme-btn .i-sun{opacity:0;transform:rotate(60deg) scale(.6)}:root:not([data-theme=light]) .theme-btn .i-moon{opacity:1;transform:none}}
:root[data-theme=dark] .theme-btn .i-sun{opacity:0;transform:rotate(60deg) scale(.6)}:root[data-theme=dark] .theme-btn .i-moon{opacity:1;transform:none}
@media (max-width:1023px){nav .nav-links a:not(.nav-cta){display:none}}
@media (max-width:767px){
  nav{left:12px;right:12px;transform:none;width:auto;max-width:none}
  nav .wrap{padding-left:16px}
  .nav-left .sep,.nav-left .wordmark{display:none}
}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.vt-dark::view-transition-old(root){z-index:2}
.vt-dark::view-transition-new(root){z-index:1}

/* Hero: centred, the app icon as the product shot, nav clear of the headline */
.hero{position:relative;background:none;color:var(--ink);padding:160px 0 96px;text-align:center;overflow:visible}
@media (min-width:768px){.hero{padding-top:192px}}
#field,.hero h1 .punch-line{display:none}
.hero .hero-body{display:flex;flex-direction:column;align-items:center}
.hero img.icon{display:block;order:-2;width:96px;height:96px;margin:0 auto 32px;border-radius:22px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 24px 48px -16px rgba(0,0,0,.28);animation:enter 1.2s var(--ease) both}
.hero-meta{order:-1;margin:0 0 16px}
.hero .eyebrow{display:inline-block;border:0;background:none;padding:0;margin:0;font:500 12px/16px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.hero h1{font-size:40px;line-height:1.05;letter-spacing:-.045em;max-width:15em;margin:0 auto;padding-bottom:4px;text-align:center;color:var(--ink)}
@media (min-width:640px){.hero h1{font-size:56px}}
@media (min-width:1024px){.hero h1{font-size:72px}}
.hero p.sub{max-width:680px;margin:24px auto 0;font-size:20px;line-height:28px;color:var(--muted);text-align:center}
@media (min-width:768px){.hero p.sub{font-size:22px;line-height:32px}}
.hero .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}
.hero .btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hero .btn-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.hero .btn-secondary:hover{border-color:var(--ink)}
.hero .price-note{margin-top:16px;font-size:14px;line-height:20px;color:var(--muted);text-align:center}
.hero .price-note a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;border:0}
.hero p.sub,.hero .cta-row,.hero .price-note,.hero .brew-box,.hero-meta{animation:enter 1s var(--ease) both}
.hero-meta{animation-delay:.06s}.hero p.sub{animation-delay:.12s}.hero .cta-row{animation-delay:.24s}.hero .price-note{animation-delay:.3s}.hero .brew-box{animation-delay:.36s}
@keyframes enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:480px){.hero .cta-row .btn{width:auto}}
/* TalkRemind sets its own hero size on header.hero#top */
header.hero#top{padding:160px 0 96px}
@media (min-width:768px){header.hero#top{padding-top:192px}}
header.hero#top h1{font-size:40px}
@media (min-width:640px){header.hero#top h1{font-size:56px}}
@media (min-width:1024px){header.hero#top h1{font-size:72px}}
/* Homebrew line: the home page's command pill */
.brew-box{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:32px auto 0;padding:4px 4px 4px 16px;border:0;border-radius:9999px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-size:14px;line-height:20px;color:var(--muted);text-align:left}
.hero .brew-box{margin:32px auto 0;border:0;color:var(--muted);border-radius:9999px}
.brew-box code,.hero .brew-box code{flex:0 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:0;background:none;color:var(--ink);font:400 14px/20px var(--mono)}
.brew-copy-btn,.hero .brew-copy-btn{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:9999px;background:none;color:var(--muted);cursor:pointer}
.brew-copy-btn:hover,.hero .brew-copy-btn:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);border:0}
@media (max-width:640px){.brew-box,.hero .brew-box{width:100%}.brew-box > span:first-child{display:none}}

/* Sections: centred heads, tiles instead of bands */
section{padding:96px 0}
section.band{margin:0 12px;border:0;border-radius:32px;background:var(--band)}
section.band + section.band{margin-top:12px}
.section-head{text-align:center;max-width:none;margin:0 auto 48px}
.section-head h2{font-size:36px;line-height:40px;letter-spacing:-.04em;max-width:18em;margin:0 auto 12px}
@media (min-width:768px){.section-head h2{font-size:48px;line-height:1}}
.section-head p{max-width:640px;margin:0 auto;font-size:18px;line-height:28px;color:var(--muted)}
.install-note,.compare-note,.app-note,.roadmap-ask,.maker-note,.merchant-note,.claim-note,.math-punch,.seat-note{text-align:center;margin-left:auto;margin-right:auto;max-width:640px;color:var(--muted)}

/* One dark tile breaks the rhythm. Inside it the page tokens keep their light values,
   so the parts built for the ink sections (white price cards, light text) stay as designed. */
section.ink{--paper:#FAF9F7;--band:#F0EFEC;--ink:#1A1917;--muted:#6E6C68;--line:#E6E4E0;--white:#FFFFFF;--stone:#E6E4E0;--accent:#1A1917;
  margin:12px;border-radius:32px;background:#000;color:#F5F5F2;border:0}
section.ink .section-head p,section.ink .install-note,section.ink .maker-note,section.ink .merchant-note,section.ink .claim-note,section.ink .math-punch{color:#A1A09B}
section.ink .btn-primary{background:#F5F5F2;color:#000;border-color:#F5F5F2}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) section.ink{background:#131209;box-shadow:inset 0 0 0 1px #272727}}
:root[data-theme=dark] section.ink{background:#131209;box-shadow:inset 0 0 0 1px #272727}
.hero + section.ink{border-top:0}

/* Cards: the home page's release cards */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:0}
@media (max-width:899px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.feature-grid{grid-template-columns:1fr}}
.card,.how-text,section .step,.roadmap-col{background:var(--white);border:0;border-radius:24px;padding:32px;box-shadow:0 0 0 1px var(--line);transform:none;text-align:left}
.card:hover{box-shadow:0 0 0 1px var(--line);transform:none}
.card-icon{display:none}
.card h3,.how-text h3,.step h3,.roadmap-col h3{font-size:20px;line-height:28px;letter-spacing:-.02em;font-weight:600;margin-bottom:8px}
.card p,.how-text p,.step p{font-size:16px;line-height:24px;color:var(--muted)}
.how-steps,.steps,.roadmap-cols{max-width:none;gap:12px}
.how-illus,.video-frame,.demo-frame{border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 32px 64px -24px rgba(0,0,0,.25)}
.shot-row img.framed{box-shadow:0 0 0 1px var(--line),0 32px 64px -24px rgba(0,0,0,.25)}
.pricing-grid{margin:0 auto;max-width:860px}
.price-card{border-radius:24px}
.price-card .amount{letter-spacing:-.04em}

/* Compare table (SideSchedule): a spec page */
.table-scroll{max-width:980px;margin:0 auto;border-radius:0}
.compare-table{background:none;border:0;border-radius:0}
.compare-table th{background:none;font:500 12px/16px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.compare-table th,.compare-table td{border-color:var(--line)}
.compare-table tr.self td{background:var(--band)}

/* Roadmap (SideSchedule) and callout (TalkRemind) */
.roadmap-note,.callout{border:0;border-radius:24px;background:var(--white);box-shadow:0 0 0 1px var(--line);max-width:720px;margin-left:auto;margin-right:auto;text-align:left;padding:24px 32px}

/* FAQ: quiet rows with a plus that turns */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;box-shadow:none}
.faq-item summary{padding:24px 0;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.02em}
.faq-item p,.faq-item .faq-body-inner{color:var(--muted);font-size:18px;line-height:28px}
.faq-item .faq-body-inner,.faq-item > p{padding:0 48px 24px 0}

/* TalkRemind: the vendor claims as ledger rows */
.claim-grid{display:block;max-width:880px;margin:0 auto 36px;border-top:1px solid rgba(250,249,247,.3)}
.claim{display:grid;grid-template-columns:120px minmax(0,220px) minmax(0,1fr);gap:24px;align-items:baseline;text-align:left;background:none;border:0;border-bottom:1px solid rgba(250,249,247,.14);border-radius:0;padding:24px 0}
.claim .multiple{font-family:var(--mono);font-size:32px;letter-spacing:-.04em;margin:0}
.claim .who{margin:0}
@media (max-width:760px){.claim{grid-template-columns:1fr;gap:4px}}
.app-chip{border-radius:12px}

/* Footer: small and quiet, like the home page */
footer{background:none;color:var(--muted);border-top:0;padding:48px 0;font-size:14px;line-height:20px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-top:24px;border-top:1px solid var(--line);max-width:1152px}
footer a,footer .links a,footer .foot-links a{color:var(--muted);font-size:14px;text-decoration:none}
footer a:hover,footer .links a:hover,footer .foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
footer .brand,footer .foot-brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:14px}
footer .brand span.ver{color:var(--muted);font:400 12px/16px var(--mono)}
footer .links,footer .foot-links{display:flex;flex-wrap:wrap;gap:8px 24px}

/* Motion: the hero enters once; sections stay put */
html.reveal-on .reveal,.reveal{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color!important}
}

.style-grid,.shot-row,.app-grid,.gallery{margin-left:auto;margin-right:auto}
.style-card{border-radius:16px}
#cta-final .wrap{text-align:center}
#cta-final .cta-row,#cta-final .btn-row{justify-content:center}
/* Newsletter progress marks are drawn in ink and paper */
.steps svg [fill="#1A1917"]{fill:var(--ink)}
.steps svg [stroke="#1A1917"]{stroke:var(--ink)}
.steps svg [stroke="#FAF9F7"]{stroke:var(--paper)}