/* Mesh glass components (MESH-SPEC.md section 4). Load after tokens.css.
   Names are shared across platforms: SkyBackground, GlassCard, TopBar, Buttons, Bubbles, Composer,
   ActionRow, Panel, Wordmark. The legacy `.tape` classes still used in page markup render as capsules:
   black tape = black capsule, white tape = white chip, inline tape in a heading = italic serif accent. */

/* ---------- SkyBackground ---------- */
html{background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-bot) 100%) fixed no-repeat;background-color:var(--sky-mid)}
.mesh-sky{position:fixed;inset:0;z-index:var(--z-sky);display:block;width:100%;height:100%;pointer-events:none}
body{background:transparent}

/* ---------- GlassCard / GlassGroup ---------- */
.glass,.glass-card{position:relative;background:var(--glass-card-live,var(--glass-card));border:1px solid var(--glass-stroke);border-radius:var(--r-card);box-shadow:var(--lift-2);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.1);backdrop-filter:blur(var(--glass-blur)) saturate(1.1)}
.glass::before,.glass-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 90% at 50% 40%,rgba(255,255,255,.28),rgba(255,255,255,0) 70%);pointer-events:none}
.glass > *,.glass-card > *{position:relative}
.glass--sheet{background:var(--glass-sheet)}
.glass-control{background:var(--glass-control);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.glass-input{background:var(--glass-input);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.glass-group > * + *{border-top:1px solid var(--hairline-glass)}

/* ---------- Capsules: PrimaryBlack, PillFrosted, WhiteChip ----------
   `.btn` and legacy `.tape--button` share one look. The tape vars choose black or white. */
.tape,.btn,.pill{--tape-surface:var(--ink);--tape-letter:var(--ink-on);display:inline-block;box-sizing:border-box;padding:var(--s-1) var(--s-3);border:0;border-radius:var(--r-pill);background:var(--tape-surface);color:var(--tape-letter);font:500 var(--t-sm)/var(--lh-ui) var(--font-ui);letter-spacing:0;text-transform:none;text-decoration:none;white-space:normal;overflow-wrap:anywhere}
/* The label colour is pinned with a doubled class so a descendant rule such as `.card a{color:ink}` can never turn a black capsule into ink on ink. */
.btn.btn,.tape--button.tape--button{color:var(--tape-letter)}
.tape--white{--tape-surface:var(--white);--tape-letter:var(--ink);box-shadow:var(--lift-1)}
.tape--s{font-size:var(--t-xs);line-height:18px;padding:var(--s-1) var(--s-3)}
.tape--m{font-size:var(--t-sm)}
.tape--l{padding:var(--s-2) var(--s-4);font-size:var(--t-md);line-height:var(--lh-ui-lg)}
.tape--xl{padding:var(--s-2) var(--s-5);font-size:var(--t-lg);line-height:28px}
/* A big non-button tape (a page statement) is serif display text, not a pill. */
.tape--xl:not(.tape--button){display:inline;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font:italic 300 clamp(1.75rem,1.2rem + 1.6vw,2.5rem)/1.15 var(--font-display);letter-spacing:-.01em;overflow-wrap:normal}
.tape--date{margin-inline-start:var(--s-2);padding:2px var(--s-2);background:var(--pill-frosted);color:var(--ink-2);font-size:var(--t-2xs);line-height:16px;white-space:nowrap;vertical-align:middle;box-shadow:none}
.tape--tilt-l,.tape--tilt-r{rotate:0deg}

/* An inline capsule inside a display heading is an italic serif accent: "join the <em>waitlist</em>". */
.tape--inline,h1 .tape,h2 .tape,h3 .tape{display:inline;padding:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:italic 300 1em var(--font-display);line-height:inherit;letter-spacing:inherit;white-space:normal;overflow-wrap:normal}
.section__title--tape .tape,.part h3 .tape,.week__day h3 .tape{font-size:inherit}

/* Buttons. A 48px target, springy press, brand-blue focus ring. */
.tape--button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;min-inline-size:48px;padding:0 var(--s-6);font:500 var(--t-md)/var(--lh-ui-lg) var(--font-ui);text-align:center;cursor:pointer;touch-action:manipulation;max-inline-size:100%;transition:transform 350ms var(--ease-spring),box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.tape--button.tape--s{min-height:40px;padding:0 var(--s-4);font-size:var(--t-sm)}
.tape--button.tape--m{min-height:48px}
.tape--button:not(.tape--white),.btn:not(.btn--white):not(.btn--frosted){box-shadow:0 4px 14px rgba(20,40,70,.18)}
@media (hover:hover){.tape--button:not(:disabled):not([aria-disabled="true"]):hover,.btn:not(:disabled):hover{transform:translateY(-1px) scale(1.015)}}
.tape--button:not(:disabled):not([aria-disabled="true"]):active,.btn:not(:disabled):active{transform:scale(.98)}
.tape--button:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tape--button:disabled,.tape--button[aria-disabled="true"],.btn:disabled{cursor:not-allowed;background:var(--pill-frosted);color:var(--ink-2);box-shadow:none;border:1px solid var(--hairline-white)}
.btn--cta{border-radius:var(--r-cta);min-height:52px;padding:0 var(--s-8)}
.btn--white{--tape-surface:var(--white);--tape-letter:var(--ink);box-shadow:var(--lift-1)}
.btn--frosted,.pill--frosted{--tape-surface:rgba(255,255,255,.40);--tape-letter:var(--ink);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));box-shadow:none}
body:not(.home-body) .btn--frosted,.glass-card .btn--frosted{--tape-surface:rgba(29,29,31,.07);border:1px solid rgba(29,29,31,.1)}
.chip-white{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-3);border-radius:var(--r-chip);background:var(--white);color:var(--ink);font:500 var(--t-sm)/var(--lh-ui) var(--font-ui);box-shadow:var(--lift-1);text-decoration:none}
.btn-glass-circle{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--glass-control);border:1px solid var(--glass-stroke);color:var(--ink);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}

/* ---------- TopBar segmented control ---------- */
.seg{position:relative;display:inline-flex;align-items:center;gap:0;height:52px;padding:4px;border-radius:26px;background:var(--glass-control);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.seg a,.seg button{display:inline-flex;align-items:center;height:44px;padding:0 var(--s-5);border:0;border-radius:22px;background:none;color:rgba(29,29,31,.62);font:500 var(--t-md)/1 var(--font-ui);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 350ms var(--ease-spring),color var(--dur-2) var(--ease-out),transform 350ms var(--ease-spring)}
.seg a:hover{color:var(--ink)}
.seg a[aria-current],.seg a.is-on{background:var(--ink);color:var(--ink-on)}
.seg a:focus-visible,.seg button:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- Bubbles, event chips, Composer ---------- */
.bubble{max-width:80%;padding:14px 16px;border-radius:var(--r-bubble);font:400 var(--t-md)/1.4 var(--font-ui);color:var(--ink)}
.bubble--assistant{align-self:flex-start;background:var(--white);box-shadow:var(--lift-1)}
.bubble--user{align-self:flex-end;background:rgba(255,255,255,.44);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.event-chip{display:inline-flex;align-items:center;gap:var(--s-2);align-self:flex-start;min-height:36px;padding:0 var(--s-4) 0 var(--s-3);border-radius:var(--r-pill);background:var(--ink);color:var(--ink-on);font:500 var(--t-sm)/var(--lh-ui) var(--font-ui)}
.event-chip svg{width:16px;height:16px;flex:none;fill:currentColor}
.composer{display:flex;align-items:center;gap:var(--s-3);height:52px;padding:0 var(--s-4) 0 var(--s-5);border-radius:26px;background:var(--glass-input);border:1px solid var(--glass-stroke);color:var(--ink-3);font:400 var(--t-md)/1 var(--font-ui);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.composer span{flex:1}
.composer svg{width:22px;height:22px;flex:none;stroke:var(--gray-500);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- ActionRow and Panel ---------- */
.action-row{display:flex;align-items:center;gap:var(--s-3);min-height:76px;padding:0 var(--s-5);font:400 var(--t-md)/1.35 var(--font-ui);color:var(--ink)}
.action-row .chip-white{flex:none}
.action-row span{min-width:0}
.panel{padding:var(--s-5)}
.panel__head{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.panel__head svg{width:20px;height:20px;flex:none;stroke:var(--gray-500);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.panel__num{margin:0;font:500 44px/1.05 var(--font-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.panel__line{margin:0;font:400 var(--t-md)/1.4 var(--font-ui);color:var(--ink)}
.panel__line span{color:var(--ink-2)}
.panel__bars{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;height:72px;margin:var(--s-4) 0}
.panel__bars i{flex:0 0 8px;border-radius:4px;background:rgba(29,29,31,.14)}
.panel .chip-white{margin-top:var(--s-4)}
.panel__bars i:last-child{background:var(--ink)}
.panel__track{height:6px;margin:var(--s-3) 0;border-radius:3px;background:rgba(166,180,250,.35);overflow:hidden}
.panel__track i{display:block;height:100%;border-radius:3px;background:var(--ink)}

/* PhoneIllustration: a glass phone with live chat content, always labelled as an illustration (never a screenshot). */
.phone-fig{margin:0;justify-self:center;width:min(100%,380px)}
.phone{container-type:inline-size;position:relative;display:flex;flex-direction:column;gap:var(--s-3);height:min(720px,calc(100svh - var(--nav-h) - var(--s-12)));min-height:600px;padding:var(--s-4) var(--s-4) var(--s-5);border:2px solid rgba(255,255,255,.6);border-radius:56px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 40px 90px rgba(20,40,70,.22),inset 0 0 0 1px rgba(255,255,255,.18);color:var(--ink);overflow:hidden}
.phone__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-2)}
.phone__bar .btn-glass-circle{width:44px;height:44px;flex:none}
.phone__search svg,.btn-glass-circle svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.phone__seg{height:48px;padding:3px;border-radius:24px}
.phone__seg span{display:inline-flex;align-items:center;height:42px;padding:0 var(--s-4);border-radius:21px;font:500 .9375rem/1 var(--font-ui);color:rgba(29,29,31,.6)}
.phone__seg span.is-on{background:var(--ink);color:var(--ink-on)}
.phone__avatar{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--periwinkle);color:var(--ink);font:500 1rem/1 var(--font-ui)}
.phone__thread{display:flex;flex:1;flex-direction:column;gap:var(--s-3);min-height:0;margin-top:var(--s-2);overflow:hidden}
.phone .bubble{max-width:84%;margin:0;padding:12px 15px;font-size:.9375rem;line-height:1.38}
.phone .bubble--user{margin-left:auto}
.work{display:flex;flex-direction:column;gap:var(--s-2);margin-top:auto;padding:var(--s-3);border-radius:24px}
.work__cards{display:flex;gap:var(--s-3);height:132px;overflow:hidden;padding-left:var(--s-8)}
.work__page{display:flex;flex:none;flex-direction:column;gap:7px;width:150px;padding:14px;border-radius:16px;background:var(--white);box-shadow:var(--lift-1)}
.work__page::before{content:"";display:block;height:44px;margin-bottom:2px;border-radius:8px}
.work__page--a::before{background:linear-gradient(135deg,#F2C18E,#E58F6B 55%,#C86B5E)}
.work__page--b::before{background:linear-gradient(135deg,#BFD6E8,#8FB1CF 60%,#6C93B6)}
.work__page i{display:block;height:6px;border-radius:3px;background:rgba(29,29,31,.12)}
.work__page i:nth-child(2){width:78%}
.work__page i:nth-child(3){width:52%}
.work__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.work__close{width:40px;height:40px;flex:none}
.phone__composer{flex:none;height:52px}
.phone-cap{margin:var(--s-3) 0 0;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--on-sky-2);text-align:center}


@media (max-width:959px){.phone{height:640px;min-height:0}}
@media (max-width:479px){.phone{height:600px;border-radius:46px}.phone__seg span{padding:0 var(--s-3)}}
.phone--short{height:560px;min-height:0}

@container (max-width:340px){
  .phone__bar{gap:6px}
  .phone__bar .btn-glass-circle,.phone__avatar{width:38px;height:38px}
  .phone__seg{height:44px;padding:2px}
  .phone__seg span{height:38px;padding:0 10px;font-size:.875rem}
}

/* ---------- Layout helpers ---------- */
.grid{display:grid;gap:var(--s-4)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:899px){.grid--2,.grid--3{grid-template-columns:1fr}}

/* ---------- Platform cards ---------- */
.platform{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-8)}
.platform__name{margin:0;font:400 2.25rem/1.1 var(--font-display);letter-spacing:-.015em;color:var(--ink)}
.platform__state{margin:0;font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.platform p{margin:0;color:var(--ink-2)}
.platform .btn{align-self:flex-start;margin-top:auto}
.platform p:nth-of-type(2){margin-bottom:var(--s-4)}

/* ---------- Wordmark ---------- */
.wordmark{font:500 1.75rem/1 var(--font-display);letter-spacing:-.01em;text-transform:lowercase;color:inherit}
.wordmark em{font-style:italic;font-weight:300;color:var(--ink-2)}

/* ---------- Reduce Transparency: glass becomes opaque neutral ---------- */
@media (prefers-reduced-transparency:reduce){
  .glass,.glass-card,.glass-control,.glass-input,.seg,.composer,.bubble--user,.btn-glass-circle{background:var(--neutral-light);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .tape--button,.btn,.seg a,.seg button{transition:none}
  .tape--button:hover,.btn:hover,.tape--button:active,.btn:active{transform:none!important}
}
@media (forced-colors:active){
  .tape,.btn,.pill,.seg,.glass,.glass-card{border:1px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none}
}