/* trendoo.app. Deck in its Blocks form (docs/design-system.md, section 11): a white page, solid blocks of colour
   that each mean something, Archivo throughout, photographs on the posts. The home page follows one example,
   Mara, a strength coach, from one viral post to a week of posts; /pricing shares its shell and its plan cells. */
:root{--paper:#fff;--soft:#f4f4f6;--ink:#121215;--grey:#5d5d66;--line:#e4e4e9;--edge:#c9c9d2;--cobalt:#2b4dff;--leaf:#1f9c66;--yolk:#ffcd2e;--coral:#ff5a3d;--plum:#7c4dff;--rose:#ff4d8d;--w:1200px;--r:22px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.5;font-variation-settings:"wdth" 100;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.skip{position:absolute;left:16px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:999px;z-index:100;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:24px}
/* The masthead is sticky: an anchor lands under it, not behind it */
[id]{scroll-margin-top:88px}

/* A colour and the text colour readable on it, as in dashboard/static/app.css. Never pair by hand. */
.c-coral{--c:var(--coral);--on:var(--ink)}
.c-cobalt{--c:var(--cobalt);--on:#fff}
.c-yolk{--c:var(--yolk);--on:var(--ink)}
.c-leaf{--c:var(--leaf);--on:var(--ink)}
.c-plum{--c:var(--plum);--on:#fff}
.c-rose{--c:var(--rose);--on:var(--ink)}
.c-ink{--c:var(--ink);--on:#fff}
/* An account may wear a colour of its own (any #RRGGBB, as on the dashboard): the coffee account's brown, which
   also keeps it off the leaf of step 5's block */
.c-brew{--c:#7a4a2c;--on:#fff}
/* The five steps own a colour each: 1 reads (plum, it is Research), 2 profile (rose), 3 pictures (yolk),
   4 product (coral), 5 many posts (leaf). */
.s1{--c:var(--plum);--on:#fff}
.s2{--c:var(--rose);--on:var(--ink)}
.s3{--c:var(--yolk);--on:var(--ink)}
.s4{--c:var(--coral);--on:var(--ink)}
.s5{--c:var(--leaf);--on:var(--ink)}
/* A step's number in a filled circle of its colour; an account's handle on a pill of its colour; a profile's
   outlined ink tag, squarer than an account's pill, so the two never read as the same thing. */
.n{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--c,var(--ink));color:var(--on,#fff);font-size:13.5px;font-weight:700;line-height:1}
.acct{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--c,var(--soft));color:var(--on,var(--ink));font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap}
.prof{display:inline-block;padding:1px 9px;border:1.5px solid var(--ink);border-radius:7px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.5;white-space:nowrap}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,var(--leaf))}

/* Buttons: ink on white, the second action outlined, yolk on a colour or on ink */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border:0;border-radius:999px;text-decoration:none;font-size:16.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.btn.ink{background:var(--ink);color:#fff}
.btn.ink:hover{background:var(--cobalt)}
.btn.line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge)}
.btn.line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.yolk{background:var(--yolk);color:var(--ink)}
.btn.sm{height:40px;padding:0 18px;font-size:15px}

/* Masthead: the logo, the page links as quiet pills, Log in, and the one action as an ink pill. It stays at the
   top while the page scrolls, over a hairline and a light blur of what passes under it. */
.mast{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 1px 0 var(--line)}
.mast-in{display:flex;align-items:center;gap:28px;height:72px}
.wordmark{display:inline-flex;color:var(--ink);text-decoration:none}
/* The logo is one currentColor SVG, its o's drawn as eyes: the height sets its size */
.wordmark svg{display:block;height:22px;width:auto}
.mast nav{display:flex;gap:2px;font-size:15px;font-weight:500}
.mast nav a,.mast .login{padding:9px 14px;border-radius:999px;text-decoration:none}
.mast nav a:hover,.mast .login:hover{background:var(--soft)}
.mast nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.mast .act{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:15px;font-weight:500}

/* A post: the unit of content, in any format. A photograph under a darkening, or a colour slide; the hook in
   the hook voice, sized to the post's own width; a slideshow's bars or a video's play mark; the coral Ad tag. */
.post{position:relative;container-type:inline-size;aspect-ratio:9/16;flex:none;border-radius:14px;overflow:hidden;isolation:isolate;background:var(--c,var(--ink)) var(--img,none) center/cover no-repeat;color:var(--on,#fff)}
.post.f45{aspect-ratio:4/5}
.post.f11{aspect-ratio:1}
.post.f169{aspect-ratio:16/9}
.post.ph{color:#fff}
.post.ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,10,14,.78),rgba(10,10,14,.1) 58%,rgba(10,10,14,0))}
.post .hook{position:absolute;left:8cqi;right:8cqi;bottom:9cqi;font-size:12cqi;font-weight:800;line-height:.98;letter-spacing:-.005em;font-variation-settings:"wdth" 74;text-wrap:balance}
.post.f45 .hook,.post.f11 .hook{font-size:10cqi}
.post:has(.meta) .hook{bottom:15cqi}
.post .bars{position:absolute;top:5cqi;left:5cqi;right:5cqi;display:flex;gap:1.6cqi}
.post .bars i{flex:1;height:max(2px,1.1cqi);border-radius:2px;background:currentColor;opacity:.4}
.post .bars i:first-child{opacity:1}
.post .play{position:absolute;top:6cqi;right:6cqi;display:grid;place-items:center;width:14cqi;height:14cqi;min-width:18px;min-height:18px;border-radius:50%;background:rgba(255,255,255,.92)}
.post .play::before{content:"";margin-left:12%;border-style:solid;border-width:.28em 0 .28em .46em;border-color:transparent transparent transparent var(--ink);font-size:max(9px,7cqi)}
.post .ad{position:absolute;top:5cqi;right:5cqi;padding:.2em .6em;border-radius:999px;background:var(--coral);color:var(--ink);font-size:max(9px,5.4cqi);font-weight:700;line-height:1.4}
/* The Ad tag sits under the story bars; on a video it moves left of the play mark */
.post .bars ~ .ad{top:10cqi}
.post .play ~ .ad{right:auto;left:5cqi;top:6cqi}
.post .meta{position:absolute;left:8cqi;right:8cqi;bottom:4cqi;display:flex;justify-content:space-between;font-size:max(9px,4.6cqi);font-weight:600;opacity:.9}

/* A section: 120px apart; its head is a headline in the hook voice and one grey line */
.sec{padding-top:120px}
.sh{max-width:760px}
.sh h2,.faq-w h2{font-size:clamp(38px,4.6vw,60px);font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.01em;line-height:.94;text-wrap:balance}
.sh p{margin-top:16px;max-width:60ch;font-size:19px;color:var(--grey)}
.sh.center{margin-inline:auto;text-align:center}
.sh.center p{margin-inline:auto}

/* Hero: centred. The headline in two lines of one sentence each, one grey line, the action and the
   way down the page, then one picture of the whole product. */
.hero{padding-top:36px;text-align:center}
.hero h1{font-size:clamp(56px,8vw,118px);font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.015em;line-height:.9}
.hero h1 span{display:block}
.hero .sub{margin:22px auto 0;max-width:58ch;font-size:20px;line-height:1.45;color:var(--grey)}
.hero .cta{display:flex;justify-content:center;gap:12px;margin-top:28px}
.hero .note{margin-top:14px;font-size:14.5px;color:var(--grey)}

/* The hero picture: one viral post, trendoo's eyes reading it, and the week of posts that comes out */
.flow{display:grid;grid-template-columns:250px minmax(0,1fr) 640px;align-items:start;margin-top:48px;text-align:left}
.flow-lab{display:block;margin-bottom:12px;font-size:14px;font-weight:600;color:var(--grey)}
.flow-ref .post{width:250px;box-shadow:0 0 0 1px rgba(18,18,21,.06)}
.flow-mid{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:26px}
.eyes-row{position:relative;display:flex;justify-content:center;width:100%}
.eyes-row::before{content:"";position:absolute;left:14px;right:14px;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(18,18,21,.3) 0 6px,transparent 6px 12px)}
.eyes-row::after{content:"";position:absolute;right:8px;top:50%;margin-top:-6px;border:6px solid transparent;border-left:9px solid rgba(18,18,21,.45);border-right:0}
.eyes{position:relative;z-index:1;display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:var(--yolk);box-shadow:0 0 0 10px #fff}
.eyes svg{width:78px;height:auto;color:var(--ink)}
.flow-steps{position:relative;z-index:1;display:grid;gap:8px;margin-top:22px;background:#fff}
.flow-steps li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;white-space:nowrap}
.flow-steps .dot{width:10px;height:10px}
.wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.wall .col{display:flex;flex-direction:column;gap:8px;min-width:0}
.wall .col:nth-child(even) .post:first-of-type{margin-top:30px}
.wall .acct{align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:2px 7px;font-size:10.5px}

/* How it works: the story in five chapters. The number rides a rail down the left in the step's colour, the words
   stay in view while the picture passes, and the picture sits on a block of the step's colour holding white
   cards: a colour block or white, nothing in between. */
.chaps{margin-top:72px}
.chap{position:relative;display:grid;grid-template-columns:400px minmax(0,1fr);gap:64px;padding-bottom:96px}
.chap:last-child{padding-bottom:0}
.chap::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;border-radius:1px;background:var(--c)}
.chap:last-child::before{bottom:auto;height:220px;background:linear-gradient(var(--c),rgba(31,156,102,0))}
.chap-l{position:sticky;top:118px;align-self:start;padding-left:76px}
.chap-l .n{position:absolute;left:0;top:0;width:44px;height:44px;font-size:17px;box-shadow:0 0 0 8px #fff}
.chap-l h3{font-size:50px;font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.01em;line-height:.94;text-wrap:balance}
.chap-l p{margin-top:16px;font-size:17px;color:var(--grey)}
.facts{margin-top:24px;border-top:1px solid var(--line)}
.facts li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:500}
.vis{display:flex;align-items:center;justify-content:center;min-height:620px;padding:44px;border-radius:var(--r);background:var(--c);color:var(--on)}
.wcard{background:#fff;color:var(--ink);border-radius:16px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.card-h span{font-size:13px;color:var(--grey)}
.card-h h4{font-size:17px;font-weight:700;font-variation-settings:"wdth" 112}

/* 1: what trendoo read of the post */
.v1{display:flex;align-items:center;gap:24px;width:100%}
.v1 .post{width:190px}
.read{flex:1;min-width:0;padding:22px 24px}
.read dl div{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.read dl div:last-child{border-bottom:0;padding-bottom:0}
.read dt,.profile dt{color:var(--grey)}
.read dd,.profile dd{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{padding:1px 9px;border:1px solid var(--edge);border-radius:999px;font-size:12.5px;font-weight:500}

/* 2: the content profile and the hooks written in its voice, three of them picked */
.v2{display:grid;gap:16px;width:100%}
.profile,.hooks{padding:20px 24px}
.profile dl{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.profile dl div{padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.profile dl div:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
.profile dt{font-size:12.5px}
.hooks li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:700;font-variation-settings:"wdth" 80}
.hooks li:last-child{border-bottom:0;padding-bottom:0}
.hooks li.off{color:var(--grey);font-weight:600}
.tick{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--edge)}
.on > .tick{background:var(--ink);box-shadow:none}
.on > .tick::after{content:"";width:10px;height:5px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* 3: the picture library, each picture with where it came from */
.lib{width:100%;padding:22px 24px}
.lib-count{display:flex;align-items:baseline;gap:8px}
.lib-count b{font-size:44px;line-height:1;font-weight:800;font-variation-settings:"wdth" 74}
.lib-count span{font-size:15px;font-weight:600}
.lib-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.lib-grid figure{display:grid;gap:7px}
.lib-grid .ph{aspect-ratio:1;border-radius:10px;background:var(--img) center/cover}
.lib-grid figcaption{font-size:12.5px;font-weight:500;color:var(--grey)}
.lib .pill{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--edge);font-size:13.5px;font-weight:600}

/* 4: the product, and the ads made from it: its screen in a phone on the photo, its chip, a line */
.v4{display:grid;gap:18px;width:100%}
.prod{display:flex;align-items:center;gap:16px;padding:18px 20px}
.picon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--coral)}
.picon svg{width:28px;height:28px}
.prod-t{flex:1;min-width:0}
.prod-t b{display:block;font-size:18px;font-weight:700;font-variation-settings:"wdth" 112}
.prod-t span{font-size:14px;color:var(--grey)}
.shots{display:flex;gap:6px}
.shot{display:flex;flex-direction:column;gap:3px;width:34px;aspect-ratio:9/19;padding:5px 4px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.shot i{height:3px;border-radius:2px;background:var(--edge)}
.shot i:first-child{width:60%;background:var(--ink)}
.shot b{margin-top:auto;height:5px;border-radius:3px;background:var(--coral)}
.shot.dark{background:var(--ink)}
.shot.dark i{background:#3a3a44}
.shot.dark i:first-child{background:#fff}
.make{display:flex;align-items:center;gap:14px}
.make span{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600}
.make::after{content:"";flex:1;height:2px;background:var(--ink);opacity:.2}
.ads{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.phone{position:absolute;right:8cqi;top:14cqi;width:34cqi;aspect-ratio:9/19;padding:1.8cqi;border-radius:5cqi;background:var(--ink)}
.phone.low{top:auto;right:auto;bottom:40cqi;left:8cqi}
.phone .scr{display:flex;flex-direction:column;gap:2.4cqi;height:100%;padding:4cqi 3cqi;border-radius:3.6cqi;background:#fff}
.phone .scr i{height:2.2cqi;border-radius:2px;background:var(--edge)}
.phone .scr i:first-child{width:60%;background:var(--ink)}
.phone .scr b{margin-top:auto;height:4cqi;border-radius:3cqi;background:var(--coral)}
.pchip{position:absolute;left:8cqi;bottom:28cqi;display:inline-flex;align-items:center;gap:2cqi;padding:1.2cqi 3.4cqi 1.2cqi 1.4cqi;border-radius:999px;background:#fff;color:var(--ink);font-size:max(9px,5.2cqi);font-weight:700;white-space:nowrap}
.pchip i{display:grid;place-items:center;width:6.6cqi;height:6.6cqi;min-width:14px;min-height:14px;border-radius:50%;background:var(--ink);color:var(--coral)}
.pchip svg{width:70%;height:70%}
.dur{position:absolute;right:6cqi;top:22cqi;padding:.1em .5em;border-radius:6px;background:rgba(18,18,21,.7);color:#fff;font-size:max(9px,5cqi);font-weight:600}

/* 5: the run, a column per account, running past the block's lower edge: there are more */
.v5{flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow:hidden;padding:36px 32px 0}
.v5-head{display:flex;justify-content:space-between;align-items:baseline;width:100%;margin-bottom:22px}
.v5-head b{font-size:34px;line-height:1;font-weight:800;font-variation-settings:"wdth" 74}
.v5-head span{font-size:14.5px;font-weight:600}
.wall5{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;width:100%;height:540px;overflow:hidden}
.wall5 .col{display:flex;flex-direction:column;gap:10px;min-width:0}
.wall5 .col:nth-child(even) .post:first-of-type{margin-top:26px}
.wall5 .acct{align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:2px 7px;font-size:10.5px}

/* Then it learns: the page's one ink section, edge to edge. The numbers are an example, and say so. */
.learn{margin-top:120px;padding-block:104px;background:var(--ink);color:#fff}
.learn-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px;align-items:center}
.learn h2{font-size:clamp(44px,5.2vw,72px);font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.01em;line-height:.92}
.learn .lead{margin-top:18px;max-width:44ch;font-size:19px;color:#b9b9c4}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid #34343c}
.stats div{padding-top:18px}
.stats b{display:block;font-size:52px;line-height:1;font-weight:800;font-variation-settings:"wdth" 74}
.stats span{font-size:14.5px;color:#b9b9c4}
.learn .ex{margin-top:16px;font-size:13px;color:#8b8b96}
.chart{padding:24px 24px 18px;border:1px solid #34343c;border-radius:var(--r)}
.chart-h{display:flex;justify-content:space-between;font-size:14px;color:#b9b9c4}
.chart-h b{color:#fff;font-weight:600}
.chart svg{display:block;width:100%;height:auto;margin-top:14px}
.chart .days{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:#8b8b96}
.tops{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.tops li{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #34343c;border-radius:16px;font-size:13px;color:#b9b9c4}
.tops .post{width:54px}
.tops div{min-width:0}
.tops b{display:block;font-size:20px;line-height:1.1;font-weight:800;font-variation-settings:"wdth" 74;color:#fff}
.tops .rank{display:block;margin-bottom:4px}

/* Accounts: a white cell per account, one of its posts beside its niche in the hook voice, its tag, and the content
   profile it runs on with that profile's voice. Three across, two down: six niches. */
.accs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.accs li{display:flex;gap:18px;padding:16px;border:1px solid var(--edge);border-radius:var(--r)}
.accs .post{width:108px;border-radius:12px}
.acc-t{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding-top:6px}
.acc-t h3{font-size:30px;font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.01em;line-height:.95}
.acc-p{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);align-self:stretch;font-size:14.5px;color:var(--grey)}

/* Pricing (pricing.html, and the home page's pricing section): the three plans as white cells with the edge
   and the block radius, each listing its three terms. Yolk marks the action (Start) and the first month's 50% off,
   the one offer. On pricing.html the top-up and what a credit buys follow in the same cells. */
.pricing{padding-block:44px 0}
.pricing h1{font-size:clamp(44px,6.4vw,84px);line-height:.9;font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.015em;text-wrap:balance}
.pricing .lede{margin-top:16px;max-width:60ch;font-size:18px;line-height:1.5;color:var(--grey);text-wrap:balance}
/* The cells: a plan's name and its credits, its three terms as options (hairline boxes, the chosen one outlined in
   ink): the term with what it saves under it (the first month's 50% off as a yolk pill), and on the right the full
   monthly price struck through over what it comes to a month. Under them the yolk button, full width, and one grey
   line on what is paid -- both follow the chosen term (:has, no script). */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px}
.plan,.topup,.buys{min-width:0;padding:24px 26px 26px;border:1px solid var(--edge);border-radius:var(--r)}
.plan{display:flex;flex-direction:column}
.plan-name,.pricing h2{font-size:28px;line-height:1;font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.005em}
.plan .cr{margin-top:8px;font-size:15px;color:var(--grey)}
.plan .cr b{font-weight:600;color:var(--ink)}
.terms{display:flex;flex-direction:column;gap:10px;margin:20px 0 18px}
.opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .15s}
.opt:hover{border-color:var(--edge)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
.opt:has(input:focus-visible){outline:3px solid var(--cobalt);outline-offset:2px}
.opt-name{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:16px;font-weight:700}
.opt-off{padding:2px 9px;border-radius:999px;background:var(--yolk);color:var(--ink);font-size:12.5px;font-weight:700}
.opt-save{font-size:13.5px;font-weight:500;color:var(--grey)}
.opt-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:13px;color:var(--grey);white-space:nowrap}
.opt-price s{font-size:15px;font-weight:400;color:var(--grey);text-decoration-thickness:1px;text-decoration-color:currentColor}
.opt-price .now{font-size:13.5px}
.opt-price b{font-size:28px;line-height:1;font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.01em;color:var(--ink)}
.plan .btn{display:flex;width:100%;margin-top:auto;height:50px}
.plan .btn.yolk:hover{background:var(--ink);color:#fff}
.plan .go-o,.plan .then-q,.plan .then-y{display:none}
.plan:has(.opt input[value=q]:checked) .go-m,.plan:has(.opt input[value=y]:checked) .go-m,
.plan:has(.opt input[value=q]:checked) .then-m,.plan:has(.opt input[value=y]:checked) .then-m{display:none}
.plan:has(.opt input[value=q]:checked) .go-o,.plan:has(.opt input[value=y]:checked) .go-o,
.plan:has(.opt input[value=q]:checked) .then-q,.plan:has(.opt input[value=y]:checked) .then-y{display:block}
.plan .then{min-height:2.9em;margin-top:10px;font-size:13px;line-height:1.45;color:var(--grey)}
.pricing .amt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:15px;color:var(--grey)}
.pricing .amt b{font-size:64px;line-height:.9;font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.01em;color:var(--ink)}
.pricing .sub{margin-top:8px;font-size:14px;color:var(--grey)}
.topup{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 32px;margin-top:12px;padding-block:22px 24px}
.topup .amt b{font-size:44px}
.topup .sub{margin:0 0 0 auto;font-size:15px}
.buys{margin-top:12px}
.buys ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin-top:16px}
.buys li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:16px;font-weight:600}
.buys li:nth-last-child(-n+2){padding-bottom:0}
.buys small{display:block;margin-top:1px;font-size:13.5px;font-weight:400;color:var(--grey)}
.buys li > span:last-child{flex:none;font-size:14px;font-weight:400;color:var(--grey)}
.buys li b{margin-right:3px;font-size:24px;line-height:1;font-weight:800;font-variation-settings:"wdth" 74;color:var(--ink)}
.pricing .fine{margin-top:16px;font-size:13px;color:var(--grey)}
/* On the home page the plans sit under a centred head, and one line under them leads to the rest */
.plans-more{margin-top:18px;font-size:14.5px;color:var(--grey);text-align:center}
.plans-more a{color:var(--ink);font-weight:600;text-underline-offset:3px}

/* FAQ: the questions as a hairline list in one centred column; the first stays open */
.faq-w{max-width:820px;margin-inline:auto}
.faq-w h2{margin-bottom:32px;text-align:center}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-size:19px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 4v14M4 11h14' stroke='%23121215' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{max-width:70ch;padding:0 48px 24px 0;font-size:16.5px;color:var(--grey)}

/* Closing: a yolk block, the promise in the hook voice, the action in ink */
.close{padding:96px 32px;border-radius:var(--r);background:var(--yolk);text-align:center}
.close h2{font-size:clamp(52px,7.4vw,108px);font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.015em;line-height:.9}
.close h2 span{display:block}
.close .btn{margin-top:34px}
.close .btn.ink:hover{background:#fff;color:var(--ink)}
.close p{margin-top:14px;font-size:15px;color:rgba(18,18,21,.78)}

/* Legal pages (privacy.html, terms.html): the headline in the hook voice, the date it last changed, then the text
   in one reading column at the reading size, sections under wide-voice heads, tables on hairlines. */
.legal{max-width:760px;padding-top:56px}
.legal h1{font-size:clamp(48px,6.4vw,84px);font-weight:800;font-variation-settings:"wdth" 74;letter-spacing:-.015em;line-height:.9}
.legal .updated{margin-top:14px;font-size:14.5px;color:var(--grey)}
.legal .intro{margin-top:28px;font-size:19px}
.legal h2{margin-top:52px;font-size:24px;font-weight:700;font-variation-settings:"wdth" 112;letter-spacing:-.01em;line-height:1.2}
.legal h3{margin-top:26px;font-size:17px;font-weight:700}
.legal p,.legal ul{margin-top:12px}
.legal p,.legal li{font-size:17px;line-height:1.6}
.legal ul{display:grid;gap:8px}
.legal li{position:relative;padding-left:22px}
.legal li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.legal a{text-underline-offset:3px}
.legal code{font-size:14px}
.legal .table{margin-top:16px;overflow-x:auto}
.legal table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.legal th,.legal td{padding:11px 16px 11px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.legal th{font-size:13.5px;font-weight:600;color:var(--grey)}
.legal td:first-child{font-weight:600;white-space:nowrap}

/* Footer: the logo and the promise, then the links in columns; the only way to every page on a phone */
.foot{margin-top:120px;border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-block:56px 40px}
.foot-in p{max-width:30ch;margin-top:14px;font-size:15px;color:var(--grey)}
.foot h2{margin-bottom:14px;font-size:14px;font-weight:600}
.foot ul{display:grid;gap:10px;font-size:15px;color:var(--grey)}
.foot ul a{text-decoration:none}
.foot ul a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot-end{display:flex;justify-content:space-between;padding-block:22px 34px;background:linear-gradient(var(--line),var(--line)) 24px 0/calc(100% - 48px) 1px no-repeat;font-size:13.5px;color:var(--grey)}

@media (max-width:1180px){
  .flow{grid-template-columns:210px minmax(0,1fr) 520px}
  .flow-ref .post{width:210px}
  .chap{grid-template-columns:340px minmax(0,1fr);gap:40px}
  .chap-l h3{font-size:42px}
}
@media (max-width:960px){
  .mast nav{display:none}
  .flow{grid-template-columns:1fr;justify-items:center;gap:28px}
  .flow-ref{text-align:center}
  .flow-ref .post{width:200px;margin-inline:auto}
  .flow-mid{padding:0}
  .eyes-row::before,.eyes-row::after{display:none}
  .flow-right{width:100%;text-align:center}
  .chap{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:72px}
  .chap::before{display:none}
  .chap-l{position:static;padding-left:0}
  .chap-l .n{position:static;margin-bottom:16px}
  .vis{min-height:0}
  .learn-in{grid-template-columns:1fr;gap:40px}
  .accs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opt{padding:12px 13px}
  .opt-price b{font-size:24px}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-in > div:first-child{grid-column:1 / -1}
}
@media (max-width:760px){
  .plans,.buys ul{grid-template-columns:minmax(0,1fr)}
  .buys li:nth-last-child(2){padding-bottom:12px}
  .topup .sub{flex-basis:100%;margin:0}
}
/* A phone: sections 72px apart, the headline sized to the width, the buttons stacked, fewer columns of posts */
@media (max-width:640px){
  .mast .login{display:none}
  .sec{padding-top:72px}
  .hero{padding-top:28px}
  .hero h1{font-size:13vw}
  .hero h1 span{text-wrap:balance}
  .hero .sub{font-size:17.5px}
  .hero .cta{flex-direction:column;align-items:stretch}
  .flow-ref .post{width:170px}
  .eyes{width:100px;height:100px}
  .eyes svg{width:60px}
  .wall{grid-template-columns:repeat(3,1fr)}
  .wall .col:nth-child(n+4) .post:last-child{display:none}
  .chaps{margin-top:40px}
  .chap-l h3{font-size:38px}
  .vis{padding:18px}
  .v1{flex-direction:column}
  .v1 .post{width:170px}
  .read{width:100%}
  .read dl div{grid-template-columns:92px 1fr}
  .profile dl{grid-template-columns:1fr}
  .profile dl div:nth-last-child(2){padding-bottom:10px;border-bottom:1px solid var(--line)}
  .lib{padding:18px}
  .lib-grid{gap:8px}
  .lib-grid figcaption{font-size:11px}
  .prod .shots{display:none}
  .ads{gap:8px}
  .wall5{grid-template-columns:repeat(3,1fr);height:520px}
  .wall5 .col:nth-child(n+4){display:none}
  .learn{margin-top:72px;padding-block:72px}
  .stats b{font-size:38px}
  .tops{grid-template-columns:1fr}
  .accs{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .close{padding:64px 20px}
  .close h2{font-size:12.5vw}
  .foot{margin-top:72px}
  .pricing{padding-top:20px}
  .pricing h1{font-size:clamp(38px,11vw,56px)}
  .pricing .lede{font-size:16px}
  .plans{margin-top:24px}
  .plan,.topup,.buys{padding:20px 20px 22px;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}