@font-face{font-family:"Host Grotesk";font-style:normal;font-display:swap;font-weight:300 800;src:url("assets/fonts/host-grotesk-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Host Grotesk";font-style:normal;font-display:swap;font-weight:300 800;src:url("assets/fonts/host-grotesk-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* The first design's colours, with sizes a person can read without being shouted at.
   Sizes: one headline, one section heading, one lead, one body, one small. Space: one step between sections, one under headings. */
:root{
  --pink:#ff3d7f;--ink:#0d060b;--plum:#470c35;--paper:#fff;--soft:#f6f1f4;--sun:#ffd21f;--blue:#0f3df0;--mint:#7fe3bc;--mute:#5a4f58;--quiet:#33292f;--good:#0b7a43;
  --font:"Host Grotesk","Helvetica Neue",Arial,"Apple SD Gothic Neo","Noto Sans CJK KR","Malgun Gothic","Hiragino Sans","PingFang SC","Microsoft YaHei",sans-serif;
  --m:clamp(16px,2.6vw,32px);
  --bar:72px;
  --h1:clamp(2.625rem,5vw,4.5rem);
  --h2:clamp(1.875rem,3.3vw,2.875rem);
  --lead:clamp(1.125rem,1rem + .4vw,1.3125rem);
  --body:1.0625rem;
  --small:.9375rem;
  --space:clamp(56px,7vw,100px);
  --under:clamp(28px,3.2vw,44px);
  --bubble:clamp(16px,1.6vw,22px) clamp(16px,1.6vw,22px) clamp(16px,1.6vw,22px) 5px;
  --bubble-sm:13px 13px 13px 3px;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --bar-bg:var(--pink);--foot-bg:var(--pink);--foot-ink:var(--ink);--foot-muted:var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body,h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
body{font-family:var(--font);font-size:var(--body);line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-kerning:normal;overflow-x:clip}
h1,h2,h3{text-wrap:balance}
h1{font-size:var(--h1);font-weight:700;letter-spacing:-.03em;line-height:1.05}
h2{font-size:var(--h2);font-weight:650;letter-spacing:-.025em;line-height:1.12}
h3{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
p{text-wrap:pretty}
a{color:inherit;text-underline-offset:.18em}
button,input{font:inherit;color:inherit}
code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* taste-skill-ignore: visually hidden text */
.skip{position:absolute;left:var(--m);top:12px;z-index:50;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:var(--ink);color:#fff;border-radius:var(--bubble-sm)} /* taste-skill-ignore: skip link, hidden until focused */
.skip:focus{width:auto;height:auto;padding:10px 16px;clip-path:none}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--m)}
.head{display:grid;gap:12px;max-width:720px}
.head>p,.words>p{font-size:var(--lead);line-height:1.42}

/* Buttons take the corner of the logo's bubble. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--bubble-sm);border:2px solid transparent;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .15s var(--ease),background .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:#fff}
.btn-pink{background:var(--pink);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-line{border-color:#fff;color:#fff}
.g{flex:none}

/* The bar: starts on the pink, and turns white once it has left it. It lines up with the page. */
body .bar{padding-inline:max(var(--m),calc((100% - 1200px)/2 + var(--m)))}
body .foot-inner{max-width:calc(1200px - 2*var(--m))}
.bar.past{--bar-bg:#fff}
.bar.past .logo-plain{opacity:1}
.bar.past .logo-pink{opacity:0}

/* The hero. Three columns: what it is, the chat where a person approves, and the posts that result. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--pink);padding-block:clamp(14px,2vw,28px) clamp(32px,3.6vw,52px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,4.7fr) minmax(0,3.6fr);grid-template-rows:auto 1fr;column-gap:clamp(20px,2.2vw,28px);row-gap:clamp(18px,2vw,26px)}
.hero h1{grid-column:1/3}
.hero-copy{grid-column:1;display:grid;gap:18px;align-content:start}
.lead{font-size:clamp(1.0625rem,.96rem + .32vw,1.1875rem);line-height:1.45;font-weight:500}
.hero-actions{display:flex;flex-wrap:wrap;gap:8px}
.hero-actions .btn{padding-inline:16px}
.hero-note{font-weight:500}

/* The rings of the logo's dot. Each is a bigger copy of the bubble. They ripple out when a post is approved, then settle. */
.reach{position:absolute;left:var(--rx,62%);top:var(--ry,60%);width:2px;height:2px;overflow:visible;z-index:-1;pointer-events:none}
.reach.mid{--rx:50%;--ry:50%}
.reach .r{fill:none;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:var(--o);transform:scale(var(--s))}
.reach .r1{--s:6;--o:.3;--n:0}.reach .r2{--s:8.4;--o:.27;--n:1}.reach .r3{--s:11.4;--o:.24;--n:2}.reach .r4{--s:15;--o:.21;--n:3}.reach .r5{--s:19.5;--o:.18;--n:4}.reach .r6{--s:25;--o:.15;--n:5}.reach .r7{--s:32;--o:.12;--n:6}.reach .r8{--s:41;--o:.09;--n:7}.reach .r9{--s:53;--o:.07;--n:8}
@keyframes ring{0%{opacity:0;transform:scale(calc(var(--s)*.35))}30%{opacity:.8;stroke-width:2.5}100%{opacity:var(--o);transform:scale(var(--s));stroke-width:1.5}}
.js .burst>.reach .r{animation:ring 1.2s var(--ease) both;animation-delay:calc(var(--n)*45ms)}

/* Interface fragments */
[data-ui]{font-size:15px;line-height:21px;letter-spacing:0;font-variant-numeric:tabular-nums}
[data-ui] strong{font-weight:600}
.me{justify-self:end;margin-left:auto;width:fit-content;max-width:88%;padding:9px 13px;background:#f1eaee;border-radius:16px 16px 4px 16px;color:var(--ink)}
.bot{max-width:60ch}
.card{background:#fff;color:var(--ink);border:1px solid #e9e3e7;border-radius:16px 16px 16px 4px;overflow:hidden}
.card-head{display:flex;align-items:center;gap:8px;padding:10px 12px}
.card-head strong{margin-right:auto}
.card-body{display:flex;gap:12px;padding:0 12px 10px;align-items:center}
.card-img{flex:none;width:64px;height:64px;border-radius:10px 10px 10px 3px;object-fit:cover}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#faf6f8}
.when{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.moment{width:9px;height:9px;border-radius:50%;background:var(--pink);flex:none}
.pill{display:inline-block;height:24px;padding:0 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;line-height:24px;font-weight:600;white-space:nowrap}
.pill.good{background:#d8f6e5;color:#07512c}
.pill.wait{background:#fff3c4;color:#5f4100}
.pill.ask{background:var(--pink);color:var(--ink)}
.ui-btn{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:0;border-radius:10px 10px 10px 3px;background:var(--ink);color:#fff;font-weight:600;white-space:nowrap}
.ui-btn.primary,.ui-btn.go{background:var(--pink);color:var(--ink)}
.ui-btn.go{cursor:pointer;transition:transform .15s var(--spring),background .2s}
.ui-btn.go:hover{transform:scale(1.04)}
.tick{flex:none;display:inline-block;position:relative;width:20px;height:20px;border-radius:50%;background:var(--good)}
.tick::after{content:"";position:absolute;left:6px;top:5px;width:7px;height:4.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.box{flex:none;display:block;position:relative;width:20px;height:20px;border-radius:6px 6px 6px 2px;background:var(--ink)}
.box::after{content:"";position:absolute;left:5.5px;top:5px;width:8px;height:4.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.row-marks{display:flex;gap:6px;align-items:center}

/* The chat in the hero */
.chat{color:var(--ink);grid-column:2;position:relative;align-self:start;display:grid;gap:10px;background:#fff;border-radius:var(--bubble);padding:14px}
.chat-done{transition:opacity .35s}
.hero .on-draft,.hero .on-approved,.hero .on-posted{display:none}
.hero[data-state=draft] .on-draft,.hero[data-state=approved] .on-approved,.hero[data-state=posted] .on-posted{display:inline}
.hero[data-state=draft] .chat-done{opacity:0}
.hero[data-state=approved] #chat-pill,.hero[data-state=posted] #chat-pill{background:#d8f6e5;color:#07512c}
.hero[data-state=approved] .ui-btn.go,.hero[data-state=posted] .ui-btn.go{background:var(--good);color:#fff}
.cursor{position:absolute;left:0;top:0;z-index:5;opacity:0;pointer-events:none;transition:transform .85s var(--ease),opacity .2s}
.cursor svg{transition:transform .12s}
.cursor.show{opacity:1}
.cursor.press svg{transform:scale(.8)}

/* The posts in the hero. A pile until it's approved, then each lands on its network. */
.posts{--rail:clamp(450px,calc(100svh - var(--bar) - 56px),580px);--h:calc(var(--rail)/100);grid-column:3;grid-row:1/3;position:relative;height:var(--rail);container-type:inline-size}
.post{--u:min(1cqw,calc(.56*var(--h)));position:absolute;background:#fff;border-radius:14px 14px 14px 4px;overflow:hidden;transform:rotate(var(--rest));transition:transform .75s var(--spring),opacity .4s;font-size:14px;line-height:19px}
.post header{display:flex;align-items:center;gap:7px;padding:8px 10px;font-weight:600;font-size:13px;line-height:17px;min-height:36px}
.post header span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post p{padding:0 10px 9px}
.post-img{width:100%;height:auto;object-fit:cover}
.post-img.tall{aspect-ratio:4/5}
.post-img.wide{aspect-ratio:2/1}
.post-img.four{aspect-ratio:4/3}
.done{margin-left:auto;flex:none;height:20px;line-height:20px;padding:0 7px;border-radius:99px;background:#d8f6e5;color:#07512c;font-size:12px;transition:opacity .3s,transform .4s var(--spring)}
.hero[data-state=draft] .done,.hero[data-state=approved] .done{opacity:0;transform:scale(.5)}
.post-ig{--rest:1.2deg;width:calc(68*var(--u));right:0;top:0;z-index:2}
.post-li{--rest:-2.2deg;width:calc(60*var(--u));left:0;top:calc(32*var(--h));z-index:3;transition-delay:.18s}
.post-x{--rest:1.5deg;width:calc(62*var(--u));right:1cqw;top:calc(62*var(--h));z-index:5;transition-delay:.06s}
.post-fb{--rest:-1.3deg;width:calc(58*var(--u));left:4cqw;top:calc(70*var(--h));z-index:4;transition-delay:.12s}
.js .hero[data-state=draft] .post,.js .hero[data-state=approved] .post{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.9)}
.js .post-ig{--dx:-14cqw;--dy:calc(14*var(--h));--rot:-2deg}
.js .post-li{--dx:20cqw;--dy:calc(-2*var(--h));--rot:7deg}
.js .post-x{--dx:-18cqw;--dy:calc(-16*var(--h));--rot:-8deg}
.js .post-fb{--dx:14cqw;--dy:calc(-42*var(--h));--rot:10deg}
.js .hero[data-state=draft] .post-ig,.js .hero[data-state=approved] .post-ig{z-index:6}

/* From the chat to the networks */
.nets{background:var(--ink);color:#fff;padding-block:var(--space)}
.nets .head>p{color:#e8dfe5}
.nets-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);align-items:end}
.copy-field{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 6px 16px;background:#fff;color:var(--ink);border-radius:14px 14px 14px 3px}
.copy-field code{overflow-wrap:anywhere;font-size:clamp(.8125rem,.7rem + .4vw,.9375rem)}
.flow{display:grid;grid-template-columns:minmax(0,2fr) auto auto auto minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:center;margin-top:var(--under)}
.flow-from{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
.flow-to{display:grid;gap:2px}
.flow-list a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px 12px 12px 3px;font-size:1.1875rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;text-decoration:none;transition:background .15s}
.flow-list a:hover{background:#2c2029}
.flow-list img{flex:none;width:28px;height:28px}
.nets img.mono{filter:invert(1) hue-rotate(180deg)}
img.on-dark{filter:invert(1)}
.flow-mid{position:relative;display:grid;place-items:center;width:clamp(118px,12vw,158px);aspect-ratio:1.12;padding:10px;background:var(--pink);color:var(--ink);font-size:1.1875rem;font-weight:650;letter-spacing:-.015em;line-height:1.15;text-align:center;border-radius:26px 26px 26px 7px}
.flow-mid::before,.flow-mid::after{content:"";position:absolute;inset:0;border:2px solid var(--pink);border-radius:inherit;opacity:0}
.flow-dot{position:absolute;right:13px;top:13px;width:9px;height:9px;border-radius:50%;background:#fff}
.flow-trail{display:flex;gap:6px}
.flow-trail i{display:block;width:8px;height:8px;border-radius:50%;background:var(--pink);opacity:.35}
@media (prefers-reduced-motion:no-preference){
  .flow.play .flow-trail i{animation:trail 1.5s ease-in-out 3 both}
  .flow.play .flow-trail i:nth-child(2){animation-delay:.18s}
  .flow.play .flow-trail i:nth-child(3){animation-delay:.36s}
  .flow.play .flow-trail.two i:nth-child(1){animation-delay:.54s}
  .flow.play .flow-trail.two i:nth-child(2){animation-delay:.72s}
  .flow.play .flow-trail.two i:nth-child(3){animation-delay:.9s}
  @keyframes trail{0%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-3px)}}
  .flow.play .flow-mid::before{animation:halo 1.5s var(--ease) 3 both}
  .flow.play .flow-mid::after{animation:halo 1.5s var(--ease) .4s 3 both}
  @keyframes halo{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.34);opacity:0}}
}

/* How it works: one screen, and the scroll moves the post along */
.how{height:250svh}
.how-pin{position:sticky;top:var(--bar);height:calc(100svh - var(--bar));min-height:520px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.how-left{background:var(--sun);padding:clamp(24px,3vw,44px) clamp(24px,4vw,64px) clamp(20px,2.4vw,32px) max(var(--m),calc(50vw - 600px + var(--m)));display:flex;flex-direction:column;gap:clamp(14px,2vw,24px)}
.how-left .head>p{color:var(--ink)}
.how-steps{flex:1;display:grid;align-content:end}
.how-step{grid-area:1/1;display:grid;gap:4px}
.how-step p{max-width:48ch;font-size:1.0625rem}
.js .how-step{visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .4s var(--ease),visibility 0s .25s}
.js .how-step.on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.how-right{background:var(--ink);padding:clamp(20px,2.6vw,40px);display:grid;place-items:center;position:relative}
.stage{width:min(100%,470px);display:grid;gap:10px;align-content:center}
.js .stage{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .25s,transform .45s var(--ease),visibility 0s .25s;pointer-events:none}
.js .stage.on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.stage .me{background:#2c2029;color:#fff}
.stage .bot{color:#fff}
.stage-note{color:#ddd3da}
.field{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:#fff;color:var(--ink);border-radius:13px 13px 13px 3px;font-weight:600;overflow-wrap:anywhere}
.conn,.fits{display:grid;gap:8px}
.conn li,.fits li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;background:#fff;color:var(--ink);border-radius:13px 13px 13px 3px}
.fits.in-card{gap:0;padding:0 12px 6px}
.fits.in-card li{padding:8px 0;border-radius:0;background:none}
.fits em{font-style:normal;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.sent-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sent-grid figure{position:relative;overflow:hidden;border-radius:14px 14px 14px 4px}
.sent-grid img:not(figcaption img){width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.sent-grid figcaption{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;background:#fff;color:var(--ink);padding:3px 10px 3px 6px;border-radius:10px 10px 10px 2px;font-size:14px;line-height:20px;font-weight:600}
.sent-line{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff}
.how-track input{width:100%;height:36px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.how-track input::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--ink)}
.how-track input::-moz-range-track{height:6px;border-radius:6px;background:var(--ink)}
.how-track input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border:0;background:var(--pink);border-radius:11px 11px 11px 3px}
.how-track input::-moz-range-thumb{width:28px;height:28px;border:0;background:var(--pink);border-radius:11px 11px 11px 3px}
/* Each word sits right under where the dot stops. The dot's middle travels from half its width in from each end. */
.how-track{padding-inline:clamp(20px,2.4vw,30px)}
.how-stops{position:relative;height:40px}
.how-stops button{position:absolute;top:0;left:calc(14px + (100% - 28px)*var(--stop)/3);transform:translateX(-50%);border:0;background:none;padding:6px;min-height:40px;white-space:nowrap;font-weight:500;cursor:pointer;color:#4d3f00}
.how-stops button:nth-child(1){--stop:0}
.how-stops button:nth-child(2){--stop:1}
.how-stops button:nth-child(3){--stop:2}
.how-stops button:nth-child(4){--stop:3}
.how-stops button.on{color:var(--ink);font-weight:700}

/* The cards, our selling point: on plum, so the white card is what you look at */
.cards{background:var(--plum);color:#fff;padding-block:var(--space)}
.cards .head>p{color:#f1e6ed}
.cards-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:var(--under)}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;background:#fff;color:var(--ink);border-radius:13px 13px 13px 3px}
.seg button{height:36px;padding:0 13px;border:0;background:none;border-radius:9px 9px 9px 3px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.seg button[aria-selected=true]{background:var(--pink);color:var(--ink);font-weight:600}
.viewer-stage{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:330px;margin-top:10px;padding:clamp(14px,2.4vw,28px);background:#5b1745;border-radius:var(--bubble)}
.viewer-card{grid-area:1/1;width:min(100%,460px)}
.js .viewer-card{visibility:hidden;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .45s var(--ease),visibility 0s .25s}
.js .viewer-card.on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.viewer-caption{margin-top:10px;min-height:3.1em;color:#f1e6ed}
.batch{display:grid;padding:0 0 4px}
.batch li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 12px}
.batch img{width:40px;height:40px;object-fit:cover;border-radius:9px 9px 9px 2px}
.batch strong{display:block}
.batch .row-marks img{width:20px;height:20px;border-radius:0}
.cards-side{display:grid;gap:clamp(18px,2.2vw,28px)}
.points{display:grid;gap:clamp(14px,1.6vw,20px)}
.points strong{display:block;font-size:1.125rem;font-weight:600;line-height:1.3;margin-bottom:2px}
.points span{color:#f1e6ed}
.record{background:#fff;color:var(--ink);border-radius:var(--bubble);padding:clamp(14px,1.6vw,20px)}
.record-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.record dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.record dt{color:var(--mute);font-size:14px;line-height:18px}
.record dd{font-weight:600}

/* What it can do: white, and a rest for the eyes */
.powers-sec{padding-block:var(--space)}
.powers-sec .head>p{color:var(--quiet)}
.powers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,3.4vw,48px);align-items:stretch;margin-top:var(--under)}
.power-list{display:grid;gap:2px}
.power-list button{display:grid;gap:1px;width:100%;padding:10px 14px;border:0;background:none;text-align:left;border-radius:14px 14px 14px 4px;cursor:pointer;transition:background .15s}
.power-list strong{font-weight:600;font-size:1.0625rem;line-height:1.35}
.power-list span{color:var(--mute);font-size:var(--small);line-height:1.4}
.power-list button:hover{background:var(--soft)}
.power-list button[aria-selected=true]{background:var(--sun)}
.power-list button[aria-selected=true] span{color:var(--ink)}
.power-panel{display:grid;padding:clamp(16px,2.6vw,32px);background:var(--pink);border-radius:var(--bubble)}
.power-chat{background:#fff;border-radius:var(--bubble);overflow:hidden;min-height:320px}
.power-view{display:none;gap:12px;padding:14px}
.power-view.on{display:grid}
@media (prefers-reduced-motion:no-preference){
  .power-view.on>*{animation:drop-in .4s var(--ease) both}
  .power-view.on>:nth-child(2){animation-delay:.25s}.power-view.on>:nth-child(3){animation-delay:.45s}
  @keyframes drop-in{from{opacity:0;transform:translateY(8px)}}
}

/* Try it. The whole section takes the colour of the picture. */
.try{--field:#fdd51b;--on:#0d060b;background:var(--field);color:var(--on);padding-block:var(--space);transition:background .5s var(--ease),color .3s}
.composer{margin-top:var(--under);background:#fff;color:var(--ink);border-radius:var(--bubble);padding:clamp(14px,1.4vw,18px)}
#try-input{display:block;width:100%;resize:none;overflow:hidden;border:0;background:transparent;font-family:inherit;color:inherit;font-size:clamp(1.1875rem,1.8vw,1.5rem);font-weight:600;letter-spacing:-.015em;line-height:1.25;padding:2px 0;outline:none;caret-color:var(--pink)}
.composer:has(textarea:focus-visible){outline:3px solid var(--on);outline-offset:3px}
.examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.example{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px 4px 4px;border:0;background:var(--soft);border-radius:var(--bubble-sm);font-weight:600;font-size:var(--small);cursor:pointer;transition:transform .15s var(--ease),background .15s}
.example img{width:36px;height:36px;border-radius:9px 9px 9px 2px;object-fit:cover}
.example:hover{transform:translateY(-2px)}
.example.on{background:var(--ink);color:#fff}
.try-grid{display:grid;grid-template-columns:minmax(0,3.3fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);margin-top:12px;align-items:start}
.previews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.pv-stack{display:grid;gap:10px}
.pv{background:#fff;color:var(--ink);border-radius:var(--bubble);overflow:hidden}
.pv header{display:flex;align-items:center;gap:8px;padding:10px 12px}
.pv p{padding:0 12px 10px;overflow-wrap:anywhere}
.pv-ig p{padding-top:10px}
.pv-img{width:100%;height:auto;object-fit:cover}
.pv-img.tall{aspect-ratio:4/5}
.pv-img.square{aspect-ratio:1}
.pv-img.wide{aspect-ratio:16/9}
.fit{padding:0 12px 10px;color:var(--mute);font-size:14px;font-weight:500}
.fit.over{color:#b00d3f;font-weight:600}
.net-links{display:grid;gap:clamp(12px,1.4vw,18px)}
.net-links a{display:grid;gap:2px;text-decoration:none}
.net-links strong{font-size:1.0625rem;font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.net-links span{font-size:var(--small);line-height:1.4}
.net-next{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:clamp(18px,2vw,26px)}
.net-next ul{display:flex;gap:6px}
.net-next li{display:grid;place-items:center;width:34px;height:34px;background:#fff;border-radius:10px 10px 10px 2px}
.net-next p{max-width:70ch}

/* The promises: each a field of colour and one picture */
.sheet{padding-block:var(--space)}
.sheet-grid{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7fr);gap:clamp(28px,4.4vw,64px);align-items:center}
.sheet-grid.flip{grid-template-columns:minmax(0,7fr) minmax(0,4.6fr)}
.words{display:grid;gap:12px;align-content:center}
.checks{display:grid;gap:8px;margin-top:6px}
.checks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;line-height:1.4}
.checks .tick{margin-top:1px}

.sheet-blue{background:var(--blue);color:#fff}
.sheet-blue .tick{background:var(--mint)}
.sheet-blue .tick::after{border-color:var(--ink)}
.crops{display:flex;align-items:flex-end;gap:clamp(8px,1vw,12px)}
.crop{position:relative;overflow:hidden;border-radius:var(--bubble)}
.crop>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.crop figcaption{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:5px;background:#fff;color:var(--ink);padding:3px 8px 3px 6px;border-radius:9px 9px 9px 2px;font-weight:600;font-size:14px;line-height:19px}
.c-link{flex:360 1 0;aspect-ratio:1.91}
.c-square{flex:300 1 0;aspect-ratio:1}
.c-feed{flex:340 1 0;aspect-ratio:4/5}
.c-story{flex:328 1 0;aspect-ratio:9/16}

.sheet-pink{background:var(--pink)}
.week{padding:12px;background:#fff;border-radius:var(--bubble)}
.week-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.week-grid>strong{padding:2px 4px;font-size:15px}
.slot{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px 12px 12px 3px}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot span{position:absolute;left:5px;bottom:5px;padding:1px 6px;background:#fff;border-radius:7px 7px 7px 2px;font-weight:600;font-size:13px;line-height:19px}
.g1{grid-area:2/1}.g7{grid-area:3/1}.g2{grid-area:2/2/4/3;aspect-ratio:auto}.g3{grid-area:2/3}.g8{grid-area:3/3}.g5{grid-area:2/4}.g9{grid-area:3/4}.g6{grid-area:3/5}
.mover{z-index:2}
@media (prefers-reduced-motion:no-preference){
  .play .mover{animation:move-day 6s var(--ease) 2 both}
  @keyframes move-day{0%,30%{transform:none;outline:0 solid var(--ink)}38%{transform:translateY(-4px) scale(1.04);outline:3px solid var(--ink)}52%,88%{transform:translateX(calc(100% + 8px));outline:0 solid var(--ink)}100%{transform:none}}
}

.sheet-safe .words>p{color:var(--quiet)}
.timeline{padding:6px 16px;background:var(--soft);border-radius:var(--bubble);font-size:16px}
.timeline li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0}
.timeline time{color:var(--mute);font-weight:500}

/* Who it's for */
.uses-sec{background:var(--mint);padding-block:var(--space)}
.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:var(--under)}
.uses>li{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,1.8vw,22px);background:#fff;border-radius:var(--bubble)}
.uses>li>p:not(.me){color:var(--quiet)}
.uses .me{margin-top:auto;background:var(--soft)}
.uses a{font-weight:600;text-decoration:none}
.uses a:hover{text-decoration:underline}

/* Pricing */
.pricing{padding-block:var(--space)}
.pricing .head>p{color:var(--quiet)}
.price{display:inline-block;background:var(--pink);padding:0 .16em .03em;border-radius:.2em .2em .2em .05em}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:var(--under)}
.calc{display:flex;flex-direction:column;gap:6px;background:var(--sun);border-radius:var(--bubble);padding:clamp(18px,2.2vw,28px)}
.calc-line{font-size:clamp(1.625rem,2.8vw,2.375rem);font-weight:650;letter-spacing:-.025em;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
#calc-accounts{width:2.25ch;min-width:1.3ch;padding:0;border:0;border-bottom:3px solid var(--ink);border-radius:0;background:transparent;font:inherit;letter-spacing:inherit;appearance:textfield;-moz-appearance:textfield}
#calc-accounts::-webkit-inner-spin-button{display:none}
#calc-total{display:inline-block;background:var(--pink);padding:0 .16em .03em;border-radius:.2em .2em .2em .05em}
#calc-slider{width:100%;height:40px;margin:8px 0 2px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
#calc-slider::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--ink)}
#calc-slider::-moz-range-track{height:6px;border-radius:6px;background:var(--ink)}
#calc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-12px;border:0;background:var(--pink);border-radius:11px 11px 11px 3px}
#calc-slider::-moz-range-thumb{width:30px;height:30px;border:0;background:var(--pink);border-radius:11px 11px 11px 3px}
.bubbles{display:flex;flex-wrap:wrap;gap:5px;flex:1;align-content:flex-start;min-height:52px}
.bubbles i{display:block;width:20px;height:20px;background:var(--ink);border-radius:7px 7px 7px 2px;animation:pop .28s var(--spring) both}
.bubbles i.free{background:var(--pink)}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.calc-sum{margin-top:10px;font-weight:600}
.bands{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
/* An AI agent's page: a terminal, a conversation, or how a model reaches us through an agent. */
.term{display:grid;gap:12px;padding:clamp(14px,1.8vw,20px);background:var(--ink);color:#f4eff2;border-radius:var(--bubble);font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.875rem;line-height:1.5}
.term-bar{display:flex;align-items:center;gap:8px;font-family:var(--font);font-size:.9375rem;color:#fff}
.term-bar img{background:#fff;border-radius:6px;padding:2px;box-sizing:content-box}
.term-you{color:#fff;font-weight:600}
.term-you::before{content:"> ";color:var(--pink)}
.term-out{display:grid;gap:8px;color:#d9ced5}
.term-out blockquote{padding-left:12px;color:#fff;box-shadow:inset 3px 0 0 var(--mint)}
.term-ok{color:var(--mint);font-weight:600}
.bot-says{display:grid;gap:6px;line-height:1.45}
.bot-says blockquote{padding:9px 13px;background:var(--soft);border-radius:var(--bubble-sm);font-weight:500}
.bot-ok{display:flex;align-items:center;gap:8px;font-weight:600}
.via{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:none}
.via li{display:grid;gap:8px;justify-items:center;align-content:start;padding:clamp(16px,2vw,24px) 10px;background:#fff;color:var(--ink);border-radius:var(--bubble);text-align:center}
.via-tile{display:grid;place-items:center;min-height:72px}
.via-tile.many{grid-template-columns:repeat(2,28px);gap:8px;justify-content:center}
.via strong{font-size:1.0625rem;line-height:1.25}
.via small{color:var(--quiet);font-size:.875rem;line-height:1.3}
.via-links{margin-top:12px}
.copy-field.block{align-items:flex-end;flex-wrap:wrap;padding:12px}
.copy-field.block pre{flex:1 1 100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8125rem;line-height:1.45}
.copy-field.block code{font-size:inherit}
.copy-field.block .btn{min-height:40px;padding-inline:14px}
ol.three .say{padding:10px 14px;background:#fff;border-radius:14px 14px 3px 14px;font-weight:500;overflow-wrap:anywhere}
.also{display:grid;gap:10px;margin-top:var(--under)}
.also ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.also li{display:grid;gap:8px;align-content:start;padding:clamp(14px,1.8vw,20px);background:var(--soft);border-radius:var(--bubble)}
.ways{display:grid;gap:10px}
.ways li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;padding:clamp(14px,1.8vw,20px);background:#fff;color:var(--ink);border-radius:var(--bubble);font-weight:600;line-height:1.35}
.ways li.off{color:var(--quiet);font-weight:500}
.ways small{display:block;font-size:.875rem;font-weight:400;color:var(--quiet)}
.no-tick{display:block;width:20px;height:20px;border-radius:50%;background:var(--soft)}
.bands-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.see-all{font-weight:600;text-underline-offset:3px}
/* The pricing page: a sample bill, and X's own rates. */
.bill{display:grid;gap:12px;max-width:440px;margin-inline:auto;padding:clamp(20px,2.6vw,32px);background:#fff;color:var(--ink);border-radius:var(--bubble)}
.bill-title{display:flex;align-items:center;gap:10px;font-size:1.125rem}
.bill-title .pill{margin-left:auto}
.bill-line,.bill-total{display:flex;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums}
.bill-line{font-size:var(--body)}
.bill-total{margin-top:6px;padding:12px 14px;background:var(--sun);border-radius:var(--bubble-sm);font-weight:600;align-items:baseline}
.bill-total strong{font-size:clamp(1.75rem,3vw,2.25rem);letter-spacing:-.025em;line-height:1}
.bill-note{font-size:var(--small);color:var(--quiet)}
.checks.two-col{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin-top:0}
.x-rates{display:grid;gap:10px}
.x-rates li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:center;padding:clamp(14px,1.8vw,20px);background:#fff;color:var(--ink);border-radius:var(--bubble)}
.x-rates strong{font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:650;letter-spacing:-.025em;line-height:1.1;font-variant-numeric:tabular-nums}
@media (width<=620px){.checks.two-col,.also ul{grid-template-columns:minmax(0,1fr)}}
.bands table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.bands caption{text-align:left;font-weight:600;padding-bottom:6px}
.bands th,.bands td{padding:8px 0;text-align:right;font-weight:600;font-size:1.125rem}
.bands td+td{padding-left:16px}
.bands tbody tr+tr th,.bands tbody tr+tr td{border-top:2px solid var(--soft)}
.bands th{text-align:left;font-weight:500}
.bands s{color:var(--mute);font-weight:400;font-size:var(--small)}
.bands>p{color:var(--quiet)}

/* Questions */
.faq{background:var(--blue);color:#fff;padding-block:var(--space)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px)}
.faq-side{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.faq-mark{display:grid;place-items:center;width:clamp(84px,9vw,128px);aspect-ratio:1.08;background:var(--sun);color:var(--ink);font-size:clamp(3rem,5vw,4.5rem);font-weight:700;line-height:1;border-radius:26px 26px 26px 7px;transform:rotate(-5deg);transform-origin:0 100%}
.faq-list{display:grid;gap:8px;align-content:start}
.faq-list details{background:#fff;color:var(--ink);border-radius:var(--bubble-sm);padding:0 18px}
.faq-list summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;font-size:1.0625rem;font-weight:550;line-height:1.3;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq-list details p{padding:0 0 16px;max-width:64ch;color:var(--quiet)}

/* The close */
.close{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;padding-block:clamp(72px,9vw,128px)}
.close .reach .r{stroke:var(--pink)}
.close-inner{display:grid;justify-items:center;text-align:center;gap:14px}
.close-inner>p:not(.close-actions){font-size:var(--lead);line-height:1.42;color:#e8dfe5}
.close-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* Pages of one network, one AI app, one use, one feature. Each takes its own colour for the first screen. */
.f-pink{--field:var(--pink);--on:var(--ink)}
.f-sun{--field:var(--sun);--on:var(--ink)}
.f-mint{--field:var(--mint);--on:var(--ink)}
.f-blue{--field:var(--blue);--on:#fff}
.f-soft{--field:#fff;--on:var(--ink)}
.f-instagram{--field:#c81e63;--on:#fff}
.themed{--bar-bg:var(--field);--bar-ink:var(--on)}
.bar.past{--bar-ink:var(--ink)}
.dark-field .bar:not(.past) .btn-ink{background:#fff;color:var(--ink)}
.page-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--field);color:var(--on);padding-block:clamp(18px,2.6vw,32px) clamp(40px,4.6vw,64px)}
.page-hero .reach .r{stroke:var(--on)}
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center}
.page-text{display:grid;gap:14px;justify-items:start}
.page-text h1{font-size:clamp(2.25rem,4.2vw,3.5rem);line-height:1.06}
.page-text .lead{max-width:34em}
.chip{display:grid;place-items:center;width:58px;height:58px;background:#fff;border-radius:18px 18px 18px 4px}
.btn-field{background:var(--on);color:var(--field)}
.f-sun .btn-field,.f-mint .btn-field,.f-pink .btn-field{background:var(--ink);color:#fff}
.chat.alone{grid-column:auto;display:grid;gap:10px}
.chat-title{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.chat-title .pill{margin-left:auto}

.fan{display:flex;align-items:center;justify-content:center;gap:12px;padding-block:10px}
.phone{flex:1 1 0;min-width:0;background:#fff;color:var(--ink);border-radius:14px 14px 14px 4px;overflow:hidden;transform:rotate(var(--turn,0deg));font-size:14px;line-height:18px}
.phone:nth-child(1){--turn:-2.5deg}
.phone:nth-child(3){--turn:2deg}
.phone header{display:flex;align-items:center;gap:6px;padding:7px 9px;font-size:13px}
.phone header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone-pic{position:relative}
.phone-pic img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.phone.tall .phone-pic img{aspect-ratio:9/16}
.phone-pic i{position:absolute;bottom:8px;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.6}
.phone-pic i:nth-of-type(1){left:calc(50% - 13px);opacity:1}
.phone-pic i:nth-of-type(2){left:calc(50% - 3px)}
.phone-pic i:nth-of-type(3){left:calc(50% + 7px)}
.phone p{padding:7px 9px 9px}
@media (prefers-reduced-motion:no-preference){
  .js .fan .phone{animation:deal .8s var(--spring) both}
  .js .fan .phone:nth-child(1){animation-delay:.1s}
  .js .fan .phone:nth-child(3){animation-delay:.2s}
  @keyframes deal{from{opacity:0;transform:translateY(24px) rotate(0deg) scale(.94)}}
}

.band{padding-block:var(--space)}
.band .head>p{color:var(--quiet)}
.formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:var(--under)}
.formats>li{display:grid;gap:8px;align-content:start;padding:clamp(16px,1.8vw,22px);border-radius:var(--bubble)}
.t-sun{background:#fff1b8}
.t-mint{background:#d4f6e7}
.t-pink{background:#ffdbe7}
.t-blue{background:#dbe3ff}
.ratio{display:block;position:relative;height:64px;margin-bottom:6px}
.ratio::after,.ratio b{content:"";position:absolute;left:0;bottom:0;background:var(--ink);border-radius:7px 7px 7px 2px}
.r-feed::after{width:51px;height:64px}
.r-reel::after,.r-story::after{width:36px;height:64px}
.r-carousel::after{width:51px;height:64px}
.r-carousel b:nth-child(1){left:57px;width:51px;height:64px;opacity:.5}
.r-carousel b:nth-child(2){left:114px;width:51px;height:64px;opacity:.25}
ol.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:var(--under)}
ol.three>li{display:grid;gap:8px;align-content:start;padding:clamp(16px,1.8vw,22px);border-radius:var(--bubble)}
ol.three b{display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:#fff;border-radius:11px 11px 11px 3px;font-weight:650}
ol.three .copy-field{padding-left:12px;margin-top:2px}
ol.three .copy-field code{font-size:.875rem}
.sheet-plum{background:var(--plum);color:#fff}
.sheet-sun{background:var(--sun)}
.sheet-mint{background:var(--mint)}
.sheet-plum .tick{background:var(--mint)}
.sheet-plum .tick::after{border-color:var(--ink)}
.visual-card{padding:clamp(14px,2.4vw,28px);background:#5b1745;border-radius:var(--bubble)}
.ask-panel{display:grid;gap:10px;padding:clamp(16px,2.4vw,28px);background:#fff;border-radius:var(--bubble)}
.agents-sec{background:var(--ink);color:#fff;padding-block:var(--space)}
.agents-sec .head>p{color:#e8dfe5}
.agents-sec a{color:#fff}
.agents{display:grid;gap:var(--under)}
.agents pre{margin:0;padding:clamp(16px,2.2vw,26px);background:#241a21;color:#f4eff2;border-radius:var(--bubble);white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9375rem;line-height:1.6}
.more{padding-block:var(--space)}
.more-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:var(--under)}
.more-list a{display:flex;align-items:center;gap:12px;height:100%;padding:14px 16px;background:var(--soft);border-radius:var(--bubble-sm);text-decoration:none;transition:background .15s,transform .15s var(--ease)}
.more-list a:hover{transform:translateY(-2px);background:#ede4e9}
.more-list img{flex:none}
.more-list strong{display:block;font-weight:600;line-height:1.3}
.more-list small{display:block;color:var(--mute);font-size:.875rem;line-height:1.35}
.client-bars{display:grid;gap:10px}
.client-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding-right:16px;background:var(--c);color:var(--t,var(--ink));border-radius:var(--bubble);overflow:hidden}
.client-bar>img{width:80px;height:80px;object-fit:cover}
.client-bar strong{display:block;font-size:17px}
.bar-time{font-weight:650;font-size:17px;font-variant-numeric:tabular-nums}
.bar-sun{--c:#fdd51b}.bar-pink{--c:#fd4594}.bar-white{--c:#fff}.bar-teal{--c:#04b9ba}
.moved-row{padding:12px}
.pv-row{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,4fr));gap:10px;align-items:start;margin-top:var(--under)}
.sheet-pink .head>p{color:var(--ink)}
.moved-row s{color:var(--mute)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vs-side{display:grid;gap:6px;align-content:start;padding:clamp(18px,2.4vw,28px);background:#fff;border-radius:var(--bubble);min-height:220px}
.vs-side strong{font-size:1.125rem}
.vs-side.quiet{background:#fff8d9}
.vs-side.quiet strong{margin-top:42px}
.vs-price{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:650;letter-spacing:-.025em;line-height:1.2;white-space:nowrap}
.table-wrap{margin-top:var(--under);overflow-x:auto}
.versus{width:100%;min-width:640px;border-collapse:collapse;font-size:1rem;line-height:1.4}
.versus th,.versus td{padding:14px 16px 14px 0;text-align:left;vertical-align:top}
.versus thead th{font-size:1.125rem;font-weight:650}
.versus tbody th{font-weight:600;width:22%}
.versus tbody tr{border-top:2px solid var(--soft)}
.sources{margin-top:18px;color:var(--quiet);font-size:var(--small)}
.two-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.4vw,64px);align-items:start}
.doc-head{padding-block:clamp(36px,5vw,64px) clamp(24px,3vw,40px);background:var(--soft)}
.doc-head.on-field{background:var(--field);color:var(--on)}
.doc-head h1{font-size:clamp(2.25rem,4.2vw,3.5rem);line-height:1.08}
.doc-head p{margin-top:10px;font-size:var(--lead);line-height:1.42}
.post-head{max-width:calc(680px + 2*var(--m))}
.post-head h1{font-size:clamp(1.875rem,3.4vw,2.75rem);line-height:1.12}
.doc{padding-block:clamp(28px,4vw,56px) var(--space)}
.doc-grid{max-width:calc(680px + 2*var(--m))}
.prose{display:grid;gap:14px;font-size:1.0625rem;line-height:1.65}
.prose h2{margin-top:22px;font-size:clamp(1.5rem,2.2vw,1.875rem);line-height:1.2}
.prose h3{margin-top:12px}
.prose ul{display:grid;gap:8px;padding-left:20px;list-style:disc}
.prose img{width:100%;height:auto;border-radius:var(--bubble)}
.post-hero{margin-bottom:8px}
/* A post's index: floats beside the words on a wide screen, and folds up above them on anything narrower. The words stay where they'd be without it. */
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px) minmax(0,1fr);column-gap:clamp(32px,3.4vw,56px);padding-inline:var(--m)}
.post-grid>.prose{grid-column:2;grid-row:1}
.toc{grid-column:3;grid-row:1;position:sticky;top:calc(var(--bar) + 28px);align-self:start;max-width:280px;max-height:calc(100dvh - var(--bar) - 56px);overflow-y:auto;padding-left:16px;margin-left:-16px;font-size:var(--small);line-height:1.35}
.toc-title{margin-bottom:12px;font-weight:650}
.toc ol,.toc-fold ol{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.toc a,.toc-fold a{display:block;color:var(--quiet);text-decoration:none}
.toc a:hover,.toc-fold a:hover{color:var(--ink)}
.toc li.sub,.toc-fold li.sub{padding-left:14px}
.toc a[aria-current=true]{position:relative;color:var(--ink);font-weight:600}
.toc a[aria-current=true]::before{content:"";position:absolute;left:-14px;top:.42em;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.toc-fold{display:none;padding:4px 16px;background:var(--soft);border-radius:var(--bubble);font-size:var(--small);line-height:1.35}
.toc-fold summary{display:flex;align-items:center;min-height:44px;font-weight:600;cursor:pointer;list-style:none}
.toc-fold summary::-webkit-details-marker{display:none}
.toc-fold summary::after{content:"";margin-left:auto;margin-right:4px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.toc-fold[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.toc-fold ol{gap:0;padding-bottom:8px}
.toc-fold a{padding-block:12px}
@media (width<=1100px){
  .post-grid{display:block;max-width:calc(680px + 2*var(--m));margin-inline:auto}
  .toc{display:none}
  .toc-fold{display:block}
}
.blog-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:var(--under)}
.blog-tools[hidden]{display:none}
.topics{display:flex;flex-wrap:wrap;gap:6px}
.topics button{min-height:44px;padding:0 16px;border:0;background:var(--soft);color:var(--ink);border-radius:var(--bubble-sm);font:inherit;font-size:var(--small);font-weight:500;cursor:pointer;transition:background .15s}
.topics button:hover{background:#ece3e8}
.topics button[aria-pressed=true]{background:var(--pink);font-weight:600}
.sort{display:inline-flex;align-items:center;gap:10px;font-size:var(--small);color:var(--quiet)}
.sort select{min-height:44px;padding:0 12px;border:0;background:var(--soft);color:var(--ink);border-radius:var(--bubble-sm);font:inherit;font-weight:500;cursor:pointer}
.blog-count{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,32px)}
.blog-grid a{display:grid;gap:8px;text-decoration:none}
.blog-grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--bubble);transition:transform .25s var(--ease)}
.blog-grid a:hover img{transform:translateY(-3px)}
.blog-grid h2{font-size:1.25rem;line-height:1.28;letter-spacing:-.012em}
.blog-grid p{color:var(--quiet);font-size:1rem;line-height:1.45}
.blog-grid small{color:var(--mute);font-size:.875rem}
@media (width<=1040px){
  .page-grid,.two-lists{grid-template-columns:minmax(0,1fr)}
  .pv-row{grid-template-columns:minmax(0,5fr) minmax(0,4fr)}
  .formats{grid-template-columns:repeat(2,minmax(0,1fr))}
  ol.three,.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (width<=620px){
  .formats,ol.three,.blog-grid,.vs{grid-template-columns:minmax(0,1fr)}
  /* On a phone the comparison reads down the page, so nothing's hidden off to the side. */
  .table-wrap{overflow:visible}
  .versus{min-width:0;display:block}
  .versus thead{display:none}
  .versus tbody,.versus tr,.versus th,.versus td{display:block;width:auto}
  .versus tbody tr{padding-block:14px}
  .versus th,.versus td{padding:0}
  .versus tbody th{margin-bottom:6px;font-size:1.0625rem}
  .versus td{margin-top:6px}
  .versus td::before{content:attr(data-who) ": ";font-weight:600}
  .vs-side{min-height:0}
  .vs-side.quiet strong{margin-top:0}
  .page-text h1{font-size:clamp(1.875rem,9.4vw,2.5rem)}
  .fan{gap:6px}
  .phone header strong{display:none}
  .client-bar>img{width:64px;height:64px}
}

/* Things arrive in order, once, and only a little */
.js .rise{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*55ms)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important}
  .js .rise{opacity:1;transform:none}
}

@media (width<=1040px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .hero h1{grid-column:1}
  .hero-copy,.chat,.posts{grid-column:1;grid-row:auto}
  .chat{width:min(100%,560px)}
  .posts{container-type:normal;height:auto;display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,4fr));gap:10px;align-items:start}
  .post,.post-ig,.post-li,.post-x,.post-fb{position:static;width:auto;transform:none!important}
  .post-img.tall,.post-img.wide,.post-img.four{aspect-ratio:1}
  .post-li p{display:none}
  .post-li{order:2}.post-fb{order:3}.post-x{order:4}
  .nets-head{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:minmax(0,1fr);justify-items:start}
  .flow-from{width:100%}
  .flow-trail{transform:rotate(90deg);margin:6px 0 6px 24px}
  .flow-mid{width:138px;margin-left:10px}
  .how{height:auto}
  .how-pin{position:static;height:auto;min-height:0;grid-template-columns:minmax(0,1fr)}
  .how-left{padding:var(--space) var(--m) 24px}
  .how-right{min-height:460px;padding-block:32px}
  .how-steps{min-height:110px;align-content:start}
  .cards-grid,.powers,.calc-grid,.sheet-grid,.sheet-grid.flip,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .sheet-grid.flip>:first-child{order:2}
  .faq-side{flex-direction:row;align-items:flex-end}
  .try-grid{grid-template-columns:minmax(0,1fr)}
  .net-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (width<=760px){
  .uses{grid-template-columns:minmax(0,1fr)}
}
@media (width<=620px){
  :root{--h1:clamp(1.875rem,9.8vw,2.625rem);--h2:clamp(1.5rem,7.4vw,1.875rem)}
  .posts{grid-template-columns:minmax(0,5fr) minmax(0,4fr)}
  .posts .done{display:none}
  .flow-list a{font-size:1.0625rem}
  .previews{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-stack{display:contents}
  .examples{display:grid;grid-template-columns:1fr 1fr}
  .net-links{grid-template-columns:minmax(0,1fr)}
  .crops{display:grid;grid-template-columns:9fr 12fr;align-items:end}
  .card-foot{flex-wrap:wrap}
  .timeline li{grid-template-columns:44px minmax(0,1fr);row-gap:4px}
  .timeline .pill{grid-column:2;justify-self:start}
  .calc-line{font-size:clamp(1.5rem,7.6vw,1.875rem)}
  .hero-actions .btn,.close-actions .btn{width:100%}
  .close-actions{width:100%}
}

/* The analytics choice: a small note in the corner, and only for visitors in Europe. It covers nothing and doesn't move. */
.consent{position:fixed;z-index:60;left:var(--m);bottom:var(--m);display:grid;gap:10px;width:min(23.5rem,calc(100vw - 2*var(--m)));padding:12px 14px;background:var(--ink);color:#fff;border-radius:var(--bubble-sm);box-shadow:0 0 0 1px rgba(255,255,255,.2);font-size:.9375rem;line-height:1.35}
.consent p{margin:0}
.consent a{color:inherit;text-underline-offset:2px}
.consent-actions{display:flex;gap:8px}
.consent button{appearance:none;border:0;min-height:36px;padding:0 14px;border-radius:9px 9px 9px 3px;background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.consent button+button{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
@media print{.consent{display:none}}

/* ---- Logging in and starting free ---- */
.auth{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:#fff;color:var(--ink)}
.auth-side{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:clamp(24px,4vw,48px);padding:clamp(20px,3vw,40px);background:var(--field);color:var(--on)}
.auth-side .reach{--rx:74%;--ry:68%}
.auth-logo{align-self:flex-start;margin-left:-6px}
.auth-logo img{height:38px;width:auto}
.auth-words{display:grid;gap:14px;margin-top:auto;max-width:560px}
.auth-words:last-child{margin-bottom:auto}
.auth-line{font-size:var(--h1);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.auth-sub{font-size:1.25rem;line-height:1.35}
.auth-side .checks{gap:10px;margin-top:8px;font-size:var(--body)}
.auth-side .tick{background:var(--ink)}
.auth-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;max-width:440px;margin-bottom:auto;padding:12px;background:#fff;color:var(--ink);border-radius:var(--bubble)}
.auth-card img{width:96px;height:96px;object-fit:cover;border-radius:16px 16px 16px 4px}
.auth-card p{display:grid;gap:4px;line-height:1.25}
.auth-when{display:flex;align-items:center;gap:8px;font-size:var(--small);font-weight:600}
.auth-sample{font-size:var(--small);color:var(--quiet)}
.auth-main{display:grid;place-items:center;padding:clamp(24px,4vw,48px) 16px}
.auth-box{width:min(400px,100%);display:grid;gap:14px}
.auth-box[hidden],.auth-field[hidden]{display:none}
.auth-note{justify-self:start}
.auth-box h1{font-size:clamp(1.875rem,2.8vw,2.375rem);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.auth-box h1:focus{outline:none}
.auth-box a:not(.btn){font-weight:600;text-decoration:underline;text-underline-offset:3px}
.auth .btn{width:100%}
.auth-or{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;color:var(--mute);font-size:var(--small)}
.auth-or::before,.auth-or::after{content:"";height:1px;background:#e7dde3}
.auth-form{display:grid;gap:12px}
.auth-field{display:grid;gap:6px;font-weight:600}
.auth-field input{min-height:48px;width:100%;padding:0 14px;border:2px solid #d9ced5;border-radius:var(--bubble-sm);background:#fff;color:var(--ink);font:inherit;font-weight:400}
.auth-field input:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--ink)}
.auth-help,.auth-terms{font-size:var(--small);color:var(--mute);line-height:1.4}
.auth-help:empty{display:none}
.auth-switch{justify-self:start;padding:6px 0;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.auth-row{display:flex;flex-wrap:wrap;gap:4px 20px}
@media (width<=860px){
  .auth{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .auth-side{gap:18px;padding:14px 16px 20px}
  .auth-logo img{height:30px}
  .auth-line{font-size:2.25rem}
  .auth-sub{font-size:var(--body)}
  .auth-card,.auth-side .checks{display:none}
  .auth-main{place-items:start center;padding:24px 16px 32px}
}
@media (prefers-color-scheme:dark){
  .auth{background:#0d060b;color:#fff}
  .auth-field input{background:#1c1319;border-color:#4a3c46;color:#fff}
  .auth .btn-ink{background:#fff;color:#0d060b}
  .auth .btn-line-ink{border-color:#fff;color:#fff}
  .auth-help,.auth-terms,.auth-or{color:#b9abb4}
  .auth-or::before,.auth-or::after{background:#2c2029}
  .auth-field input:focus-visible{outline-color:var(--mint);border-color:#fff}
}
.draft-notice{display:grid;gap:4px;margin-block:20px 0;padding:14px 18px;background:#fff1b8;color:var(--ink);border-radius:var(--bubble)}
.todo{padding:0 6px;background:#fff1b8;border-radius:6px}
.consent-link{padding:0;background:none;border:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.post-topic{color:var(--mute);font-size:var(--small)}
.post-close{display:grid;gap:12px;margin-top:18px;padding:20px;background:var(--soft);border-radius:var(--bubble)}
.post-more{display:grid;gap:10px;margin-top:8px}
.prose .table-scroll{max-width:100%;overflow-x:auto}
.prose table{border-collapse:collapse}
.prose th,.prose td{padding:8px 14px 8px 0;text-align:left;vertical-align:top}
.prose code,.prose a{overflow-wrap:anywhere}
[hidden]{display:none!important}
.post-by{display:flex;align-items:flex-start;gap:14px;margin-top:14px}
.doc-head .post-by p{margin-top:0}
.post-avatar{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover}
.post-made{color:var(--mute);font-size:var(--small)}
#reach{left:0;top:0;transform:translate(var(--rx,0),var(--ry,0));visibility:hidden}
#reach[style]{visibility:visible}
html:not(.js) #reach{left:62%;top:60%;transform:none;visibility:visible}
.js .blog-tools[hidden]{display:flex!important}