@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("fonts/inter-tight-400_700.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#F4F2EC; --paper-2:#ECE9E1; --card:#FBFAF7; --ink:#111417; --graphite:#3A3F45; --muted:#5F656A;
  --violet:#4B1D8F; --salmon:#FF9F7A; --lilac:#D9CFF0; --salmon-ink:#A8442A;
  --line:rgba(17,20,23,.14); --line-strong:rgba(17,20,23,.32);
  --font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --t-display:clamp(2.6rem,6.4vw,6.4rem); --t-body:clamp(1rem,1.05vw,1.125rem); --t-label:.75rem;
  --margin:clamp(16px,5vw,72px); --frame:clamp(8px,1.2vw,16px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.label{font:500 var(--t-label)/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:20}
.skip:focus{left:8px}

/* placeholders still to fill (removed by the upload script) */
mark.ph{background:#FFE4D8;color:var(--salmon-ink);padding:0 .25em;border-bottom:1px dashed var(--salmon-ink);font-weight:600}

/* beta strip */
.strip{background:var(--ink);color:var(--paper);text-align:center;padding:9px var(--margin);font:500 .72rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.strip a{color:var(--salmon);text-decoration:none}
.strip a:hover{text-decoration:underline}

/* frame */
.sheet{position:relative;margin:var(--frame);border:1px solid var(--line-strong);background:var(--paper)}
.sheet + .sheet{margin-top:calc(-1 * var(--frame) - 1px)}
.sheet--hero{min-height:calc(100svh - 34px - 2 * var(--frame));display:flex;flex-direction:column;overflow:hidden}

/* header */
.top{display:flex;align-items:center;gap:24px;padding:22px var(--margin) 0;position:relative;z-index:5}
.brand img{display:block;height:34px;width:auto}
.nav{display:flex;gap:28px;margin-left:auto;font-size:.95rem}
.nav a{text-decoration:none;color:var(--graphite)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--violet)}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.right{display:flex;align-items:center;gap:16px;margin-left:28px}
.lang{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:2px}
.lang a{font:500 .72rem/1 var(--font-mono);letter-spacing:.1em;text-decoration:none;color:var(--muted);padding:9px 10px;border-radius:999px;min-height:30px}
.lang a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:600 .95rem/1 var(--font-sans);text-decoration:none;padding:15px 22px;min-height:48px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn:hover{background:var(--violet);border-color:var(--violet)}
.btn--ghost{background:none;color:var(--ink)}
.btn--ghost:hover{background:none;color:var(--violet);border-color:var(--violet)}
.btn--sm{padding:11px 16px;min-height:40px;font-size:.88rem}
.btn[aria-disabled="true"]{background:none;color:var(--muted);border-color:var(--line-strong);cursor:default}
.btn[aria-disabled="true"]:hover{background:none;color:var(--muted);border-color:var(--line-strong)}
.soon{display:inline-block;font:500 .62rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 6px;border:1px dashed var(--salmon-ink);color:var(--salmon-ink);vertical-align:middle;white-space:nowrap}
.menu-btn{display:none;font:500 .75rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid var(--line-strong);padding:10px 12px;min-height:40px;cursor:pointer;color:var(--ink)}

/* hero */
.hero{flex:1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;padding:40px var(--margin) 48px}
.hero__text{grid-column:1 / span 7}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--violet);margin:0}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--violet)}
h1{font:400 var(--t-display)/.95 var(--font-display);letter-spacing:-.02em;margin:.35em 0 .3em;max-width:15ch;text-wrap:balance}
/* the violet words of a headline are in Instrument Serif's own italic (never a slanted fake) */
h1 em,h2 em{font-style:italic;color:var(--violet);font-synthesis:none}
.sub{font:400 clamp(1.25rem,2vw,1.75rem)/1.3 var(--font-display);color:var(--graphite);margin:0 0 .7em}
.lead{max-width:54ch;color:var(--graphite);margin:0 0 1.6em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.note{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}

.hero__art{grid-column:8 / span 5;position:relative;justify-self:end;width:min(100%,720px);aspect-ratio:16/9}
/* wide screens: the headline stops growing at about 900px, so the video grows into the space left (its plates 48px clear
   of the stamp) instead of a gap opening between them (Dex 2026-11-02, a 1920px screen) */
@media (min-width:1680px){.hero__text{grid-column:1 / span 6}.hero__art{grid-column:7 / -1;width:min(880px,calc((100vw - 1040px) / 1.07))}}
.hero__video{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover;background:#fff;border:1px solid var(--line-strong);box-shadow:0 30px 60px -40px rgba(17,20,23,.55);animation:plate 1.1s var(--ease) both}
.hero__art::before,.hero__art::after{content:"";position:absolute;inset:0}
.hero__art::before{background:var(--lilac);transform:translate(-7%,-6.5%)}
.hero__art::after{background:var(--salmon);transform:translate(7%,6.5%)}
.vid-toggle{position:absolute;z-index:2;right:10px;bottom:10px;padding:5px 10px;font-size:11px;color:var(--ink);background:rgba(244,242,236,.92);border:1px solid var(--line-strong);cursor:pointer;opacity:.75;transition:opacity .2s}
.vid-toggle:hover,.vid-toggle:focus-visible,.vid-toggle[aria-pressed="true"]{opacity:1}
.page{position:absolute;inset:0;z-index:1;background:#fff;border:1px solid var(--line);padding:12% 11% 10% 14%;font-family:"Times New Roman",Georgia,serif;color:#1b1b1b;overflow:hidden;animation:plate 1.1s var(--ease) both}
@keyframes plate{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.page .ch{font-size:clamp(.55rem,.9vw,.8rem);text-align:center;letter-spacing:.08em;font-weight:700}
.page .ct{font-size:clamp(.7rem,1.15vw,1rem);text-align:center;font-weight:700;margin:.2em 0 1.4em}
.page .h2{font-size:clamp(.5rem,.82vw,.72rem);font-weight:700;margin:1em 0 .4em}
.page p{font-size:clamp(.42rem,.7vw,.62rem);line-height:1.5;text-align:justify;margin:0 0 .5em;text-indent:1.25em}
.page .tbl{width:78%;margin:.8em auto .3em;border-collapse:collapse;font-size:clamp(.38rem,.6vw,.55rem)}
.page .tbl th,.page .tbl td{border-top:1px solid #999;border-bottom:1px solid #999;padding:.25em .4em;text-align:left}
.page .tbl th{border-top:1.5px solid #333}
.page .cap{font-size:clamp(.4rem,.66vw,.58rem);text-align:center;font-style:italic;margin-top:.8em}
.page .num{position:absolute;bottom:5%;left:0;right:0;text-align:center;font-size:clamp(.42rem,.66vw,.6rem)}

/* the approval stamp hangs off the end of the headline's last line (an empty inline anchor after "styling.") */
.stamp-at{position:relative}
.hero h1{text-wrap:wrap}   /* balance pushes the empty anchor onto a line of its own (Chrome) */
/* "Paradigma baru" breaks before "document styling." as the English breaks after "of": the second line, and so the stamp,
   is then the same in both languages at every width */
html[lang="id"] .hero h1{max-width:17.5ch}
.stamp{position:absolute;display:inline-block;z-index:2;left:.07em;top:-.22em;width:1.6em;aspect-ratio:104/108;transform:rotate(-8deg);font-style:normal}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stamp svg{display:block;width:100%;height:100%;overflow:visible}
.stamp .approved{transform-box:fill-box;transform-origin:center;animation:press .5s cubic-bezier(.2,.9,.3,1.2) .9s both}
@keyframes press{from{opacity:0;scale:1.6}60%{opacity:1}to{opacity:1;scale:1}}

/* title block */
.tb{display:grid;grid-template-columns:2.2fr 1fr 1.6fr 1fr 1fr 1.4fr;border-top:1px solid var(--salmon);margin:0 var(--margin) 28px}
.tb div{padding:14px 16px 4px;border-left:1px solid var(--line)}
.tb div:first-child{border-left:0;padding-left:0}
.tb div:last-child{text-align:right;padding-right:0}
.tb b{display:block;font:400 .9rem/1.4 var(--font-mono);color:var(--ink);margin-top:6px;letter-spacing:0;text-transform:none}
.dot{display:inline-block;width:8px;height:8px;background:var(--salmon);margin-right:8px;vertical-align:1px}

/* sections */
.sec{padding:28px var(--margin) clamp(48px,7vw,96px)}
.spine{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.sec h2{font:400 clamp(2rem,3.6vw,3.25rem)/1.05 var(--font-display);letter-spacing:-.015em;max-width:22ch;margin:clamp(32px,4vw,48px) 0 clamp(24px,3vw,40px);text-wrap:balance}
.sec h3{font:600 1.05rem/1.3 var(--font-sans);margin:0 0 .5em}
.sec p{margin:0 0 1em}
.muted{color:var(--graphite)}

.grid{display:grid;gap:0;border-top:1px solid var(--line)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.cell{padding:24px 24px 28px 0;border-bottom:1px solid var(--line)}
.grid--3 .cell:not(:nth-child(3n+1)),.grid--4 .cell:not(:nth-child(4n+1)){padding-left:24px;border-left:1px solid var(--line)}
.cell .label{display:block;margin-bottom:14px;color:var(--violet)}
.cell p{color:var(--graphite);margin:0;font-size:.98rem}

.grid--split{grid-template-columns:2fr 1fr}
.grid--half{grid-template-columns:1fr 1fr}
.grid--split .cell:nth-child(2),.grid--half .cell:nth-child(2){padding-left:24px;border-left:1px solid var(--line)}

/* passes */
.passes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* two price lists: rupiah (DOKU) and US dollars (Paddle, no 1-month pass); currency.js picks one */
.c-usd{display:none}
:root[data-cur="usd"] .c-idr,:root[data-cur="usd"] .pass--idr{display:none}
:root[data-cur="usd"] .pass .c-usd{display:block}
:root[data-cur="usd"] .fine .c-usd{display:inline}
:root[data-cur="usd"] .passes{grid-template-columns:repeat(3,1fr)}
.cur{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:2px;margin:0 0 18px}
.cur[hidden]{display:none}
.cur button{font:500 .72rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:0;border-radius:999px;padding:10px 14px;min-height:34px;cursor:pointer}
.cur button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cur button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.pass{position:relative;background:var(--card);border:1px solid var(--line-strong);padding:26px 22px 22px;display:flex;flex-direction:column;gap:6px}
.pass--best{border-color:var(--violet);box-shadow:inset 0 3px 0 var(--violet)}
.pass .label{color:var(--muted)}
.pass .price{font:400 clamp(2rem,3vw,2.6rem)/1.05 var(--font-display);margin:8px 0 0}
.pass .per{font:400 .82rem/1.4 var(--font-mono);color:var(--muted)}
.pass .pay{font-size:.88rem;color:var(--graphite);margin:10px 0 18px}
.pass .btn{margin-top:auto;width:100%}
.badge{position:absolute;top:-11px;right:16px;background:var(--violet);color:var(--paper);font:500 .68rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px}
.fine{font-size:.9rem;color:var(--graphite);margin-top:22px;max-width:70ch}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.steps li{list-style:none;padding:22px 22px 26px 0;border-bottom:1px solid var(--line)}
.steps li+li{padding-left:22px;border-left:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;font:400 2.2rem/1 var(--font-display);color:var(--violet);margin-bottom:14px}
.steps{padding:0;margin:0}

/* tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:.95rem}
table.data th,table.data td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;overflow-wrap:anywhere;border-bottom:1px solid var(--line)}
table.data th{font:500 var(--t-label)/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--line-strong)}
/* Legal tables with 3+ columns are unreadable at phone width; each row becomes a block with its column names. */
@media (max-width:640px){
  table.data--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.data--stack,table.data--stack tbody,table.data--stack tr,table.data--stack td{display:block;width:100%}
  table.data--stack tr{border-bottom:1px solid var(--line-strong);padding:10px 0}
  table.data--stack td{border:0;padding:4px 0;overflow-wrap:normal}
  table.data--stack td::before{content:attr(data-label);display:block;font:500 var(--t-label)/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  table.data--stack td:first-child{font-weight:600}
  table.data--stack td:first-child::before{display:none}
  /* a table whose rows are named (the system requirements): the name above its value, never broken letter by letter */
  table.data--rows thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.data--rows,table.data--rows tbody,table.data--rows tr,table.data--rows th,table.data--rows td{display:block;width:100%}
  table.data--rows th{border:0;padding:12px 0 2px;overflow-wrap:normal}
  table.data--rows td{padding:0 0 12px}
}

/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 1.4rem/1 var(--font-display);color:var(--violet)}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--graphite);max-width:70ch}

/* legal / text pages */
.doc{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,3fr);gap:clamp(24px,5vw,72px);padding:28px var(--margin) clamp(48px,7vw,96px)}
.doc aside{position:sticky;top:20px;align-self:start;font-size:.9rem}
.doc aside ol{list-style:none;padding:0;margin:14px 0 0}
.doc aside li{padding:6px 0;border-bottom:1px solid var(--line)}
.doc aside a{text-decoration:none;color:var(--graphite)}
.doc aside a:hover{color:var(--violet)}
.prose{max-width:74ch}
.prose h1{font-size:clamp(2.4rem,5vw,4.2rem);margin:0 0 .25em;max-width:none}
.prose h2{font:400 clamp(1.6rem,2.4vw,2.1rem)/1.15 var(--font-display);margin:2em 0 .6em;scroll-margin-top:20px}
.prose h3{font:600 1rem/1.4 var(--font-sans);margin:1.6em 0 .4em}
.prose p,.prose li{color:#23272B}
.prose ol,.prose ul{padding-left:1.3em}
.prose li{margin:.35em 0}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 2em;padding-bottom:16px;border-bottom:1px solid var(--line)}
.callout{background:var(--card);border:1px solid var(--line-strong);border-left:3px solid var(--violet);padding:16px 18px;margin:1.4em 0;font-size:.95rem}
.callout p:last-child{margin-bottom:0}
.check{display:flex;gap:10px;align-items:flex-start;font-style:italic;color:var(--graphite)}
.check::before{content:"";flex:none;width:16px;height:16px;border:1.5px solid var(--graphite);margin-top:4px}

/* contact */
.contact{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.contact .pass{gap:10px}
.contact .pass b{font:400 1.5rem/1.2 var(--font-display);word-break:break-word}
.contact .pass-note{margin:0;color:var(--graphite);font-size:.95rem}
dl.ident{display:grid;grid-template-columns:max-content 1fr;gap:10px 28px;margin:0}
dl.ident dt{font:500 var(--t-label)/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
dl.ident dd{margin:0}

/* footer */
.foot{padding:40px var(--margin) 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;font-size:.92rem}
.foot h4{font:500 var(--t-label)/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:0 0 8px}
.foot a{text-decoration:none;color:var(--graphite)}
.foot a:hover{color:var(--violet)}
.social{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px 16px}
.social li{margin:0}
.social a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--graphite)}
.social a:hover,.social a:focus-visible{color:var(--violet)}
.social svg{flex:none}
.social--big{margin-top:16px;gap:12px}
.social--big a{padding:9px 14px;border:1px solid var(--line-strong);color:var(--ink)}
.social--big a:hover,.social--big a:focus-visible{border-color:var(--violet)}
.foot .brandline{color:var(--graphite);max-width:34ch}
.foot .brandline img{height:28px;width:auto;display:block;margin-bottom:14px}
.legalline{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--muted);font-size:.85rem}

/* responsive */
@media (max-width:1080px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line-strong);padding:8px var(--margin) 16px;margin:0}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:inline-flex}
  .right{margin-left:auto}
  .hero__text{grid-column:1 / -1}
  .hero__art{grid-column:1 / -1;justify-self:center;width:min(88%,560px);margin:40px 0 24px}
  .grid--4,.steps{grid-template-columns:repeat(2,1fr)}
  .grid--4 .cell,.steps li{padding-left:0!important;border-left:0!important}
  .grid--4 .cell:nth-child(2n),.steps li:nth-child(2n){padding-left:22px!important;border-left:1px solid var(--line)!important}
  .passes,:root[data-cur="usd"] .passes{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .grid--3{grid-template-columns:1fr}
  .grid--3,.grid--split,.grid--half{grid-template-columns:1fr}
  .grid--3 .cell{padding-left:0!important;border-left:0!important}
  .doc{grid-template-columns:1fr}
  .doc aside{position:static}
  .contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero__art{aspect-ratio:9/16;width:min(78%,380px)}   /* phones get the vertical cut (reel-v) */
  .right .btn{display:none}
  .brand img{height:28px}
  .top{gap:12px}
  .right{gap:10px}
  .hero{padding-top:28px}
  .tb{grid-template-columns:1fr 1fr}
  .tb div{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .tb div:nth-child(-n+2){border-top:0}
  .tb div:last-child{text-align:left}
  .stamp{width:1.7em;top:-.3em}
  .grid--4,.steps,.passes,:root[data-cur="usd"] .passes{grid-template-columns:1fr}
  .grid--4 .cell,.steps li{padding-left:0!important;border-left:0!important}
  .foot{grid-template-columns:1fr}
  dl.ident{grid-template-columns:1fr;gap:2px}
  dl.ident dd{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .page,.hero__video,.stamp .approved{animation:none}
}

/* ------------------------------------------------------------------ Styler demo (looks like the app) */
.sd{--a:#2747C9;--a-soft:#E6ECFC;--ui-ink:#1B1F27;--ui-muted:#5B6270;--ui-faint:#8A909C;--ui-line:#D3D7DF;--ui-bg:#E9EBEF;--ui-panel:#FFFFFF;--ok:#B35C00;
  position:relative;border:1px solid var(--ui-line);background:var(--ui-panel);color:var(--ui-ink);font:13px/1.4 "Segoe UI",system-ui,-apple-system,sans-serif;box-shadow:0 18px 40px -28px rgba(17,20,23,.45);overflow:hidden;user-select:none;-webkit-user-select:none}
.sd button{font:inherit;color:inherit}
.sd-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:10px 14px;border-bottom:1px solid var(--ui-line)}
.sd-app{font-weight:600;font-size:14px}
.sd-kv{color:var(--ui-muted);font-size:12px}.sd-kv b{color:var(--ui-ink);font-weight:500;margin-left:4px}
.sd-sp{flex:1}
.sd-btn{border:1px solid var(--ui-line);background:#fff;border-radius:4px;padding:6px 14px;min-height:32px;cursor:pointer}
.sd-btn:hover:not(:disabled){border-color:var(--a);color:var(--a)}
.sd-btn:disabled{opacity:.45;cursor:default}
.sd-primary{background:var(--a);border-color:var(--a);color:#fff!important}
.sd-primary:hover:not(:disabled){background:#1E3AA8;color:#fff}
.sd-body{display:grid;grid-template-columns:200px minmax(0,1fr) 240px;min-height:480px}
.sd-rail{border-right:1px solid var(--ui-line);padding:10px 8px;background:#fff}
.sd-rhead{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted);padding:4px 8px 8px}
.sd-row{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:4px;width:100%;text-align:left;border:0;background:none;border-radius:6px;padding:8px;cursor:pointer}
.sd-row:hover{background:#F3F5F8}.sd-row.on{background:var(--a-soft)}
.sd-row .sd-code{grid-row:1 / span 2;font:11px/18px Consolas,monospace;color:var(--a)}
.sd-nm{font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:6px}
.sd-sum{font-size:11.5px;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-dot{width:7px;height:7px;border-radius:50%;background:#F08A3C;display:inline-block}
.sd-desk{background:var(--ui-bg);display:flex;flex-direction:column;min-width:0}
.sd-hint{font-size:12px;color:var(--ui-muted);padding:8px 14px;border-bottom:1px solid var(--ui-line);background:#F4F5F7;min-height:34px}
.sd-hint b{color:var(--a);font-weight:600}
.sd-scroll{overflow-x:auto;overflow-y:hidden;padding:12px 12px 0;flex:1;-webkit-overflow-scrolling:touch}
.sd-ruler{position:relative;height:24px;margin:0 auto 6px;background:#E3E6EB;border:1px solid #C9CDD5;font:10px/1 Consolas,monospace;color:#7A808C}
.sd-rtext{position:absolute;top:0;bottom:0;background:#fff}
.sd-tk{position:absolute;bottom:0;height:7px;border-left:1px solid #B9BEC8}
.sd-tk.sd-half{height:4px}
.sd-rn{position:absolute;top:3px;transform:translateX(-50%)}
.sd-mk{position:absolute;width:12px;height:9px;margin-left:-6px;background:var(--a);cursor:ew-resize;touch-action:none;z-index:2}
.sd-mk-top{top:-1px;clip-path:polygon(0 0,100% 0,50% 100%)}
.sd-mk-bot{bottom:-1px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.sd-mk::after{content:"";position:absolute;inset:-8px}
.sd-page{margin:0 auto;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);color:#111;min-height:calc(var(--cm,28px) * 15)}
.sd-text{position:relative}
.sd-blk{position:relative;touch-action:none;outline:0;hyphens:manual;overflow-wrap:break-word}
.sd-blk.sel{box-shadow:0 0 0 1.5px var(--a);background:rgba(39,71,201,.04)}
.sd-blk:focus-visible{box-shadow:0 0 0 2px var(--a)}
.sd-num{display:inline-block;text-indent:0}
.sd-tag{position:absolute;font:10px/14px Consolas,monospace;color:var(--a);background:var(--a-soft);border-radius:3px;padding:0 5px;font-weight:400;text-indent:0;letter-spacing:0;white-space:nowrap}
.sd-dragging .sd-blk.sel{background:rgba(39,71,201,.07)}
.sd-panel{border-left:1px solid var(--ui-line);padding:14px;background:#fff;display:flex;flex-direction:column;gap:12px}
.sd-ph{font-size:15px;font-weight:600}.sd-ph .sd-code{font:12px Consolas,monospace;color:var(--a);margin-right:4px}
.sd-note{font-size:12px;color:var(--ui-muted);margin:0}
.sd-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ui-muted);min-width:0}
.sd-f select,.sd-in input{font:13px "Segoe UI",system-ui,sans-serif;color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:4px;background:#fff;min-height:32px;padding:4px 8px;width:100%;min-width:0}
.sd-f select:focus,.sd-in input:focus{outline:2px solid var(--a);outline-offset:-1px;border-color:var(--a)}
.sd-in{display:flex;align-items:center;gap:4px}
.sd-in em{font-style:normal;color:var(--ui-faint);font-size:12px}
.sd-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sd-chk{justify-content:flex-start}.sd-chk input{width:18px;height:18px;margin:6px 0 0;accent-color:var(--a)}
.sd-seg{display:inline-flex;border:1px solid var(--ui-line);border-radius:4px;overflow:hidden}
.sd-seg button{border:0;background:#fff;padding:6px 10px;min-height:30px;cursor:pointer;flex:1}
.sd-seg button+button{border-left:1px solid var(--ui-line)}
.sd-seg button[aria-pressed="true"]{background:var(--a-soft);color:#1A3296;font-weight:600}
.sd-foot{border-top:1px solid var(--ui-line);padding:9px 14px;font-size:12px;color:var(--ui-muted);background:#fff;min-height:36px}
.sd-foot b{color:var(--ok)}
.sd-tip{position:absolute;display:none;pointer-events:none;background:#1B1F27;color:#fff;font:11px/1.3 "Segoe UI",system-ui,sans-serif;padding:4px 7px;border-radius:3px;white-space:nowrap;z-index:9}
.sd-noscript{padding:24px;color:var(--ui-muted)}
.demo-cap{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px}
@media (max-width:1080px){
  .sd-body{grid-template-columns:minmax(0,1fr) 230px}
  .sd-rail{grid-column:1 / -1;display:flex;gap:4px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--ui-line);padding:6px}
  .sd-rhead{display:none}
  .sd-row{width:auto;flex:none;min-width:150px}
}
@media (max-width:700px){
  .sd-body{grid-template-columns:1fr}
  .sd-panel{border-left:0;border-top:1px solid var(--ui-line)}
  .sd-hide-s,.sd-kv{display:none}
  .sd-top{flex-wrap:nowrap;gap:8px}
  .sd-btn{padding:6px 10px}
  .sd-row .sd-sum{display:none}
  .sd-row{min-width:0;grid-template-columns:24px auto}
}

/* ------------------------------------------------------------------ feature run (pinned sideways scroll) */
.run{padding:0}
.run-stage{display:flex;flex-direction:column;padding:28px 0 clamp(28px,4vw,48px)}
.run-on .run-stage{position:sticky;top:0;height:100vh;height:100lvh;max-height:none;padding-bottom:28px;overflow:hidden}
.run-head{padding:0 var(--margin)}
/* the heading stays one short line so the slides get the height */
.run-top{display:flex;flex-direction:column;gap:clamp(8px,1vw,14px);margin:clamp(14px,1.6vw,22px) 0 clamp(12px,1.4vw,18px)}
.run-top h2{font:400 clamp(1.6rem,2.5vw,2.4rem)/1.1 var(--font-display);letter-spacing:-.015em;margin:0;text-wrap:balance}
.run-nav{display:flex;flex-direction:column;gap:4px}
.run-index{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.run-index button{font:500 var(--t-label)/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:0;padding:6px 0;cursor:pointer}
.run-index button:hover{color:var(--violet)}
.run-index button[aria-current="true"]{color:var(--ink)}
.run-index button[aria-current="true"]::before{content:"";display:inline-block;width:7px;height:7px;background:var(--salmon);margin-right:8px;vertical-align:1px}
.run-meter{display:flex;align-items:center;gap:14px}
.run-bar{flex:1;height:1px;background:var(--line-strong);position:relative;overflow:hidden}
.run-bar i{position:absolute;inset:0;background:var(--violet);transform-origin:left;transform:scaleX(.04)}
.run-count{white-space:nowrap}
.run-step{display:inline-flex;gap:6px}
.run-step button{font:500 .95rem/1 var(--font-mono);color:var(--ink);background:none;border:1px solid var(--line-strong);border-radius:999px;width:40px;height:40px;cursor:pointer}
.run-step button:hover{border-color:var(--violet);color:var(--violet)}
.run-step button:disabled{opacity:.35;cursor:default}
.run-step button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.run-viewport{flex:1;min-height:0;overflow-x:auto;scroll-padding-inline:var(--margin);overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--margin)}
.run-viewport::-webkit-scrollbar{display:none}
.run-on .run-viewport{overflow:visible;scroll-snap-type:none}
.run-on .slide:last-child{margin-right:0}
.run-track{display:flex;gap:clamp(16px,2.4vw,32px);height:100%;will-change:transform}
/* the slides can be dragged sideways */
.run-viewport{cursor:grab}
.is-drag .run-viewport{cursor:grabbing}
.is-drag .run-track{user-select:none;-webkit-user-select:none}
.run-track img{-webkit-user-drag:none;user-select:none}
.slide{flex:none;width:min(1240px,86vw);scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr);gap:clamp(20px,3vw,44px);align-items:start;align-content:start;min-height:0;border-top:1px solid var(--line);padding-top:clamp(18px,2.4vw,28px)}
.slide:last-child{margin-right:var(--margin)}
.slide-text{min-width:0}
.slide-k{display:flex;gap:12px;align-items:center;color:var(--violet);margin:0 0 16px}
.slide h3{font:400 clamp(1.7rem,2.6vw,2.5rem)/1.05 var(--font-display);letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
.slide p{color:var(--graphite);margin:0 0 1.2em;max-width:44ch}
.slide ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.slide li{font:400 .86rem/1.45 var(--font-mono);color:var(--graphite);padding:9px 0;border-bottom:1px solid var(--line)}
.slide figure{margin:0;min-width:0;position:relative;display:flex;justify-content:center}
.shot{position:relative;background:#fff;border:1px solid var(--line-strong);box-shadow:0 30px 60px -40px rgba(17,20,23,.55);max-width:100%;transition:transform .7s var(--ease)}
.shot::before{content:"";position:absolute;z-index:-1;inset:0;transform:translate(14px,14px);background:var(--lilac)}
.slide:nth-child(2n) .shot::before{background:var(--salmon);opacity:.55}
.shot img{display:block;width:100%;height:auto;max-height:calc(100svh - 240px);object-fit:contain;object-position:top left}
.run-on .slide:not(.is-on) .shot{transform:scale(.97)}
.slide figcaption{position:absolute;left:0;bottom:-26px;font:400 .72rem/1.3 var(--font-mono);color:var(--muted)}
@media (max-width:899px){
  .slide{grid-template-columns:1fr;width:86vw;align-items:start}
  .slide figure{order:-1}
  .shot img{max-height:none}
  .slide figcaption{position:static;margin-top:20px}
  .slide figure{flex-direction:column}
}
@media (max-width:640px){
  .run-index{display:none}
  .run-nav{min-width:100%}
  .slide{width:88vw}
  .shot::before{transform:translate(8px,8px)}
}
/* envelope: between the hero and page 01. Only with the script and without reduced motion (envelope.js adds
   .env-on); otherwise the section is not shown, it carries no content of its own. The stage pins over the first
   screen of page 01 (the negative margin below): the seal cracks, the flap lifts, the letter (a copy of page 01)
   comes out and grows into the page, and at the end the stage hands over to the real page underneath. */
.env-sec{display:none;--ew:min(960px,90vw,calc((100svh - 100px) * 1.02));--eh:calc(var(--ew) / 1.414);
  --env:#EDE3D1;--env-lo:#E3D5BC;--env-hi:#F5EEE1}
.env-sec.env-on{display:block;position:relative;z-index:3;padding:0;background:none;border-top-width:0;border-bottom-width:0;pointer-events:none}
/* a scene lies over the edges of the pages next to it; it must never catch a tap, swipe or click meant for them */
.env-sec *{pointer-events:none!important}
/* except the copy's own controls while its letter is on screen: they pass a press on to the real page (envelope.js) */
.env-sec .env-proxy{pointer-events:auto!important;cursor:pointer}
.env-wait .env-proxy,.env-done .env-proxy{pointer-events:none!important}   /* a scene's own top and bottom lines would cross the pages it lies over */
.env-sec.env-on + .sheet{margin-top:calc(-100vh - 1px - var(--frame));margin-top:calc(-100lvh - 1px - var(--frame))}
/* the swap scene also lies over the last screen of page 01; its stage shows only once it is pinned */
.env-sec.env-swap.env-on{margin-top:calc(-100vh - 1px - var(--frame));margin-top:calc(-100lvh - 1px - var(--frame))}
.env-wait .env-stage{opacity:0;pointer-events:none;transition:none}   /* opacity, not visibility: a letter set visible would still show */
/* every letter page is at least a screen and a bit tall, so the scenes before and after it never overlap
   (on <html> rather than next to a scene, so the copies in the letters are laid out the same) */
.has-env .sheet--letter{min-height:145svh;box-sizing:border-box}   /* the real page stays for ~45% of a screen of scrolling */
/* a short letter page keeps its content at the top, like every other page; the extra height (the rest before
   the next envelope) is below it */
.env-page .run-stage{position:relative}
/* the stage is as tall as the largest viewport: a phone that hides its address bar while scrolling shows more than
   100svh, and the strip below a svh-tall stage let the next page show through */
.env-stage{position:sticky;top:0;height:100vh;height:100lvh;max-height:none;overflow:hidden;background:var(--paper);transition:opacity .25s}
.env-done .env-stage{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.env-defs{position:absolute;width:0;height:0;overflow:hidden}
.env-wrap{position:absolute;left:50%;top:60%;width:var(--ew);height:var(--eh);transform:translate(-50%,-50%)}
.env-part,.env-letter,.env-chip{position:absolute}
.env-shadow{left:5%;right:5%;bottom:-8%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,28,10,.26),rgba(40,28,10,0));z-index:0}
.env-back{inset:0;z-index:0;border-radius:6px;border:1px solid rgba(80,60,30,.2);
  background:repeating-linear-gradient(45deg,rgba(75,29,143,.11) 0 2px,transparent 2px 10px),var(--lilac)}
.env-letter{left:0;top:0;z-index:2;transform-origin:0 0;background:#fff;overflow:hidden;pointer-events:none}
.env-page > .sheet{margin:0;border-width:1px 0 0}
/* every page that comes out of the envelope is a letter on its own paper; the copy in the envelope has the same paper */
.sheet--letter{background:var(--letter,#fff)}
.paper-1{--letter:#FFFFFF}   /* white: the Styler */
.paper-2{--letter:#F1ECFA}   /* lilac: what it does */
.paper-3{--letter:#FDEFE7}   /* peach: who it is for */
.paper-4{--letter:#EAF4EE}   /* mint: how it works */
.paper-5{--letter:#FFF7DE}   /* butter: pricing */
.paper-6{--letter:#EAF1F9}   /* powder blue: your documents */
.paper-7{--letter:#F9EDF3}   /* rose: questions */
.env-edge{position:absolute;left:0;top:0;width:100%;box-sizing:border-box;border:1px solid var(--line-strong);pointer-events:none}
.env-front{inset:0;z-index:3;filter:drop-shadow(0 -1px 1.5px rgba(60,40,15,.16))}
.env-front-face{position:absolute;inset:0;border-radius:0 0 6px 6px;clip-path:polygon(0 0,50% 45%,100% 0,100% 100%,0 100%);
  background:linear-gradient(to top,var(--env-hi),var(--env) 55%,var(--env-lo))}
.env-seams{position:absolute;inset:0;width:100%;height:100%}
.env-seams path{fill:none;stroke:rgba(80,58,25,.2);stroke-width:1}
.env-flap{inset:0;z-index:4;transform-origin:50% 0;filter:drop-shadow(0 2px 2.5px rgba(60,40,15,.2))}
.env-flap-face{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 51%);
  background:linear-gradient(to bottom,var(--env-hi),var(--env) 60%,var(--env-lo))}
.env-flap.is-in .env-flap-face{background:repeating-linear-gradient(-45deg,rgba(75,29,143,.13) 0 2px,transparent 2px 10px),#CFC3EA}
.seal{position:absolute;width:16%;aspect-ratio:1;left:42%;top:calc(48% - var(--ew) * .08);overflow:visible;filter:drop-shadow(0 2px 2px rgba(60,6,10,.35))}
.seal-t{clip-path:polygon(0 0,100% 0,100% 45%,87% 50%,74% 44%,62% 53%,50% 46%,38% 55%,26% 48%,13% 54%,0 49%)}
.seal-b{z-index:5;clip-path:polygon(0 49%,13% 54%,26% 48%,38% 55%,50% 46%,62% 53%,74% 44%,87% 50%,100% 45%,100% 100%,0 100%)}
.seal-w{z-index:6}
.env-chip{z-index:6;left:50%;top:48%;width:calc(var(--ew) * .014);height:calc(var(--ew) * .011);background:#8c1017;opacity:0;
  clip-path:polygon(10% 0,100% 30%,70% 100%,0 70%)}
.env-chip:nth-of-type(odd){background:#b31a22;clip-path:polygon(0 20%,80% 0,100% 80%,30% 100%)}
.env-hint{position:absolute;left:0;right:0;top:calc(60% + var(--eh) / 2 + 36px);margin:0;text-align:center}

/* page 01: the Styler recording */
.demo-vid{margin:0;position:relative;isolation:isolate}
.demo-vid .shot video{display:block;width:100%;height:auto;background:#fff}
.demo-vid .demo-cap{margin-top:16px}

/* page 03: a typical document under each kind of writer. Same size in every column, bottom-aligned; everything
   inside is sized in container units, so a mockup scales as a whole. */
.cell--doc{display:flex;flex-direction:column}
.cell--doc .dm{margin-top:auto;padding-top:26px;align-self:center;width:clamp(150px,15vw,220px)}
.dm-in{container-type:inline-size;position:relative;aspect-ratio:210/297;background:#fff;border:1px solid var(--line-strong);
  box-shadow:0 18px 34px -26px rgba(17,20,23,.55);padding:11% 10% 9%;box-sizing:border-box;overflow:hidden;
  font-family:"Times New Roman",Georgia,serif;color:#1b1b1b}
.dm .ln{display:block;height:1.5cqw;background:#cfd2d6;border-radius:1cqw;margin:0 0 2.3cqw}
.dm .ln.in{margin-left:8%}
.dm-c{text-align:center}
.dm-b{font-weight:700;font-size:4.2cqw;letter-spacing:.06em}
.dm-lg{font-size:5.2cqw;margin:.5cqw 0 6cqw}
.dm-h{font-weight:700;font-size:4.4cqw;margin:4cqw 0 2.6cqw}
.dm-pg{position:absolute;left:0;right:0;bottom:5.5%;text-align:center;font-size:3.6cqw;color:#555}
.dm-title{font-size:5cqw;line-height:1.2;letter-spacing:0;margin-bottom:2.5cqw}
.dm-au{display:flex;justify-content:center;gap:3cqw;margin-bottom:4cqw}
.dm-au i{display:block;width:20%;height:1.4cqw;background:#b9bcc1;border-radius:1cqw}
.dm-abs{background:#f1f2f4;padding:3cqw 4cqw .8cqw;margin-bottom:3cqw}
.dm-abs b{display:block;font-size:3.6cqw;margin-bottom:1.6cqw}
.dm-cols{display:grid;grid-template-columns:1fr 1fr;gap:5cqw}
.dm-cols .dm-h{font-size:3.8cqw;margin:0 0 2.2cqw}
.dm-cols div div.dm-h:not(:first-child){margin-top:3.4cqw}
.dm-fig{height:16cqw;margin:1cqw 0 1.4cqw;background:repeating-linear-gradient(135deg,#e3e5e8 0 1.2cqw,#f3f4f5 1.2cqw 2.4cqw);border:1px solid #d5d7da}
.dm-cap{font-size:3.2cqw;font-style:italic;color:#444;margin:0 0 2cqw}
.dm-hd{display:flex;justify-content:space-between;font:500 3.4cqw/1 var(--font-mono);color:#555;border-bottom:.6cqw solid #1f3a8a;padding-bottom:2.4cqw;margin-bottom:3cqw}
.dm-hn{color:#1f3a8a;font-size:5cqw;margin-top:2cqw}
.dm-tb{width:100%;border-collapse:collapse;font-size:3.2cqw;margin:0 0 4cqw}
.dm-tb th{background:#1f3a8a;color:#fff;font-weight:700;text-align:left;padding:1.4cqw 2cqw}
.dm-tb td{border-bottom:1px solid #cfd2d6;padding:1.6cqw 2cqw;height:2.6cqw}
.dm-ft{position:absolute;left:10%;right:10%;bottom:5.5%;border-top:1px solid #cfd2d6;padding-top:2cqw;font:500 3cqw/1 var(--font-mono);color:#666;text-align:right}
.dm-bn{font:400 22cqw/1 var(--font-display);color:var(--violet);margin:2cqw 0 1cqw}
.dm-bt{font:400 7.5cqw/1.1 var(--font-display);margin-bottom:4cqw}
.dm-orn{width:22%;height:.6cqw;background:var(--salmon);margin-bottom:6cqw}
.dm-drop{position:relative;padding-left:15cqw;min-height:14cqw;margin-bottom:2.3cqw}
.dm-drop span{position:absolute;left:0;top:-1cqw;font:400 15cqw/1 var(--font-display);color:var(--violet)}
.dm-gap{height:3cqw}
@media (max-width:1080px){.cell--doc .dm{width:clamp(170px,26vw,240px)}}
/* on a phone the document sits beside its text, so the page stays short */
@media (max-width:640px){.cell--doc{flex-direction:row;align-items:center;gap:18px}.cd-t{flex:1;min-width:0}
  .cell--doc .dm{width:34%;flex:none;padding-top:0;margin-top:0}
  .grid--4 .cell:nth-child(2n),.steps li:nth-child(2n){padding-left:0!important;border-left:0!important}}

/* page 04: one icon per step, at the same place in every column, level with the step number */
.steps li{position:relative}
.step-ic{position:absolute;top:18px;right:22px;width:44px;height:44px;color:var(--violet)}
.step-ic svg{display:block;width:100%;height:100%}

/* header sign-in link (below 360 px it moves into the menu) */
.signin{font-size:.95rem;text-decoration:none;color:var(--graphite);white-space:nowrap}
.signin:hover,.signin[aria-current="page"]{color:var(--violet)}
.signin[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav .nav-acct{display:none}
@media (max-width:359px){.signin{display:none}.nav .nav-acct{display:block}}

/* account page (08 §6.11) */
.acct{padding-bottom:clamp(48px,7vw,96px)}
.acct h1{max-width:none}

.acct-card{display:block;border:1px solid var(--line-strong);background:var(--card);padding:22px 22px 18px}
.acct-card .label{display:block;margin-bottom:10px}
.acct-google{display:flex;justify-content:center;width:100%;margin:2px 0 6px}.acct-google[hidden],.acct-or[hidden]{display:none}
.sec .acct-or{font-size:.9rem;color:var(--muted);text-align:center;margin:8px 0 14px}
.acct-row{display:flex;gap:10px;align-items:stretch}
.acct-row input{flex:1;min-width:0;font:400 1rem/1.2 var(--font-sans);color:var(--ink);background:#fff;border:1px solid var(--line-strong);padding:12px 14px;min-height:48px;border-radius:0}
.acct-row input:focus{outline:2px solid var(--violet);outline-offset:-1px;border-color:var(--violet)}
.acct-row input:disabled{background:var(--paper-2);color:var(--muted)}
#acct-c{font:500 1.35rem/1 var(--font-mono);letter-spacing:.35em;max-width:12ch}
#acct-g{font:500 .95rem/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.btn:disabled{background:none;color:var(--muted);border-color:var(--line-strong);cursor:default}
.sec .acct-note{font-size:.9rem;color:var(--muted);margin:10px 0 0;max-width:60ch}
.acct-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.linkbtn{font:inherit;background:none;border:0;padding:0;color:var(--violet);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}
.linkbtn:disabled{color:var(--muted);text-decoration:none;cursor:default}
.sec .acct-msg{min-height:1.6em;margin:16px 0 0;color:var(--graphite);font-size:.95rem}
.acct-msg.bad{color:var(--salmon-ink)}
.acct-gmsg{min-height:1.4em;margin-top:10px}.acct-gmsg.bad{color:var(--salmon-ink)}
.acct-done .buy-note{font-size:1rem;color:var(--ink)}
.acct-status{border:1px solid var(--line-strong);border-left:3px solid var(--violet);background:var(--card);padding:20px 22px;margin:0 0 24px}
.acct-status:focus{outline:none}
.acct-status.is-soon{border-left-color:#C98A00}
.acct-status.is-ended,.acct-status.is-none{border-left-color:var(--salmon-ink)}
.sec .acct-who{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 18px;margin:0 0 12px}
.acct-who b{color:var(--ink);text-transform:none;letter-spacing:0;font-weight:500;overflow-wrap:anywhere}
.acct-who .linkbtn{font:500 var(--t-label)/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.acct-who .acct-out{border:1px solid var(--line-strong);padding:7px 12px;text-decoration:none;color:var(--ink);background:var(--card)}
.acct-who .acct-out:hover{border-color:var(--ink)}
.sec .acct-until{font:400 clamp(1.8rem,3.4vw,2.8rem)/1.1 var(--font-display);margin:0}
.acct-until b{font-weight:400;color:var(--violet)}
.is-ended .acct-until b{color:var(--salmon-ink)}
.sec .acct-left{margin:6px 0 16px;color:var(--graphite)}
.acct-left:empty{display:none}
.acct-actions{display:flex;flex-wrap:wrap;gap:10px}
.acct-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.acct-box{border-top:1px solid var(--line-strong);padding-top:16px;scroll-margin-top:20px}
.sec .acct-h{font:400 clamp(1.5rem,2.2vw,1.9rem)/1.15 var(--font-display);margin:0 0 6px;max-width:none}
.acct-pcs{list-style:none;padding:0;margin:14px 0 0}
.acct-pcs li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.acct-pcs li:first-child{border-top:1px solid var(--line)}
.acct-pcs li > span{display:flex;flex-direction:column;min-width:0}
.acct-pcs b{font:500 .92rem/1.3 var(--font-mono);overflow-wrap:anywhere}
.acct-seen{font-size:.85rem;color:var(--muted)}
.acct-none{color:var(--muted)}
.acct-release{flex:none}
.acct-release.is-confirm{border-color:var(--salmon-ink);color:var(--salmon-ink)}
#acct-redeem{margin-top:14px}
.acct-orders .mono{font:500 .85rem/1.5 var(--font-mono)}
.acct-orders a{color:var(--violet)}
@media (max-width:760px){.acct-cols{grid-template-columns:1fr}}
@media (max-width:480px){
  .acct-row{flex-direction:column}
  #acct-c{max-width:none}
  .acct-card{padding:18px 16px 16px}
  .acct-status{padding:18px 16px}
}
.acct [hidden]{display:none!important}
@media (max-width:640px){
  table.data--stack.acct-orders tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
  table.data--stack.acct-orders td:first-child{grid-column:1 / -1}
  table.data--stack.acct-orders td[colspan]{grid-column:1 / -1}
}
/* the sign-in portal: the card is the page's one object, standing on the logo's two plates; the heading beside it;
   what the account holds below as one strip, read like a Word ribbon group (its name under it) */
.acct-top{display:block}
.acct-top:has(> .acct-in:not([hidden])){display:grid;grid-template-columns:minmax(320px,460px) minmax(0,640px);column-gap:clamp(48px,6vw,96px);align-items:center;margin-top:clamp(20px,3vw,36px)}
/* the form where the eye lands first (left); the heading beside it, both kept together on wide screens */
.acct-top:has(> .acct-in:not([hidden])) > .acct-in{order:-1;margin:14px 0 14px 14px}
.acct-intro .acct-title{margin:.5em 0 .45em}
.acct-top:has(> .acct-in:not([hidden])) .acct-title{margin:0;font-size:clamp(2.6rem,6.6vw,6.2rem);line-height:1;max-width:11ch;letter-spacing:-.01em}
.sec .acct-intro .acct-lead{margin:clamp(18px,2vw,26px) 0 0;max-width:44ch}
.acct-in{position:relative;isolation:isolate;margin:14px 14px 14px 14px}
.acct-in::before,.acct-in::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.acct-in::before{background:var(--lilac);inset:-14px 34% 38% -14px}
.acct-in::after{background:var(--salmon);inset:44% -14px -14px 30%}
.acct-portal .acct-card{background:#fff;padding:28px 28px 24px;border:1px solid var(--line-strong);box-shadow:none}
.sec .acct-ch{font:400 clamp(1.6rem,2.2vw,1.95rem)/1.1 var(--font-display);margin:0 0 20px;max-width:none}
.acct-field{display:block;width:100%;font:400 1rem/1.2 var(--font-sans);color:var(--ink);background:#fff;border:1px solid var(--line-strong);padding:12px 14px;min-height:50px;border-radius:0}
.acct-field:focus{outline:2px solid var(--violet);outline-offset:-1px;border-color:var(--violet)}
.acct-field:disabled{background:var(--paper-2);color:var(--muted)}
.acct-go{width:100%;margin-top:12px}
.acct-inside{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:var(--card)}
.acct-inside ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.acct-inside li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 18px 18px}
.acct-inside li + li{border-left:1px solid var(--line)}
.acct-inside li span{display:flex;flex-direction:column;gap:4px;color:var(--graphite);font-size:.88rem;line-height:1.45;max-width:24ch}
.acct-inside li b{font-weight:600;color:var(--ink);font-size:.95rem}
.acct-ic{flex:none;width:30px;height:30px;fill:none;stroke:var(--violet);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sec .acct-group{margin:0;padding:7px 0 9px;border-top:1px solid var(--line);text-align:center;font-size:.8rem;color:var(--muted)}
@media (max-width:900px){
  .acct-top:has(> .acct-in:not([hidden])){grid-template-columns:1fr;row-gap:36px}
  .acct-top:has(> .acct-in:not([hidden])) > .acct-in{order:0}
  .acct-top:has(> .acct-in:not([hidden])) .acct-title{max-width:16ch}
  .acct-in{max-width:460px}
  .acct-inside ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acct-inside li{flex-direction:row;align-items:flex-start;text-align:left;padding:18px 16px}
  .acct-inside li + li{border-left:0}
  .acct-inside li:nth-child(even){border-left:1px solid var(--line)}
  .acct-inside li:nth-child(n+3){border-top:1px solid var(--line)}
  .acct-inside li:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:520px){
  .acct-in,.acct-top:has(> .acct-in:not([hidden])) > .acct-in{margin:10px}
  .acct-in::before{inset:-10px 34% 38% -10px}.acct-in::after{inset:44% -10px -10px 30%}
  .acct-inside ul{grid-template-columns:1fr}
  .acct-inside li:nth-child(even){border-left:0}
  .acct-inside li + li{border-top:1px solid var(--line)}
}
/* one letter with several parts (home page 05: how it works, your documents, questions) */
.part + .part{margin-top:clamp(64px,9vw,128px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line-strong)}
.sec .part-k{margin:0;color:var(--violet)}
.sec .part-k + h2{margin-top:14px}
#faq{scroll-margin-top:24px}

/* buying (08 §6.2): the pay dialog over the pass cards, and the order box on the account page */
.buy{border:1px solid var(--line-strong);background:var(--card);color:var(--ink);padding:0;width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px)}
.buy::backdrop{background:rgba(17,20,23,.5)}
.buy-f{display:grid;gap:8px;padding:28px 26px 22px;position:relative}
.buy-close{position:absolute;top:10px;right:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;background:none;color:var(--graphite);font:400 28px/1 var(--font-sans);cursor:pointer}
.buy-close:hover{color:var(--violet);border-color:var(--line-strong)}
.buy-close:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.buy-f h2{margin:0 0 10px;font:400 1.9rem/1.1 var(--font-display)}
.buy-f .label{color:var(--muted)}
.buy-f .acct-field{width:100%;margin:0 0 8px}
.buy-note,.buy-terms{margin:4px 0 0;font-size:.9rem;color:var(--graphite)}
.buy [hidden]{display:none!important}
.buy-mine{margin:-8px 0 14px;font-size:.9rem;color:var(--violet)}
.buy-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.buy-msg{min-height:1.4em;margin:6px 0 0;font-size:.92rem;color:var(--graphite)}
.buy-msg.bad{color:var(--salmon-ink)}
.pass button.btn{width:100%;margin-top:auto;cursor:pointer}
.acct-order{margin:0 0 1.6em}.acct-order p{margin:0}.acct-order p + p{margin-top:12px}
.acct-order.bad{border-left-color:var(--salmon-ink)}
/* download (12-WEBSITE §2): one card, Windows and its button on one row, Mac's "not yet" under it; the checksum in full */
.dl{margin:32px 0 48px;border:1px solid var(--line-strong);background:var(--card)}
.dl-win{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,auto);gap:20px 28px;align-items:center;padding:28px 32px}
.dl-ic .acct-ic{width:56px;height:56px;stroke:var(--violet);stroke-width:1.2}
.dl-kick{display:block;font:500 .72rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.dl-what h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 6px}
.dl-what p{margin:0;color:var(--graphite);max-width:48ch}
.dl-get{max-width:340px;justify-self:end}
.dl-get .btn{margin:0}.dl-get .fine{margin:10px 0 0}
.dl-sha{margin:0;padding:12px 32px;border-top:1px solid var(--line)}
.sha{font-family:var(--font-mono);font-size:.82rem;overflow-wrap:anywhere;word-break:break-all}
.dl .dl-no,.dl .dl-sha{margin:0;max-width:none}
.dl-no{display:flex;gap:12px;align-items:flex-start;padding:16px 32px;border-top:1px solid var(--line);background:var(--paper-2);color:var(--graphite);font-size:.95rem}
.dl-no .acct-ic{flex:none;width:20px;height:20px;margin-top:2px;stroke:var(--salmon-ink)}
.dl-no b{font-weight:600;color:var(--ink)}
.tablewrap + .fine{margin-top:14px}
ul.notes{margin:0 0 32px;padding-left:1.2em}ul.notes li{margin:4px 0}
@media (max-width:760px){.dl-win{grid-template-columns:auto minmax(0,1fr);align-items:start;padding:22px 18px}.dl-get{grid-column:1/-1;justify-self:stretch;max-width:none}.dl-get .btn{width:100%}.dl-sha,.dl-no{padding-left:18px;padding-right:18px}.dl-ic .acct-ic{width:40px;height:40px}}

/* invite a friend (05 D44) */
.acct-invite .acct-ilink input{font-family:var(--font-mono);font-size:.92rem}
.sec .acct-h3{font:600 1rem/1.3 var(--font-sans);margin:22px 0 0}
.acct-imsg.bad{color:var(--salmon-ink,#A8442A)}
.acct-elig{display:inline-block;margin:12px 0 4px;padding:6px 10px;font-size:.9rem;border:1px solid var(--violet);color:var(--violet);background:var(--card)}
.acct-elig::before{content:"\2713  "}
.acct-elig.no{border-color:var(--line-strong);color:var(--muted)}
.acct-elig.no::before{content:"\2715  "}
.sec .acct-linkcode{max-width:62ch;margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--violet);background:var(--card);font-size:.95rem}
.invite-bar{margin:0;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line-strong);border-left:3px solid var(--violet);font-size:.95rem}