/* ceed.so · the stylesheet · 2026-09-12 (sign-up landing page rules, the Industries menu on a phone and the home page's product frames added the same day)
   One sheet for every page. Three faces, self-hosted from /assets/fonts/ (font-src 'self'):
   Schibsted Grotesk for sentences and the chrome, Newsreader at its display size for the
   headlines and the large numbers, Commit Mono for every figure the product itself shows.
   Three colours: paper, ink and green, with one dark surface (evergreen) at the foot of a page.
   Rules the pages keep: no inline style attribute (style-src 'self'), every drawn state is a
   class, the meter widths are data-m rules at the end. Tokens are the --paper … --held block. */

@font-face{font-family:"Ceed Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/ceed-sans-normal.81661eee.woff2)format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Ceed Serif";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ceed-serif-display.f704f997.woff2)format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Ceed Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ceed-mono.63dee8cd.woff2)format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#f9f7f2;        /* the page */
  --plate:#efebe3;        /* the quieter band */
  --card:#fffdf9;         /* a document on the desk */
  --ink:#1b1a17;          /* every word */
  --ink-2:#44413b;        /* the sentence under a headline */
  --dim:#605c54;          /* captions, dates, labels · 6.2:1 on paper */
  --hair:#e2ddd3;         /* one-pixel rules on paper and card */
  --hair-2:#d9d3c7;       /* one-pixel rules on the plate */
  --green:#1e6b44;        /* proof and state · 6.0:1 on paper */
  --green-wash:#e6f2ea;
  --held:#a34e07;         /* a held hour, inside a card only · 5.7:1 */
  --held-wash:#fbf1e6;
  --mid:#12211a;          /* evergreen · the one dark surface, at the foot */
  --mid-dim:#a8b3aa;      /* 7.7:1 on evergreen */
  --mid-hair:#2b3a32;
  --green-l:#8fdcb0;      /* proof on evergreen · 10.4:1 */
  --sans:"Ceed Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Ceed Serif",Georgia,"Times New Roman",serif;
  --mono:"Ceed Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:6px;                /* controls */
  --r-card:12px;          /* cards, tiles, frames */
  --wrap:1120px;
  --dur:.15s;--ease:ease;
}

/* ground */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:proportional-nums lining-nums;text-rendering:optimizeLegibility}
.site{min-height:40vh}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}
ol,ul{padding:0}
a{color:inherit}
img,svg,iframe{display:block}
img{max-width:100%;height:auto}
b,strong{font-weight:600}
::selection{background:var(--green-wash);color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
.f{display:inline-block}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the headline voice: the serif, at its display size, medium weight, never bold */
.h1,.h2,.h3,.igrp-h,.fld-h,.foot-h,.item h2,.prose h1,.prose h2,.ab-h1,.ab-h2,.cp h1,.cp h2,.n,.big{font-family:var(--serif);font-weight:500;font-variant-numeric:lining-nums proportional-nums;text-wrap:balance}
.h1{font-size:clamp(38px,4.6vw,58px);line-height:1.04;letter-spacing:-.015em;max-width:16ch}
.h2{font-size:clamp(30px,3.5vw,44px);line-height:1.08;letter-spacing:-.012em;max-width:22ch}
.h3{font-size:24px;line-height:1.15;letter-spacing:-.008em}
.sub{margin:24px 0 0;max-width:30em;font-size:clamp(18px,1.6vw,20px);line-height:1.45;color:var(--ink-2)}
.lede{margin:20px 0 0;max-width:34em;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--ink-2)}
.lede+.lede{margin-top:14px}
.lede a,.more a,.sub a,.note a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(27,26,23,.35)}
.lede a:hover,.more a:hover,.sub a:hover,.note a:hover{color:var(--green);text-decoration-color:currentColor}
.note{margin:16px 0 0;font-size:14px;line-height:1.45;color:var(--dim)}
.kicker{margin:0 0 20px;font-size:14px;line-height:1.4;color:var(--dim)}
.kicker a{text-decoration:none}
.kicker a:hover{color:var(--green)}
.act{margin:32px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.more{margin:28px 0 0;font-size:17px;line-height:1.5}
.center{text-align:center}
.center .h2,.center .lede,.center .sub{margin-left:auto;margin-right:auto}
.center .act{justify-content:center}

/* one button */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:var(--r);background:var(--ink);color:var(--paper);font-size:16px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{background:var(--mid);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:var(--card);color:var(--ink)}

/* chrome · the header */
.nav{background:var(--paper)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.nav-mark{display:block;flex:none;color:var(--ink)}
.nav-links{position:relative;display:flex;align-items:center;gap:30px;font-size:15px;line-height:1;list-style:none}
.nav-links a{color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--green)}
.nav-links a[aria-current=page]{color:var(--dim)}
.nav-acct{display:flex;align-items:center;gap:22px;margin-left:6px}
.nav-links a.nav-signin{color:var(--dim);font-weight:400}
.nav-links a.nav-signin:hover{color:var(--green)}
.nav-links a.nav-signup{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:var(--r);background:var(--ink);color:var(--paper);font-weight:500;transition:background-color var(--dur) var(--ease)}
.nav-links a.nav-signup:hover{background:var(--mid);color:var(--paper)}
/* the Industries menu · opens on hover and focus, CSS only, not drawn under 760px */
.nav-has-menu>a{padding:26px 0}
.nav-menu{position:absolute;top:100%;right:0;z-index:20;display:none;padding-top:10px}
.nav-has-menu:hover .nav-menu,.nav-has-menu:focus-within .nav-menu{display:block}
.nav-menu-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;width:min(860px,calc(100vw - 48px));padding:24px 28px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:0 12px 32px rgba(27,26,23,.08);text-align:left}
.nav-menu-g{min-width:0}
.nav-menu-gh{margin:0 0 6px;font-size:12px;font-weight:600;line-height:1.4;color:var(--dim)}
.nav-menu-in ul{list-style:none;margin:0;padding:0}
.nav-links .nav-menu-in a{display:block;padding:5px 0;font-size:15px;line-height:1.3;color:var(--ink);text-decoration:none}
.nav-links .nav-menu-in a:hover{color:var(--green)}
.nav-menu-all{grid-column:1/-1;margin:0;padding-top:14px;border-top:1px solid var(--hair);font-size:15px;line-height:1.3}
.nav-links .nav-menu-all a{font-weight:500}
/* the same menu on a phone · Industries is a tap target: a <details> with no body, its summary the word and a chevron;
   the panel is its sibling and opens as a sheet under the header when it is open, still CSS only. Not drawn at 760px and above. */
.nav-dd{display:none}
.nav-dd summary{display:flex;align-items:center;gap:5px;padding:20px 0;cursor:pointer;list-style:none;color:var(--ink);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.nav-dd summary::-webkit-details-marker{display:none}
.nav-dd summary[aria-current=page]{color:var(--dim)}
.nav-dd summary svg{flex:none;color:var(--dim);transition:transform var(--dur) var(--ease)}
.nav-dd[open] summary,.nav-dd[open] summary svg{color:var(--green)}
.nav-dd[open] summary svg{transform:rotate(180deg)}
@keyframes nav-drop{from{opacity:0;transform:translateY(-6px)}}

/* rhythm · the hero is two columns: the words, then the product in its own words */
.hero{padding:72px 0 88px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:56px;align-items:center}
.hero .h1{max-width:none}
.hero .wrap>*{grid-column:1}
.hero .card{grid-column:2;grid-row:1/span 8;margin:0;justify-self:end;width:min(440px,100%)}
/* a section that shows one screen beside its words does the same, when the browser knows :has() */
.sec .wrap:has(> .card):not(:has(> .grid)):not(:has(> .steps)){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:56px;align-items:center}
.sec .wrap:has(> .card):not(:has(> .grid)):not(:has(> .steps))>*{grid-column:1}
.sec .wrap:has(> .card):not(:has(> .grid)):not(:has(> .steps))>.card{grid-column:2;grid-row:1/span 12;margin:0;justify-self:end;width:min(480px,100%)}
.hero .act{margin-top:36px}
.hero .note{max-width:36em}
.hero-left{text-align:left}
.sec{padding:112px 0}
.sec-tight{padding:88px 0}
.plate{background:var(--plate)}
.plate .card,.plate .tile,.plate .step,.plate .xq{border-color:var(--hair-2)}

/* the numbers · a ledger row, four figures on the plate between two rules */
section.band{background:var(--plate);color:var(--ink);border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px;padding-top:44px;padding-bottom:44px}
.numbers>div{min-width:0;padding-left:20px;border-left:1px solid var(--hair-2)}
.numbers>div:first-child{padding-left:0;border-left:0}
.n{font-size:clamp(34px,3.6vw,50px);line-height:1;letter-spacing:-.01em;color:var(--green);font-variant-numeric:lining-nums tabular-nums}
.l{margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--dim)}
.center .n,.big{display:block;margin:0 auto;font-size:clamp(88px,12vw,148px);font-weight:400;line-height:.95;letter-spacing:-.02em;color:var(--green)}
.center .n+.h2,.big+.h2{margin-top:22px}

/* tiles · a document with a hairline, never a shadow */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:48px 0 0}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:28px 28px 30px;min-width:0}
.tile p{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.tile .more{margin-top:18px;font-size:15px}
.tile .card{margin:22px 0 0;width:100%}
a.tile{display:block;text-decoration:none}
a.tile:hover{border-color:var(--ink)}
a.tile:hover .h3{color:var(--green)}
.tile-min{padding:22px 24px 24px}
.tile-min .h3{font-size:22px}
.tile-min p{margin:8px 0 0;font-size:15px;color:var(--dim)}
.tile-min .more{margin-top:12px;font-size:14px}
.tile-min .more a{text-decoration:none;color:var(--dim);font-weight:500}
.tile-min .more a:hover{color:var(--green)}
/* the hub's groups */
.lede+.igrp{margin-top:48px}
.igrp{margin:56px 0 0}
.igrp-h{font-size:28px;line-height:1.15}
.igrp-l{max-width:34em;margin:8px 0 0;font-size:17px;line-height:1.45;color:var(--dim)}
.igrp .grid{margin-top:20px}

/* the product, in its own words · a card is a real screen state */
.card{width:min(520px,100%);margin:48px 0 0;padding:22px 24px 24px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);text-align:left;color:var(--ink)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;line-height:1.4;color:var(--dim)}
.card-top b{color:var(--ink);font-weight:500}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:var(--held-wash);color:var(--held);font-size:12px;font-weight:500;letter-spacing:.01em;white-space:nowrap}
.chip-ok{background:var(--green-wash);color:var(--green)}
.chip-mid{background:var(--plate);color:var(--dim)}
.fig{display:flex;align-items:baseline;gap:10px;margin:16px 0 0}
.fig b{font-weight:500;font-size:42px;line-height:1;letter-spacing:-.025em;font-variant-numeric:proportional-nums lining-nums}
.fig span{font-size:16px;color:var(--dim)}
.meter{display:flex;height:6px;margin:16px 0 0;border-radius:3px;background:var(--plate);overflow:hidden}
.meter i{display:block;height:100%;background:var(--green)}
.meter i+i{background:var(--held)}
.entry{margin:18px 0 0;font-size:15px;line-height:1.45;color:var(--ink)}
.status{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--held)}
.status-ok{color:var(--green)}
.status-dim{color:var(--dim)}
.verbs{display:flex;gap:8px;margin:18px 0 0}
.verbs span{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--hair);border-radius:var(--r);background:var(--card);color:var(--ink);font-size:14px;font-weight:500}
.verbs span:first-child{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rows{margin:16px 0 0;border-top:1px solid var(--hair)}
.row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.45}
.row span:last-child{font-family:var(--mono);font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums slashed-zero}
.row-total{font-weight:600}
.row-total span:last-child{color:var(--ink)}
.row-dim{color:var(--dim)}
.row-ok span:last-child{color:var(--green)}
.row-held span:last-child{color:var(--held)}
.card-foot{margin:14px 0 0;font-size:13px;line-height:1.45;color:var(--dim)}
.msg{margin:18px 0 0;padding:14px 16px;background:var(--plate);border-radius:var(--r-card);font-size:15px;line-height:1.5}
.msg b{font-weight:500}
.msg .msg-from{display:block;margin-bottom:6px;font-size:13px;color:var(--dim)}

/* three states, three steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:48px 0 0;list-style:none}
.step{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:24px;min-width:0}
.tag{display:block;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.01em;color:var(--dim)}
.tag-held{color:var(--held)}
.tag-ok{color:var(--green)}
.step p{margin:12px 0 0;font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-.005em}
.su-steps .tag{color:var(--green)}

/* questions · hairline rows, the chevron turns */
.faq{max-width:760px;margin:40px 0 0}
.faq details{border-top:1px solid var(--hair);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.plate .faq details{border-color:var(--hair-2)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;cursor:pointer;list-style:none;font-size:clamp(17px,1.5vw,19px);font-weight:500;line-height:1.3;letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;color:var(--dim);transition:transform var(--dur) var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq summary:hover{color:var(--green)}
.faq p{max-width:42em;margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--ink-2)}
.faq p+p{margin-top:8px}
.faq a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(27,26,23,.35)}
.faq a:hover{color:var(--green)}

/* a voice from the field */
.say{max-width:34em;margin:28px 0 0;padding:0 0 0 22px;border-left:2px solid var(--green)}
.say p{font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:var(--ink)}
.say cite{display:block;margin:10px 0 0;font-size:13px;font-style:normal;line-height:1.4;color:var(--dim)}
.say cite a{color:inherit}
.fld-h{margin:48px 0 0;font-size:24px;line-height:1.2}
.fld-h+.field{margin-top:20px}
.field{list-style:none;max-width:780px;margin:40px 0 0;border-top:1px solid var(--hair)}
.plate .field,.plate .field li{border-color:var(--hair-2)}
.field li{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.45}
.field .src{flex:none;width:76px;padding-top:2px;font-size:13px;font-weight:500;color:var(--dim)}
.field a{text-decoration:none;font-weight:600}
.field a:hover{color:var(--green)}
.field div>span{display:block;margin:2px 0 0;color:var(--dim)}
.xqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 0}
.xqs-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.xq{display:flex;flex-direction:column;margin:0;padding:22px 24px 20px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);min-width:0}
.xq blockquote{flex:1;margin:0;padding:0;border:0}
.xq blockquote p{font-size:16px;line-height:1.5;color:var(--ink)}
.xq blockquote p+p{margin-top:10px}
.xq figcaption{margin:16px 0 0;font-size:13px;line-height:1.45;color:var(--dim)}
.xq figcaption b{color:var(--ink);font-weight:600}
.xq figcaption a{color:inherit}
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 0}
.vids-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vid{margin:0;min-width:0}
.vid .embed{position:relative;aspect-ratio:16/9;background:var(--mid);border-radius:var(--r-card);overflow:hidden}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid figcaption{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--dim)}
.vid figcaption b{color:var(--ink);font-weight:600}
.vid figcaption a{color:inherit}

/* the blog · the index is a list, a post is a column */
.list{max-width:760px;margin:48px 0 0}
.item{border-top:1px solid var(--hair);padding:28px 0}
.item:last-child{border-bottom:1px solid var(--hair)}
.item time{display:block;font-size:13px;color:var(--dim)}
.item h2{margin:8px 0 0;font-size:30px;line-height:1.15;letter-spacing:-.008em}
.item h2 a{text-decoration:none}
.item h2 a:hover{color:var(--green)}
.item p{max-width:40em;margin:10px 0 0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.item .by{margin:10px 0 0;font-size:13px;color:var(--dim)}
.prose{max-width:680px;margin:0 auto;padding:64px 0 0}
.prose h1{margin:14px 0 0;font-size:clamp(34px,4.2vw,54px);line-height:1.06;letter-spacing:-.012em}
.prose .standfirst{margin:24px 0 0;font-size:clamp(19px,1.7vw,22px);line-height:1.4;color:var(--ink-2)}
.prose p{margin:24px 0 0;font-size:17px;line-height:1.65}
.prose h2{margin:60px 0 0;font-size:31px;line-height:1.12;letter-spacing:-.008em}
.prose h2+p{margin-top:16px}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(27,26,23,.35)}
.prose a:hover{color:var(--green);text-decoration-color:currentColor}
.prose blockquote{margin:28px 0 0;padding:0 0 0 22px;border-left:2px solid var(--green)}
.prose blockquote p{margin:0;font-size:17px;line-height:1.6}
.prose blockquote p+p{margin-top:12px}
.prose cite{display:block;margin-top:8px;font-size:15px;font-style:normal;color:var(--dim)}
.prose ol{margin:20px 0 0;padding:0 0 0 1.4em;font-size:17px;line-height:1.6}
.prose ol li{margin:8px 0 0}
.prose .card{width:100%;margin:40px 0 0}
.prose .card p,.prose .steps p{margin:0;font-size:15px;line-height:1.45}
.prose .card .fig{margin:16px 0 0}
.prose .card .entry{margin:18px 0 0}
.prose .card .status{margin:4px 0 0}
.prose .card .card-foot{margin:14px 0 0;font-size:13px}
.prose .card .fig b{font-size:40px;line-height:1}
.prose .card .fig span{font-size:16px}
.prose .msg{font-size:15px;line-height:1.5}
.prose .steps{margin:40px 0 0;grid-template-columns:repeat(3,minmax(0,1fr))}
.prose .steps p,.prose .step p{margin:12px 0 0;font-size:17px;line-height:1.35}
.prose .sources{margin:56px 0 0;padding-top:24px;border-top:1px solid var(--hair)}
.prose .sources h2{margin:0;font-size:20px}
.prose .sources ol{margin-top:12px;font-size:13px;line-height:1.5;color:var(--dim)}
.prose .sources li{margin:6px 0 0;overflow-wrap:anywhere}
.prose .sources a{color:inherit}
.prose .author{display:flex;align-items:center;gap:16px;margin:56px 0 0;padding-top:24px;border-top:1px solid var(--hair);font-size:15px;line-height:1.5;color:var(--dim)}
.prose .author img{width:56px;height:56px;border-radius:50%;flex:none}
.prose .author span{display:block}
.prose .author a{color:var(--ink)}
.prose .kicker a{text-decoration:none}
.prose .post-act{margin:48px 0 0}
.prose .post-act .btn{margin-right:16px}
.prose .figure{margin:40px 0 0}
.prose .figure img{width:100%;border:1px solid var(--hair);border-radius:var(--r-card);background:var(--card)}
.prose .shot img{border-radius:var(--r-card)}
.prose figcaption{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--dim)}
.prose figcaption a{color:inherit}
.prose .vid{margin:40px 0 0}
.prose .show{list-style:none;margin:24px 0 0;border-top:1px solid var(--hair)}
.prose .show li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.45}
.prose .show .ep{flex:none;width:36px;font-weight:600;color:var(--dim)}
.prose .show a{text-decoration:none;font-weight:600}
.prose .show a:hover{color:var(--green)}
.prose .show div>span{display:block;margin:2px 0 0;color:var(--dim)}
.prose .founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:32px 0 0}
.prose .founder{display:flex;gap:16px;align-items:center;padding:18px 20px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card)}
.prose .founder img{width:72px;height:72px;border-radius:50%;flex:none;object-fit:cover}
.prose .founder b{display:block;font-size:17px;font-weight:600;line-height:1.3}
.prose .founder span{display:block;margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--dim)}
.prose .faq{margin:24px 0 0;max-width:none}
.prose .faq summary{font-size:19px}
.prose .faq p{margin:12px 0 0;font-size:17px;line-height:1.55}
.prose .xq{margin:40px 0 0}
.prose .xq blockquote{border:0;padding:0}
.prose .xq blockquote p{font-size:18px;line-height:1.45;font-weight:500;letter-spacing:-.005em}
.prose .xq blockquote p+p{margin-top:10px}
.prose .xq figcaption{display:flex;flex-wrap:wrap;gap:4px 8px;margin:14px 0 0}
.prose .books{list-style:none;margin:24px 0 0;border-top:1px solid var(--hair)}
.prose .books li{padding:14px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.45}
.prose .books li>a{text-decoration:none;font-weight:600;font-size:17px}
.prose .books li>a:hover{color:var(--green)}
.prose .books span{display:block;margin:3px 0 0;color:var(--dim)}
.prose .books span a{color:inherit}

/* about · a quiet two-column page */
.ab-wrap{max-width:960px;margin:0 auto;padding:56px 32px 112px}
.ab-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:96px 0 0}
.ab-top{padding-top:0}
.ab-h1{font-size:clamp(34px,3.6vw,44px);line-height:1.08;letter-spacing:-.012em}
.ab-h2{margin:0 0 18px;font-size:30px;line-height:1.12;letter-spacing:-.008em}
.ab-l .ab-h2{margin:0;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.4;color:var(--dim)}
.ab-r p{margin:0 0 16px;font-size:17px;line-height:1.6}
.ab-r p:last-child{margin-bottom:0}
.ab-r a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(27,26,23,.35)}
.ab-r a:hover{color:var(--green)}
.ab-cap{font-size:15px;line-height:1.45}
.ab-cap b{font-weight:500}
.ab-cap span{display:block;color:var(--dim)}
.ab-r .ab-sig{margin-top:20px;font-family:var(--serif);font-size:20px;color:var(--ink)}
.ab-photo{margin:64px 0 0}
.ab-photo img{width:100%;border-radius:var(--r-card);background:var(--plate)}
.ab-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ab-person b{display:block;font-size:17px;font-weight:600;line-height:1.35}
.ab-person span{display:block;font-size:15px;line-height:1.45;color:var(--dim)}
.ab-person p{margin:8px 0 0;font-size:15px;line-height:1.55}
.ab-r .ab-act{margin-top:24px}
.ab-qrow{padding-top:56px}
.ab-r .faq{max-width:none;margin:0}
.ab-r .faq details:first-child{border-top:0;padding-top:0}
.ab-qa-label{color:var(--dim)}
.ab-r .faq summary{font-size:18px}
.ab-r .faq p{margin:12px 0 0;max-width:40em}

/* compare · where Ceed stands, row by row, dated */
.cp{position:relative;padding:64px 32px 96px}
.cp-col{max-width:760px;margin:0 auto}
.cp-wide{max-width:1000px;margin:0 auto}
.cp h1{font-size:clamp(32px,4.2vw,54px);line-height:1.06;letter-spacing:-.012em}
.cp-lede{max-width:38em;margin:24px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:var(--ink-2)}
.cp-n{margin:0 0 14px;font-size:13px;font-weight:500;color:var(--dim)}
.cp-field{margin-top:88px}
.cp-field p{font-size:17px;line-height:1.6;color:var(--ink-2)}
.cp-field p.cp-turn{margin-top:32px;font-family:var(--serif);font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.3;color:var(--ink)}
.cp h2{margin:88px 0 0;font-size:clamp(26px,2.8vw,36px);line-height:1.12;letter-spacing:-.008em}
.cp-scroll{max-width:100%;margin-top:28px;overflow-x:auto}
.cp table{table-layout:fixed;border-collapse:collapse;width:100%;min-width:960px;font-size:15px;line-height:1.45;color:var(--ink)}
.cp col:first-child{width:24%}
.cp col:nth-child(2){width:15%}
.cp th,.cp td{text-align:left;vertical-align:top;border-top:1px solid var(--hair);padding:12px 16px 12px 0}
.cp thead th{border-top:0;border-bottom:1px solid var(--ink);padding-top:0;font-weight:600}
.cp tbody th{font-weight:400}
.cp tbody tr:last-child th,.cp tbody tr:last-child td{border-bottom:1px solid var(--hair)}
.cp th:first-child,.cp td:first-child{position:sticky;left:0;background:var(--paper)}
.cp td:nth-child(2){color:var(--green);font-weight:500}
.cp .cp-price td{font-variant-numeric:tabular-nums}
.cp-dated{margin:18px 0 0;font-size:15px;line-height:1.5;color:var(--dim)}
.cp-dated a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cp-ask{margin-top:88px}
.cp-ask p{font-size:17px;line-height:1.5;color:var(--ink-2)}
.cp-ask a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cp-ask a:hover{color:var(--green)}
.cp-end{margin-top:48px}

/* the foot · the one dark surface: evergreen, the promise, the directory, the name drawn large */
footer.band{background:var(--mid);color:var(--paper)}
.foot{padding:104px 0 40px}
.foot-h{font-size:clamp(36px,4.6vw,60px);line-height:1.04;letter-spacing:-.012em;color:var(--paper);max-width:16ch}
.foot .act{margin-top:32px}
.foot .btn-light{background:var(--paper);color:var(--mid)}
.foot .btn-light:hover{background:#fff;color:var(--mid)}
.foot-about{max-width:46em;margin:64px 0 0;font-size:15px;line-height:1.55;color:var(--mid-dim)}
.foot-about a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--mid-hair)}
.foot-about a:hover{color:var(--green-l)}
.dir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:48px 0 0;padding-top:32px;border-top:1px solid var(--mid-hair)}
.dir-ind{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 20px}
.dir-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dir+.dir{margin-top:36px;padding-top:32px}
.dir h2{margin:0;font-size:13px;font-weight:600;line-height:1.4;color:var(--paper)}
.dir h2 a{color:inherit;text-decoration:none}
.dir h2 a:hover{color:var(--green-l)}
.dir ul{list-style:none;margin:10px 0 0}
.dir li{margin:8px 0 0;font-size:13px;line-height:1.4}
.dir-ind li{margin-top:6px}
.dir a{color:var(--mid-dim);text-decoration:none}
.dir a:hover{color:var(--green-l)}
.foot-wordmark{margin:64px 0 0;color:var(--paper)}
.foot-wordmark svg{width:100%;height:auto;aspect-ratio:428/138}
.foot-wordmark+.legal{margin-top:32px}
.legal{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:40px 0 0;padding:24px 0 0;border-top:1px solid var(--mid-hair);font-size:13px;line-height:1.4;color:var(--mid-dim)}
.legal a{color:var(--paper);text-decoration:none}
.legal a:hover{color:var(--green-l)}
.foot .nav-mark{color:var(--paper)}

/* the sign-up page · a landing page: the chrome is the mark and Sign in, the foot has no directory,
   three lines under the headline where a landing page puts its value props, the pains in three groups
   with the product state that ends each one, and the founders beside their words */
.su-hero .card{margin-top:0}
.props{list-style:none;margin:28px 0 0;max-width:36em;border-top:1px solid var(--hair)}
.props li{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:2px 24px;padding:13px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.45}
.props b{font-weight:500;color:var(--ink)}
.props span{color:var(--ink-2)}
.pains .lede+.igrp{margin-top:56px}
.pains .igrp{margin-top:64px}
.pains .igrp .grid{margin-top:24px}
.pain .h3{font-size:22px;line-height:1.2}
.pain>p{font-size:15px;line-height:1.5}
.pain{padding:26px 24px 28px}
.pain .card{margin-top:20px;padding:16px 16px 18px}
.pain .card-top{font-size:12px}
.pain .row{padding:8px 0;font-size:14px}
.pain .row span:last-child{font-size:13px}
.pain .entry{margin-top:14px;font-size:14px}
.pain .status{font-size:14px}
.pain .card-foot{margin-top:12px;font-size:12.5px}
.pain .msg{margin-top:14px;padding:12px 14px;font-size:14px}
.pain .verbs{margin-top:14px}
.pain .verbs span{height:30px;padding:0 12px;font-size:13px}
.su-proof .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:56px;align-items:center}
.su-proof .wrap>*{grid-column:1}
.su-proof .photo{grid-column:2;grid-row:1/span 6;margin:0;justify-self:end;width:min(440px,100%)}
.photo img{width:100%;border-radius:var(--r-card);background:var(--plate)}
.photo figcaption{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--dim)}
.su-proof .say{margin-top:32px}
.su-proof .more{margin-top:24px;font-size:15px;color:var(--dim)}
.su-proof .more a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(27,26,23,.35)}
.su-proof .more a:hover{color:var(--green);text-decoration-color:currentColor}
.foot-min .foot-about{margin-top:56px}
.foot-min .foot-wordmark{margin-top:56px}

/* narrower */
@media (width<=1000px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero .wrap>*{grid-column:1}
  .hero .card{grid-column:1;grid-row:auto;justify-self:start;margin:40px 0 0;width:min(520px,100%)}
  .sec .wrap:has(> .card):not(:has(> .grid)):not(:has(> .steps)){grid-template-columns:minmax(0,1fr)}
  .sec .wrap:has(> .card):not(:has(> .grid)):not(:has(> .steps))>.card{grid-column:1;grid-row:auto;justify-self:start;margin:40px 0 0;width:min(520px,100%)}
  .dir-ind{grid-template-columns:repeat(3,minmax(0,1fr))}
  .numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numbers>div:nth-child(3){padding-left:0;border-left:0}
  .su-proof .wrap{grid-template-columns:minmax(0,1fr)}
  .su-proof .photo{grid-column:1;grid-row:auto;justify-self:start;margin:40px 0 0;width:min(520px,100%)}
}
@media (width<=760px){
  .wrap{padding:0 20px}
  .nav-in{height:60px;gap:16px}
  .nav-links{gap:16px;font-size:14px}
  .nav-acct{gap:12px;margin-left:0}
  .nav-links a.nav-signup{height:32px;padding:0 12px}
  .nav-menu,.nav-has-menu:hover .nav-menu,.nav-has-menu:focus-within .nav-menu{display:none}
  .nav-has-menu>a{display:none}
  .nav-dd{display:block}
  .nav{position:relative}
  .nav:has(.nav-dd[open]){position:sticky;top:0;z-index:30}
  .nav-links{position:static}
  .nav-has-menu .nav-dd[open]~.nav-menu{display:block;left:0;right:0;padding-top:0;animation:nav-drop var(--dur) var(--ease)}
  .nav-menu-in{display:block;width:auto;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);overflow-y:auto;overscroll-behavior:contain;padding:0 20px 10px;border-width:1px 0;border-radius:0}
  .nav-menu-g{padding:14px 0 10px;border-top:1px solid var(--hair)}
  .nav-menu-g:first-child{border-top:0}
  .nav-menu-gh{margin:0 0 2px}
  .nav-links .nav-menu-in a{padding:9px 0;font-size:16px}
  .nav-menu-all{padding:14px 0 6px;font-size:16px}
  .hero{padding:44px 0 64px}
  .hero .card{margin-top:36px;padding:18px 20px 20px}
  .card{margin-top:40px;padding:18px 20px 20px}
  .numbers{gap:24px 20px;padding-top:36px;padding-bottom:36px}
  .sec{padding:72px 0}
  .sec-tight{padding:56px 0}
  .steps,.grid,.grid-2,.xqs,.xqs-2,.vids,.vids-2,.people,.ab-people,.prose .founders,.prose .steps{grid-template-columns:minmax(0,1fr)}
  .steps,.grid{margin-top:32px}
  .center .n,.big{font-size:clamp(72px,22vw,96px)}
  .field li{flex-direction:column;gap:4px}
  .field .src{width:auto;padding-top:0}
  .lede+.igrp{margin-top:36px}
  .igrp{margin-top:40px}
  .igrp-h{font-size:24px}
  .igrp-l{font-size:15px}
  .foot{padding:72px 0 32px}
  .foot-about{margin-top:48px}
  .dir{gap:28px 20px}
  .dir-ind,.dir-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-wordmark{margin-top:48px}
  .foot-wordmark+.legal{margin-top:24px}
  .prose{padding-top:36px}
  .ab-wrap{padding:32px 20px 80px}
  .ab-row{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:64px}
  .ab-photo{margin-top:44px}
  .ab-qrow{padding-top:40px}
  .ab-r .faq details:first-child{padding-top:6px}
  .cp{padding:40px 20px 72px}
  .cp table{min-width:760px}
  .cp col:first-child{width:168px}
  .cp th:first-child,.cp td:first-child{border-right:1px solid var(--hair);padding-right:12px}
  .cp th+th,.cp td+td{padding-left:14px}
  .props li{grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0}
  .su-hero .props{order:1;margin-top:32px}
  .su-hero .card{order:2}
  .pains .lede+.igrp{margin-top:40px}
  .pains .igrp{margin-top:48px}
  .pain .h3{font-size:21px}
  .foot-min .foot-about,.foot-min .foot-wordmark{margin-top:44px}
}
@media (width<=420px){
  .nav-in{gap:10px}
  .nav .nav-mark svg{height:16px}
  .nav-links{gap:10px;font-size:13px}
  .nav-acct{gap:8px}
  .nav-links a.nav-signup{height:30px;padding:0 9px}
  .nav-dd summary{gap:3px}
}
@media (prefers-reduced-motion:reduce){
  .faq summary svg,.nav-dd summary svg,.btn,.nav-links a.nav-signup{transition:none}
  .nav-has-menu .nav-dd[open]~.nav-menu{animation:none}
}

/* the home page (2026-09-12, night) · the product beside every claim: a quiet link beside the button, two cards side by side,
   a picture of the product in a hairline frame, and the three-screen unit (the words, then the screen, alternating) */
.act-link{font-size:15px;line-height:1.3;color:var(--dim);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(27,26,23,.35)}
.act-link:hover{color:var(--green);text-decoration-color:currentColor}
.hero .kicker{max-width:36em}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin:44px 0 0}
.pair>div{min-width:0}
.pair .tag{margin:0 0 10px}
.pair .card{width:100%;margin:0}
.shot-img{border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;background:#fff}
.shot-img img{width:100%;height:auto}
.shot-wide{margin:48px 0 0}
.shot-wide figcaption{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--dim)}
.shots{display:grid;gap:56px;margin:56px 0 0}
.shot{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);column-gap:48px;align-items:center;margin:0}
.shot figcaption p{margin:12px 0 0;max-width:30em;font-size:17px;line-height:1.5;color:var(--ink-2)}
.shot:nth-child(even){grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr)}
.shot:nth-child(even) .shot-img{order:-1}
.plate .shot-img{border-color:var(--hair-2)}
#inside .act{margin-top:56px}
.pains .grid{margin-top:44px}
.su-proof .say{max-width:30em}
@media (width<=1000px){
  .shot,.shot:nth-child(even){grid-template-columns:minmax(0,1fr);row-gap:20px}
  .shot:nth-child(even) .shot-img{order:0}
  .shot figcaption p{max-width:34em}
}
@media (width<=760px){
  .pair{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .shots{gap:44px;margin-top:40px}
  .shot-wide{margin-top:36px}
  #inside .act{margin-top:44px}
  .act-link{width:100%}
}

/* meter widths · one rule per drawn state, because an inline style is dropped by the CSP */
.meter[data-m="88.9"] i:first-child{width:88.9%}.meter[data-m="88.9"] i+i{width:11.1%}
.meter[data-m="89.3"] i:first-child{width:89.3%}.meter[data-m="89.3"] i+i{width:10.7%}
.meter[data-m="90.9"] i:first-child{width:90.9%}.meter[data-m="90.9"] i+i{width:9.1%}
.meter[data-m="92"] i:first-child{width:92%}.meter[data-m="92"] i+i{width:8%}
.meter[data-m="92.3"] i:first-child{width:92.3%}.meter[data-m="92.3"] i+i{width:7.7%}
.meter[data-m="93"] i:first-child{width:93%}.meter[data-m="93"] i+i{width:7%}
.meter[data-m="93.5"] i:first-child{width:93.5%}.meter[data-m="93.5"] i+i{width:6.5%}
.meter[data-m="95.2"] i:first-child{width:95.2%}.meter[data-m="95.2"] i+i{width:4.8%}
.meter[data-m="96"] i:first-child{width:96%}.meter[data-m="96"] i+i{width:4%}
.meter[data-m="96.4"] i:first-child{width:96.4%}.meter[data-m="96.4"] i+i{width:3.6%}
.meter[data-m="97.1"] i:first-child{width:97.1%}.meter[data-m="97.1"] i+i{width:2.9%}
.meter[data-m="97.2"] i:first-child{width:97.2%}.meter[data-m="97.2"] i+i{width:2.8%}
.meter[data-m="97.4"] i:first-child{width:97.4%}.meter[data-m="97.4"] i+i{width:2.6%}
.meter[data-m="97.6"] i:first-child{width:97.6%}.meter[data-m="97.6"] i+i{width:2.4%}
.meter[data-m="98.4"] i:first-child{width:98.4%}.meter[data-m="98.4"] i+i{width:1.6%}
.meter[data-m="98.5"] i:first-child{width:98.5%}.meter[data-m="98.5"] i+i{width:1.5%}
.meter[data-m="100"] i:first-child{width:100%}