/* The page around the film. App tokens (DocnestStyle dark, SF system font, DocnestMotion) on one system:
   page sides 48 (16 on phones), one inner inset of 16, vertical rhythm 10 / 20 / 40 / 80, concentric radii 24 → 8.
   Every color leans very slightly toward the Beam blue (one hue, tuned here); light only in the logo and the film. */
:root{
  color-scheme:dark light;
  --hue:262;                                   /* Beam blue, the hue of DocnestStyle.accent / brand */
  --bg:oklch(0.205 0.022 var(--hue));          /* ≈ #121926, DocnestStyle.background dark is #141b28 */
  --surface:oklch(0.245 0.027 var(--hue));     /* ≈ #1a2232 */
  --glass:oklch(0.232 0.025 var(--hue));       /* the shelf panel */
  --raised:oklch(0.295 0.032 var(--hue));      /* ≈ #263246 */
  --line:oklch(0.36 0.036 var(--hue));         /* hairlines */
  --line-strong:oklch(0.42 0.045 var(--hue));  /* ≈ #3a4b65, DocnestStyle.border */
  --text:oklch(0.965 0.008 var(--hue));        /* ≈ #f2f5fa */
  --text-2:oklch(0.82 0.032 var(--hue));       /* ≈ #b6c5dc, DocnestStyle.secondary */
  --text-3:oklch(0.71 0.036 var(--hue));       /* AA on --bg and --surface */
  --accent:oklch(0.80 0.10 var(--hue));        /* ≈ #9dbfff */
  --button:oklch(0.81 0.088 var(--hue));       /* ≈ #a2c1ff, DocnestStyle.primary */
  --button-hover:oklch(0.86 0.07 var(--hue));
  --button-text:oklch(0.25 0.055 var(--hue));  /* ≈ #14213b */
  --brand:oklch(0.57 0.19 var(--hue));         /* #3670e7 */
  --brand-soft:oklch(0.57 0.19 var(--hue) / .16);
  --selected:oklch(0.36 0.075 var(--hue));     /* ≈ #243d63 */
  --me:oklch(0.52 0.17 var(--hue));            /* my chat bubble */
  --violet:oklch(0.72 0.14 290);               /* the conversation accent of the app */
  --violet-soft:oklch(0.62 0.16 290 / .14);
  --orange:oklch(0.74 0.16 70);
  --green:oklch(0.72 0.15 150);
  --red:oklch(0.66 0.17 28);
  --shadow:oklch(0.12 0.03 var(--hue) / .55);
  --film-bg:oklch(0.22 0.03 var(--hue));          /* the scene's desktop */
  --ridge-1:oklch(0.33 0.045 var(--hue));--ridge-2:oklch(0.28 0.04 var(--hue));--ridge-3:oklch(0.24 0.035 var(--hue));
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --mono:"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --side:48px;
  --spring:cubic-bezier(.18,.68,.22,1);        /* DocnestMotion.reveal */
}
/* light appearance: the app's light DocnestStyle, with the same faint Beam-blue lean (the film stays a dark desktop) */
@media (prefers-color-scheme:light){:root{
  --bg:oklch(0.977 0.006 var(--hue));          /* ≈ #f6f8fc */
  --surface:oklch(0.993 0.003 var(--hue));
  --glass:oklch(0.99 0.004 var(--hue));
  --raised:oklch(0.952 0.01 var(--hue));       /* ≈ #edf1f7 */
  --line:oklch(0.918 0.015 var(--hue));
  --line-strong:oklch(0.895 0.022 var(--hue)); /* ≈ #d6e0ef */
  --text:oklch(0.27 0.04 var(--hue));          /* ≈ #1c293c */
  --text-2:oklch(0.45 0.042 var(--hue));
  --text-3:oklch(0.5 0.036 var(--hue));        /* AA on --bg and --surface */
  --accent:oklch(0.52 0.17 var(--hue));        /* ≈ #295dce */
  --button:oklch(0.52 0.165 var(--hue));
  --button-hover:oklch(0.47 0.16 var(--hue));
  --button-text:oklch(0.985 0.004 var(--hue));
  --brand-soft:oklch(0.57 0.19 var(--hue) / .1);
  --selected:oklch(0.94 0.03 var(--hue));
  --me:oklch(0.55 0.17 var(--hue));
  --violet:oklch(0.5 0.17 290);
  --orange:oklch(0.58 0.15 60);
  --green:oklch(0.52 0.14 150);
  --red:oklch(0.53 0.18 28);
  --shadow:oklch(0.3 0.04 var(--hue) / .12);
  --film-bg:oklch(0.9 0.025 var(--hue));
  --ridge-1:oklch(0.84 0.035 var(--hue));--ridge-2:oklch(0.8 0.04 var(--hue));--ridge-3:oklch(0.76 0.045 var(--hue));
}
.tag.later{background:oklch(0.45 0.042 var(--hue) / .1)}
.sc-next{color:var(--text)!important}
.sc-think{background:oklch(0.99 0.004 var(--hue))!important}
}
:lang(ko){--sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","SF Pro Text","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif}
:lang(ja){--sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","SF Pro Text","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",sans-serif}
:lang(th){--sans:-apple-system,BlinkMacSystemFont,"Sukhumvit Set","Thonburi","SF Pro Text","Leelawadee UI","Noto Sans Thai",sans-serif}
:lang(ru),:lang(mn){--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,"Noto Sans",Arial,sans-serif}

html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:20px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.005em}
:lang(ko) body,:lang(ko) h1,:lang(ko) h2,:lang(ko) h3{word-break:keep-all}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3{word-break:auto-phrase;line-break:strict}
:lang(th) body{line-height:1.6}
*,*::before,*::after{box-sizing:border-box}
p,h1,h2,h3,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.ic,.ag,.ty,.fb{display:block;flex:none}
.skiplink{position:absolute;left:16px;top:-80px;z-index:50;padding:10px 16px;border-radius:8px;background:var(--button);color:var(--button-text);font-weight:600;text-decoration:none}
.skiplink:focus{top:16px}

.page{max-width:1440px;margin:0 auto;padding:20px var(--side) 0}
@media (max-width:759px){:root{--side:16px}}

/* ---------- header: brand left, system and language right (position unchanged) ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:36px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:16px;text-decoration:none;letter-spacing:-.01em}
.brand img{display:block;width:28px;height:28px}
.top-r{display:flex;align-items:center;gap:20px;font:12px/1 var(--mono);letter-spacing:.04em;color:var(--text-2)}
.top-guide{font:500 14px/1 var(--sans);letter-spacing:0;color:var(--text);text-decoration:none;padding:10px 0}
.top-guide:hover{color:var(--accent)}
@media (max-width:420px){.top-r .os{display:none}}

/* language menu (native disclosure: keyboard and screen readers work without script) */
.langs{position:relative;font:14px/1 var(--sans);letter-spacing:0}
.langs summary{list-style:none;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border-radius:8px;background:var(--raised);color:var(--text);cursor:pointer;white-space:nowrap;user-select:none}
.langs summary::-webkit-details-marker{display:none}
.langs summary .ic:last-child{color:var(--text-2)}
.langs .ln-code{display:none;font:12px/1 var(--mono)}
@media (max-width:420px){.langs .ln-name{display:none}.langs .ln-code{display:inline}}
.langs-list{position:absolute;right:0;top:calc(100% + 10px);z-index:30;width:min(340px,calc(100vw - 32px));padding:8px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 20px 50px var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:2px 4px}
.langs-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;height:36px;padding:0 10px;border-radius:8px;color:var(--text);text-decoration:none}
.langs-list a:hover{background:var(--raised)}
.langs-list a[aria-current]{background:var(--selected)}
.langs-list .ic{color:var(--accent)}

/* ---------- headline: two lines, the second quieter ---------- */
.hero{margin:40px 0;font-weight:650;font-size:clamp(30px,4.4vw,56px);line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
.hero span{display:block}
.hero .hv[hidden]{display:none}
.hero .h2{color:var(--text-2)}
:lang(th) .hero{line-height:1.3;letter-spacing:0}
:lang(ja) .hero,:lang(ko) .hero{letter-spacing:-.01em}
@media (max-width:759px){.hero{margin:40px 0 20px}}
.film{margin-inline:0}

/* ---------- sections ---------- */
.blk{padding-top:80px}
.blk h2{font-weight:650;font-size:clamp(26px,3vw,40px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
:lang(th) .blk h2{line-height:1.35;letter-spacing:0}
.sub,.lead{margin-top:10px;font-size:18px;line-height:1.5;color:var(--text-2);max-width:640px}

/* app tags: New document · Edited +N −M · Read later (and the Skip mark of the reader) */
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.tag.new{color:oklch(0.68 0.15 var(--hue));background:var(--brand-soft)}
.tag.mod{color:var(--orange);background:oklch(0.74 0.16 70 / .14)}
.tag.mod b{color:var(--green);font-weight:600}.tag.mod i{color:var(--red);font-style:normal}
.tag.later{color:var(--text-2);background:oklch(0.82 0.032 var(--hue) / .14)}
.tag.later .ic{color:var(--accent)}
.tag.skip{color:var(--text-3);background:oklch(0.71 0.036 var(--hue) / .12)}
.tag.done{color:var(--accent);background:var(--brand-soft)}
.tag.done .ic{color:var(--accent)}
.tag.one{color:var(--accent);background:var(--brand-soft)}
.tag.kind{color:var(--text-2);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
.ai{position:relative;flex:none;width:24px;height:24px;display:block}
.ai .ag{width:100%;height:100%}
.ai .fb{position:absolute;right:-4px;bottom:-4px;width:13px;height:13px;padding:1px;border-radius:4px;background:var(--glass)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- per-person shelves (W1) ---------- */
.people .sub{margin-bottom:20px}
.kinds{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;max-width:960px}
.kinds .tag{font-size:13px;line-height:20px;padding:4px 12px}
.people-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1179px){.people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person{display:flex;flex-direction:column;min-width:0}
.person h3{font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.2;margin-bottom:20px}
.shelf{border-radius:24px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px var(--shadow);padding:16px 8px;display:flex;flex-direction:column;min-width:0}
.shelf-head{padding:0 8px 10px}
.seg{display:inline-flex;max-width:100%;gap:2px;padding:3px;border-radius:10px;background:var(--raised);font-size:12px;font-weight:600}
.seg span{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;color:var(--text-2);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.seg .on{background:var(--line-strong);color:var(--text)}
.seg .dot{width:6px;height:6px;border-radius:50%;background:var(--violet);flex:none}
.shelf-day{padding:10px 8px;font-size:12px;font-weight:600;color:var(--text-3)}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px;height:40px;padding:0 8px;border-radius:8px;min-width:0}
.row .ti{flex:1;min-width:0;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tm{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:2px;padding:3px;margin-bottom:20px;border-radius:10px;background:var(--raised)}
.tabs button{flex:1;min-width:0;height:36px;padding:0 6px;border:0;border-radius:8px;background:none;color:var(--text-2);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs button[aria-selected="true"]{background:var(--line-strong);color:var(--text)}
html.tabbed .people h2{margin-bottom:20px}
html.tabbed .people-grid{grid-template-columns:minmax(0,1fr)}
html.tabbed .person[hidden]{display:none}
html.tabbed .person h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- the story: an opening chat (W7), then documents read one at a time as you scroll ---------- */
.story-head{max-width:760px}
.chat{margin-top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:640px}
.msg{display:flex;align-items:flex-end;gap:10px;max-width:100%;font-size:15px;line-height:1.45}
.bubble{min-width:0;padding:10px 16px;border-radius:16px;background:var(--raised)}
.msg.me{align-self:flex-end}
.msg.me .bubble{background:var(--me);color:oklch(0.98 0.01 var(--hue))}
.msg.bot .ai{width:20px;height:20px}
.sys{align-self:center;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--brand-soft);color:var(--accent);font-size:14px;font-weight:600}
.sys img{display:block}
.sread{margin-top:40px;position:relative}
.read-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:40px;align-items:center}
.read-side{display:flex;flex-direction:column;gap:20px}
.read-list{display:flex;flex-direction:column;gap:2px}
.read-list li{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:8px;font-size:15px;color:var(--text-2)}
.read-list li>span:first-of-type{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.read-list li.is-cur{background:var(--selected);color:var(--text)}
.tally{display:flex;flex-wrap:wrap;gap:10px 20px;padding:0 16px;font-size:15px;color:var(--text-2)}
.tally [data-tally="missed"]{color:var(--accent);font-weight:600}
.read-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.read-mode{display:flex}
.read-mode span{padding:4px 12px;border-radius:999px;background:var(--raised);font-size:12px;font-weight:600;color:var(--text-2)}
.read-view{position:relative}
.stack .doc{position:relative}
.doc .stamp,.read-list li .tag{display:none}
.doc[data-decision="done"] .stamp.done,.doc[data-decision="later"] .stamp.later,.doc[data-decision="skip"] .stamp.skip,
.read-list li[data-decision="done"] .tag.done,.read-list li[data-decision="later"] .tag.later,.read-list li[data-decision="skip"] .tag.skip{display:inline-flex}
.stack article{border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;height:100%}
.pg-flow{padding:16px;display:flex;flex-direction:column;gap:10px}
.pg-head{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
.pg-head .tag{margin-left:auto}
html:not(.story-live) .pg-head .tag,html.story-live .doc.decided .pg-head .tag{visibility:hidden}
.stack h3{font-size:24px;font-weight:650;letter-spacing:-.015em;line-height:1.2}
.pg-path{margin-top:-6px;font:12px/1.4 var(--mono);color:var(--text-3)}
.pg-sum{border-radius:8px;background:var(--raised);padding:10px 16px;display:flex;flex-direction:column;gap:4px}
.pg-sum span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent)}
.pg-sum p{font-size:15px;line-height:1.5}
.pg-body{display:flex;flex-direction:column;gap:10px;padding-top:10px}
.pg-body b{font-size:15px;font-weight:650}
.pg-body .ln{display:flex;flex-direction:column;gap:10px}
.pg-body .ln i{display:block;height:6px;border-radius:3px;background:var(--line)}
.stamp{position:absolute;right:20px;top:20px;z-index:2;padding:10px 20px;border-radius:14px;font-size:20px;font-weight:700;transform:rotate(-6deg);box-shadow:0 10px 30px var(--shadow);pointer-events:none}
.stamp.done{background:var(--button);color:var(--button-text)}
.stamp.later{background:var(--brand-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.stamp.skip{background:var(--raised);color:var(--text)}
.read-dots{display:none}
.read-bar{display:none}

/* static: all four at once with their marks (reduced motion, no script, or before the script runs) */
html:not(.story-live) .read-stage{grid-template-columns:minmax(0,1fr)}
html:not(.story-live) .read-side{order:2}
html:not(.story-live) .read-list{display:none}
html:not(.story-live) .stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
html:not(.story-live) .pg-body .more{display:none}
@media (max-width:759px){html:not(.story-live) .stack{grid-template-columns:minmax(0,1fr)}.chat{max-width:100%}.msg{font-size:14px}}

/* live: a sticky reader; the section's own height is the scroll track (set by site.js) */
html.story-live .read-stage{position:sticky;top:0;height:100vh;height:100svh;padding:20px 0}
html.story-live .read-view{height:min(520px,calc(100svh - 220px));display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:10px}
html.story-live .stack{position:relative;height:100%;overflow:hidden;border-radius:24px}
html.story-live .stack .doc{position:absolute;inset:0;will-change:transform}
html.story-live .stack .doc:not(.on){visibility:hidden}
html.story-live .stamp{opacity:0}
html.story-live .doc.decided .stamp{opacity:1}
html.story-live .read-dots{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
html.story-live .read-dots i{display:block;width:5px;height:5px;border-radius:3px;background:var(--line-strong);transition:height .3s var(--spring),background .3s}
html.story-live .read-dots i.is-cur{height:22px;background:var(--accent)}
html.story-live .read-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:var(--raised)}
html.story-live .read-list li .tag{visibility:hidden}
html.story-live .read-list li.done .tag{visibility:visible}
html.story-live .tally span{opacity:.4}
html.story-live .tally span.on{opacity:1}
.read-bar .ib{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:none;color:var(--text-2);cursor:pointer}
.read-bar .ib:hover{background:var(--line)}
.read-bar .ib:disabled{opacity:.35;cursor:default}
.read-bar .star[aria-pressed="true"]{color:var(--accent)}
.read-count{font-size:12px;font-weight:500;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.read-gap{flex:1}
.read-bar .db{height:32px;padding:0 16px;border:0;border-radius:999px;background:var(--line);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.read-bar .db.go{background:var(--button);color:var(--button-text)}
@media (max-width:899px){
  .read-stage{grid-template-columns:minmax(0,1fr)!important;gap:20px}
  html.story-live .read-side{order:0}
  html.story-live .read-list{display:none}
  html.story-live .read-view{height:min(460px,calc(100svh - 240px))}
  .tally{padding:0}
}

/* ---------- formats + the conversation a document came from ---------- */
.formats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:40px;align-items:start}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:40px}
.tile{border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile b{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.tile span{font:12px/1.4 var(--mono);color:var(--text-3)}
.tile.opt{background:none;box-shadow:inset 0 0 0 1px var(--line);border:0;outline:1px dashed var(--line-strong);outline-offset:-1px}
.note{margin-top:20px;font-size:14px;color:var(--text-3)}
.lock{margin-top:40px;display:flex;align-items:center;gap:10px;font-size:17px;color:var(--text-2)}
.lock .ic{color:var(--accent)}
.convo{border-radius:24px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px;font-size:13px;min-width:0}
.cp-head{display:flex;align-items:center;gap:10px;color:var(--accent);font-weight:600}
.cp-back{font-size:12.5px;white-space:nowrap}
.cp-t{display:flex;flex-direction:column;min-width:0;flex:1}
.cp-t b{color:var(--text);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-t small{color:var(--text-3);font-weight:500;font-size:11.5px}
.cp-pin{display:grid;grid-template-columns:16px auto minmax(0,1fr);gap:6px 8px;align-items:start;border-radius:8px;padding:10px;background:var(--violet-soft);box-shadow:inset 0 0 0 1px oklch(0.62 0.16 290 / .35);line-height:1.45}
.cp-pin .ic{color:var(--violet);margin-top:1px}
.cp-pin b{color:var(--violet);font-size:12px;white-space:nowrap}
@media (max-width:479px){.cp-pin{grid-template-columns:16px minmax(0,1fr)}.cp-pin span{grid-column:1/-1}}
.cp-tool{align-self:center;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2);background:var(--raised);border-radius:999px;padding:4px 10px;max-width:100%}
.convo .msg{max-width:92%;font-size:13px}
.convo .bubble{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:14px}
.av{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font:700 10px/1 var(--sans);font-style:normal;color:oklch(0.98 0.01 var(--hue))}
.av.fe{background:oklch(0.52 0.09 160)}.av.re{background:oklch(0.55 0.13 50)}
.n1{color:oklch(0.82 0.1 160);font-size:11.5px}.n2{color:oklch(0.8 0.11 55);font-size:11.5px}
.convo .bubble em{align-self:flex-start;margin-top:4px;font-size:10.5px;font-style:normal;font-weight:700;color:oklch(0.82 0.1 160);background:oklch(0.82 0.1 160 / .16);border-radius:6px;padding:1px 6px}
.cp-doc{display:flex;align-items:center;gap:10px;margin-left:34px;border-radius:8px;padding:8px 10px;box-shadow:inset 0 0 0 1.5px var(--violet);background:var(--violet-soft)}
.cp-doc span{flex:1;min-width:0;display:flex;flex-direction:column}
.cp-doc b{font-size:13px}.cp-doc small{font-size:11.5px;color:var(--text-3)}
@media (max-width:959px){.formats{grid-template-columns:minmax(0,1fr)}}
@media (max-width:519px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- pricing: one card, Try on the left, Buy on the right (W4) ---------- */
.stk{position:relative;max-width:560px;margin-inline:auto;padding-bottom:20px}
.stk>i{position:absolute;left:16px;right:16px;bottom:10px;height:40px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.stk>i+i{left:32px;right:32px;bottom:0;background:var(--glass)}
.pcard{position:relative;z-index:1;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 20px 50px var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px}
.pc-top{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
.pc-top .tag{margin-left:auto}
.pc-name{padding-top:10px;font-size:24px;font-weight:650;letter-spacing:-.015em}
.pc-scope{margin-top:-6px;font-size:14px;color:var(--text-2)}
.pc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:10px 0}
.pc-price .now{font-size:64px;font-weight:650;letter-spacing:-.03em;line-height:1}
.pc-price s{font-size:24px;color:var(--text-3)}
.pc-price .pill{margin-left:auto;align-self:center;max-width:220px;font-size:12px;line-height:1.35;font-weight:600;color:var(--accent);background:var(--brand-soft);border-radius:8px;padding:6px 10px}
.pc-line{font-size:15px;color:var(--text-2)}
.pc-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border:0;border-radius:8px;background:var(--raised);color:var(--text);font-size:15px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--button);color:var(--button-text)}
.btn:disabled{cursor:default;opacity:.7}
.pc-status:empty{display:none}
.pc-status{font-size:14px;color:var(--accent)}
.pc-note,.pc-sandbox{font-size:12px;color:var(--text-3);text-align:center}
.pc-sandbox{margin-top:-6px}

@media (max-width:419px){.pc-btns{grid-template-columns:minmax(0,1fr)}.pc-price .pill{margin-left:0}}

/* phone: a sticky Buy bar while the film and the story scroll by */
.sticky{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 10px 30px var(--shadow);font-size:15px;font-weight:600}
.sticky>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{min-height:40px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:40px}
@media (min-width:760px){.sticky{display:none!important}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px;align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;gap:20px;padding:20px 0;cursor:pointer;font-size:18px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq summary .ic{color:var(--text-2)}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq details p{padding-bottom:20px;max-width:640px;font-size:16px;color:var(--text-2)}
.faq details a{color:var(--accent);text-underline-offset:3px}
@media (max-width:899px){.faq{grid-template-columns:minmax(0,1fr);gap:20px}.faq summary{font-size:16px}}

/* ---------- footer ---------- */
.foot{margin-top:80px;padding:40px 0 80px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;font-size:14px;color:var(--text-2)}
.foot-l{display:flex;flex-direction:column;gap:20px;align-items:flex-start;min-width:0}
.foot-brand{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.foot-brand .brand img{width:24px;height:24px}
.foot-brand span{color:var(--text-3)}
.foot-legal{display:flex;flex-wrap:wrap;gap:10px 20px}
.foot-legal a,.foot-l a{color:var(--text);text-underline-offset:3px}
.foot-co{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;color:var(--text-3)}
.company-brand{display:inline-flex}
.company-brand .sanmaru-mark{display:block;width:135px;height:24px;background:var(--text-2);-webkit-mask:url("sanmaru-logo-light.svg") no-repeat left center/contain;mask:url("sanmaru-logo-light.svg") no-repeat left center/contain}
.tm{max-width:760px;font-size:12px;color:var(--text-3)}
.foot-langs ul{display:grid;grid-template-columns:repeat(2,auto);gap:10px 40px}
.foot-langs a{color:var(--text-2);text-decoration:none}
.foot-langs a:hover{color:var(--text)}
.foot-langs a[aria-current]{color:var(--text);font-weight:600}
body.home .foot{padding-bottom:120px}
@media (max-width:759px){.foot{grid-template-columns:minmax(0,1fr)}}

/* ---------- legal drafts and 404 ---------- */
.legal-doc{max-width:760px;padding:40px 0 0;display:flex;flex-direction:column;gap:20px}
.legal-doc .draft{padding:16px;border-radius:8px;background:oklch(0.74 0.16 70 / .14);color:var(--orange);font-weight:600}
.legal-doc h1{font-size:clamp(30px,4vw,44px);font-weight:650;letter-spacing:-.02em}
.legal-doc .meta{color:var(--text-3);font-size:14px}
.legal-doc h2{padding-top:20px;font-size:20px;font-weight:650}
.legal-doc p{color:var(--text-2)}
.legal-doc a{color:var(--accent)}
.nf{padding:80px 0 0;display:flex;flex-direction:column;gap:20px;max-width:760px}
.nf-code{font:14px/1 var(--mono);color:var(--text-3)}
.nf h1{font-size:clamp(30px,4vw,56px);font-weight:650;letter-spacing:-.025em}
.nf p{color:var(--text-2)}
.nf-links{display:flex;flex-wrap:wrap;gap:10px}
.nf-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:8px;background:var(--raised);color:var(--text);text-decoration:none}

/* motion only when the visitor has not asked for less */
@media (prefers-reduced-motion:no-preference){
  .btn,.tabs button,.langs summary,.read-bar .db,.read-bar .ib{transition:background-color .12s ease-out,color .12s ease-out}
  .btn.primary:hover{background:var(--button-hover)}
  .faq summary .ic{transition:transform .22s var(--spring)}
  html.story-live .stamp{transition:opacity .2s ease-out}
  .sticky{transition:transform .34s var(--spring),opacity .2s ease-out}
  .sticky.away{transform:translateY(140%);opacity:0}
}
@media (prefers-reduced-motion:reduce){.sticky.away{display:none}}

/* ---------- the story scene: a short film in the film's language (assets/scene.js sets --u and every position) ---------- */
.scene{margin:40px 0 0}
.sc-stage{position:relative;width:100%;aspect-ratio:2/1;border-radius:24px;overflow:hidden;background:var(--film-bg);box-shadow:inset 0 0 0 1px var(--line);--u:1.12px;font:calc(var(--u)*14)/1.45 var(--sans);color:oklch(0.95 0.01 var(--hue));contain:layout paint}
.sc-stage.tall{aspect-ratio:5/8}
.sc-ridges{position:absolute;inset:0;width:100%;height:100%}
.sc-ridges path:nth-child(1){fill:var(--ridge-1)}.sc-ridges path:nth-child(2){fill:var(--ridge-2)}.sc-ridges path:nth-child(3){fill:var(--ridge-3)}
.sc-stage>*:not(.sc-ridges){position:absolute;left:0;top:0;margin:0}
.sc-term{border-radius:calc(var(--u)*12);overflow:hidden;background:oklch(0.19 0.012 var(--hue));box-shadow:0 0 0 1px oklch(0.1 0.02 var(--hue)),0 calc(var(--u)*20) calc(var(--u)*50) oklch(0.1 0.03 var(--hue) / .55)}
.sc-bar{position:relative;height:calc(var(--u)*28);display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*12);font-weight:600;color:oklch(0.68 0.01 var(--hue));background:oklch(0.27 0.012 var(--hue))}
.sc-lights{position:absolute;left:calc(var(--u)*12);display:flex;gap:calc(var(--u)*7)}
.sc-lights i{width:calc(var(--u)*11);height:calc(var(--u)*11);border-radius:50%;background:oklch(0.68 0.19 25)}.sc-lights i+i{background:oklch(0.82 0.15 85)}.sc-lights i+i+i{background:oklch(0.74 0.17 145)}
.sc-body{padding:calc(var(--u)*14) calc(var(--u)*18);font:calc(var(--u)*13.5)/1.55 var(--mono);color:oklch(0.9 0.008 var(--hue));display:flex;flex-direction:column;gap:calc(var(--u)*4)}
:lang(ko) .sc-body,:lang(ja) .sc-body,:lang(th) .sc-body{font-family:var(--mono),var(--sans)}
.sc-welcome{align-self:flex-start;border:1px solid oklch(0.66 0.13 40);border-radius:calc(var(--u)*6);padding:calc(var(--u)*3) calc(var(--u)*10);margin-bottom:calc(var(--u)*6)}
.sc-welcome i,.sc-r i{font-style:normal;color:oklch(0.66 0.13 40)}
.sc-l i{font-style:normal;color:oklch(0.62 0.01 var(--hue))}
.sc-w{color:oklch(0.78 0.01 var(--hue))}.sc-w b{color:oklch(0.95 0.01 var(--hue))}
.sc-think{padding:calc(var(--u)*10) calc(var(--u)*16);border-radius:calc(var(--u)*18);background:oklch(0.96 0.01 var(--hue));color:oklch(0.25 0.03 var(--hue));font-size:calc(var(--u)*15);font-weight:600;white-space:nowrap;box-shadow:0 calc(var(--u)*8) calc(var(--u)*24) oklch(0.1 0.03 var(--hue) / .4)}
.sc-think::after{content:"";position:absolute;left:calc(var(--u)*26);bottom:calc(var(--u)*-12);width:calc(var(--u)*12);height:calc(var(--u)*12);border-radius:50%;background:inherit;box-shadow:calc(var(--u)*-12) calc(var(--u)*12) 0 calc(var(--u)*-3) oklch(0.96 0.01 var(--hue))}
.sc-pile{position:absolute;inset:0}
.sc-doc{position:absolute;left:0;top:0;display:flex;align-items:center;gap:calc(var(--u)*8);width:calc(var(--u)*280);height:calc(var(--u)*40);padding:0 calc(var(--u)*12);border-radius:calc(var(--u)*8);background:oklch(0.97 0.008 var(--hue));color:oklch(0.27 0.035 var(--hue));font-size:calc(var(--u)*14);font-weight:600;box-shadow:0 calc(var(--u)*3) calc(var(--u)*10) oklch(0.1 0.03 var(--hue) / .35);will-change:transform,opacity}
.sc-doc .ty{width:calc(var(--u)*16);height:calc(var(--u)*16)}
.sc-doc>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-count{padding:calc(var(--u)*4) calc(var(--u)*10);border-radius:calc(var(--u)*6);background:oklch(0.82 0.15 85);color:oklch(0.25 0.05 70);font:700 calc(var(--u)*15)/1.3 var(--sans);transform-origin:0 50%;white-space:nowrap}
.sc-line{width:calc(var(--u)*4);border-radius:calc(var(--u)*2);background:var(--accent)}
.sc-shelf{border-radius:calc(var(--u)*24);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 calc(var(--u)*24) calc(var(--u)*60) var(--shadow);padding:calc(var(--u)*14) calc(var(--u)*8);color:var(--text);font-size:calc(var(--u)*13);transform-origin:100% 50%}
.sc-shelf .shelf-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*8);padding:0 calc(var(--u)*6) calc(var(--u)*8)}
.sc-shelf .seg{font-size:calc(var(--u)*11);padding:calc(var(--u)*2)}
.sc-shelf .seg span{padding:calc(var(--u)*3) calc(var(--u)*8)}
.sc-review{font-size:calc(var(--u)*11);font-weight:600;color:var(--accent);background:var(--brand-soft);border-radius:999px;padding:calc(var(--u)*3) calc(var(--u)*8);white-space:nowrap}
.sc-shelf .row{height:calc(var(--u)*34);gap:calc(var(--u)*8);padding:0 calc(var(--u)*6)}
.sc-shelf .row .ti{font-size:calc(var(--u)*13)}
.sc-shelf .ai{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.sc-shelf .ai .fb{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.sc-shelf .tag{font-size:calc(var(--u)*10);padding:calc(var(--u)*1) calc(var(--u)*6);line-height:1.5}
.sc-toast{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*8) calc(var(--u)*14);border-radius:999px;background:var(--button);color:var(--button-text);font-size:calc(var(--u)*14);font-weight:650;white-space:nowrap}
.sc-toast .ic{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.sc-next{display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*15);font-weight:600;color:oklch(0.95 0.01 var(--hue));white-space:nowrap}
.sc-next .ic{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.sc-rail{display:flex;align-items:flex-start;gap:20px;margin-top:20px;padding:0 2px}
.sc-rail ol{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sc-rail li{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--text-3)}
.sc-rail li.on{color:var(--text)}
.sc-rail .bar{display:block;height:2px;background:var(--line);overflow:hidden}
.sc-rail .bar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.sc-replay{display:inline-flex;align-items:center;gap:8px;flex:none;height:32px;padding:0 12px;border:0;border-radius:8px;background:var(--raised);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
@media (max-width:759px){.sc-rail{flex-direction:column}.sc-rail ol{grid-template-columns:minmax(0,1fr);gap:10px;width:100%}}
/* reduced motion or no script: three still frames, one per beat, with their captions */
.scene.board .sc-boards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.scene.board .sc-boards>div{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--text-2)}
.scene.board .sc-boards .sc-stage{border-radius:16px}
.scene.board>.sc-stage,.scene.board .sc-rail{display:none}
@media (max-width:759px){.scene.board .sc-boards{grid-template-columns:minmax(0,1fr)}}

/* ---------- guide and support: a one-column page list at the left (a disclosure on phones), prev / next at the end ---------- */
.doc-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;padding-top:40px}
.doc-nav{position:sticky;top:20px}
.doc-nav summary{list-style:none;font-size:13px;font-weight:600;color:var(--text-3);padding:10px 0;cursor:default}
.doc-nav summary::-webkit-details-marker{display:none}
.doc-nav ol{display:flex;flex-direction:column;gap:2px}
.doc-nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--text-2);text-decoration:none;font-size:15px}
.doc-nav a:hover{background:var(--raised);color:var(--text)}
.doc-nav a[aria-current]{background:var(--selected);color:var(--text);font-weight:600}
.doc-body{max-width:720px;min-width:0;display:flex;flex-direction:column;gap:20px}
.doc-body h1{font-size:clamp(30px,4vw,44px);font-weight:650;letter-spacing:-.02em;line-height:1.15}
.doc-body h2{padding-top:20px;font-size:24px;font-weight:650;letter-spacing:-.01em;scroll-margin-top:20px}
.doc-body h3{font-size:18px;font-weight:650;scroll-margin-top:20px}
.doc-body p,.doc-body li{color:var(--text-2);line-height:1.65}
.doc-body strong{color:var(--text);font-weight:600}
.doc-body a{color:var(--accent);text-underline-offset:3px}
.doc-body ul,.doc-body ol{display:flex;flex-direction:column;gap:10px;padding-left:20px}
.doc-body ul{list-style:disc}.doc-body ol{list-style:decimal}
.doc-body code{font:13px/1.4 var(--mono);padding:2px 6px;border-radius:6px;background:var(--raised);color:var(--text);overflow-wrap:anywhere}
.doc-body .table{overflow-x:auto;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.doc-body table{width:100%;border-collapse:collapse;font-size:14px}
.doc-body th{text-align:left;font-weight:600;color:var(--text);background:var(--raised)}
.doc-body th,.doc-body td{padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text-2)}
.doc-body tr:last-child td{border-bottom:0}
.callout,.upcoming{border-radius:16px;padding:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.upcoming{display:flex;flex-direction:column;gap:4px;background:none;box-shadow:inset 0 0 0 1px var(--line);border-left:0}
.upcoming b{font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--text-3)}
.upcoming p,.callout p{font-size:14px}
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),0 10px 30px var(--shadow)}
.shot-frame{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:21/9;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:20px;text-align:center;color:var(--text-3);font-size:13px}
.shot-frame img{opacity:.6}
.untranslated{padding:10px 16px;border-radius:8px;background:var(--raised);font-size:14px}
.doc-pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:40px;border-top:1px solid var(--line);margin-top:20px}
.pn{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);color:var(--text)!important;text-decoration:none;font-weight:600}
.pn small{font-size:12px;font-weight:500;color:var(--text-3)}
.pn.next{text-align:right}
.pn:hover{background:var(--raised)}
@media (max-width:959px){
  .doc-layout{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:20px}
  .doc-nav{position:static;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:0 10px}
  .doc-nav summary{cursor:pointer;padding:16px 6px;color:var(--text)}
  .doc-nav summary::after{content:"+";float:right;color:var(--text-3)}
  .doc-nav details[open] summary::after{content:"−"}
  .doc-nav ol{padding-bottom:10px}
  /* tables with more than two columns read as cards on a phone */
  .doc-body .table.wide{box-shadow:none;border-radius:0;overflow:visible}
  .doc-body .table.wide thead{display:none}
  .doc-body .table.wide table,.doc-body .table.wide tbody,.doc-body .table.wide tr,.doc-body .table.wide td{display:block}
  .doc-body .table.wide tr{border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:10px 0;margin-bottom:10px}
  .doc-body .table.wide td{border:0;padding:4px 16px}
  .doc-body .table.wide td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--text-3)}
}
@media (max-width:420px){.top-r{gap:10px}.doc-pn{grid-template-columns:minmax(0,1fr)}.pn.next{text-align:left}}

/* ---------- the story told as one flowing message, the pile still waiting, the weekly reset, spaced review ---------- */
.story h2.flow{max-width:880px;font-size:clamp(22px,2.4vw,32px);font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--text-2)}
:lang(th) .story h2.flow{line-height:1.6}
.pile{position:relative;display:flex;align-items:center;gap:10px;max-width:560px;margin-top:40px;padding:16px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong)}
.pile b{flex:1;font-size:16px;font-weight:600}
.pile-n{min-width:32px;height:32px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--button);color:var(--button-text);font-weight:700;font-variant-numeric:tabular-nums}
.pile-paper{position:absolute;left:16px;right:16px;bottom:-10px;height:10px;z-index:-1}
.pile-paper i{position:absolute;left:10px;right:10px;bottom:0;height:20px;border-radius:0 0 12px 12px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.pile-paper i+i{left:20px;right:20px;bottom:-8px}
.pile-paper i+i+i{left:30px;right:30px;bottom:-16px}
.pile{z-index:0;margin-bottom:20px}
.beat{margin-top:80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:center}
.beat h3{font-size:clamp(20px,2.2vw,28px);font-weight:600;line-height:1.35;letter-spacing:-.01em}
.beat p{margin-top:10px;font-size:16px;color:var(--text-2);max-width:620px}
.setcard{border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),0 20px 50px var(--shadow);padding:16px;display:flex;flex-direction:column}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.set-row span{display:flex;flex-direction:column;gap:2px}
.set-row small{font-size:12px;color:var(--text-3)}
.set-pop{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:var(--raised);font-weight:600;font-size:13px}
.set-time{font:600 14px/1 var(--mono);padding:6px 10px;border-radius:8px;background:var(--raised)}
.set-rule{margin:10px 0 0!important;font-size:13px!important;color:var(--text-3)!important}
.beat.later{grid-template-columns:minmax(0,1fr)}
.curve{display:flex;align-items:center;flex-wrap:wrap;gap:10px 0;margin-top:20px}
.curve li{display:flex;align-items:center;font-size:14px;color:var(--text-2);white-space:nowrap}
.curve li i{display:block;width:40px;height:2px;margin:0 10px;background:var(--line-strong)}
.curve li span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.curve li.start span{box-shadow:none}
.curve li.done{margin-left:10px}
.curve li.done span{display:inline-flex;align-items:center;gap:6px;background:var(--button);color:var(--button-text);box-shadow:none;font-weight:600}
@media (max-width:899px){.beat{grid-template-columns:minmax(0,1fr);gap:20px}}
/* phone: the same steps as a vertical timeline, joined by short lines */
@media (max-width:759px){.curve{flex-direction:column;align-items:flex-start;gap:0}.curve li{flex-direction:column;align-items:flex-start}
  .curve li i,.curve li.done::before{display:block;width:2px;height:12px;margin:4px 0 4px 20px;background:var(--line-strong)}
  .curve li.done{margin-left:0}.curve li.done::before{content:""}}
.pricing h2{margin-bottom:40px}
@media (min-width:760px){.pricing h2{text-align:center}}
/* phones: the reader's bar keeps every control on screen: arrows and count on one row, the three choices and the star below */
@media (max-width:479px){
  html.story-live .read-bar{flex-wrap:wrap;border-radius:16px;row-gap:6px}
  html.story-live .read-gap{flex-basis:100%;height:0}
  .read-bar .db{flex:1 1 0;min-width:0;padding:6px;height:auto;min-height:32px;white-space:normal;line-height:1.2;border-radius:12px}
}