/* Hubber public site. One stylesheet for every page. */

@font-face { font-family: "Big Shoulders Display"; src: url("fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* Light theme. --navy and --on-navy never change; the rest are the page palette. */
  --bg: #F5F7FC;
  --surface: #FFFFFF;
  --surface-2: #E9EEF8;
  --line: #D3DBEA;
  --text: #0A1226;
  --muted: #4E5B78;
  --dim: #7B88A4;
  --signal: #FF5A0A;
  --signal-hot: #FF7A33;
  --signal-text: #C2410C;
  --navy: #0A1226;
  --navy-2: #131F3D;
  --on-navy: #EEF3FF;
  --ok: #1E9E5A;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --shadow: 0 40px 90px -40px rgba(16, 30, 70, .45), 0 12px 30px -18px rgba(16, 30, 70, .3);
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: .9; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--signal); color: var(--navy); }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: calc(1380px + var(--gutter) * 2); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--signal); color: var(--navy); padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: .95rem; text-decoration: none; border: 1px solid transparent; transition: transform .2s var(--ease), background .2s, border-color .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 1.05rem; border-radius: 12px; }
.btn-signal { background: var(--signal); color: var(--navy); box-shadow: 0 10px 24px -12px rgba(255, 90, 10, .7); }
.btn-signal:hover { background: var(--signal-hot); }
.btn-ghost { border-color: #B9C4DA; color: var(--text); background: var(--surface); }
.btn-ghost:hover { border-color: var(--muted); }
.link-quiet { color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 10px 6px; }
.link-quiet:hover { color: var(--text); }
.link-signal { color: var(--signal-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link-signal:hover { color: var(--signal); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(245, 247, 252, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.is-stuck { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; gap: 28px; height: 68px; }
a.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.7rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
a.brand .mark { flex: none; }
.main-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.main-nav > a, .nav-item > a { display: inline-flex; align-items: center; height: 68px; padding: 0 12px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem; }
.main-nav > a:hover, .nav-item > a:hover, .main-nav [aria-current] { color: var(--text); }
.nav-item { position: static; }
.mega { box-shadow: 0 30px 50px -30px rgba(16, 30, 70, .35); position: absolute; left: 0; right: 0; top: 68px; background: var(--surface); border-block: 1px solid var(--line); padding: 28px var(--gutter) 30px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s var(--ease), visibility .18s; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.mega-title { margin: 0 0 10px; color: var(--signal-text); font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a { display: block; padding: 6px 0; text-decoration: none; color: var(--text); font-size: .95rem; }
.mega li a:hover { color: var(--signal-text); }
.mega-list { max-width: var(--wrap); margin: 0 auto !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 28px; }
.mega-all { display: block; max-width: var(--wrap); margin: 18px auto 0; color: var(--muted); font-size: .9rem; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.mobile-menu { display: none; margin-left: auto; }
.mobile-menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; cursor: pointer; border-radius: 10px; border: 1px solid var(--line); }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { width: 18px; height: 2px; background: var(--text); border-radius: 2px; }
.mobile-panel { position: absolute; left: 0; right: 0; top: 68px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 24px; display: grid; gap: 2px; }
.mobile-panel a:not(.btn) { padding: 14px 4px; text-decoration: none; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; }
.mobile-panel .btn { margin-top: 16px; }
@media (max-width: 960px) {
  .main-nav, .header-actions { display: none; }
  .mobile-menu { display: block; }
}

/* Breadcrumbs */
.crumbs { padding-top: 22px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: .85rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--dim); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* Sections */
.section { padding-block: clamp(48px, 6vw, 84px); position: relative; }
.section-panel { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 860px; margin-bottom: clamp(24px, 3vw, 40px); }
.section-intro { margin: 12px 0 0; max-width: 62ch; color: var(--muted); font-size: 1.08rem; }
.section-more { margin: 36px 0 0; }

/* Hero */
.hero { padding-top: clamp(28px, 4vw, 56px); position: relative; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 900px; pointer-events: none; background: radial-gradient(55% 50% at 72% 64%, rgba(255, 106, 26, .22), transparent 70%), radial-gradient(45% 45% at 8% 4%, rgba(70, 120, 255, .16), transparent 70%), linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 88px 100%; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); opacity: .9; }
.hero-head { position: relative; }
.hero h1 { max-width: 16ch; }
.hero-lede { max-width: 56ch; margin: clamp(20px, 3vw, 32px) 0 0; color: var(--muted); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note-line { margin: 16px 0 0; color: var(--dim); font-size: .92rem; }
@media (min-width: 1100px) {
  .hero { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); align-items: center; column-gap: 40px; max-width: 1560px; margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(20px, 3vh, 44px) clamp(28px, 4vh, 56px); min-height: min(calc(100vh - 69px), 860px); }
  .hero > .wrap { padding-inline: 0; max-width: none; }
  .hero h1 { font-size: clamp(2.6rem, 4.3vw, 4.5rem); max-width: 13ch; }
  .hero-lede { font-size: 1.08rem; margin-top: 18px; }
  .hero-actions { margin-top: 22px; }
  .hero .stage { margin-top: 0; }
}
}

/* The stage: one job played through */
.stage { margin-top: clamp(28px, 4vw, 48px); position: relative; }
.stage-scene { position: relative; perspective: 2200px; padding-bottom: 3%; }
.stage .stage-desk { width: 84%; transform: rotateX(calc(9deg * var(--tilt, 1))) rotateY(calc(-7deg * var(--tilt, 1))) rotateZ(calc(1.2deg * var(--tilt, 1))); transform-origin: 30% 40%; box-shadow: 0 70px 120px -50px rgba(16, 30, 70, .55), 0 24px 50px -30px rgba(16, 30, 70, .4), 0 0 0 1px #C3CCE0, 0 0 160px -30px rgba(255, 106, 26, .45); will-change: transform; }
.stage .stage-phone { position: absolute; right: 1%; bottom: 0; width: clamp(150px, 22%, 290px); transform: rotateY(calc(-14deg * var(--tilt, 1))) rotateX(calc(4deg * var(--tilt, 1))) translateZ(80px); box-shadow: 0 50px 80px -30px rgba(16, 30, 70, .6), 0 0 0 1px #0C1424; will-change: transform; }
.stage [data-on] { display: none; }
.stage[data-step="0"] [data-on~="0"], .stage[data-step="1"] [data-on~="1"], .stage[data-step="2"] [data-on~="2"],
.stage[data-step="3"] [data-on~="3"], .stage[data-step="4"] [data-on~="4"], .stage[data-step="5"] [data-on~="5"] { display: revert; }
.stage [data-hero] { border-color: #F26721; box-shadow: 0 0 0 .2em rgba(242, 103, 33, .22), 0 .9em 1.6em -.7em rgba(242, 103, 33, .6); animation: land .55s var(--ease) both; }
.hero-note, .hero-job, .hero-paid { animation: land .5s var(--ease) both; }
@keyframes land { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }

.stage-rail { margin-top: 16px; display: grid; gap: 10px; }
.stage-caption { min-height: 1.6em; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.stage-caption p { margin: 0; animation: land .4s var(--ease) both; }
.stage-caption b { color: var(--signal-text); font-family: var(--display); font-size: 1.25em; font-weight: 700; text-transform: uppercase; margin-right: .5em; letter-spacing: .02em; }
.ticks { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); }
.ticks::before, .ticks-fill { content: ""; position: absolute; left: 0; top: 9px; height: 2px; }
.ticks::before { right: 0; background: var(--line); }
.ticks-fill { background: var(--signal); width: calc((var(--step, 3) + .5) / 6 * 100%); transition: width .5s var(--ease); box-shadow: 0 0 14px var(--signal); }
.tick { position: relative; background: none; border: 0; color: var(--dim); font: inherit; font-size: .82rem; padding: 26px 0 8px; text-align: center; cursor: pointer; min-height: 44px; }
.tick::before { content: ""; position: absolute; left: 50%; top: 3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: all .3s; z-index: 1; }
.tick.is-past::before { border-color: var(--signal); background: var(--signal); }
.tick.is-now { color: var(--text); }
.tick.is-now::before { border-color: var(--signal); background: var(--bg); box-shadow: 0 0 0 5px rgba(255, 106, 26, .25); transform: scale(1.25); }
@media (max-width: 640px) {
  .tick span { display: none; }
  .tick.is-now span { display: block; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .tick:first-child.is-now span { left: 0; transform: none; }
  .tick:last-child.is-now span { left: auto; right: 0; transform: none; }
  .stage .stage-desk { width: 100%; }
  .stage .stage-phone { width: 31%; right: 0; bottom: 0; }
  .stage-scene { padding-bottom: 34%; }
}

/* Product frames */
.frame { margin: 0; border-radius: 12px; overflow: hidden; background: #F6F5F3; container-type: inline-size; box-shadow: var(--shadow), 0 0 0 1px #C3CCE0; }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #E7EAF1; border-bottom: 1px solid #D5DAE5; }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #C5CBD8; }
.frame-bar i:nth-child(1) { background: #F0736A; } .frame-bar i:nth-child(2) { background: #F5BD4F; } .frame-bar i:nth-child(3) { background: #5FC454; }
.frame-bar span { margin-left: 14px; flex: 1; max-width: 420px; font-size: 11px; color: #5B6577; background: #fff; padding: 3px 12px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-phone { position: relative; border-radius: 34px; padding: 8px; background: #0B0F18; width: min(100%, 250px); container-type: inline-size; box-shadow: var(--shadow), 0 0 0 1px #0B0F18, inset 0 0 0 2px #2A3142; }
.frame-phone .ui { border-radius: 27px; overflow: hidden; }

/* The rebuilt Hubber interface. Colours, sizes and icons are taken from the
   real app; sizes are in em (1em = the app's 14px) so a frame scales like a picture. */
.ui { --u-bg: #F6F5F3; --u-text: #16263B; --u-muted: #657386; --u-line: #E3E1DD; --u-input: #DDDAD5; --u-fill: #EFEEEB; --u-brand: #F26721; --u-side: #101F32;
  background: var(--u-bg); color: var(--u-text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: clamp(4px, 1.1cqw, 14px); line-height: 1.43; text-align: left; }
.ui b { font-weight: 600; }
.ui-ic { width: 1.15em; height: 1.15em; flex: none; }
.ui-app { display: grid; grid-template-columns: 18.3em minmax(0, 1fr); height: 44em; overflow: hidden; }
.stage-desk .ui-app { height: 42em; }
.ui-side { background: var(--u-side); color: #fff; padding: 1.15em .65em; display: flex; flex-direction: column; gap: .15em; overflow: hidden; }
.ui-brand { display: flex; align-items: center; gap: .85em; padding: 0 .5em .9em; }
.ui-brand > i { width: 2.3em; height: 2.3em; border-radius: .86em; background: var(--u-brand); display: grid; place-items: center; color: #fff; flex: none; }
.ui-brand b { display: block; font-size: 1.29em; line-height: 1.2; }
.ui-brand div span { display: block; font-size: .86em; color: #7E92A9; }
.ui-brand-ic { margin-left: auto; color: #B1C0D2; width: 1.4em; height: 1.4em; }
.ui-search { display: flex; align-items: center; gap: .7em; height: 2.86em; padding: 0 .86em; margin: 0 0 1.1em; border-radius: .72em; background: rgba(31, 48, 71, .6); border: 1px solid #22344D; font-weight: 500; }
.ui-search kbd { margin-left: auto; font: inherit; font-size: .78em; color: #7E92A9; }
.ui-nav { display: flex; align-items: center; gap: .86em; height: 2.86em; padding: 0 .86em; border-radius: .72em; font-weight: 500; white-space: nowrap; }
.ui-nav .ui-ic { color: #B1C0D2; }
.ui-nav.on { background: var(--u-brand); font-weight: 600; }
.ui-nav.on .ui-ic { color: #fff; }
.ui-sec { display: flex; align-items: center; justify-content: space-between; height: 2.3em; padding: 0 .86em; margin-top: .55em; font-size: .86em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7E92A9; }
.ui-sec.open .ui-ic { transform: rotate(180deg); }
.ui-main { padding: 1.7em 1.75em; display: grid; gap: 1.15em; align-content: start; min-width: 0; overflow: hidden; }
.ui-pad { padding: 1.15em; display: grid; gap: .72em; }
.ui-crumbs { display: flex; gap: 1.15em; color: var(--u-brand); font-weight: 500; }
.ui-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; flex-wrap: wrap; }
.ui-title { display: block; font-size: 1.71em; font-weight: 600 !important; line-height: 1.3; }
.ui-sub { display: block; color: var(--u-muted); }
.ui-actions { display: flex; gap: .57em; flex: none; align-items: center; }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; height: 2.57em; padding: 0 1.15em; background: var(--u-brand); color: #fff; font-weight: 500; border-radius: .72em; white-space: nowrap; }
.ui-btn.ghost { background: var(--u-bg); color: var(--u-text); border: 1px solid var(--u-input); padding: 0 .86em; }
.ui-btn.wide { width: 100%; height: 3.15em; }
.ui-input { display: inline-flex; align-items: center; height: 2.86em; min-width: 14em; padding: 0 .86em; border: 1px solid var(--u-input); border-radius: .72em; color: var(--u-muted); background: var(--u-bg); }
.ui-card { background: #fff; border: 1px solid var(--u-line); border-radius: .86em; padding: 1.15em 1.3em; display: grid; gap: .3em; }
.ui-pill { display: inline-flex; align-items: center; gap: .35em; padding: .1em .72em; border-radius: 99em; font-size: .86em; font-weight: 600; line-height: 1.5; background: var(--u-fill); color: #4D5A6C; border: 1px solid var(--u-line); white-space: nowrap; }
.ui-pill.ok { background: #DFF3E7; color: #17703F; border-color: transparent; }
.ui-pill.warn { background: #FCEFCF; color: #8A5A06; border-color: transparent; }
.ui-pill.info { background: #DFEAFD; color: #1D4FB5; border-color: transparent; }
.ui-pill.bad { background: #FBE1E1; color: #A32424; border-color: transparent; }
.ui-pill.brand { background: #FDE6D8; color: #B0440B; border-color: transparent; }
.ui-tabs { display: inline-flex; justify-self: start; gap: .15em; padding: .29em; background: var(--u-fill); border: 1px solid var(--u-line); border-radius: .86em; }
.ui-tabs span { display: inline-flex; align-items: center; height: 2.29em; padding: 0 .86em; border-radius: .72em; color: var(--u-muted); font-weight: 500; white-space: nowrap; }
.ui-tabs .on { background: var(--u-brand); color: #fff; }
.ui-tabs.quiet { border: 0; }
.ui-tabs.quiet .on { background: var(--u-bg); color: var(--u-text); box-shadow: 0 1px 2px rgba(22, 38, 59, .12); }
.ui-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 7em auto; gap: 1em; align-items: center; padding: .85em 0; border-bottom: 1px solid var(--u-line); }
.ui-row:last-child { border-bottom: 0; }
.ui-row b { font-weight: 500; }
.ui-row div span { display: block; color: var(--u-muted); font-size: .86em; }
.ui-when { color: var(--u-muted); font-size: .86em; }
.ui-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.ui-strip div { background: #fff; border: 1px solid var(--u-line); border-radius: .86em; padding: 1em 1.3em; }
.ui-strip b { display: block; font-size: 1.71em; }
.ui-strip span { color: var(--u-muted); font-size: .86em; }
.ui-kan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15em; }
.ui-kan5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9em; }
.ui-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: .72em; align-content: start; min-width: 0; }
.ui-col-h { display: flex; align-items: center; flex-wrap: wrap; gap: .1em .6em; background: var(--u-fill); border: 1px solid var(--u-line); border-radius: .86em; padding: 1.15em 1.15em .85em; }
.ui-col-h { min-width: 0; }
.ui-col-h b { font-weight: 500; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ui-col-h > span { font-size: .86em; font-weight: 600; color: var(--u-muted); }
.ui-col-h .ui-ic { color: var(--u-muted); }
.ui-col-h small { flex-basis: 100%; font-size: .86em; color: var(--u-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-count { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; border-radius: 99em; background: var(--u-bg); border: 1px solid var(--u-line); }
.ui-deal { display: block; background: #fff; border: 1px solid var(--u-line); border-radius: .86em; padding: 1.1em 1.15em; }
.ui-deal-top { display: flex; align-items: center; gap: .5em; margin: 0 !important; }
.ui-deal-top .ui-ic { margin-left: auto; color: var(--u-muted); }
.ui-av { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--u-side); color: #fff; font-style: normal; font-size: .72em; font-weight: 600; flex: none; }
.ui-deal b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-deal > span { display: block; color: var(--u-muted); font-size: .86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15em; }
.ui-deal > div { display: flex; justify-content: space-between; align-items: center; gap: .4em; margin-top: .7em; flex-wrap: wrap; }
.ui-deal em { font-style: normal; font-weight: 600; }
.ui-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15em; }
.ui-big { font-size: 2em; font-weight: 600 !important; letter-spacing: -.01em; }
.ui-team { background: #fff; border: 1px solid var(--u-line); border-left: .35em solid var(--c); border-radius: .86em; padding: 1em 1.15em; display: grid; gap: .72em; }
.ui-team-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; }
.ui-team-h b { color: var(--c); }
.ui-team-h span { color: var(--u-muted); font-size: .86em; }
.ui-job { background: var(--u-bg); border: 1px solid var(--u-line); border-radius: .72em; padding: .85em 1em; }
.ui-job b { font-weight: 500; }
.ui-job span { display: block; color: var(--u-muted); font-size: .86em; margin: .1em 0 .55em; }
.ui-job div { display: flex; flex-wrap: wrap; gap: .35em; }
.ui-map { position: relative; height: 12em; border-radius: .86em; overflow: hidden; background: #E9EEF3; border: 1px solid var(--u-line); }
.ui-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui-map i { position: absolute; width: 1.2em; height: 1.2em; margin: -.6em; border-radius: 50%; background: var(--c); border: .22em solid #fff; box-shadow: 0 .2em .5em rgba(12, 20, 36, .35); }
.ui-route { animation: route 1.6s linear infinite; }
@keyframes route { to { stroke-dashoffset: -24; } }
.ui-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.ui-steps span { text-align: center; padding: .5em; border-radius: .72em; background: var(--u-fill); border: 1px solid var(--u-line); color: var(--u-muted); font-weight: 500; font-size: .86em; }
.ui-steps .on { background: var(--u-side); border-color: var(--u-side); color: #fff; }
.ui-check { display: flex; align-items: center; gap: .72em; background: #fff; border: 1px solid var(--u-line); border-radius: .86em; padding: .8em .9em; }
.ui-check i { flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; border: .12em solid var(--u-input); }
.ui-check.done i { border-color: #1E9E5A; background: #1E9E5A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 72% no-repeat; }
.ui-check span { flex: 1; font-weight: 500; }
.ui-check em { font-style: normal; color: var(--u-muted); font-size: .86em; }
.ui-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.ui-photo { aspect-ratio: 4 / 3; border-radius: .72em; background: linear-gradient(160deg, hsl(var(--h) 28% 72%), hsl(calc(var(--h) + 24) 26% 46%)); display: flex; align-items: flex-end; padding: .45em .6em; color: #fff; font-size: .78em; font-weight: 600; position: relative; overflow: hidden; }
.ui-photo::before { content: ""; position: absolute; inset: 38% -10% -20% -10%; background: linear-gradient(175deg, transparent 0 18%, rgba(22, 38, 59, .28) 18%); }
.ui-photo span { position: relative; }
.ui-kv-box { background: #fff; border: 1px solid var(--u-line); border-radius: .86em; padding: .3em 1em; }
.ui-kv { display: flex; justify-content: space-between; gap: 1em; padding: .6em 0; border-bottom: 1px solid var(--u-line); }
.ui-kv:last-child { border-bottom: 0; }
.ui-kv span { color: var(--u-muted); }
.ui-jobhead span { display: block; color: var(--u-muted); font-size: .86em; }
.ui-jobhead b { font-size: 1.29em; }
.ui-progress { height: .5em; border-radius: 99em; background: var(--u-line); overflow: hidden; }
.ui-progress i { display: block; height: 100%; background: var(--u-brand); border-radius: inherit; }
.ui-doc { padding: 2.3em 2.6em; display: grid; gap: 1.3em; font-size: 1.15em; }
.ui-doc.narrow { max-width: 46em; margin: 0 auto; }
.ui-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.ui-line { display: flex; justify-content: space-between; gap: 2em; padding: .6em 0; border-bottom: 1px solid var(--u-line); }
.ui-line:last-child { border-bottom: 0; }
.ui-line.total { font-size: 1.2em; font-weight: 600; border-bottom: 0; padding-top: .8em; }
.ui-approve { display: flex; justify-content: space-between; align-items: flex-end; gap: 2em; }
.ui-sign { display: block; width: 14em; color: var(--u-text); border-bottom: 1px solid var(--u-input); }
.ui-paybox { display: grid; gap: .7em; text-align: center; }
.ui-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1em; height: 11em; align-items: end; }
.ui-bars div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .4em; }
.ui-bars i { width: 100%; border-radius: .4em .4em 0 0; background: var(--u-side); }
.ui-bars div:last-child i { background: var(--u-brand); }
.ui-bars span { color: var(--u-muted); font-size: .86em; }

/* Phone app chrome */
.ui-phone { font-size: clamp(7px, 3.75cqw, 14px); display: flex; flex-direction: column; aspect-ratio: 375 / 760; }
.ui-phone-body { flex: 1; overflow: hidden; background: var(--u-bg); }
.ui-topbar { display: flex; align-items: center; gap: .9em; height: 3.7em; padding: 1.2em 1em 0; box-sizing: content-box; background: var(--u-side); color: #fff; flex: none; }
.ui-topbar b { font-weight: 600; font-size: 1.07em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-topbar-ic { margin-left: auto; display: flex; gap: 1.1em; color: #B1C0D2; }
.ui-topbar .ui-ic { width: 1.35em; height: 1.35em; }
.ui-quickbar { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--u-side); color: #B1C0D2; padding: .7em 0 1.3em; flex: none; }
.ui-quickbar span { display: grid; justify-items: center; gap: .25em; font-size: .78em; font-weight: 500; }
.ui-quickbar .ui-ic { width: 1.7em; height: 1.7em; }
.ui-quickbar .on { color: var(--u-brand); }
/* Screens made before the real chrome existed drew their own bars. */
.ui-burger, .ui-bell { display: none; }

/* In a narrow frame the app drops its sidebar, as the real one does on a phone. */
@container (max-width: 560px) {
  .ui { font-size: clamp(5px, 2.15cqw, 14px); }
  .ui-phone { font-size: clamp(7px, 3.75cqw, 14px); }
  .ui-app { grid-template-columns: minmax(0, 1fr); height: 40em; }
  .ui-side { display: none; }
}

.stage-phone .ui-phone { font-size: 3.75cqw; }
@media (max-width: 640px) { .stage .stage-phone { border-radius: 16px; padding: 4px; } .stage .stage-phone .ui { border-radius: 12px; } }

/* Hero phone states */
.stage [data-off] { display: inline; }
.stage[data-step="0"] [data-off~="0"], .stage[data-step="1"] [data-off~="1"], .stage[data-step="2"] [data-off~="2"],
.stage[data-step="3"] [data-off~="3"], .stage[data-step="4"] [data-off~="4"], .stage[data-step="5"] [data-off~="5"] { display: none; }
.hero-notes { flex: 1; background: radial-gradient(120% 60% at 50% 0%, #2B4468, #101F32 70%); color: #fff; padding: 3.2em .8em 1em; }
.stage[data-step="0"] .hero-notes, .stage[data-step="1"] .hero-notes, .stage[data-step="2"] .hero-notes, .stage[data-step="3"] .hero-notes { display: flex; flex-direction: column; gap: .6em; }
.hero-clock { margin: 0 0 1.2em; text-align: center; font-size: 4.6em; font-weight: 300; line-height: 1; letter-spacing: -.02em; color: #fff; }
.hero-clock small { display: block; margin-top: .9em; font-size: .19em; font-weight: 500; letter-spacing: 0; color: #B1C0D2; }
.hero-note { display: flex; align-items: flex-start; gap: .7em; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .16); border-radius: 1.2em; padding: .8em .9em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stage .hero-note[data-on] { display: none; }
.stage[data-step="0"] .hero-note[data-on~="0"], .stage[data-step="1"] .hero-note[data-on~="1"], .stage[data-step="2"] .hero-note[data-on~="2"], .stage[data-step="3"] .hero-note[data-on~="3"] { display: flex; }
.hero-note > i { flex: none; width: 2.4em; height: 2.4em; border-radius: .6em; background: var(--u-brand); display: grid; place-items: center; }
.hero-note > i .ui-ic { width: 1.3em; height: 1.3em; }
.hero-note div { flex: 1; min-width: 0; }
.hero-note b { display: block; }
.hero-note span { display: block; color: #D5DEEC; font-size: .92em; }
.hero-note time { font-size: .78em; color: #B1C0D2; }
.stage[data-step="4"] .hero-job, .stage[data-step="5"] .hero-paid { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hero-paid-body { padding: 2.6em 1.15em 1em; display: grid; gap: .8em; justify-items: center; text-align: center; }
.hero-paid-body > b { font-size: 1.71em; font-weight: 600; }
.hero-paid-body > span { color: var(--u-muted); }
.hero-paid-body .ui-kv-box { width: 100%; text-align: left; margin-top: .6em; }
.paid-tick { width: 5em; height: 5em; border-radius: 50%; background: #1E9E5A; color: #fff; display: grid; place-items: center; animation: land .6s var(--ease) both; }
.paid-tick svg { width: 58%; }

/* Drop the paperwork */
.swap { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.swap li { display: grid; gap: 4px 40px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.swap s { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1; color: var(--text); text-decoration: none; background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 54% / 100% .14em; }
.swap span { color: var(--muted); font-size: .98rem; position: relative; padding-left: 30px; }
.swap span::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 9px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg); }
.js .swap s { background-size: 0 .14em; color: var(--text); transition: background-size .7s var(--ease), color .7s; }
.js .swap li.is-live s { background-size: 100% .14em; color: var(--dim); }
.js .swap span { opacity: .25; transition: opacity .6s .25s; }
.js .swap li.is-live span { opacity: 1; }
@media (min-width: 900px) { .swap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; } }

/* Time back */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.timeback { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .timeback { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }
.timeback .dial-row { margin-top: 28px; }
.timeback-unit { margin: 4px 0 0; text-align: right; color: var(--muted); }
.timeback-big { margin: 0; }
.timeback-big span { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(4.5rem, 10vw, 8rem); line-height: .8; color: var(--signal); font-variant-numeric: tabular-nums; }
.timeback-big small { display: block; margin-top: 14px; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; }
.timeback-days { margin: 18px 0 14px; font-size: 1.15rem; }

/* Trades */
.section-trades { padding-bottom: 0; }
.trades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 600px) { .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .trades { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.trades li { min-width: 0; }
.trades a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.trades a:hover, .trades a:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #B9C4DA; }
.trades figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
@media (min-width: 960px) { .trades figure { aspect-ratio: 2.35 / 1; } }
.trades img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.trades a:hover img { transform: scale(1.06); }
.trades b { display: block; padding: 14px 18px 0; font-family: var(--display); font-weight: 800; font-size: 1.45rem; text-transform: uppercase; line-height: 1; transition: color .2s; }
.trades a:hover b { color: var(--signal-text); }
.trades span { display: block; padding: 6px 18px 16px; color: var(--muted); font-size: .92rem; }

/* The job line */
.jobline { position: relative; }
.jobline-track { position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.jobline-track i { position: absolute; inset: 0; background: var(--signal); transform-origin: top; transform: scaleY(var(--p, 1)); box-shadow: 0 0 18px var(--signal); }
.stops { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(44px, 5vw, 72px); }
.stop { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: clamp(16px, 3vw, 40px); row-gap: 28px; }
.stop-marker { grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; }
.stop-marker span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--navy); font-family: var(--display); font-weight: 800; font-size: 1.5rem; position: relative; z-index: 1; transition: background .4s, color .4s, box-shadow .4s; box-shadow: 0 0 0 6px var(--bg), 0 0 30px rgba(255, 106, 26, .6); }
.stop-marker b { display: none; }
.stop-copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 20ch; }
.stop-copy p { margin: 12px 0 12px; max-width: 52ch; color: var(--muted); font-size: 1rem; }
.stop-visual { grid-column: 2; min-width: 0; }
.stop-visual .frame-phone { margin-inline: auto 0; }
.js .stop:not(.is-live) .stop-marker span { background: var(--surface-2); color: var(--muted); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--line); }
.js .stop .stop-visual { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .stop:not(.is-live) .stop-visual { opacity: .35; transform: translateY(18px) scale(.985); }
@media (min-width: 980px) {
  .stop { grid-template-columns: 44px minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
  .stop-marker { grid-row: 1; align-self: start; }
  .stop-visual { grid-column: 3; grid-row: 1; }
  .stop-copy { grid-column: 2; grid-row: 1; }
  .stop:nth-child(even) .stop-copy { grid-column: 3; }
  .stop:nth-child(even) .stop-visual { grid-column: 2; }
  .stop:nth-child(even) .stop-visual .frame-phone { margin-inline: 0 auto; }
}

/* Feature index */
.index { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; }
.index-group h3 { color: var(--signal-text); font-size: 1.25rem; padding-bottom: 8px; border-bottom: 2px solid var(--signal); }
.index-group ul { list-style: none; margin: 0; padding: 0; }
.index-group a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.index-group a b { display: block; font-weight: 600; font-size: 1rem; transition: color .2s, transform .25s var(--ease); }
.index-group a span { display: block; color: var(--muted); font-size: .86rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index-group a:hover b { color: var(--signal-text); transform: translateX(6px); }

/* AI and integrations */
.ai-grid, .connect { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ai-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ai-grid li { border-bottom: 1px solid var(--line); }
.ai-grid a { display: block; height: 100%; padding: 18px 24px 20px 0; text-decoration: none; position: relative; }
.ai-grid b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: .95; background: linear-gradient(90deg, var(--text) 0 50%, var(--signal-text) 50% 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position .5s var(--ease); }
.ai-grid a:hover b, .ai-grid a:focus-visible b { background-position: -100% 0; }
.ai-grid span { display: block; margin-top: 8px; color: var(--muted); font-size: .95rem; max-width: 34ch; }
.section-ai { position: relative; overflow: hidden; }
.section-ai::before { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 160%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 106, 26, .16), transparent); }
.connect { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border-left: 1px solid var(--line); }
.connect li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.connect a { display: grid; grid-template-columns: 1fr; gap: 6px; height: 100%; padding: 18px 20px; text-decoration: none; transition: background .25s; }
.connect a:hover { background: var(--surface-2); }
.connect b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.45rem; line-height: 1; }
.connect b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(30, 158, 90, .2); vertical-align: .18em; }
.connect span { color: var(--muted); font-size: .98rem; }

/* Photos */
.photo-band { padding-bottom: clamp(40px, 6vw, 80px); }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.photo-tile { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 5; }
.photo-tile.photo-lead { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.photo-tile img, .built-photos img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.photo-tile:hover img, .built-photos figure:hover img { transform: scale(1.04); }
.photo-caption { margin: 14px 0 0; color: var(--dim); font-size: .9rem; }
@media (min-width: 900px) {
  .photo-grid { grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
  .photo-tile, .photo-tile.photo-lead { grid-column: auto; aspect-ratio: auto; height: clamp(260px, 26vw, 380px); }
}
.built { display: grid; gap: 40px; align-items: center; }
.built-copy p { margin: 20px 0 16px; max-width: 52ch; color: var(--muted); font-size: 1.1rem; }
.built-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.built-photos figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.built-a { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.built-b, .built-c { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .built { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
  .built-photos { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: clamp(320px, 30vw, 440px); }
  .built-a { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
  .built-b, .built-c { aspect-ratio: auto; }
  .built-c { transform: translateY(0); }
}

/* Voiced AI demo: the screen on top, a player bar with live captions under it. */
.ai-demo { display: flex; flex-direction: column; gap: 12px; margin: 0 auto clamp(32px, 4vw, 48px); max-width: 880px; }
.ai-demo-screen { order: 1; }
.ai-demo-talk { order: 2; border-radius: 18px; background: var(--navy); color: var(--on-navy); box-shadow: var(--shadow); padding: 12px 18px; display: grid; gap: 14px 28px; align-items: center; }
@media (min-width: 900px) { .ai-demo-talk { grid-template-columns: auto minmax(0, 1fr); } }
.ai-demo-player { display: flex; align-items: center; gap: 18px; }
.ai-demo-play { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--signal); color: var(--navy); display: grid; place-items: center; cursor: pointer; position: relative; transition: transform .25s var(--ease), background .2s; }
.ai-demo-play:hover { transform: scale(1.06); background: var(--signal-hot); }
.ai-demo-play::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--signal); opacity: .6; animation: ring 2.2s ease-out infinite; }
.ai-demo.is-playing .ai-demo-play::before { animation: none; opacity: 0; }
@keyframes ring { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.35); opacity: 0; } }
.ai-demo-play svg { width: 30px; height: 30px; grid-area: 1 / 1; }
.ai-demo-play .ic-stop, .ai-demo.is-playing .ai-demo-play .ic-play { display: none; }
.ai-demo.is-playing .ai-demo-play .ic-stop { display: block; }
.ai-demo-title { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; line-height: 1; white-space: nowrap; }
.ai-demo-sub { margin: 4px 0 0; color: #9DA9C6; font-size: .9rem; white-space: nowrap; }
.ai-demo-wave { display: flex; align-items: center; gap: 3px; height: 48px; margin-left: 6px; }
.ai-demo-wave i { width: 3px; height: 14%; border-radius: 3px; background: #3A4A70; transition: background .3s; }
.ai-demo[data-speaker="you"] .ai-demo-wave i { background: var(--on-navy); animation: wave .9s ease-in-out calc(var(--i) * -70ms) infinite; }
.ai-demo[data-speaker="ai"] .ai-demo-wave i { background: var(--signal); animation: wave .7s ease-in-out calc(var(--i) * -55ms) infinite; }
@keyframes wave { 0%, 100% { height: 14%; } 50% { height: calc(30% + (var(--i) * 37%) / 8); max-height: 100%; } }
@media (max-width: 520px) { .ai-demo-wave { display: none; } }
/* The conversation is in the page for readers and search engines; the bar shows one line at a time. */
.ai-demo-lines { list-style: none; margin: 0; padding: 0; min-width: 0; }
.ai-demo-lines li { display: none; }
.ai-demo.is-playing .ai-demo-lines li.is-now { display: block; animation: land .35s var(--ease) both; }
.ai-demo-lines b { display: block; font-size: .8rem; font-weight: 600; color: #9DA9C6; margin-bottom: 2px; }
.ai-demo-lines li[data-who="ai"] b { color: var(--signal-hot); }
.ai-demo-lines span { display: block; font-size: 1.02rem; line-height: 1.35; }
.ai-demo-note { margin: 0; color: #9DA9C6; font-size: .95rem; max-width: 62ch; }
.ai-demo.is-playing .ai-demo-note { display: none; }
.ai-demo-frame .ui-app { height: 40em; }
.ui-chat { display: flex; flex-direction: column; gap: 1em; min-height: 0; height: 31.5em; }
.ui-chat-scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .9em; }
.ui-msg { display: flex; gap: .7em; max-width: 86%; flex: none; }
.ui-msg.me { align-self: flex-end; }
.ui-msg.me > span { background: var(--u-side); color: #fff; padding: .7em 1em; border-radius: 1.1em 1.1em .3em 1.1em; }
.ui-msg.ai > i { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--u-brand); color: #fff; display: grid; place-items: center; }
.ui-msg.ai > div { display: grid; gap: .6em; min-width: 0; }
.ui-msg.ai > div > span { font-weight: 500; padding-top: .35em; }
.ui-chat-card { padding: .3em 1em; gap: 0; min-width: 30em; }
.ui-chat-row { display: grid; grid-template-columns: 9em minmax(0, 1fr) auto; gap: 1em; align-items: center; padding: .6em 0; border-bottom: 1px solid var(--u-line); }
.ui-chat-row:last-child { border-bottom: 0; }
.ui-chat-row b { font-weight: 600; display: flex; align-items: center; gap: .5em; }
.ui-chat-row u { width: .7em; height: .7em; border-radius: 50%; background: var(--c); }
.ui-chat-row span { color: var(--u-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-chat-row em { font-style: normal; font-weight: 600; }
.ui-chat-row em.bad { color: #A32424; }
.ui-plan { border-color: var(--u-brand); box-shadow: 0 0 0 .2em rgba(242, 103, 33, .14); }
.ui-plan-h { display: flex; align-items: center; gap: .5em; padding: .7em 0 .3em; }
.ui-plan-actions { display: flex; align-items: center; gap: .6em; padding: .8em 0; }
.ui-plan-actions [data-demo-done] { display: none; }
.ai-demo.is-confirmed .ui-plan-actions .ui-btn { display: none; }
.ai-demo.is-confirmed .ui-plan-actions [data-demo-done] { display: inline-flex; animation: land .5s var(--ease) both; }
.ai-demo.is-confirming [data-demo-confirm] { transform: scale(.94); box-shadow: 0 0 0 .35em rgba(242, 103, 33, .3); transition: transform .2s, box-shadow .2s; }
.ui-composer { flex: none; display: flex; align-items: center; justify-content: space-between; height: 3.4em; padding: 0 .6em 0 1.1em; border: 1px solid var(--u-input); border-radius: 1em; background: #fff; color: var(--u-muted); }
.ui-composer i { width: 2.3em; height: 2.3em; border-radius: .7em; background: var(--u-brand); color: #fff; display: grid; place-items: center; }
.ai-demo[data-step="-1"] [data-demo-step], .ai-demo[data-step="0"] [data-demo-step]:not([data-demo-step="0"]),
.ai-demo[data-step="1"] [data-demo-step]:nth-child(n+3), .ai-demo[data-step="2"] [data-demo-step]:nth-child(n+4),
.ai-demo[data-step="3"] [data-demo-step]:nth-child(n+5), .ai-demo[data-step="4"] [data-demo-step]:nth-child(n+6) { display: none; }
.ai-demo.is-playing [data-demo-step] { animation: land .45s var(--ease) both; }

/* Facts */
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.facts div { padding: 28px 24px 8px 0; }
.facts dt { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 5vw, 4.4rem); line-height: .85; color: var(--text); }
.facts dd { margin: 12px 0 0; color: var(--muted); max-width: 26ch; }

/* Pricing */
.pricing { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .pricing { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; } }
.pricing-dial label { display: block; font-size: 1.15rem; font-weight: 600; margin-bottom: 18px; }
.dial-row { display: flex; align-items: center; gap: 20px; }
.dial-row output { font-family: var(--display); font-weight: 900; font-size: 3.2rem; line-height: 1; min-width: 1.6em; text-align: right; }
input[type="range"] { flex: 1; appearance: none; -webkit-appearance: none; height: 44px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--signal) var(--fill, 20%), var(--line) var(--fill, 20%)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--signal); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--signal); border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--signal), 0 0 24px rgba(255, 106, 26, .7); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--signal); border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--signal); }
.pricing-result { margin: 22px 0 10px; }
.pricing-result span { font-family: var(--display); font-weight: 900; font-size: clamp(4rem, 7vw, 6rem); line-height: .85; color: var(--signal); }
.pricing-result small { display: block; margin-top: 10px; font-size: 1.1rem; color: var(--text); }
.pricing-small { color: var(--muted); font-size: .95rem; max-width: 52ch; margin-bottom: 24px; }
.bands { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.band { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 14px; border-bottom: 1px solid var(--line); color: var(--muted); transition: background .3s, color .3s; border-left: 3px solid transparent; }
.band-label { font-size: 1.05rem; }
.band-price { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; }
.band-price small { font-family: var(--body); font-weight: 400; font-size: .85rem; }
.band-price a { color: var(--signal-text); font-size: 1.4rem; }
.band.is-on { color: var(--text); background: rgba(255, 106, 26, .1); border-left-color: var(--signal); }

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-family: var(--body); text-transform: none; font-weight: 600; font-size: 1.15rem; line-height: 1.35; letter-spacing: 0; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -10px; border-right: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq-a { padding: 0 48px 24px 0; color: var(--muted); max-width: 70ch; }
.faq-a a { color: var(--signal-text); }

/* Call to action band */
.cta-band { position: relative; overflow: hidden; background: var(--signal); color: var(--navy); padding-block: clamp(48px, 6vw, 80px); }
.cta-band h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: .88; max-width: 16ch; }
.cta-band p { margin: 22px 0 0; max-width: 52ch; font-size: 1.15rem; font-weight: 500; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-band .btn-signal { background: var(--navy); color: var(--on-navy); box-shadow: none; }
.cta-band .btn-signal:hover { background: var(--navy-2); }
.cta-band .btn-ghost { border-color: rgba(10, 18, 38, .5); color: var(--navy); background: transparent; }
.cta-band .cta-note { font-size: .9rem; font-weight: 400; opacity: .8; }

/* Footer */
.site-footer { --bg: #0E1A38; --text: #EEF3FF; --muted: #9DA9C6; --line: #26365C; --signal-text: #FF8A4D; color: var(--text); background: var(--bg); border-top: 1px solid var(--line); padding-top: 64px; font-size: .95rem; }
.footer-grid { display: grid; gap: 40px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
.footer-brand p { color: var(--muted); max-width: 40ch; margin: 16px 0 20px; }
.footer-title { margin: 0 0 12px; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .03em; color: var(--muted); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-block; padding: 5px 0; color: var(--text); text-decoration: none; }
.site-footer li a:hover { color: var(--signal-text); }
.footer-base { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; margin-top: 56px; padding-block: 24px 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.footer-base p { margin: 0; }
.footer-base ul { display: flex; gap: 24px; }
.footer-base li a { color: var(--muted); padding: 0; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.3fr 2fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-two { columns: 2; column-gap: 32px; }
}

/* Inner pages */
.page-hero { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 80px); position: relative; }
.page-hero h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); max-width: 20ch; }
.page-hero .lede { margin: 24px 0 0; max-width: 60ch; color: var(--muted); font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.page-hero .hero-actions { margin-top: 28px; }
.page-hero-visual { margin: clamp(24px, 3vw, 40px) auto 0; max-width: 980px; }
.page-hero-visual .frame-phone { margin-inline: auto; }
.split { display: grid; gap: 32px; align-items: center; }
.split + .split { margin-top: clamp(40px, 5vw, 72px); }
.split h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.split p { color: var(--muted); max-width: 56ch; margin: 18px 0 0; }
.split .frame-phone { margin-inline: auto; }
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; }
  .split.flip > :first-child { order: 2; }
  .split.text-only { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
}
.points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 60ch; }
.points li { position: relative; padding-left: 30px; color: var(--text); }
.points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 16px; height: 2px; background: var(--signal); }
.prose { max-width: 70ch; color: var(--muted); }
.prose h2 { color: var(--text); margin: 1.6em 0 .5em; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.prose h3 { color: var(--text); margin: 1.4em 0 .4em; }
.prose a { color: var(--signal-text); }
.prose strong { color: var(--text); }
.link-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.link-cards li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.link-cards a { display: block; height: 100%; padding: 22px; text-decoration: none; transition: background .25s; }
.link-cards a:hover { background: var(--surface-2); }
.link-cards b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.link-cards a:hover b { color: var(--signal-text); }
.link-cards span { display: block; margin-top: 8px; color: var(--muted); font-size: .95rem; }
.day { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--signal); display: grid; gap: 36px; }
.day li { position: relative; padding-left: 28px; }
.day li::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px var(--bg); }
.day time { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--signal-text); line-height: 1; }
.day h3 { margin: 6px 0 8px; }
.day p { color: var(--muted); max-width: 62ch; margin: 0 0 8px; }
.soon { border: 1px dashed var(--line); border-radius: var(--radius); padding: 24px; }
.soon h2, .soon h3 { font-size: 1.5rem; color: var(--muted); }
.soon ul { margin: 12px 0 0; padding-left: 20px; color: var(--muted); }
.notfound { min-height: 60vh; display: grid; align-content: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stage-desk, .stage-phone { transform: none; }
  @view-transition { navigation: none; }
}