/* ============================================================
   Folio — marketing site
   Palette pulled from the app's own colour system (cream / ink / sage).
   Editorial-airy art direction. Fraunces display serif + system sans.
   ============================================================ */

:root {
  /* light — paper & ink (brand default) */
  --cream:        #f5f1e9;
  --cream-raised: #fbf9f4;
  --cream-sunk:   #efe9dd;
  --ink:          #1a1714;
  --ink-2:        #5c564d;
  --ink-3:        #8a8478;
  --sage:         #5f8a72;
  --sage-deep:    #4d7560;
  --sage-light:   #e3ebe2;
  --border:       #e2dcd0;
  --border-soft:  #ece6da;
  /* warm accents, used sparingly */
  --clay:  #c97a5a;
  --sky:   #7098b5;
  --amber: #c09540;
  --gold:  #c9a96e;

  --shadow-sm: 0 1px 2px rgba(26,23,20,.04), 0 2px 8px rgba(26,23,20,.04);
  --shadow-md: 0 4px 16px rgba(26,23,20,.06), 0 12px 32px rgba(26,23,20,.06);
  --shadow-lg: 0 20px 60px -20px rgba(40,34,24,.28), 0 8px 24px rgba(40,34,24,.10);
  --shadow-device: 0 50px 100px -30px rgba(40,30,18,.40), 0 20px 50px -20px rgba(40,30,18,.22);

  --serif: "Fraunces", "New York", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
}

[data-theme="dark"] {
  --cream:        #1f1c19;
  --cream-raised: #29251f;
  --cream-sunk:   #181512;
  --ink:          #f5f1e9;
  --ink-2:        #c4bcae;
  --ink-3:        #8f887b;
  --sage:         #7faa8f;
  --sage-deep:    #93bca3;
  --sage-light:   #2c352e;
  --border:       #3a352d;
  --border-soft:  #322e27;
  --shadow-lg: 0 20px 60px -20px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4);
  --shadow-device: 0 50px 100px -30px rgba(0,0,0,.7), 0 20px 50px -20px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background .5s ease, color .5s ease;
}

::selection { background: var(--sage-light); color: var(--ink); }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ---------- type ---------- */
.serif { font-family: var(--serif); }
.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.018em; line-height: 1.02; }
h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; }
.italic { font-style: italic; }
.lede {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -.01em;
  font-weight: 400;
}

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
section { position: relative; }
.section-pad { padding-block: clamp(80px, 13vh, 170px); }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,.7,.3,1), transform .9s cubic-bezier(.16,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 16px; font-weight: 550;
  padding: 14px 24px; border-radius: 100px; border: none; cursor: pointer;
  transition: transform .25s cubic-bezier(.16,.7,.3,1), background .25s, box-shadow .25s, color .25s;
  letter-spacing: -.01em; white-space: nowrap;
}
.btn-primary { background: var(--sage); color: #fff; box-shadow: 0 1px 2px rgba(95,138,114,.3), 0 8px 20px -8px rgba(95,138,114,.5); }
.btn-primary:hover { background: var(--sage-deep); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(95,138,114,.3), 0 14px 28px -10px rgba(95,138,114,.55); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); transform: translateY(-2px); }
.btn-lg { padding: 17px 30px; font-size: 17px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  padding: 6px 13px; border-radius: 100px;
  background: var(--sage-light); color: var(--sage-deep);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
[data-theme="dark"] .pill { color: var(--sage); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  transition: background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--border-soft);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-style: italic; font-size: 25px; letter-spacing: -.02em; }
.brand .logo { width: 30px; height: 30px; border-radius: 8px; box-shadow: var(--shadow-sm); }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { font-size: 15px; color: var(--ink-2); font-weight: 500; transition: color .2s; letter-spacing: -.01em; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; cursor: pointer; color: var(--ink-2);
  display: grid; place-items: center; transition: background .2s, color .2s, transform .3s;
}
.theme-toggle:hover { color: var(--ink); transform: rotate(18deg); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------- hero ---------- */
.hero { padding-top: clamp(82px, 11vh, 116px); padding-bottom: clamp(40px, 6vh, 72px); text-align: center; overflow: hidden; }
.hero .glow {
  position: absolute; top: -10%; left: 50%; translate: -50% 0;
  width: min(1100px, 120vw); aspect-ratio: 1.6/1; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center top, color-mix(in srgb, var(--sage) 22%, transparent), transparent 62%);
  filter: blur(18px); opacity: .8;
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 { margin: 20px auto 0; max-width: 24ch; text-wrap: balance; }
.hero h1 .italic { color: var(--sage-deep); }
[data-theme="dark"] .hero h1 .italic { color: var(--sage); }
.hero .lede { margin: 26px auto 0; max-width: 56ch; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.hero-cta .btn-ghost { border-radius: 14px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--ink-3); }

/* hero device cluster */
.hero-stage { position: relative; margin-top: clamp(34px, 5vh, 58px); display: flex; justify-content: center; align-items: flex-end; gap: 0; }

/* ---------- device mockups ---------- */
.device {
  position: relative; border-radius: 44px; background: #100f0d;
  padding: 11px; box-shadow: var(--shadow-device);
  width: 266px; flex-shrink: 0;
}
.device::after { /* dynamic island */
  content: ""; position: absolute; top: 22px; left: 50%; translate: -50% 0;
  width: 86px; height: 26px; border-radius: 16px; background: #100f0d; z-index: 4;
}
.device .screen {
  border-radius: 34px; overflow: hidden; background: var(--cream);
  aspect-ratio: 300/650; position: relative;
}
.device-sm { width: 248px; }
/* fan: all three phones the same size, overlapping like a hand of cards */
.device-fan-l { transform: rotate(-11deg) translateY(30px); transform-origin: bottom center; z-index: 1; margin-right: -80px; }
.device-fan-r { transform: rotate(11deg) translateY(30px); transform-origin: bottom center; z-index: 1; margin-left: -80px; }
.device-tilt-l { transform: rotate(-6deg) translateY(26px) scale(.86); transform-origin: bottom right; z-index: 1; }
.device-tilt-r { transform: rotate(6deg) translateY(26px) scale(.86); transform-origin: bottom left; z-index: 1; }
.device-front { z-index: 3; }
/* drop a real screenshot into any phone: <img class="shot" src="..."> inside .screen */
.device .screen img.shot { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .device-tilt-l, .device-tilt-r, .device-fan-l, .device-fan-r { display: none; } }

/* in-app screen scaffolding (stylised mock) */
.scr { padding: 30px 16px 16px; display: flex; flex-direction: column; height: 100%; font-size: 12px; }
.scr-status { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--ink-2); padding: 0 4px 10px; }
.scr-h { font-family: var(--serif); font-size: 22px; line-height: 1; margin-bottom: 3px; }
.scr-sub { color: var(--ink-3); font-size: 11px; margin-bottom: 14px; }
.scr-card { background: var(--cream-raised); border: 1px solid var(--border-soft); border-radius: 16px; padding: 13px; box-shadow: var(--shadow-sm); }
.scr-event { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 14px; background: var(--sage-light); margin-bottom: 10px; }
.scr-event .tick { width: 4px; align-self: stretch; border-radius: 4px; background: var(--sage); }
.scr-event .t { font-size: 10px; color: var(--sage-deep); font-weight: 600; }
.scr-event .n { font-weight: 600; font-size: 12px; }
.scr-line { height: 7px; border-radius: 5px; background: var(--border); margin: 7px 0; }
.scr-line.s { width: 60%; }
.scr-line.m { width: 85%; }
.scr-action { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--border-soft); }
.scr-action .ck { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--sage); flex-shrink: 0; position: relative; }
.scr-action.done .ck { background: var(--sage); border-color: var(--sage); }
.scr-action.done .ck::after { content: ""; position: absolute; inset: 0; background: no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.scr-action .tx { font-size: 11.5px; }
.scr-aibar {
  margin-top: auto; display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-radius: 100px; background: var(--ink); color: var(--cream);
}
[data-theme="dark"] .scr-aibar { background: var(--sage); color: #10221a; }
.scr-aibar .spark { font-size: 14px; }
.scr-aibar .gx { flex: 1; font-size: 12px; font-weight: 500; }

/* generic icon chip */
.ico {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: var(--sage-light); color: var(--sage-deep); flex-shrink: 0;
}
[data-theme="dark"] .ico { color: var(--sage); }
.ico svg { width: 24px; height: 24px; }

/* ---------- essence / calendar-as-soul ---------- */
.soul { text-align: center; }
.soul.section-pad { padding-block: clamp(40px, 6vh, 92px); }
.soul-head { max-width: none; margin: 16px auto 0; }
@media (min-width: 760px){ .soul-head { white-space: nowrap; } }
.soul .lede { max-width: 60ch; margin: 24px auto 0; }
.soul-diagram { position: relative; width: min(540px, 90%); margin: clamp(14px,2.2vh,32px) auto 0; aspect-ratio: 1/1; }
@media (max-width: 620px){ .soul-diagram { aspect-ratio: 3/4; } }

.orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--border); }
.orbit.o1 { inset: 13%; }
.orbit.o2 { inset: 26%; }
.orbit.spin { animation: spin 60s linear infinite; }
.orbit.spin.rev { animation-duration: 80s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .orbit.spin { animation: none; } }

.soul-core {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: clamp(150px, 30%, 220px); aspect-ratio: 1/1;
  background: var(--sage); border-radius: 26px; color: #fff;
  box-shadow: 0 30px 60px -20px rgba(95,138,114,.6), var(--shadow-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; z-index: 5;
}
.soul-core .cal-top { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: baseline; opacity: .9; }
.soul-core .cal-m { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.soul-core .cal-d { font-family: var(--serif); font-size: clamp(32px, 7vw, 50px); line-height: .9; }
.soul-core .cal-day { font-size: 12px; opacity: .85; font-weight: 600; }
.soul-core .cal-event { margin-top: 9px; font-size: 10.5px; font-weight: 600; background: rgba(255,255,255,.2); border-radius: 8px; padding: 5px 8px; line-height: 1.15; display: flex; align-items: center; gap: 6px; }
.soul-core .cal-event .ce-tick { width: 4px; height: 12px; border-radius: 3px; background: #fff; opacity: .9; flex-shrink: 0; }

/* orbiting note cards */
.note-chip {
  position: absolute; background: var(--cream-raised); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 10px 13px; box-shadow: var(--shadow-md); z-index: 4;
  display: flex; gap: 9px; align-items: center; max-width: 210px;
}
.note-chip .nc-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--sage-light); display: grid; place-items: center; color: var(--sage-deep); flex-shrink: 0; }
[data-theme="dark"] .note-chip .nc-ico { color: var(--sage); }
.note-chip .nc-ico svg { width: 16px; height: 16px; }
.note-chip .nc-t { font-size: 12.5px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.note-chip .nc-s { font-size: 11px; color: var(--ink-3); }
.note-chip.p1 { top: 2%;  left: 6%; }
.note-chip.p2 { top: 8%;  right: 2%; }
.note-chip.p3 { bottom: 16%; left: 0%; }
.note-chip.p4 { bottom: 4%; right: 8%; }
.note-chip.p5 { top: 44%; right: -2%; }
@media (max-width: 620px){
  .note-chip { padding: 8px 10px; }
  .note-chip .nc-s { display: none; }
  .note-chip.p5 { display: none; }
}

/* connector lines behind chips */
.soul-diagram svg.links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.soul-diagram svg.links path { stroke: var(--border); stroke-width: 1.5; fill: none; stroke-dasharray: 4 6; }
.soul-diagram svg.links path.lit { stroke: var(--sage); opacity: .5; }

/* ---------- features ---------- */
.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.feat-row + .feat-row { margin-top: clamp(70px, 11vh, 150px); }
.feat-row.flip .feat-text { order: 2; }
.feat-text h3 { margin: 18px 0 0; max-width: 16ch; }
.feat-text .lede { margin-top: 16px; font-size: 1.12rem; max-width: 46ch; }
.feat-visual { display: flex; justify-content: center; }
@media (max-width: 820px){
  .feat-row, .feat-row.flip { grid-template-columns: 1fr; gap: 32px; }
  .feat-row.flip .feat-text { order: 0; }
}

.fcard {
  width: 100%; max-width: 440px; background: var(--cream-raised);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 26px; overflow: hidden;
}

/* mini calendar visual */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grid .dn { font-size: 10px; color: var(--ink-3); text-align: center; font-weight: 600; padding-bottom: 4px; }
.cal-grid .dd { aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; font-size: 13px; color: var(--ink-2); background: var(--cream); }
.cal-grid .dd.on { background: var(--sage); color: #fff; font-weight: 600; box-shadow: 0 6px 14px -4px rgba(95,138,114,.6); }
.cal-grid .dd.has { position: relative; }
.cal-grid .dd.has::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--clay); }

/* type/sketch visual */
.sketch-pad { background: var(--cream); border-radius: var(--r-md); padding: 18px; min-height: 200px; position: relative; }
.sketch-pad .sk-line { height: 9px; border-radius: 6px; background: var(--border); margin: 11px 0; }
.sketch-pad .sk-line.s { width: 55%; }
.sketch-pad .sk-line.m { width: 78%; }
.sketch-pad .sk-draw { position: absolute; right: 18px; bottom: 14px; color: var(--sage); opacity: .8; }

/* action items visual */
.ai-list .scr-action:first-child { border-top: none; }

/* ---------- AI showcase ---------- */
.ai-showcase { background: var(--cream-sunk); border-radius: var(--r-xl); padding: clamp(28px, 5vw, 60px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
[data-theme="dark"] .ai-showcase { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.ai-head { text-align: center; max-width: 40ch; margin-inline: auto; }
.ai-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 32px auto 0; }
.ai-tab {
  font-family: var(--sans); font-size: 14px; font-weight: 550; letter-spacing: -.01em;
  padding: 10px 18px; border-radius: 100px; border: 1px solid var(--border);
  background: transparent; color: var(--ink-2); cursor: pointer; transition: all .25s;
  display: inline-flex; align-items: center; gap: 7px;
}
.ai-tab:hover { color: var(--ink); border-color: var(--ink-3); }
.ai-tab.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
[data-theme="dark"] .ai-tab.active { background: var(--sage); color: #10221a; border-color: var(--sage); }
.ai-tab svg { width: 15px; height: 15px; }

.ai-stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 36px); align-items: center; margin-top: 36px; }
@media (max-width: 800px){ .ai-stage { grid-template-columns: 1fr; } .ai-stage .ai-arrow { transform: rotate(90deg); justify-self: center; } }
.ai-pane {
  background: var(--cream-raised); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  padding: 22px; box-shadow: var(--shadow-sm); min-height: 280px;
}
.ai-pane .pane-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.ai-pane.raw { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.ai-pane.raw .scribble { color: var(--ink-3); }
.ai-out-title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; margin-bottom: 12px; }
.ai-out-body { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.ai-out-body p { margin-bottom: 10px; }
.ai-out-body strong { color: var(--ink); font-weight: 600; }
.ai-out-body ul { list-style: none; }
.ai-out-body li { display: flex; gap: 9px; margin-bottom: 8px; }
.ai-out-body li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); margin-top: 8px; flex-shrink: 0; }
.ai-out-body .tag { display: inline-block; background: var(--sage-light); color: var(--sage-deep); padding: 1px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; }
[data-theme="dark"] .ai-out-body .tag { color: var(--sage); }
.ai-arrow { color: var(--sage); display: grid; place-items: center; }
.ai-arrow .spark { font-size: 13px; font-weight: 600; color: var(--sage-deep); margin-top: 6px; text-align: center; letter-spacing: .04em; }
[data-theme="dark"] .ai-arrow .spark { color: var(--sage); }
.ai-fade { animation: aiFade .5s cubic-bezier(.16,.7,.3,1); }
@keyframes aiFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- privacy / local-first ---------- */
.privacy { text-align: center; }
.privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px, 6vh, 70px); text-align: left; }
@media (max-width: 800px){ .privacy-grid { grid-template-columns: 1fr; } }
.pcard { background: var(--cream-raised); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.pcard h3 { font-size: 1.3rem; margin: 16px 0 8px; }
.pcard p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.device-note { margin-top: 28px; font-size: 14px; color: var(--ink-3); max-width: 60ch; margin-inline: auto; }
.device-note strong { color: var(--ink-2); font-weight: 600; }

/* ---------- pricing ---------- */
.pricing { text-align: center; }
.price-card {
  max-width: 460px; margin: clamp(40px,6vh,64px) auto 0; padding: 44px 38px;
  background: var(--cream-raised); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.price-card .pc-glow { position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--sage), var(--gold)); }
.price-amt { font-family: var(--serif); font-size: clamp(3.6rem, 9vw, 5rem); line-height: 1; }
.price-meta { display: flex; gap: 10px; justify-content: center; align-items: center; color: var(--ink-3); font-size: 15px; margin-top: 6px; }
.price-meta b { color: var(--sage-deep); font-weight: 600; }
[data-theme="dark"] .price-meta b { color: var(--sage); }
.price-cur { font-size: 0.34em; font-family: var(--sans); font-weight: 600; letter-spacing: 0.06em; color: var(--ink-3); vertical-align: middle; }
.price-local { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.price-list { list-style: none; text-align: left; max-width: 320px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 13px; }
.price-list li { display: flex; gap: 11px; font-size: 15px; color: var(--ink-2); align-items: flex-start; }
.price-list li svg { width: 19px; height: 19px; color: var(--sage); flex-shrink: 0; margin-top: 1px; }
.price-foot { margin-top: 26px; font-size: 13.5px; color: var(--ink-3); max-width: 40ch; margin-inline: auto; }

/* ---------- testimonials ---------- */
.tmarquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tmarquee-track { display: flex; gap: 20px; width: max-content; animation: marquee var(--marquee-duration, 44s) linear infinite; }
.tmarquee:hover .tmarquee-track { animation-play-state: paused; }
/* The track holds two identical halves; shifting by exactly half the width
   (plus half the flex gap) lands on an identical frame — a seamless loop. */
@keyframes marquee { to { transform: translateX(calc(-50% - 10px)); } }
@media (prefers-reduced-motion: reduce){ .tmarquee { overflow-x: auto; } .tmarquee-track { animation: none; } }

/* Separator marking where the review loop restarts */
.tsep { align-self: center; flex-shrink: 0; display: grid; place-items: center; width: 46px; }
.tsep span {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sage-light); color: var(--sage-deep);
  font-size: 14px; border: 1px solid color-mix(in srgb, var(--sage) 30%, transparent);
}
[data-theme="dark"] .tsep span { color: var(--sage); }
.tcard { width: 360px; flex-shrink: 0; background: var(--cream-raised); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.tcard .stars { color: var(--gold); letter-spacing: 3px; font-size: 14px; margin-bottom: 14px; }
.tcard .quote { font-family: var(--serif); font-size: 1.22rem; line-height: 1.35; letter-spacing: -.01em; }
.tcard .who { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.tcard .who b { color: var(--ink-2); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 760px; margin-inline: auto; }
.faq { border-top: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between;
  gap: 20px; align-items: center; font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex-shrink: 0; width: 26px; height: 26px; position: relative; transition: transform .35s cubic-bezier(.16,.7,.3,1); color: var(--sage); }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.faq summary .plus::before { top: 50%; left: 4px; right: 4px; height: 2px; translate: 0 -50%; }
.faq summary .plus::after { left: 50%; top: 4px; bottom: 4px; width: 2px; translate: -50% 0; transition: opacity .3s; }
.faq[open] summary .plus { transform: rotate(180deg); }
.faq[open] summary .plus::after { opacity: 0; }
.faq .faq-a { padding: 0 50px 26px 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); padding-block: clamp(50px, 8vh, 90px) 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer .brand { font-size: 30px; }
.footer-tag { color: var(--ink-3); font-size: 15px; margin-top: 12px; max-width: 30ch; }
.footer-cols { display: flex; gap: clamp(40px, 8vw, 90px); flex-wrap: wrap; }
.footer-col h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 15px; color: var(--ink-2); margin-bottom: 11px; transition: color .2s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }

/* coming-soon CTA buttons render as App Store placeholders */
.appstore-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 14px;
  background: var(--ink); color: var(--cream); font-weight: 550; font-size: 15px;
}
[data-theme="dark"] .appstore-btn { background: var(--sage); color: #10221a; }
.appstore-btn small { display: block; font-size: 10px; opacity: .7; font-weight: 500; letter-spacing: .04em; }
.appstore-btn .as-l { font-size: 17px; font-weight: 600; line-height: 1; }
.appstore-btn svg { width: 22px; height: 22px; }

/* ============================================================
   iPad section
   ============================================================ */
.ipad-sec { text-align: center; }
.ipad-sec.section-pad { padding-block: clamp(40px, 6vh, 88px); }
.ipad-frame {
  position: relative; width: min(580px, 90%); margin: clamp(18px,2.5vh,36px) auto 0;
  border-radius: 30px; background: #100f0d; padding: 14px; box-shadow: var(--shadow-device);
  aspect-ratio: 1366/1010;
}
.ipad-frame::before { /* camera */
  content:""; position:absolute; top:50%; left:6px; width:5px; height:5px; border-radius:50%;
  background:#2c2824; translate:0 -50%; z-index:3;
}
.ipad-screen { width:100%; height:100%; border-radius:18px; overflow:hidden; background:var(--cream); display:flex; text-align:left; font-size:12px; }
.ipad-screen img.shot { width:100%; height:100%; object-fit:cover; }
.ipad-side { width:25%; background: color-mix(in srgb, var(--cream-sunk) 75%, transparent); border-right:1px solid var(--border-soft); padding:16px 14px; display:flex; flex-direction:column; gap:14px; }
.ipad-side .ip-brand { font-family:var(--serif); font-style:italic; font-size:19px; }
.ipad-side .ip-nav { display:flex; flex-direction:column; gap:2px; }
.ipad-side .ip-nav a, .ipad-row { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:9px; color:var(--ink-2); font-size:12px; }
.ipad-side .ip-nav a.on { background: color-mix(in srgb, var(--sage) 16%, transparent); color:var(--ink); font-weight:600; }
.ipad-side .ip-lbl { font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:0 9px; margin-top:4px; }
.ipad-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ipad-list { width:30%; border-right:1px solid var(--border-soft); padding:16px 12px; display:flex; flex-direction:column; gap:8px; }
.ipad-list .il-h { font-family:var(--serif); font-size:17px; margin-bottom:4px; }
.ipad-note { padding:10px 11px; border-radius:11px; background:var(--cream-raised); border:1px solid var(--border-soft); }
.ipad-note.sel { background: color-mix(in srgb, var(--sage) 12%, var(--cream-raised)); box-shadow: inset 3px 0 0 var(--sage); }
.ipad-note .in-t { font-weight:600; font-size:12px; }
.ipad-note .in-s { color:var(--ink-3); font-size:10.5px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ipad-main { flex:1; padding:24px 26px; display:flex; flex-direction:column; }
.ipad-main .im-event { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:6px 11px; border-radius:100px; background:var(--sage-light); color:var(--sage-deep); font-size:10.5px; font-weight:600; margin-bottom:14px; }
[data-theme="dark"] .ipad-main .im-event { color:var(--sage); }
.ipad-main .im-title { font-family:var(--serif); font-size:26px; line-height:1.05; margin-bottom:14px; }
.ipad-main .im-line { height:8px; border-radius:5px; background:var(--border); margin:9px 0; }
.ipad-main .im-line.s { width:55%; } .ipad-main .im-line.m { width:80%; }
.ipad-main .im-ai { margin-top:auto; display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:100px; background:var(--ink); color:var(--cream); align-self:stretch; }
[data-theme="dark"] .ipad-main .im-ai { background:var(--sage); color:#10221a; }
.ipad-feats { display:flex; justify-content:center; gap:clamp(20px,5vw,64px); flex-wrap:wrap; margin-top:clamp(20px,3vh,36px); }
.ipad-feat { max-width:230px; text-align:center; }
.ipad-feat .ico { margin:0 auto 14px; }
.ipad-feat h3 { font-size:1.2rem; margin-bottom:7px; }
.ipad-feat p { font-size:14px; color:var(--ink-2); line-height:1.5; }
@media (max-width:680px){ .ipad-screen { font-size:10px; } .ipad-main .im-title { font-size:20px; } }

/* ============================================================
   Tutorials page
   ============================================================ */
.tut-hero { padding-top: clamp(120px,16vh,170px); padding-bottom: clamp(30px,5vh,56px); text-align:center; }
.tut-hero h1 { margin:18px auto 0; max-width:18ch; }
.tut-hero .lede { margin:22px auto 0; max-width:54ch; }
.toc-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:34px; }
.toc-chip {
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:100px;
  border:1px solid var(--border); background:var(--cream-raised); color:var(--ink-2);
  font-size:14px; font-weight:550; transition:all .2s;
}
.toc-chip:hover { color:var(--ink); border-color:var(--ink-3); transform:translateY(-2px); }
.toc-chip .n { width:22px; height:22px; border-radius:50%; background:var(--sage-light); color:var(--sage-deep); display:grid; place-items:center; font-size:12px; font-weight:700; }
[data-theme="dark"] .toc-chip .n { color:var(--sage); }

.tut-sec { scroll-margin-top: 90px; }
.tut-sec + .tut-sec { margin-top: clamp(70px,11vh,140px); }
.tut-sec-head { display:flex; align-items:flex-start; gap:18px; max-width:760px; }
.tut-sec-head .num {
  flex-shrink:0; width:48px; height:48px; border-radius:14px; background:var(--sage); color:#fff;
  display:grid; place-items:center; font-family:var(--serif); font-size:24px; box-shadow:0 10px 24px -8px rgba(95,138,114,.6);
}
.tut-sec-head h2 { font-size:clamp(1.7rem,3.4vw,2.6rem); }
.tut-sec-head p { color:var(--ink-2); font-size:1.05rem; margin-top:8px; }
.tut-flow-label { margin:34px 0 18px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sage); display:flex; align-items:center; gap:10px; }
.tut-flow-label::after { content:""; flex:1; height:1px; background:var(--border); }

.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.step {
  background:var(--cream-raised); border:1px solid var(--border-soft); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.step .step-top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.step .step-n { width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--cream); display:grid; place-items:center; font-size:14px; font-weight:600; flex-shrink:0; }
[data-theme="dark"] .step .step-n { background:var(--sage); color:#10221a; }
.step h4 { font-family:var(--serif); font-size:1.2rem; font-weight:400; letter-spacing:-.01em; line-height:1.15; }
.step p { font-size:14.5px; color:var(--ink-2); line-height:1.55; }
/* phone screenshot slot inside a step */
.step-shot {
  margin-top:16px; border-radius:22px; overflow:hidden; background:#100f0d; padding:8px;
  box-shadow:var(--shadow-md); align-self:center; width:172px;
}
.step-shot .ss-screen { border-radius:16px; overflow:hidden; background:var(--cream); aspect-ratio:172/360; position:relative; }
.step-shot .ss-screen img.shot { width:100%; height:100%; object-fit:cover; }
.step-shot .ss-mock { padding:22px 12px 12px; height:100%; display:flex; flex-direction:column; font-size:11px; }

/* generic mini-UI bits reused in tutorial mocks */
.mini-status { display:flex; justify-content:space-between; font-size:9px; font-weight:600; color:var(--ink-3); margin-bottom:10px; }
.mini-h { font-family:var(--serif); font-size:16px; margin-bottom:8px; }
.mini-row { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:10px; background:var(--cream-sunk); margin-bottom:7px; font-size:10.5px; font-weight:500; }
.mini-row.sage { background:var(--sage-light); color:var(--sage-deep); }
.mini-row .mr-ic { width:16px; height:16px; flex-shrink:0; color:var(--sage); }
.mini-btn { margin-top:auto; text-align:center; padding:9px; border-radius:100px; background:var(--sage); color:#fff; font-size:11px; font-weight:600; }
.mini-toggle { width:30px; height:18px; border-radius:100px; background:var(--sage); position:relative; flex-shrink:0; margin-left:auto; }
.mini-toggle::after { content:""; position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:#fff; }

.tut-tip { margin-top:18px; display:flex; gap:12px; align-items:flex-start; background:var(--sage-light); border-radius:var(--r-md); padding:16px 18px; }
[data-theme="dark"] .tut-tip { background:var(--sage-light); }
.tut-tip .tip-ic { color:var(--sage-deep); flex-shrink:0; }
[data-theme="dark"] .tut-tip .tip-ic { color:var(--sage); }
.tut-tip p { font-size:14px; color:var(--ink-2); line-height:1.5; }
.tut-tip b { color:var(--ink); }

/* AI feature grid on tutorials */
.aifeat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.aifeat { background:var(--cream-raised); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:20px; box-shadow:var(--shadow-sm); }
.aifeat .af-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.aifeat .af-ic { width:38px; height:38px; border-radius:11px; background:var(--sage-light); color:var(--sage-deep); display:grid; place-items:center; flex-shrink:0; }
[data-theme="dark"] .aifeat .af-ic { color:var(--sage); }
.aifeat .af-ic svg { width:19px; height:19px; }
.aifeat h4 { font-size:16px; font-weight:650; font-family:var(--sans); letter-spacing:-.01em; }
.aifeat .af-grp { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.aifeat p { font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-top:4px; }
.aifeat .af-eg { margin-top:11px; padding:10px 12px; border-radius:10px; background:var(--cream-sunk); font-size:12.5px; color:var(--ink-2); line-height:1.45; }
.aifeat .af-eg b { color:var(--sage-deep); font-weight:600; }
[data-theme="dark"] .aifeat .af-eg b { color:var(--sage); }

/* ============================================================
   Home Screen widgets (features row 5)
   ============================================================ */
.widget-stage { display:flex; gap:16px; align-items:flex-start; justify-content:center; background:linear-gradient(160deg,var(--cream-sunk),var(--cream-raised)); }
.hs-widget { background:var(--cream-raised); border:1px solid var(--border-soft); border-radius:20px; padding:16px; box-shadow:var(--shadow-md); flex:1; min-width:0; }
.hs-widget.sm { max-width:38%; }
.hsw-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.hsw-app { width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,#6f9a81,#4d7560); display:grid; place-items:center; flex-shrink:0; }
.hsw-f { color:#f5f1e9; font-style:italic; font-size:15px; line-height:1; }
.hsw-ttl { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.hsw-event { display:flex; gap:9px; align-items:center; padding:9px 10px; border-radius:12px; background:var(--sage-light); margin-bottom:9px; }
.hsw-event .tick { width:4px; height:26px; border-radius:3px; background:var(--sage); flex-shrink:0; }
.hsw-event .t { font-size:10.5px; color:var(--sage-deep); font-weight:600; }
.hsw-event .n { font-size:13px; font-weight:650; color:var(--ink); }
[data-theme="dark"] .hsw-event .t { color:var(--sage); }
.hsw-note { font-size:11.5px; color:var(--ink-3); }
.hsw-line { height:7px; border-radius:4px; background:var(--border); margin-bottom:8px; }
.hsw-line.m { width:85%; } .hsw-line.s { width:55%; }

/* ============================================================
   Legal / long-form pages (privacy.html)
   ============================================================ */
.legal { max-width:760px; margin-inline:auto; padding-bottom:clamp(60px,10vh,120px); }
.legal h2 { font-size:clamp(1.5rem,3vw,2rem); margin:48px 0 14px; }
.legal h2:first-of-type { margin-top:8px; }
.legal h3 { font-family:var(--sans); font-size:17px; font-weight:650; letter-spacing:-.01em; margin:26px 0 8px; }
.legal p { color:var(--ink-2); margin-bottom:14px; line-height:1.7; }
.legal ul { margin:0 0 16px 1.1em; color:var(--ink-2); line-height:1.7; }
.legal li { margin-bottom:8px; }
.legal a { color:var(--sage-deep); font-weight:600; text-decoration:none; }
[data-theme="dark"] .legal a { color:var(--sage); }
.legal a:hover { text-decoration:underline; }
.legal strong { color:var(--ink); }
.legal-callout { background:var(--sage-light); border:1px solid color-mix(in srgb,var(--sage) 28%,transparent); border-radius:var(--r-md); padding:18px 22px; margin:24px 0; color:var(--ink-2); line-height:1.65; }
.legal-callout strong { color:var(--sage-deep); }
[data-theme="dark"] .legal-callout strong { color:var(--sage); }

/* ============================================================
   Support page
   ============================================================ */
.support-main { max-width:740px; margin-inline:auto; padding-bottom:clamp(60px,11vh,130px); text-align:center; }
.support-email { display:inline-flex; align-items:center; gap:12px; margin:8px auto 6px; padding:18px 28px; border-radius:var(--r-lg); background:var(--cream-raised); border:1px solid var(--border-soft); box-shadow:var(--shadow-md); font-family:var(--serif); font-size:clamp(1.2rem,3vw,1.7rem); color:var(--ink); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
.support-email:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.support-email svg { width:26px; height:26px; color:var(--sage); flex-shrink:0; }
.support-sub { font-size:14px; color:var(--ink-3); margin-bottom:40px; }
.support-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:40px; text-align:left; }
.support-card { background:var(--cream-raised); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:22px; box-shadow:var(--shadow-sm); text-decoration:none; display:block; transition:transform .18s ease, box-shadow .18s ease; }
.support-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.support-card .ic { width:40px; height:40px; border-radius:11px; background:var(--sage-light); color:var(--sage-deep); display:grid; place-items:center; margin-bottom:12px; }
[data-theme="dark"] .support-card .ic { color:var(--sage); }
.support-card .ic svg { width:20px; height:20px; }
.support-card h3 { font-size:16px; font-weight:650; font-family:var(--sans); letter-spacing:-.01em; margin-bottom:4px; color:var(--ink); }
.support-card p { font-size:13.5px; color:var(--ink-2); line-height:1.5; }

/* ============================================================
   404 page
   ============================================================ */
.nf-wrap { min-height:62vh; display:grid; place-items:center; text-align:center; padding:clamp(80px,14vh,160px) var(--gutter); }
.nf-code { font-family:var(--serif); font-size:clamp(4rem,13vw,8rem); line-height:1; letter-spacing:-.03em; color:var(--sage); }
.nf-wrap h1 { font-size:clamp(1.6rem,4vw,2.4rem); margin:14px 0 12px; }
.nf-wrap p { color:var(--ink-2); max-width:42ch; margin:0 auto 28px; }