:root{--creme:#F9FAFB;--sucre:#FEFEFF;--amande:#EFF0F2;--rule:#D7D9DC;--grege:#5E646A;--encre:#12171B;--brume:#9A9FA5;--nuit:#13191F;--nuit-2:#1D232A;--framboise-tint:#FEEFF4;--framboise-coque:#F8B9D0;--framboise-ink:#8F3C61;--framboise-garniture:#BB4468;--framboise-sel:#F8B9D0;--peche-tint:#FEF0E9;--peche-coque:#F9C0A0;--peche-ink:#91450E;--peche-garniture:#C67447;--peche-sel:#F9C0A0;--citron-tint:#F7F4DF;--citron-coque:#E5DB9F;--citron-ink:#6B5E00;--citron-garniture:#B19724;--citron-sel:#E5DB9F;--pistache-tint:#EDF8E4;--pistache-coque:#C0D7AB;--pistache-ink:#476A17;--pistache-garniture:#6B9454;--pistache-sel:#C0D7AB;--menthe-tint:#E1FAF6;--menthe-coque:#A2DBD3;--menthe-ink:#046D64;--menthe-garniture:#258C81;--menthe-sel:#A2DBD3;--myrtille-tint:#E8F6FF;--myrtille-coque:#A5D5F2;--myrtille-ink:#00658E;--myrtille-garniture:#5066A3;--myrtille-sel:#A5D5F2;--lavande-tint:#F4F1FE;--lavande-coque:#CFC8E9;--lavande-ink:#62518E;--lavande-garniture:#8C74A8;--lavande-sel:#CFC8E9;--praline-tint:#FCF1E9;--praline-coque:#CDB6A3;--praline-ink:#854F1C;--praline-garniture:#8C6452;--praline-sel:#CDB6A3;--bleuet-tint:#E7F1FF;--bleuet-coque:#B6D5FF;--bleuet-ink:#2B5C97;--bleuet-sel:#B6D5FF;--pomme-tint:#E4F6E7;--pomme-coque:#B3E0BB;--pomme-ink:#286A3B;--pomme-sel:#B3E0BB;--abricot-tint:#FCEEDD;--abricot-coque:#EFCCA1;--abricot-ink:#7D5000;--abricot-sel:#EFCCA1;--groseille-tint:#FFEBEA;--groseille-coque:#FDC1C0;--groseille-ink:#A7363F;--groseille-sel:#FDC1C0;--day-encre:#12171B;--day-creme:#F9FAFB;--day-sucre:#FEFEFF;--day-framboise-tint:#FEEFF4;--day-framboise-ink:#8F3C61;--day-framboise-sel:#F8B9D0;--day-peche-tint:#FEF0E9;--day-peche-ink:#91450E;--day-peche-sel:#F9C0A0;--day-citron-tint:#F7F4DF;--day-citron-ink:#6B5E00;--day-citron-sel:#E5DB9F;--day-pistache-tint:#EDF8E4;--day-pistache-ink:#476A17;--day-pistache-sel:#C0D7AB;--day-menthe-tint:#E1FAF6;--day-menthe-ink:#046D64;--day-menthe-sel:#A2DBD3;--day-myrtille-tint:#E8F6FF;--day-myrtille-ink:#00658E;--day-myrtille-sel:#A5D5F2;--day-lavande-tint:#F4F1FE;--day-lavande-ink:#62518E;--day-lavande-sel:#CFC8E9;--day-praline-tint:#FCF1E9;--day-praline-ink:#854F1C;--day-praline-sel:#CDB6A3;--day-bleuet-tint:#E7F1FF;--day-bleuet-ink:#2B5C97;--day-bleuet-sel:#B6D5FF;--day-pomme-tint:#E4F6E7;--day-pomme-ink:#286A3B;--day-pomme-sel:#B3E0BB;--day-abricot-tint:#FCEEDD;--day-abricot-ink:#7D5000;--day-abricot-sel:#EFCCA1;--day-groseille-tint:#FFEBEA;--day-groseille-ink:#A7363F;--day-groseille-sel:#FDC1C0;--sig-tint:var(--framboise-tint);--sig-coque:var(--framboise-coque);--sig-ink:var(--framboise-ink);--sig-garniture:var(--framboise-garniture);--sig-sel:var(--framboise-sel);--acc-tint:var(--pistache-tint);--acc-coque:var(--pistache-coque);--acc-ink:var(--pistache-ink);--acc-sel:var(--pistache-sel);--sig-tint-day:var(--day-framboise-tint);--acc-tint-day:var(--day-pistache-tint);--sig-ink-day:var(--day-framboise-ink);--acc-ink-day:var(--day-pistache-ink);--sig-sel-day:var(--day-framboise-sel);--acc-sel-day:var(--day-pistache-sel);--sig-fill:var(--sig-ink-day);color-scheme:light}@media (prefers-color-scheme:dark){:root{--creme:#13191F;--sucre:#1D232A;--amande:#282F36;--rule:#343B43;--grege:#9FA5AC;--encre:#EFF2F5;--framboise-tint:#3F2D34;--framboise-ink:#FDC1D7;--framboise-sel:#8F3C61;--peche-tint:#3F2F25;--peche-ink:#FDC7A9;--peche-sel:#91450E;--citron-tint:#363322;--citron-ink:#DFD69E;--citron-sel:#6B5E00;--pistache-tint:#2E3627;--pistache-ink:#C6DDB1;--pistache-sel:#476A17;--menthe-tint:#243734;--menthe-ink:#A8E2D9;--menthe-sel:#046D64;--myrtille-tint:#25353F;--myrtille-ink:#ACDCF9;--myrtille-sel:#00658E;--lavande-tint:#33313C;--lavande-ink:#D6CFF0;--lavande-sel:#62518E;--praline-tint:#39312B;--praline-ink:#E7CFBD;--praline-sel:#854F1C;--bleuet-tint:#273444;--bleuet-ink:#BEDAFE;--bleuet-sel:#2B5C97;--pomme-tint:#27382A;--pomme-ink:#B1E7BB;--pomme-sel:#286A3B;--abricot-tint:#3D3020;--abricot-ink:#FACF9B;--abricot-sel:#7D5000;--groseille-tint:#422C2C;--groseille-ink:#FFC8C6;--groseille-sel:#A7363F;color-scheme:dark}:where(.island){--creme:#F9FAFB;--sucre:#FEFEFF;--amande:#EFF0F2;--rule:#D7D9DC;--grege:#5E646A;--encre:#12171B;--framboise-tint:#FEEFF4;--framboise-ink:#8F3C61;--framboise-sel:#F8B9D0;--peche-tint:#FEF0E9;--peche-ink:#91450E;--peche-sel:#F9C0A0;--citron-tint:#F7F4DF;--citron-ink:#6B5E00;--citron-sel:#E5DB9F;--pistache-tint:#EDF8E4;--pistache-ink:#476A17;--pistache-sel:#C0D7AB;--menthe-tint:#E1FAF6;--menthe-ink:#046D64;--menthe-sel:#A2DBD3;--myrtille-tint:#E8F6FF;--myrtille-ink:#00658E;--myrtille-sel:#A5D5F2;--lavande-tint:#F4F1FE;--lavande-ink:#62518E;--lavande-sel:#CFC8E9;--praline-tint:#FCF1E9;--praline-ink:#854F1C;--praline-sel:#CDB6A3;--bleuet-tint:#E7F1FF;--bleuet-ink:#2B5C97;--bleuet-sel:#B6D5FF;--pomme-tint:#E4F6E7;--pomme-ink:#286A3B;--pomme-sel:#B3E0BB;--abricot-tint:#FCEEDD;--abricot-ink:#7D5000;--abricot-sel:#EFCCA1;--groseille-tint:#FFEBEA;--groseille-ink:#A7363F;--groseille-sel:#FDC1C0;--sig-tint:var(--sig-tint-day);--sig-ink:var(--sig-ink-day);--sig-sel:var(--sig-sel-day);--acc-tint:var(--acc-tint-day);--acc-ink:var(--acc-ink-day);--acc-sel:var(--acc-sel-day);color:var(--encre);}}.f-framboise{--sh:var(--framboise-coque);--fi:var(--framboise-garniture)}.f-peche{--sh:var(--peche-coque);--fi:var(--peche-garniture)}.f-citron{--sh:var(--citron-coque);--fi:var(--citron-garniture)}.f-pistache{--sh:var(--pistache-coque);--fi:var(--pistache-garniture)}.f-menthe{--sh:var(--menthe-coque);--fi:var(--menthe-garniture)}.f-myrtille{--sh:var(--myrtille-coque);--fi:var(--myrtille-garniture)}.f-lavande{--sh:var(--lavande-coque);--fi:var(--lavande-garniture)}.f-praline{--sh:var(--praline-coque);--fi:var(--praline-garniture)}/* The site's styles: brand draft 24's landing.css (brand/24-lisse/landing.css), with the theme
   switch left out (the pages follow the system's appearance) and the draft's inline styles turned
   into the classes at the end. build.py puts the palette's custom properties before this file and
   resolves the asset names. No inline styles anywhere: the pages' policy is style-src 'self'. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/Inter-var-latin.57613d771e24.woff2) format("woff2")}
:root{
  --sans:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",Menlo,ui-monospace,monospace;
  --sh:currentColor;--fi:currentColor;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--creme)}
body{font-family:var(--sans);color:var(--encre);background:var(--creme);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.mac{display:block;overflow:visible}
.float{animation:float 7s ease-in-out infinite;transform:rotate(var(--r,0deg));filter:drop-shadow(0 14px 16px rgba(24,22,18,.12))}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(calc(var(--r,0deg) + 4deg))}}
@media (prefers-reduced-motion:reduce){.float{animation:none}}
.lockup{display:inline-flex;align-items:center;gap:10px;font-weight:500;letter-spacing:-.035em;font-size:23px}
.lockup svg{width:26px;height:26px;fill:currentColor}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font-weight:500;font-size:16px;letter-spacing:-.01em;transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:20px;height:20px;fill:currentColor}
.btn.pri{background:var(--sig-fill);color:var(--day-sucre)}
.btn.pri:hover{box-shadow:0 10px 24px -8px var(--sig-fill)}
.btn.ink{background:var(--encre);color:var(--creme)}
.btn.ghost{box-shadow:inset 0 0 0 1.5px var(--rule)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--sig-coque);color:var(--encre);font-size:14px;font-weight:500}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--sig-garniture)}
.tag{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--rule);font-size:15px;font-weight:500;color:var(--grege)}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--abricot-ink)}
h1{font-size:76px;line-height:1;letter-spacing:-.045em;font-weight:600}
h2{font-size:52px;line-height:1.04;letter-spacing:-.04em;font-weight:600}
h3{font-size:22px;letter-spacing:-.02em;font-weight:600}
.lede{font-size:20px;line-height:1.5;color:var(--grege);max-width:540px}
.eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--grege)}
.go{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:16px;color:var(--encre)}
.go svg{width:18px;height:18px;transition:transform .15s}
.go:hover svg{transform:translateX(3px)}
.check{display:flex;gap:10px;align-items:flex-start}
.check svg{width:20px;height:20px;flex:none;color:var(--sig-ink);margin-top:2px}

/* Nav */
nav{height:84px;display:flex;align-items:center;gap:40px}
nav .links{display:flex;gap:28px;font-size:15px;color:var(--grege);margin-left:auto}
nav .links a:hover{color:var(--encre)}
nav .btn{height:42px;font-size:15px;padding:0 20px}

/* Hero */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;padding:48px 0 104px}
.hero h1{margin:24px 0 26px;font-size:56px}
.hero .ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero .fine{margin-top:22px;font-size:14px;color:var(--grege);display:flex;gap:18px;flex-wrap:wrap}
.hero .fine span{display:inline-flex;align-items:center;gap:6px}
.hero .fine svg{width:16px;height:16px;color:var(--sig-ink)}
.stage{position:relative;height:540px;border-radius:40px;background:var(--sig-tint);box-shadow:inset 0 0 0 1px var(--rule);transition:background .4s}
/* By night the signature's tint is a dark plum; the stage takes carton instead, a tray in the slate. */
@media (prefers-color-scheme:dark){:root .stage{background:var(--amande)}}
.stage .win{position:absolute;left:40px;top:92px;width:420px;background:var(--sucre);border-radius:16px;box-shadow:0 40px 80px -20px rgba(24,22,18,.35),0 0 0 1px rgba(24,22,18,.06);overflow:hidden;font-family:-apple-system,"Inter",sans-serif}
.win .bar{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--creme);border-bottom:1px solid var(--rule)}
.win .bar i{width:12px;height:12px;border-radius:50%;background:var(--amande)}
.win .bar b{margin-left:12px;font-size:13px;font-weight:600}
.win .r{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--rule);font-size:13px}
.win .r:first-of-type{border-top:0}
.win .r .m{width:26px;height:26px;flex:none}
.win .r .t{flex:1;min-width:0}
.win .r .t b{display:block;font-weight:600}
.win .r .t span{color:var(--grege);font-size:12px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%}
.p-pass{background:var(--pomme-tint);color:var(--pomme-ink)} .p-pass i{background:var(--pomme-ink)}
.p-fail{background:var(--groseille-ink);color:var(--sucre)} .p-fail i{background:var(--sucre)}
.p-run{background:var(--bleuet-tint);color:var(--bleuet-ink)} .p-run i{background:var(--bleuet-ink);animation:blink 1.2s ease-in-out infinite}
.p-wait{background:var(--amande);color:var(--grege)} .p-wait i{box-shadow:inset 0 0 0 1.5px var(--grege)}
@keyframes blink{50%{opacity:.25}}
.stage .slots{position:absolute;left:40px;bottom:40px;display:flex;gap:10px;align-items:center;font-size:14px;font-weight:500;color:var(--encre);flex-wrap:wrap}
.stage .slots .slot{display:flex;align-items:center;gap:8px;background:var(--sucre);box-shadow:0 0 0 1px var(--rule);padding:8px 14px 8px 10px;border-radius:999px}
.stage .slots svg{width:20px;height:20px}
.stage .slots .slot i{width:8px;height:8px;border-radius:50%;background:var(--pomme-ink)}

/* Sections */
section{padding:104px 0}
/* A band a hair off the page: between papier and carton by day; by night the footer's graphite beside the slate, the two darks of Ruban's landing page. */
section.band{background:color-mix(in srgb,var(--creme) 55%,var(--amande))}
@media (prefers-color-scheme:dark){:root section.band{background:var(--day-encre)}}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:52px}
.head h2{margin-top:16px}
.head .lede{max-width:440px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{border-radius:28px;padding:32px;min-height:380px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.step .n{font-size:14px;font-weight:500;opacity:.75;font-family:var(--mono)}
.step h3{font-size:30px;margin-top:auto;letter-spacing:-.035em}
.step p{font-size:16px;line-height:1.5;margin-top:12px;opacity:.85}
.step .mac{position:absolute;right:26px;top:24px;width:108px;height:108px}
.what{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border-radius:28px;overflow:hidden;box-shadow:0 0 0 1px var(--rule)}
.what > div{background:var(--sucre);padding:36px 32px 40px}
.what .mac{width:52px;height:52px;margin-bottom:26px}
.what p{font-size:16px;line-height:1.55;color:var(--grege);margin-top:10px}

/* Our servers */
.servers{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.servers > div{border-radius:28px;padding:36px;background:var(--sucre);box-shadow:0 0 0 1px var(--rule)}
.servers ul{list-style:none;margin-top:22px;display:grid;gap:12px;font-size:16px;line-height:1.45}
.servers li svg{color:var(--grege)}
.servers li.ok svg{color:var(--sig-ink)}
.servers .go{margin-top:24px}
.servers .note{grid-column:1/-1;background:var(--amande);box-shadow:none;display:flex;gap:28px;align-items:center}
.servers .note .mac{width:56px;height:56px;flex:none}
.servers .note p{font-size:17px;line-height:1.5}

/* Apps */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.appcard{border-radius:32px;padding:40px;min-height:500px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.appcard h3{font-size:30px;letter-spacing:-.035em}
.appcard p{font-size:16px;line-height:1.5;color:var(--grege);margin-top:10px;max-width:400px}
.appcard .go{margin-top:18px}
.mini-phone{position:absolute;right:52px;bottom:-200px;width:260px;height:480px;border-radius:44px;background:var(--sucre);box-shadow:0 0 0 9px var(--day-encre),0 40px 60px -10px rgba(24,22,18,.4);padding:54px 18px 0;font-family:-apple-system,"Inter",sans-serif}
.mini-phone .di{position:absolute;left:50%;top:12px;width:84px;height:24px;margin-left:-42px;border-radius:20px;background:var(--day-encre)}
.mini-phone h4{font-size:24px;font-weight:700;letter-spacing:-.02em}
.mini-phone .card{margin-top:14px;border-radius:16px;padding:14px;background:var(--amande)}
.mini-phone .card b{font-size:12px;font-weight:600;opacity:.7;text-transform:uppercase;letter-spacing:.04em}
.mini-phone .card div{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
.mini-phone .row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:13px;font-weight:500}
.mini-phone .row .mac{width:22px;height:22px}
.mini-phone .row .pill{margin-left:auto}
.mini-win{position:absolute;right:-24px;bottom:-56px;width:460px;height:330px;border-radius:14px;background:var(--sucre);box-shadow:0 40px 60px -10px rgba(24,22,18,.35),0 0 0 1px var(--rule);display:grid;grid-template-columns:140px 1fr;overflow:hidden;font-family:-apple-system,"Inter",sans-serif;font-size:12px}
.mini-win .sb{background:var(--creme);padding:42px 10px 0;border-right:1px solid var(--rule)}
.mini-win .sb div{padding:6px 10px;border-radius:7px;display:flex;align-items:center;gap:8px;font-weight:500}
.mini-win .sb div.on{background:var(--sig-sel);color:var(--encre)}
.mini-win .sb svg{width:14px;height:14px}
.mini-win .ct{padding:42px 18px 0}
.mini-win .ct .title{font-size:16px;font-weight:700;margin-bottom:8px}
.mini-win .ct .r{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule)}
.mini-win .ct .r .mac{width:20px;height:20px}
.mini-win .ct .r .pill{margin-left:auto;font-size:11px}
.mini-win .tl{position:absolute;left:14px;top:14px;display:flex;gap:7px}
.mini-win .tl i{width:11px;height:11px;border-radius:50%;background:var(--amande)}

/* Pricing: the card on the left, the notes beside it as plain text, outside the price. */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.price{border-radius:28px;padding:44px 44px 40px;background:var(--sucre);box-shadow:0 0 0 1px var(--rule);display:flex;flex-direction:column}
.price.hi{background:var(--sig-tint);box-shadow:0 0 0 2px var(--sig-coque)}
.price .nm{font-size:15px;font-weight:500}
.price .amt{font-size:60px;font-weight:500;letter-spacing:-.045em;margin:22px 0 2px;line-height:1}
.price .amt small{font-size:18px;letter-spacing:-.01em;color:var(--grege);font-weight:400}
.price .sub{color:var(--grege);font-size:16px}
.price ul{list-style:none;margin:28px 0 32px;display:grid;gap:12px;font-size:16px;line-height:1.45}
.price .btn{justify-content:center}
.price .soon{font-size:16px;font-weight:500;display:flex;align-items:center;gap:10px}
.price .soon i{width:8px;height:8px;border-radius:50%;background:var(--abricot-ink)}
.notes{display:grid;gap:32px;padding:12px 0}
.notes h3{font-size:19px}
.notes p{font-size:16px;line-height:1.55;color:var(--grege);margin-top:8px;max-width:440px}

/* Close: a plain section on paper, the macarons at its edges. */
.close{text-align:center;position:relative;overflow:hidden;padding:104px 0 128px}
.close h2{font-size:64px}
.close .lede{margin:22px auto 36px;color:var(--grege);max-width:560px}
.close .mac{position:absolute}
.close .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
footer{background:var(--day-encre);color:var(--day-creme);padding:72px 0 44px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer h5{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--brume);margin-bottom:18px}
footer li{list-style:none;font-size:15px;line-height:2.1;color:var(--day-creme);opacity:.85}
footer .tagline{margin-top:16px;color:var(--brume);font-size:15px;line-height:1.6;max-width:320px}
footer .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:64px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:var(--brume)}
@media (max-width:1100px){.hero h1{font-size:60px}.hero,.apps,.servers,.prices{grid-template-columns:1fr}.servers .note{grid-column:auto}.stage{max-width:600px}.steps,.what{grid-template-columns:1fr}h1{font-size:60px}footer .cols{grid-template-columns:1fr 1fr}.head{flex-direction:column;align-items:flex-start}}
@media (max-width:640px){section{padding:72px 0}.wrap{padding:0 16px}nav .links{display:none}h1,.hero h1{font-size:44px}h2{font-size:36px}.close{padding:72px 0 88px}.close h2{font-size:40px}.close .mac{display:none}.price{padding:32px 24px}.stage{height:460px}.stage .win{left:16px;right:16px;width:auto}.mini-win{display:none}.appcard{min-height:0}.mini-phone{position:relative;right:auto;bottom:auto;margin:28px auto -220px}.hero .ctas{flex-direction:column}.step{min-height:0}.step .mac{width:72px;height:72px}.step h3{margin-top:80px}.servers .note{flex-direction:column;align-items:flex-start}footer .cols{grid-template-columns:1fr}}

/* What the draft wrote inline. */
.defs{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:2px solid var(--sig-ink);outline-offset:3px;border-radius:6px}
.float{position:absolute}
/* The hero's floaters as draft 24's build places them (random.Random(7) for the delays). */
.fl-0{width:110px;height:110px;left:-40px;top:30px;--r:-14deg;animation-delay:-1.9s}
.fl-1{width:90px;height:90px;left:470px;top:-34px;--r:16deg;animation-delay:-0.9s}
.fl-2{width:120px;height:120px;left:494px;top:400px;--r:-8deg;animation-delay:-3.9s}
.fl-3{width:80px;height:80px;left:-34px;top:400px;--r:22deg;animation-delay:-0.4s}
.fl-4{width:64px;height:64px;left:380px;top:470px;--r:-20deg;animation-delay:-3.2s}
.step.t-framboise{background:var(--framboise-tint)}
.step.t-menthe{background:var(--menthe-tint)}
.step.t-peche{background:var(--peche-tint)}
.appcard.mac-app{background:var(--sig-tint)}
.appcard.ios-app{background:var(--acc-tint)}
.close .c-1{width:120px;height:120px;left:6%;bottom:72px;--r:-14deg;--sh:var(--sig-coque);--fi:var(--sig-garniture)}
.close .c-2{width:96px;height:96px;right:7%;top:88px;--r:16deg;--sh:var(--acc-coque);--fi:var(--acc-garniture);animation-delay:-3s}
footer a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* Text pages: privacy, terms, what the servers hold. */
.doc{max-width:760px;padding:56px 0 104px}
.doc h1{font-size:52px;margin:16px 0 20px}
.doc h2{font-size:30px;letter-spacing:-.03em;margin:56px 0 14px}
.doc h3{font-size:19px;margin:28px 0 8px}
.doc p,.doc li{font-size:17px;line-height:1.6}
.doc p{margin:12px 0}
.doc ul{margin:12px 0 12px 22px}
.doc li{margin:6px 0}
.doc a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.doc a:hover{text-decoration-color:currentColor}
.doc .updated{color:var(--grege);font-size:15px}
.doc table{border-collapse:collapse;width:100%;margin:16px 0;font-size:15px;line-height:1.5}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule)}
.doc th{font-weight:600}
.doc code{font-family:var(--mono);font-size:.9em}
.doc .note{border-radius:18px;background:var(--amande);padding:18px 22px;margin:24px 0}
@media (max-width:640px){.doc h1{font-size:40px}.doc table{display:block;overflow-x:auto}}