/* Weft public site — design system.
   Token names first (values in tokens.css), then base, layout, components and page chapters.
   Product mockups (owner app, Workshop, wall panel …) live in
   marketing-illustrations.css and keep their own internal styling. */

/* The values live once in tokens.css (shared with Workshop); these short
   names are the site's own vocabulary, and sections redefine them locally. */
:root{
  /* colour */
  --bg:var(--weft-bg);--surface:var(--weft-surface);--surface-2:var(--weft-surface-2);
  --line:var(--weft-line);--line-2:var(--weft-line-2);
  --text:var(--weft-text);--text-2:var(--weft-text-2);--text-3:var(--weft-text-3);
  --paper:var(--weft-paper);--paper-2:var(--weft-paper-2);--paper-line:var(--weft-paper-line);
  --ink:var(--weft-ink);--ink-2:var(--weft-ink-2);--ink-3:var(--weft-ink-3);
  --accent:var(--weft-accent);--accent-display:var(--weft-accent);--accent-tint:var(--weft-accent-tint);
  --good:var(--weft-good);--warn:var(--weft-warn);
  --hover:var(--weft-hover);--hover-line:var(--weft-hover-line);

  /* type */
  --display:var(--weft-font-display);
  --sans:var(--weft-font-sans);
  --d1:var(--weft-text-d1);--d2:var(--weft-text-d2);--d3:var(--weft-text-d3);
  --t-lead:var(--weft-text-lead);
  --t-body:var(--weft-text-body);--t-small:var(--weft-text-small);--t-label:var(--weft-text-label);

  /* space */
  --s1:var(--weft-space-1);--s2:var(--weft-space-2);--s3:var(--weft-space-3);--s4:var(--weft-space-4);--s5:var(--weft-space-5);
  --s6:var(--weft-space-6);--s7:var(--weft-space-7);--s8:var(--weft-space-8);--s9:var(--weft-space-9);
  --section:var(--weft-section);
  --gutter:var(--weft-gutter);

  /* shape */
  --r1:var(--weft-radius-1);--r2:var(--weft-radius-2);--r3:var(--weft-radius-3);
  --max:var(--weft-max);
  --shadow:var(--weft-shadow);
  --ease:var(--weft-ease);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--t-body)/1.6 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;height:auto}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:min(calc(100% - 2*clamp(16px,4vw,40px)),var(--max));margin-inline:auto}

/* ---------- type ---------- */
.d1,.d2,.d3,.serif{font-family:var(--display);font-weight:400;letter-spacing:-.02em;text-wrap:balance;font-optical-sizing:auto}
.d1{font-size:var(--d1);line-height:.98;letter-spacing:-.03em}
.d2{font-size:var(--d2);line-height:1.02;letter-spacing:-.025em}
.d3{font-size:var(--d3);line-height:1.08}
.d1 em,.d2 em{font-style:normal;color:var(--accent-display)}
.d1 span{display:block}
/* kicker: the context line above a headline, set to be read, not skimmed */
.eyebrow{display:block;margin:0 0 var(--s4);font-size:clamp(17px,1.4vw,21px);font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--accent)}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--text-2);max-width:34em}
.muted{color:var(--text-2)}
.note{font-size:14px;color:var(--text-3)}

/* ---------- sections ---------- */
.sec{padding-block:var(--section);position:relative}
.sec--tight{padding-block:calc(var(--section) * .66)}
.sec--line{border-top:1px solid var(--line)}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--paper .eyebrow{color:var(--accent)}
.sec--paper .lead,.sec--paper .muted{color:var(--ink-2)}
.sec--paper .note{color:var(--ink-3)}

/* a dark band for product moments: the same tokens, redefined */
.sec--dark{--bg:var(--weft-band-bg);--surface:var(--weft-band-surface);--surface-2:var(--weft-band-surface-2);--line:var(--weft-line);--line-2:var(--weft-line-2);--text:var(--weft-text);--text-2:var(--weft-text-2);--text-3:var(--weft-band-text-3);--accent:var(--weft-accent);--accent-display:var(--weft-accent);--hover:var(--weft-hover);--hover-line:var(--weft-hover-line);background:var(--bg);color:var(--text)}
.sec--dark .photo--slot{background:radial-gradient(120% 90% at 75% 15%,#262019,#121416 65%)}

/* heading block */
.head{max-width:44rem;margin-bottom:var(--s8)}
.head .lead{margin-top:var(--s5)}
/* the lead's last line sits on the headline's last baseline, not the bottom of its box */
.head--split{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);align-items:end;align-items:last baseline}
.head--split .lead{margin-top:0}
.head--center{margin-inline:auto;text-align:center}
.head--center .lead{margin-inline:auto}

/* two-column chapter: copy + media */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gutter);align-items:center}
.split--even{grid-template-columns:1fr 1fr}
.split--flip>:first-child{order:2}
.split__copy .d2{margin-bottom:var(--s5)}
.split__copy p+p,.founderNote p+p{margin-top:var(--s4)}
.split__copy .more,.split__copy .btns{margin-top:var(--s6)}
.split__copy .items:not(.items--stack){margin-top:var(--s7)}

/* ---------- components ---------- */
.btns{display:flex;flex-wrap:wrap;gap:var(--s3)}
.btn{background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--weft-radius-pill);border:1px solid transparent;font-size:16px;font-weight:600;line-height:1;white-space:nowrap;transition:transform .2s var(--ease),background .2s,border-color .2s,filter .2s}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:var(--weft-on-accent)}
.btn-accent:hover{filter:brightness(1.07)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-ghost{border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{background:var(--hover);border-color:var(--hover-line)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-small{min-height:40px;padding:0 16px;font-size:14px}

.more{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600}
.more::after{content:"→";transition:transform .2s var(--ease)}
.more:hover::after{transform:translateX(3px)}

/* hairline item grid: the default way to list facts */
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));column-gap:var(--s7);row-gap:var(--s7)}
.items--2{--cols:2}.items--4{--cols:4}
.items>*{border-top:1px solid var(--line);padding-top:var(--s5)}
.sec--paper .items>*{border-color:var(--paper-line)}
.items .k{display:block;margin-bottom:var(--s3);font-size:var(--t-label);font-weight:700;letter-spacing:var(--weft-tracking-label);text-transform:uppercase;color:var(--text-3)}
.items .num{display:block;margin-bottom:var(--s4);font:400 30px/1 var(--display);color:var(--accent);font-variant-numeric:lining-nums}
.items b{display:block;margin-bottom:var(--s2);font-size:18px;font-weight:600;line-height:1.35}
.items p{font-size:var(--t-small);line-height:1.6;color:var(--text-2)}
.sec--paper .items .k{color:var(--ink-3)}
.sec--paper .items p{color:var(--ink-2)}
.items a{display:block;height:100%}
.items a:hover b{color:var(--accent)}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{padding:7px 14px;border-radius:var(--weft-radius-pill);border:1px solid var(--line-2);font-size:14px;color:var(--text-2)}
.sec--paper .chip{border-color:var(--paper-line);color:var(--ink-2)}

.panel{border:1px solid var(--line);border-radius:var(--r3);background:var(--surface)}

.check{list-style:none;margin:0;padding:0}
.check li{padding:var(--s3) 0;border-top:1px solid var(--line);color:var(--text-2)}
.check li{position:relative;padding-left:28px}
.check li::before{content:"✓";position:absolute;left:0;color:var(--good)}
.check--plus li::before{content:"+";color:var(--accent)}
.sec--paper .check li{border-color:var(--paper-line);color:var(--ink-2)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid var(--line)}
.navin{height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s5)}
.brandRow{display:inline-flex;align-items:center;gap:10px;color:var(--text);justify-self:start}
.brandMark{width:33px;height:22px;color:#d0683a;flex:none}.brandWord{width:57px;height:15px;display:block}
.navlinks{display:flex;gap:28px;font-size:14px;color:var(--text-2)}
.navlinks a{transition:color .2s}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--text)}
.navlinks a[aria-current="page"]{font-weight:600}
.navActions{display:flex;align-items:center;gap:var(--s2);justify-self:end}
.loginLink{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--weft-radius-pill);font-size:14px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s}
.loginLink:hover{background:var(--hover);border-color:var(--hover-line)}
.mobileLogin{display:none}
.callLink{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;font-size:14px;font-weight:600;color:var(--text-2);white-space:nowrap;transition:color .2s}
.callLink:hover{color:var(--text)}
.callNote{margin-top:var(--s6);font-size:var(--t-small);color:var(--text-2)}
.callNote .more{margin-left:var(--s2)}
.sec--paper .callNote{color:var(--ink-2)}
.menuBtn{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.menuBtn span{display:block;width:16px;height:2px;border-radius:2px;background:var(--text)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(64px,9vw,128px) clamp(72px,9vw,136px);overflow:clip}
.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gutter);align-items:center}
/* the hero eyebrow steps back: a quiet label, so the orange belongs to the headline */
.hero .eyebrow{margin-bottom:var(--s6);font-size:var(--t-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.hero .d1{margin-bottom:var(--s6)}
.hero .lead{margin-bottom:var(--s7)}
.heroProof{margin-top:var(--s5);font-size:14px;color:var(--text-3)}
.hero__media{position:relative;display:grid;place-items:center;min-height:clamp(380px,40vw,560px)}
.glow{position:absolute;inset:-10% -30% -10% 0;background:radial-gradient(closest-side at 60% 45%,rgba(212,87,42,.12),transparent 72%);pointer-events:none}
.hero__media .wallPanel{position:relative;width:min(560px,100%)}
.hero__media .coreMock.heroCore{position:absolute;right:-28px;bottom:6%;width:230px;rotate:2.5deg;z-index:2}
.hero__media .heroPhone{position:relative;height:min(580px,62vw);width:auto}

/* stage hero: headline across, product large underneath */
.hero--stage{text-align:center;padding-bottom:0}
.hero--stage .d1{margin-inline:auto}
.hero--stage .lead{margin-inline:auto}
.hero--stage .btns{justify-content:center}
.stage{position:relative;margin:clamp(56px,7vw,96px) auto 0;width:min(860px,100%);padding-bottom:clamp(72px,9vw,136px);text-align:left}
.stage .glow{inset:-20% -25% 0}
.stage .wallPanel{position:relative;width:100%}
.stage .coreMock.heroCore{position:absolute;right:-64px;bottom:clamp(40px,6vw,96px);width:260px;rotate:2.5deg;z-index:2;text-align:left;box-shadow:0 30px 60px rgba(0,0,0,.45)}

/* ---------- chapters ---------- */
/* owner experience panel on the homepage */
.framed{border:1px solid var(--line);border-radius:36px;background:var(--surface);padding:clamp(28px,5vw,72px)}
.framed .appProblem{background:var(--bg)}

/* layers diagram */
.stack{display:grid;gap:10px}
.stackLayer{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:var(--s4);padding:20px 24px;border-radius:var(--r2);border:1px solid var(--line);background:var(--surface)}
.stackLayer .k{font-size:11px;letter-spacing:var(--weft-tracking-label);text-transform:uppercase;font-weight:700;color:var(--text-3)}
.stackLayer b{font-size:18px;font-weight:600}
.stackLayer.weftLayer{background:var(--accent-tint);border-color:rgba(212,87,42,.5)}
.stackLayer.weftLayer .k{color:var(--accent)}
.stackLayer.weftLayer .chip{border-color:rgba(212,87,42,.35);color:var(--accent)}
.stackLayer.systems{border-style:dashed;border-color:var(--line-2);background:transparent}

/* closing call to action */
.cta{text-align:center}
.cta .d2{max-width:16ch;margin:0 auto var(--s5)}
.cta .lead,.hero--stage .lead,.head--center .lead{text-wrap:balance}
.cta .lead{margin:0 auto var(--s7)}
.cta .btns{justify-content:center}

/* founder */
.founderNote{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gutter);align-items:center}
.founderNote img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 60%;border-radius:var(--r3)}
.founderNote .d2{margin-bottom:var(--s5)}
.founderNote p+p{margin-top:var(--s4)}
.founderNote .more{margin-top:var(--s6)}
.founderStory{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gutter);align-items:start}
.founderStory figure{margin:0;position:sticky;top:100px}
.founderStory figure img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 60%;border-radius:var(--r3)}
.founderStory p{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:36em}
.founderStory p+p{margin-top:var(--s5)}
.founderStory .lead{font-size:22px;color:var(--ink)}
.byline{display:flex;align-items:center;gap:14px;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--paper-line);font-weight:600}
.byline img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.byline small{display:block;font-weight:400;color:var(--ink-3);font-size:14px}

/* parts row on How it works */
.parts{margin-top:var(--s8)}

/* workshop media pair */
.toolsShow{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto;column-gap:var(--s6);margin-top:var(--s8)}
.toolsShow figure{margin:0;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.toolsShow figure>:first-child{align-self:end}
.toolsShow figcaption{align-self:start}
.toolsShow figcaption{margin-top:var(--s4);font-size:var(--t-small);color:var(--text-2)}
.toolsShow figcaption b{display:block;color:var(--text);font-weight:600}

/* examples (before and after) */
.exampleTabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}
.exampleTab{padding:10px 18px;border-radius:var(--weft-radius-pill);border:1px solid var(--line-2);background:transparent;color:var(--text-2);font-weight:600}
.exampleTab[aria-selected="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.exampleKept{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s6)}
.exampleKept span{margin-right:var(--s2);font-size:11px;letter-spacing:var(--weft-tracking-label);text-transform:uppercase;font-weight:700;color:var(--text-3)}
.exampleKept b{padding:6px 12px;border-radius:var(--weft-radius-pill);border:1px solid var(--line-2);font-size:13px;font-weight:500;color:var(--text-2)}
.exampleCols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.exampleToday,.exampleWeft{display:flex;flex-direction:column;border-radius:var(--r3);padding:var(--s6)}
.example ul{margin-bottom:var(--s5)!important}
.examplePain,.exampleWin{margin-top:auto!important}
/* before recedes into the page; after comes forward on paper */
.exampleToday{background:transparent;border:1px solid var(--line-2)}
.exampleWeft{--text:#121416;--text-2:#3f4644;--text-3:#757c7a;--accent:#bf4a1c;--line:rgba(18,20,22,.12);background:var(--paper);color:var(--text);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.exampleToday li{color:var(--text-3)}
.exampleHead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5)}
.exampleHead .k{font-size:11px;letter-spacing:var(--weft-tracking-label);text-transform:uppercase;font-weight:700;color:var(--text-3)}
.exampleWeft .exampleHead .k{color:var(--accent)}
.exampleHead strong{font:400 24px/1.15 var(--display);letter-spacing:-.025em;text-align:right}
.exampleToday strong{color:var(--text)}
.example ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.example li{position:relative;padding-left:20px;font-size:var(--t-small);line-height:1.55;color:var(--text-2)}
.exampleToday li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--text-3)}
.exampleWeft li::before{content:"";position:absolute;left:0;top:.4em;width:10px;height:6px;border:solid var(--accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.examplePain{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);color:var(--text-2);font-size:var(--t-small);font-weight:500}

/* pricing */
.productGrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.productCard{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,4vw,48px)}
.productName{font-size:32px;font-weight:600;letter-spacing:-.02em}
.productCard>p{margin-top:var(--s2);color:var(--text-2)}
.price{margin-top:var(--s6);font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1}
.productCard>p.priceUnit{margin-top:var(--s3);font-size:14px;color:var(--text-3)}
.productCard .check{align-self:stretch;margin-top:var(--s6);margin-bottom:var(--s6)}
.productCard .check li{color:var(--text)}
.productCard .btn{margin-top:auto}
.regionSwitch{margin-top:var(--s4);font-size:13px;color:var(--text-3)}
.regionSwitch a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.regionSwitch a[aria-current]{color:var(--text);font-weight:600;text-decoration:none}
.pricingNotes{margin-top:var(--s8)}

.timeline2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--s6);border-top:1px solid var(--line-2)}
.timeline2 li{position:relative;padding-top:var(--s6)}
.timeline2 li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:#c4beb2}
.timeline2 li.now::before{background:var(--accent);box-shadow:0 0 0 5px rgba(212,87,42,.18)}
.timeline2 time{display:block;margin-bottom:var(--s2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--text-3)}
.timeline2 li.now time{color:var(--accent)}
.timeline2 b{display:block;margin-bottom:var(--s2);font-size:18px;font-weight:600}
.timeline2 p{font-size:var(--t-small);color:var(--text-2)}
.pilotLink{margin-top:var(--s3);padding:0;border:0;background:none;color:var(--accent);font-weight:600}

/* integrations */
.integrationGroups{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);row-gap:var(--s8)}
.integrationGroup h3{padding-bottom:var(--s3);border-bottom:1px solid var(--line-2);font-size:12px;letter-spacing:var(--weft-tracking-label);text-transform:uppercase;font-weight:700;color:var(--accent)}
.integrationGroup.pending h3{color:var(--text-3)}
.integrationGroup.pending .chips{margin-top:var(--s5)}
.integrationGroup.pending .note{margin-top:var(--s4)}
.integration+.integration{border-top:1px solid var(--line)}
.integration summary{list-style:none;display:grid;grid-template-columns:1fr auto;gap:2px var(--s3);padding:var(--s4) 0;cursor:pointer}
.integration summary::-webkit-details-marker{display:none}
.integration summary::after{content:"+";grid-row:1;grid-column:2;color:var(--text-3);font-size:20px;line-height:1}
.integration[open] summary::after{content:"−"}
.integration summary b{font-size:17px;font-weight:600}
.integration[open] summary b{color:var(--accent)}
.integration summary small{grid-column:1/-1;font-size:14px;color:var(--text-3)}
.integration dl{display:grid;grid-template-columns:110px 1fr;gap:6px var(--s4);margin:0 0 var(--s5);font-size:14px}
.integration dt{color:var(--text-3);font-weight:600}
.integration dd{margin:0;color:var(--text-2)}
.integrationMore{margin:0 0 var(--s5);font-size:14px}
/* one integration's own page */
.crumbs{display:flex;gap:var(--s2);margin-bottom:var(--s6);font-size:14px;color:var(--text-3)}
.crumbs a{color:var(--accent);font-weight:600}
.integrationHero .head{max-width:52rem}
.integrationHero .head .lead{margin-top:var(--s6)}
.integrationFacts{row-gap:var(--s6)}
.relatedIntegrations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s7)}
.relatedIntegrations a{display:grid;gap:2px;padding:var(--s4) 0;border-top:1px solid var(--line)}
.relatedIntegrations b{font-size:17px;font-weight:600}
.relatedIntegrations a:hover b{color:var(--accent)}
.relatedIntegrations small{font-size:14px;color:var(--text-3)}
.relatedAll{margin-top:var(--s6)}
/* comparison pages */
.comparisonHero .head{max-width:52rem}
.comparisonHero .head .lead{margin-top:var(--s6)}
.compareTable{width:100%;table-layout:fixed;border-collapse:collapse;font-size:var(--t-small);line-height:1.55}
.compareTable th,.compareTable td{padding:var(--s4) var(--s5) var(--s4) 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.compareTable thead th{border-top:0;padding-top:0;font-size:17px;font-weight:600}
.compareTable thead th:nth-child(2){color:var(--accent)}
.compareTable thead td{width:20%;border-top:0}
.compareTable tbody th{font-size:var(--t-label);font-weight:700;letter-spacing:var(--weft-tracking-label);text-transform:uppercase;color:var(--text-3)}
.compareTable td{color:var(--text-2)}
.compareChecked{margin-top:var(--s5)}
.compareChoose{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);row-gap:var(--s7)}
.compareChoose .d3{margin-bottom:var(--s5)}
.compareSources{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s2);font-size:var(--t-small)}
.compareSources a{color:var(--accent)}
.compareSources a:hover{text-decoration:underline}
.compareList{margin-top:var(--s8)}
.protocolLine{margin-top:var(--s8);font-size:14px;color:var(--text-3)}
.protocolLine span{margin-right:var(--s3);font-size:11px;letter-spacing:var(--weft-tracking-label);text-transform:uppercase;font-weight:700}
.asideRow{display:flex;justify-content:space-between;align-items:center;gap:var(--s6);margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)}
.asideRow p{max-width:46em;color:var(--text-2)}
.asideRow strong{color:var(--text);font-weight:600}
.sec--paper .asideRow{border-color:var(--paper-line)}
.sec--paper .asideRow p{color:var(--ink-2)}
.sec--paper .asideRow strong{color:var(--ink)}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gutter);align-items:start}
.faqList details{border-top:1px solid var(--line);padding:var(--s5) 0}
.faqList details:last-child{border-bottom:1px solid var(--line)}
.faqList summary{list-style:none;display:flex;justify-content:space-between;gap:var(--s5);font-size:18px;font-weight:600;cursor:pointer}
.faqList summary::-webkit-details-marker{display:none}
.faqList summary::after{content:"+";color:var(--text-3);font-weight:400;font-size:22px;line-height:1}
.faqList details[open] summary::after{content:"−"}
.faqList details p{margin-top:var(--s3);max-width:42em;color:var(--text-2)}
.faqList a{color:var(--accent)}

/* forms: contact drawer */
.drawer{position:fixed;inset:0;z-index:100;display:none}
.drawer.open{display:block}
.shade{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(6px)}
.drawerPanel{position:absolute;top:0;right:0;width:min(520px,100%);height:100%;overflow:auto;background:var(--paper);color:var(--ink);padding:var(--s6)}
.drawerPanel .eyebrow{color:var(--ink-3)}
.drawerHead{display:flex;justify-content:space-between;align-items:start;gap:var(--s5)}
.drawerHead h2{font:400 40px/1.05 var(--display);letter-spacing:-.035em}
.close{width:40px;height:40px;border-radius:50%;border:1px solid var(--paper-line);background:transparent;font-size:20px;line-height:1}
.field{display:block;margin:var(--s4) 0}
.field span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--paper-line);border-radius:var(--r1);background:#fff;color:var(--ink)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.topicRow{display:flex;flex-wrap:wrap;gap:var(--s2)}
.topicRow label{padding:8px 14px;border:1px solid var(--paper-line);border-radius:var(--weft-radius-pill);background:#fff;font-size:14px;cursor:pointer}
.field .topicRow input{width:auto;min-height:0;margin:0 6px 0 0;padding:0;accent-color:var(--ink)}
.formNote{margin-top:var(--s3);font-size:13px;color:var(--ink-3)}
.diyWrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gutter);row-gap:var(--s7);align-items:start}
.diyWrap .lead{margin-top:var(--s5)}
.diyCtas{margin-top:var(--s6)}
.diySteps{list-style:none;margin:0;padding:var(--s6);border-radius:var(--r3);background:#fff;border:1px solid var(--paper-line);color:var(--ink);counter-reset:diy}
.diySteps li{counter-increment:diy;position:relative;padding:var(--s4) 0 var(--s4) 40px}
.diySteps li+li{border-top:1px solid var(--paper-line)}
.diySteps li::before{content:counter(diy);position:absolute;left:0;top:var(--s4);width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--weft-on-accent);display:grid;place-items:center;font-size:13px;font-weight:700}
.diySteps b{display:block;font-size:17px;font-weight:600}
.diySteps p{margin-top:var(--s1);font-size:var(--t-small);color:var(--ink-2)}
.toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,30px);opacity:0;padding:12px 18px;border-radius:var(--weft-radius-pill);background:var(--text);color:var(--bg);box-shadow:var(--shadow);transition:.25s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* footer */
/* dark, like the product bands, to close the page with some weight */
footer{border-top:1px solid var(--weft-line);--line:var(--weft-line);--text:var(--weft-text);--text-2:var(--weft-text-2);--text-3:var(--weft-band-text-3);--accent:var(--weft-accent);background:#0b0c0d;color:var(--text-3);padding:var(--s8) 0 var(--s7);font-size:14px}
footer .brandRow{color:var(--text)}
.foot{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s6)}
.footCopy{margin-top:var(--s3)}
.footLinks{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s5)}
.footLinks a{color:var(--text-2)}
.footLinks a:hover{color:var(--text)}
.footCopyright{font-size:13px}

/* ---------- page details ---------- */
.items--stack{--cols:1;row-gap:0;margin-top:var(--s6)}
.items--stack>*{padding:var(--s5) 0}
.items--stack>*:last-child{border-bottom:1px solid var(--line)}
.sec--paper .items--stack>*:last-child{border-color:var(--paper-line)}
.items--stack+.more{margin-top:var(--s6)}
.stackMore{margin-top:var(--s6)}
.eyebrow--accent,.sec--paper .eyebrow--accent{color:var(--accent)}
.keepAdd{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s7);margin-top:var(--s8)}
.keepAdd .eyebrow{margin-bottom:var(--s3)}
.keepAdd .check li{font-size:16px}
.sec--paper .check--plus li{color:var(--ink)}
.cta .items{margin:var(--s8) 0 var(--s7);text-align:left}
.paths{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s3) var(--s6);margin-top:var(--s6);font-size:15px}
.stepsCtas{margin-top:var(--s7)}
.asideRow--bare{margin-top:0;padding-top:0;border-top:0}
.asideRow--bare .lead{margin-top:var(--s3)}
.asideRow--bare .d3{margin-top:calc(-1 * var(--s3))}
.alsoIncluded{margin-top:var(--s7);max-width:56em}
.alsoIncluded+.note{margin-top:var(--s3)}
.fitsGrid .weft{border-top:2px solid var(--accent)}
.fitsGrid .weft .k{color:var(--accent)}
.hero .head{margin-bottom:0}
.hero .head--split{display:block;max-width:52rem}
.hero .head--split .lead{margin-top:var(--s6)}
.hero .head+.integrationGroups{margin-top:var(--s8)}
.hero .head--split .lead{margin-bottom:0}
.hero .head+.productGrid,.hero .head+.toolsShow{margin-top:var(--s8)}
.split .supportDemo{grid-template-columns:1fr}
.split .supportSummary h3{font-size:22px;line-height:1.25}
.displaysArt{display:flex;align-items:center;justify-content:center;gap:var(--s8);flex-wrap:wrap}
.displaysArt .wallPanel{width:min(620px,100%)}
.heroDiagram{min-height:0}
.heroDiagram .appProblem{width:100%;margin:0}
.founderStory .d1{font-size:var(--d2);margin-bottom:var(--s6)}
.founderStory .lead{margin-bottom:var(--s5)}
.sec--paper .studioMock{box-shadow:0 40px 80px rgba(30,31,28,.18)}

/* ---------- homepage: show the design ---------- */
.photo{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--r3);background:var(--surface)}
.photo--slot{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2);padding:clamp(16px,2vw,28px);border:1px dashed var(--line-2);background:radial-gradient(120% 90% at 75% 15%,#f1e2d3,#e6e1d7 65%)}
.photo--slot .k{font-size:11px;font-weight:700;letter-spacing:var(--weft-tracking-label);text-transform:uppercase;color:var(--accent)}
.photo--slot p{max-width:34em;font-size:13px;line-height:1.5;color:var(--text-3)}
.founderNote img.founderPortrait{object-position:50% 30%}
.detailsMore{margin-top:var(--s8);text-align:center}
/* iPhone: titanium edge, thin black bezel, Dynamic Island over the screenshot's status bar */
.iphone{position:relative;padding:3.4%;border-radius:15.5%/7.3%;background:#0a0a0b;box-shadow:0 0 0 1.5px #44474b,0 0 0 3px #1c1d1f,0 1px 2px rgba(20,20,20,.2),0 24px 48px -14px rgba(30,28,22,.35),0 50px 90px -30px rgba(30,28,22,.3)}
.iphone img{display:block;width:100%;height:auto;border-radius:12.5%/5.8%}
.iphone::after{content:"";position:absolute;top:3.9%;left:50%;width:29%;height:2.6%;translate:-50% 0;border-radius:var(--weft-radius-pill);background:#000}
/* one large phone with callouts drawn to the details */
.callouts{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,26vw,340px) minmax(0,1fr);align-items:stretch}
.iphone--large{z-index:1}
.calloutsSide{position:relative;list-style:none;margin:0;padding:0;z-index:2}
.calloutsSide li{position:absolute;top:var(--y);left:0;right:0;translate:0 -50%;display:flex;align-items:center;gap:14px}
.calloutsSide li::before{content:"";flex:1;order:1;height:1px;background:var(--text-3);opacity:.55}
.calloutsSide li::after{content:"";order:2;flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent-display);box-shadow:0 0 0 3px #fff}
.calloutsSide span{flex:none;width:min(240px,70%);font-size:var(--t-small);line-height:1.5;color:var(--text-2)}
.calloutsSide b{color:var(--text);font-weight:600}
.calloutsSide--left li{margin-right:-26px}
.calloutsSide--left span{text-align:right}
.calloutsSide--right li{margin-left:-26px;flex-direction:row-reverse}
.calloutsSide--right li::before{order:1}.calloutsSide--right li::after{order:2}
.screens{list-style:none;margin:var(--s9) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s6)}
.screens .iphone{margin-bottom:var(--s5)}
.screens b{display:block;font-size:16px;font-weight:600}
.screens p{margin-top:var(--s1);font-size:14px;color:var(--text-2)}
.surfaces{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.dialShot{max-width:1100px;margin-inline:auto}
.dialShot img.photo{object-position:50% 45%}
.surfaces>li>b{display:block;margin-top:var(--s5);font-size:17px;font-weight:600}
.surfaces>li>p{margin-top:var(--s1);font-size:var(--t-small);color:var(--text-2)}
.surfaces--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.problem{max-width:1000px;margin-inline:auto}
.exampleWin{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);color:var(--text);font-size:var(--t-small);font-weight:500}
.trustRow{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gutter);align-items:start}
.trustRow .chips{margin-bottom:var(--s5)}
.trustLine{margin-bottom:var(--s5);font-size:var(--t-lead);line-height:1.5;color:var(--text-2)}
.workshopShot{max-width:1000px;margin-inline:auto}
.workshopLinks{margin-top:var(--s8)}
.ctaNote{margin-top:var(--s6);font-size:14px;color:var(--text-3)}

/* ---------- motion ---------- */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="2"]{transition-delay:.12s}
.js [data-reveal="3"]{transition-delay:.24s}
[data-parallax]{will-change:transform}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  [data-parallax]{translate:none!important}
  .btn,.toast,.more::after{transition:none}
}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .navin{grid-template-columns:auto 1fr}
  .navActions{grid-column:2}
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:2px;padding:var(--s3) clamp(16px,4vw,40px) var(--s5);background:var(--bg);border-bottom:1px solid var(--line);font-size:17px}
  .navlinks.open a{padding:var(--s3) 0}
  .menuBtn{display:flex}
  .hero__grid,.split,.split--even,.head--split,.founderNote,.founderStory,.faq,.diyWrap,.productGrid{grid-template-columns:1fr}
  .split--flip>:first-child{order:0}
  .hero__media,.split>:last-child,.founderNote>:last-child{margin-top:var(--s7)}
  .head--split .lead{margin-top:var(--s5)}
  .hero .head--split{grid-template-columns:1fr}
  .hero__media .heroPhone{height:min(520px,120vw)}
  .founderStory figure{position:static;margin-bottom:var(--s7);max-width:480px}
  .founderNote img{max-width:480px;aspect-ratio:3/2}
  .faq .d3{margin-bottom:var(--s6)}
  .items{--cols:2}
  .items--4{--cols:2}
  .timeline2{grid-template-columns:1fr 1fr;row-gap:var(--s7)}
  .integrationGroups{grid-template-columns:1fr}
  .relatedIntegrations{grid-template-columns:1fr}
  .compareChoose{grid-template-columns:1fr}
  .toolsShow{grid-template-columns:1fr;grid-template-rows:none;row-gap:var(--s7);justify-items:center}
  .toolsShow figure{grid-row:auto;grid-template-rows:auto}
  .toolsShow figure:first-child{width:100%}
  .toolsShow figure:last-child{max-width:320px}
  .stackLayer{grid-template-columns:1fr}
  .keepAdd{grid-template-columns:1fr;row-gap:var(--s6)}
  .hero__media .coreMock.heroCore{right:0;bottom:-24px}
  .stage .coreMock.heroCore{right:-8px;width:220px}
  .surfaces--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trustRow{grid-template-columns:1fr}
  .callouts{grid-template-columns:1fr;justify-items:center}
  .callouts .iphone--large{width:min(300px,80%);order:-1;margin-bottom:var(--s7)}
  .calloutsSide{display:contents}
  .calloutsSide li{position:static;display:block;translate:none;margin:0!important;width:min(520px,100%);padding:var(--s3) 0;border-top:1px solid var(--line)}
  .calloutsSide li::before,.calloutsSide li::after{display:none}
  .calloutsSide span{width:auto;text-align:left!important}
  .screens{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .compareTable thead{display:none}
  .compareTable,.compareTable tbody,.compareTable tr,.compareTable tbody th,.compareTable td{display:block;width:auto}
  .compareTable tr{padding:var(--s4) 0;border-top:1px solid var(--line)}
  .compareTable th,.compareTable td{padding:0;border:0}
  .compareTable td{margin-top:var(--s3)}
  .compareTable td::before{content:attr(data-label);display:block;font-weight:600;color:var(--text)}
  body{font-size:16px}
  .navin{height:60px}
  .navlinks.open{top:60px}
  .navActions>.loginLink,.navActions>.callLink{display:none}
  .navlinks.open a.mobileLogin{display:block;margin-top:var(--s2);padding-top:var(--s4);border-top:1px solid var(--line)}
  .navlinks.open a.mobileLogin+a.mobileLogin{margin-top:0;border-top:0}
  .items,.items--2,.items--4{--cols:1;row-gap:var(--s6)}
  .timeline2{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--line-2);padding-left:var(--s5)}
  .timeline2 li{padding-top:0;padding-bottom:var(--s6)}
  .timeline2 li::before{top:6px;left:calc(-1 * var(--s5) - 6px)}
  .exampleCols{grid-template-columns:1fr}
  .exampleHead{flex-direction:column;gap:var(--s1)}
  .exampleHead strong{text-align:left}
  .asideRow{flex-direction:column;align-items:flex-start}
  .foot{grid-template-columns:1fr}
  .btns .btn{flex:1 1 auto}
  .hero__media .coreMock.heroCore,.stage .coreMock.heroCore{width:180px;padding:14px;bottom:24px}
  .stage .coreMock.heroCore{width:150px;padding:12px;border-radius:18px}
  .stage .coreMock.heroCore .coreName{font-size:10px;letter-spacing:.12em}
  .stage .coreMock.heroCore .coreStatus{font-size:0;gap:0}
  .stage .coreMock.heroCore h3{font-size:14px;margin:8px 0 0}
  .stage .coreMock.heroCore p{display:none}
  .framed{border-radius:var(--r3)}
  .price{font-size:48px}
  .integration dl{grid-template-columns:1fr}
  .integration dt{margin-top:6px}
  .screens,.surfaces{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * clamp(16px,4vw,40px));padding-inline:clamp(16px,4vw,40px);scroll-padding-inline:clamp(16px,4vw,40px);scrollbar-width:none}
  .screens::-webkit-scrollbar,.surfaces::-webkit-scrollbar{display:none}
  .surfaces>li{flex:0 0 80%;scroll-snap-align:start}
  .screens>li{flex:0 0 58%;scroll-snap-align:start}
  .screens{padding-top:4px;padding-bottom:40px}
  }

/* moments: one phone on one stage; tabs swap the time-of-day backdrop and the app state */
.momentStage{display:grid;gap:var(--s5)}
.msStage{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r3);padding:clamp(20px,4vw,56px)}
.msBack{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.msBack.is-on{opacity:1}
.msBack--arrive{background:radial-gradient(60% 50% at 82% 10%,rgba(255,196,130,.85),transparent 70%),linear-gradient(170deg,#c98a5e 0%,#7d6f86 50%,#cfd6e2 100%)}
.msBack--away{background:radial-gradient(70% 60% at 25% 0%,rgba(255,240,200,.7),transparent 70%),linear-gradient(175deg,#8fb3c4 0%,#6f9a86 55%,#4d6b55 100%)}
.msBack--night{background:radial-gradient(50% 45% at 70% 100%,rgba(255,150,70,.45),transparent 70%),linear-gradient(180deg,#07090f 0%,#141a2b 60%,#2a2230 100%)}
.msBack--alert{background:radial-gradient(70% 60% at 50% 110%,rgba(255,170,110,.6),transparent 70%),linear-gradient(180deg,#151c28 0%,#26324a 55%,#5b4a52 100%)}
.msPhone{position:relative;width:clamp(210px,21vw,280px);padding:clamp(7px,.75vw,10px);display:grid;grid-template-columns:100%}
.msPanel{grid-area:1/1;overflow:hidden;border-radius:12.5%/5.8%;background:#000;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.msPanel.is-on{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.msPanel img{border-radius:0}
.msPanel{container-type:inline-size}
/* the simulated lock screen for the alert; sizes in cqw so it scales with the phone */
.lockScreen{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased;aspect-ratio:600/1304;display:flex;flex-direction:column;color:#fff;padding:0 4cqw 6cqw;
  background:radial-gradient(90% 45% at 50% 100%,rgba(255,165,105,.75),transparent 70%),radial-gradient(120% 60% at 15% 0%,#2e3f5c,transparent 70%),linear-gradient(180deg,#121826 0%,#25314a 50%,#5a4655 100%)}
.lsBar{height:12cqw;display:flex;align-items:center;padding:0 7cqw;font-size:4.6cqw;font-weight:600}
.lsClock{margin-top:5cqw;text-align:center}
.lsClock span{display:block;font-size:5.4cqw;font-weight:600;opacity:.85}
.lsClock b{display:block;font-family:-apple-system-ui-rounded,-apple-system,"SF Pro Display",system-ui,sans-serif;font-size:26cqw;font-weight:600;letter-spacing:-.02em;line-height:1}
.lsStack{margin-top:auto;display:flex;flex-direction:column;gap:2cqw}
.lsNote{display:flex;gap:3cqw;align-items:center;padding:3.6cqw;border-radius:6.5cqw;background:rgba(240,238,236,.24);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22)}
.lsKeys{display:flex;justify-content:space-between;margin-top:9cqw;padding:0 7cqw}
.lsKeys i{width:11.5cqw;height:11.5cqw;border-radius:50%;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lsNote img{flex:none;width:10.5cqw;height:auto;border-radius:2.4cqw}
.lsNote>div{min-width:0;flex:1}
.lsNote p{margin:0;font-size:3.9cqw;line-height:1.3}
.lsNote p:first-child{display:flex;justify-content:space-between;gap:2cqw}
.lsNote b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsNote time{flex:none;opacity:.65}
/* bento tiles: one idea per tile, each with something to look at */
.bento{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4)}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--s5);min-height:420px;padding:clamp(24px,3vw,40px);border-radius:var(--r3);background:var(--surface);border:1px solid var(--line)}
.tile--wide{grid-column:span 3}
.tile:not(.tile--wide){grid-column:span 2}
.tile .k{display:block;margin-bottom:var(--s3);font-size:var(--t-label);font-weight:700;letter-spacing:var(--weft-tracking-label);text-transform:uppercase;color:var(--text-3)}
.tileText b{display:block;font:400 clamp(22px,2.2vw,30px)/1.15 var(--display);letter-spacing:-.02em;text-wrap:balance}
.tileText p{margin-top:var(--s2);max-width:30em;font-size:var(--t-small);line-height:1.6;color:var(--text-2)}
.tile--phone{flex-direction:row;align-items:flex-start;padding-bottom:0}
.tile--phone .tileText{flex:1;padding-bottom:clamp(24px,3vw,40px)}
.tilePhone{flex:none;width:clamp(190px,17vw,250px);padding:clamp(6.5px,.58vw,8.5px);margin-top:var(--s2);margin-bottom:-42%}
/* tiles with their own light: the same token overrides as the dark band */
.tile--sunset,.tile--dark{--text:#f6f3ec;--text-2:rgba(246,243,236,.78);--text-3:rgba(246,243,236,.6);--accent:var(--weft-accent);border:0;color:var(--text)}
.tile--sunset{background:radial-gradient(60% 70% at 85% 100%,rgba(255,170,100,.75),transparent 70%),radial-gradient(70% 60% at 100% 0%,rgba(150,120,160,.55),transparent 70%),linear-gradient(160deg,#1f1a1c 0%,#4a3434 55%,#9b6142 100%)}
.tile--sunset .tilePhone{box-shadow:0 0 0 1.5px #44474b,0 0 0 3px #1c1d1f,0 40px 80px -20px rgba(0,0,0,.6)}
.tile--home{border:0;background:radial-gradient(70% 55% at 85% 0%,rgba(255,214,170,.9),transparent 70%),radial-gradient(80% 60% at 0% 100%,rgba(196,186,236,.85),transparent 70%),linear-gradient(170deg,#f6e6d8 0%,#e9dfe9 55%,#d8dcef 100%)}
.tile--home{--text:#16181a;--text-2:#4c5351;--text-3:#686f6d;color:var(--text)}
.homeGrid{margin-top:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px) clamp(12px,1.6vw,22px)}
.homeGrid>span{display:flex;flex-direction:column;align-items:center;gap:7px}
.homeGrid u{display:block;width:58%;height:6px;border-radius:4px;background:rgba(255,255,255,.55)}
/* the other apps are frosted glass, so the builder's icon is the only solid thing on the screen */
.ic{display:block;width:100%;aspect-ratio:1;border-radius:24%;background:rgba(255,255,255,.42)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 4px 14px -6px rgba(80,60,90,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ic--1{background:linear-gradient(160deg,#ff9f6b,#e9505a)}
.ic--2{background:linear-gradient(160deg,#7fd3ff,#3b7bea)}
.ic--3{background:linear-gradient(160deg,#ffe07a,#f2a33a)}
.ic--4{background:linear-gradient(160deg,#9ff0b5,#2fb36b)}
.ic--5{background:linear-gradient(160deg,#d9c3ff,#8a5cf0)}
.ic--6{background:linear-gradient(160deg,#f4f4f4,#bfc5cc)}
.ic--7{background:linear-gradient(160deg,#ff8fb1,#d6457a)}
.homeApp{position:relative;z-index:1;transform:scale(1.3)}
.homeApp img{width:100%;height:auto;border-radius:24%;box-shadow:0 18px 34px -10px rgba(30,30,60,.55),0 4px 10px -4px rgba(30,30,60,.3)}
.homeApp small{font-size:11px;font-weight:600;color:var(--text)}
.tilePrice{margin-top:auto;font:400 clamp(56px,6vw,88px)/1 var(--display);letter-spacing:-.04em}
.tilePrice small{display:block;font:500 14px/1.4 var(--sans);letter-spacing:0;color:var(--text-3)}
.tilePrice small:first-child{margin-bottom:var(--s3)}
.tilePrice small:last-child{margin-top:var(--s3)}
.tile--window{background:radial-gradient(70% 70% at 100% 100%,rgba(239,108,53,.12),transparent 70%),var(--surface);padding-bottom:0}
.tileWin{width:auto;margin-top:auto;margin-right:calc(-1 * clamp(24px,3vw,40px));border-radius:12px 0 0 0;box-shadow:0 0 0 .5px rgba(0,0,0,.14),0 24px 60px -20px rgba(40,30,20,.45)}
.sec--flush{padding-top:0}
.bento--trust .tile{min-height:0}
.bento--single .tile--dark{grid-column:1/-1!important;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--s7)}
.bento--single .tile--dark .k,.bento--single .tile--dark .tileStatement{grid-column:1}
.bento--single .tile--dark>p:not(.tileStatement){grid-column:1}
.bento--single .tile--dark .more{grid-column:2;grid-row:1/span 3;align-self:end}
.tile--brands{grid-column:span 3!important}
.brandWall{font:400 clamp(26px,2.8vw,40px)/1.25 var(--display);letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.brandWall span{white-space:nowrap}
.brandWall i{font-style:normal;color:var(--text-3);font-weight:400}
.tile--brands .more,.tile--dark .more{margin-top:auto}
.tile--dark{background:radial-gradient(70% 60% at 100% 0%,rgba(239,108,53,.18),transparent 70%),#16181a}
.tile--dark>p:not(.tileStatement):not(.tilePrice){font-size:var(--t-small);color:var(--text-2)}
.tileStatement{font:400 clamp(26px,2.8vw,40px)/1.15 var(--display);letter-spacing:-.02em;text-wrap:balance}
@media (max-width:900px){.bento{grid-template-columns:1fr}.tile,.tile--wide,.tile:not(.tile--wide),.tile--brands{grid-column:auto!important}.tile{min-height:0}.tile--phone,.tile--flip{flex-direction:column;align-items:center}.tilePhone{margin-bottom:-30%}.homeGrid{max-width:340px}}
/* the Workshop stage: a browser window for the desk, a phone for the vehicle */
.msStage--workshop{aspect-ratio:16/10;background:radial-gradient(70% 60% at 80% 0%,rgba(239,108,53,.18),transparent 70%),linear-gradient(170deg,#1f1a17 0%,#16181a 60%,#101213 100%)}
.msPanel--device{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%;background:none;border-radius:0;overflow:visible;transform:translateY(14px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s linear .5s}
.msPanel--device.is-on{transform:none;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s}
@media (prefers-reduced-motion:reduce){.msPanel,.msPanel--device,.msBack{transition:none;transform:none}}
.msPanel--device:has(.browserWin){place-items:start center;padding-top:clamp(28px,4vw,56px)}
.msStage--workshop{padding:0 clamp(20px,4vw,56px)}
.browserWin{width:min(100%,1000px);border-radius:12px;overflow:hidden;background:#f4f1ea;box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 30px 70px -20px rgba(30,24,18,.5)}
.bwBar{display:flex;gap:7px;padding:11px 14px;background:#e9e5dd;border-bottom:1px solid rgba(0,0,0,.07)}
.bwBar i{width:11px;height:11px;border-radius:50%;background:#cfcac2}
.browserWin img{display:block;width:100%;height:auto}
/* percentage padding resolves against the parent, so phones inside wider stages and tiles set their bezel from their own width (3.4%) */
.wsPhone{width:clamp(200px,22vw,300px);padding:clamp(6.8px,.75vw,10.2px)}
.msTabs.msTabs--3{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--s6)}
/* previous and next, frosted, in the stage's corner */
.msNav{position:absolute;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:2;display:flex;gap:10px}
.msStep{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35);transition:background .2s,transform .2s}
.msStep svg{width:20px;height:20px}
.msStep:hover{background:rgba(255,255,255,.3)}
.msStep:active{transform:scale(.94)}
.msStep:focus-visible{outline:2px solid #fff;outline-offset:3px}
.msStage--workshop .msStep{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12),0 4px 14px -6px rgba(40,30,20,.3)}
.msStage--workshop .msStep:hover{background:rgba(255,255,255,.26)}
/* architecture: a cross-section of the vehicle, set as three quiet rows; Weft is the warm one in the middle */
.layers{display:grid;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.layer{display:grid;grid-template-columns:230px minmax(0,1fr);align-items:baseline;gap:var(--s5);padding:clamp(20px,2.4vw,30px) var(--s4)}
.layer+.layer{border-top:1px solid var(--line)}
.layer .k{font-size:var(--t-label);font-weight:700;letter-spacing:var(--weft-tracking-label);text-transform:uppercase;color:var(--text-3)}
.layerBig{margin:0;font:400 clamp(19px,1.7vw,24px)/1.35 var(--display);letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.layerBig i{font-style:normal;color:var(--text-3)}
.layer--weft{background:var(--accent-tint)}
.layer--weft .k{color:var(--accent)}
.layer--systems{padding-right:0;overflow:hidden}
.layerRun{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.layerRun .layerBig{white-space:nowrap;color:var(--text-2)}
@media (max-width:760px){.layer{grid-template-columns:1fr;gap:var(--s2)}}
.msTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.msTab{all:unset;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-start;position:relative;padding:var(--s4) var(--s4) 0;border-top:2px solid var(--line);transition:border-color .3s}
.msTab b{display:block;font-size:17px;font-weight:600;color:var(--text-3);transition:color .3s}
.msTab span{display:block;margin-top:var(--s1);font-size:var(--t-small);color:var(--text-3);transition:color .3s}
/* the selected tab's bar is the timer: empty until the stage is in view, fills over five seconds, and the stage advances when it completes (marketing.js); full once someone picks a tab */
.msTab[aria-selected=true]::before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--text);transform-origin:left;transform:scaleX(0)}
.is-playing .msTab[aria-selected=true]::before{animation:msFill 5s linear forwards}
.is-playing.is-away .msTab[aria-selected=true]::before{animation-play-state:paused}
.is-paused .msTab[aria-selected=true]::before{animation:none;transform:none}
@keyframes msFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.msTab[aria-selected=true] b{color:var(--text)}
.msTab[aria-selected=true] span{color:var(--text-2)}
.msTab:hover b{color:var(--text)}
.msTab:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
@media (max-width:760px){.msStage--workshop{aspect-ratio:auto;padding:var(--s4)}.msStage{aspect-ratio:4/5}.msPhone{width:min(240px,62%);padding:8px}.msTabs,.msTabs.msTabs--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
#business{padding-bottom:var(--s7)}
.head--wide{max-width:60rem}
.bento--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.bento--three .tile{grid-column:auto!important;justify-content:flex-start}
.bento--three .tileStatement{font-size:clamp(24px,2.2vw,32px)}
@media (max-width:900px){.bento--three{grid-template-columns:1fr}}
/* the pinned moments stage (wide screens, motion allowed): sized to fit the viewport, the bar follows the scroll */
.momentStage.is-pinned{position:sticky;top:var(--pin-top,96px)}
.momentStage.is-pinned .msStage{aspect-ratio:auto;height:var(--ms-h)}
.momentStage.is-pinned .msPhone{width:min(280px,calc(var(--ms-h) * .41));padding:min(10px,calc(var(--ms-h) * .015))}
.momentStage.is-pinned .msTab[aria-selected=true]::before{animation:none;transform:scaleX(var(--ms-fill,0))}
.msTabs--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.msTabs--6 .msTab{padding-left:var(--s3);padding-right:var(--s3)}
.msBack--electricity{background:radial-gradient(60% 55% at 80% 0%,rgba(255,206,120,.75),transparent 70%),linear-gradient(170deg,#b9874f 0%,#6d6a72 55%,#2c3038 100%)}
.msBack--parked{background:radial-gradient(70% 60% at 25% 0%,rgba(230,240,220,.6),transparent 70%),linear-gradient(175deg,#93a7a8 0%,#5f7d72 55%,#33443d 100%)}
.msBack--lights{background:radial-gradient(55% 50% at 50% 100%,rgba(255,180,90,.6),transparent 70%),linear-gradient(180deg,#1b1714 0%,#3b2c22 60%,#6a4a33 100%)}
.msBack--star-ceiling{background:radial-gradient(45% 40% at 30% 20%,rgba(160,140,255,.45),transparent 70%),radial-gradient(40% 40% at 80% 80%,rgba(80,200,255,.3),transparent 70%),linear-gradient(180deg,#07080f 0%,#151a33 100%)}
.msBack--fan{background:radial-gradient(60% 55% at 80% 10%,rgba(200,230,255,.7),transparent 70%),linear-gradient(170deg,#9fb6c9 0%,#5d7894 55%,#2d3a4a 100%)}
.msBack--solar{background:radial-gradient(55% 50% at 75% 5%,rgba(255,224,140,.9),transparent 70%),linear-gradient(170deg,#d9a35e 0%,#9a8a7a 50%,#56718a 100%)}
@media (max-width:760px){.msTabs.msTabs--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.momentStage.is-pinned .msStage{grid-template-rows:minmax(0,1fr)}
.momentStage.is-pinned .wsPhone{width:min(300px,calc((var(--ms-h) - 48px) * .46));padding:min(10.2px,calc(var(--ms-h) * .015))}