/* The site's stylesheet: the marketing pages (index, how-it-works, platform) and the legal pages' header and
   footer. It follows the Unknot design system's marketing register, tokens/brand.css (--mk-*, --font-display,
   --display-*) and guidelines/website.md. Fonts are the design system's self-hosted woff2 files (tokens/fonts.css):
   nothing on the site loads from another origin. */
@import url('../_ds/unknot-design-system-fb2a113e-0e91-4d10-9e5a-ff340a3634f6/tokens/fonts.css');
@import url('../_ds/unknot-design-system-fb2a113e-0e91-4d10-9e5a-ff340a3634f6/tokens/brand.css');
/* The design system proposes Newsreader for display and says to swap --font-display for another face. The site
   uses Figtree 800, the family the wordmark is built from. Newsreader stays for what a user types (.said). */
:root{--font-display:'Figtree',sans-serif;--display-weight:800;--display-tracking:-0.04em;--display-line-height:0.96}
:root{--mk-text-2:#3a3833;--gutter:clamp(20px,5vw,64px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--mk-paper);color:var(--mk-ink);font:400 17px/1.6 'Figtree',sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px}
a:hover{color:var(--mk-green)}
:focus-visible{outline:2px solid var(--mk-green);outline-offset:2px;border-radius:4px}
.ink :focus-visible,.green :focus-visible{outline-color:var(--mk-green-bright)}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);line-height:var(--display-line-height);text-wrap:balance}
h1{font-size:clamp(52px,7.5vw,var(--display-2xl))}
h2{font-size:clamp(40px,5.6vw,var(--display-xl))}
h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:-0.025em;line-height:1.05}
.eyebrow{font-size:var(--eyebrow-size);font-weight:600;letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--mk-stone)}
.lede{font-size:clamp(18px,1.6vw,var(--lead-size));line-height:var(--lead-line-height);color:var(--mk-text-2);max-width:34em;text-wrap:pretty}
.said{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:400;font-size:22px;line-height:1.3;text-wrap:pretty}
.muted{color:var(--mk-stone)}
.more{align-self:flex-start;font-size:18px;font-weight:600}

/* Sections alternate paper and ink. The one green panel on a page is the waitlist. */
.band{background:var(--mk-paper);padding:clamp(72px,10vw,160px) var(--gutter);display:flex;flex-direction:column;gap:clamp(40px,5vw,56px)}
.band.rule{border-top:1px solid var(--mk-rule)}
.head{display:flex;flex-direction:column;gap:20px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px 80px;align-items:end}
.ink{background:var(--mk-ink);color:var(--mk-paper)}
.ink .eyebrow,.ink .lede,.ink .muted{color:var(--mk-stone-on-ink)}
.green{background:var(--mk-green);color:var(--mk-paper)}
.green .lede,.green .muted{color:var(--mk-green-soft)}

/* Header: wordmark, the site's pages, the one call to action. On phones the pages go on a second row. */
.top{position:sticky;top:0;z-index:10;background:rgba(251,250,248,.94);border-bottom:1px solid var(--mk-rule);display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding:18px var(--gutter)}
.top nav{display:flex;gap:28px;font-size:15px;font-weight:500}
.top nav a{text-decoration:none;color:#57534c}
.top nav a:hover,.top nav a[aria-current]{color:var(--mk-ink)}
.top .btn{margin-left:auto;height:40px;padding:0 18px;font-size:15px}
@media (max-width:640px){.top{position:static;padding-bottom:14px}.top nav{order:3;flex-basis:100%;gap:22px}}

.btn{display:inline-flex;align-items:center;justify-content:center;flex:none;height:56px;padding:0 28px;border:0;border-radius:999px;background:var(--mk-green);color:#fff;font:600 17px/1 'Figtree',sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{color:#fff;opacity:.9}
.green .btn{background:var(--mk-ink);color:var(--mk-paper)}

/* Rules, not boxes: an ink rule on top of each group, stone dividers between columns. */
.points{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:40px}
.points li{display:flex;flex-direction:column;gap:12px;border-top:1px solid currentColor;padding-top:24px}
.points p{font-size:16px;line-height:1.55;color:var(--mk-text-2);text-wrap:pretty}
.ink .points p{color:var(--mk-stone-on-ink)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));border-top:2px solid currentColor}
.cols>div{padding:32px 32px 0 0;display:flex;flex-direction:column;gap:12px}
.cols>div+div{padding-left:32px;border-left:1px solid var(--mk-rule)}
.ink .cols>div+div{border-left-color:var(--mk-rule-on-ink)}
@media (max-width:900px){.cols>div+div{padding-left:0;border-left:0}}
/* A row: text beside a screenshot, one per surface. */
.row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:32px 64px;align-items:center;padding:clamp(40px,5vw,64px) 0 0;border-top:1px solid var(--mk-rule)}
.row .head{gap:14px}
@media (max-width:900px){.row{grid-template-columns:1fr}}
.helpers{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 48px}
.helpers li{display:flex;flex-direction:column;gap:2px;padding:16px 0;border-top:1px solid var(--mk-rule-on-ink)}
.helpers b{font-weight:600}
.helpers span{font-size:15px;color:var(--mk-stone-on-ink)}

/* Real product UI only: 1px rule, 12px radius, no shadow, frame or tilt. */
.shot{margin:0;border:1px solid var(--mk-rule);border-radius:var(--mk-radius);overflow:hidden;background:#fff}
.ink .shot{border-color:var(--mk-rule-on-ink);background:#232220}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top left}
figure{margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
figcaption{font-size:15px;color:var(--mk-stone)}
.ink figcaption{color:var(--mk-stone-on-ink)}

/* The plan comparison. On narrow screens the table scrolls sideways. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.plans{width:100%;min-width:760px;border-collapse:collapse;font-size:16px;line-height:1.45}
.plans th,.plans td{padding:16px 24px 16px 0;text-align:left;vertical-align:top;border-top:1px solid var(--mk-rule)}
.plans thead th{border-top:2px solid var(--mk-ink);padding-top:20px;font-size:20px;font-weight:700;letter-spacing:-0.02em}
.plans tbody th{font-weight:600;width:22%}
.plans td{color:var(--mk-text-2)}
.plans td.no{color:var(--mk-stone)}

.foot{background:var(--mk-ink);color:var(--mk-stone-on-ink);padding:48px var(--gutter) max(48px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{text-decoration:none}.foot a:hover{color:var(--mk-paper)}
.foot .engine{margin-left:auto;white-space:nowrap}
@media (max-width:640px){.foot{flex-direction:column;align-items:flex-start}.foot .engine{margin-left:0}}