:root { color-scheme: light; }
* { box-sizing: border-box; }
html { background: var(--color-white); scroll-behavior: smooth; scroll-padding-top: 72px; }
html, body { overscroll-behavior-y: auto; }
/* No scroll lock while a popover is open. `overflow: hidden` on the root
   removes the scrollport the sticky header depends on, so the header — and
   with it the open panel — snapped back to its static position at the top of
   the document and disappeared from view. The overlay already blocks
   interaction behind the panel. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-width: 320px; color: var(--color-charcoal); background-color: var(--color-white); font-family: var(--font-body); }
button, a { font: inherit; }
a { color: inherit; }
.draft-skip { position: fixed; z-index: 15; left: 1rem; top: -5rem; padding: .75rem 1rem; color: var(--color-white); background: var(--color-charcoal); }
.draft-skip:focus { top: 1rem; }
.draft-header { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 60px; padding: 0 clamp(1rem, 2.2vw, 2.25rem); border-bottom: 1px solid var(--color-rule); background: color-mix(in srgb, var(--color-white) 85%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); transition: background .3s ease, border-color .3s ease; }
.draft-header.is-scrolled { background: color-mix(in srgb, var(--color-white) 95%, transparent); }
.hprog { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; z-index: 1; overflow: hidden; }
.hprog i { display: block; height: 100%; background: var(--color-brand); transform: scaleX(0); transform-origin: 0 50%; }
.draft-header--on-footer { background: var(--color-brand) !important; border-bottom-color: var(--color-brand); backdrop-filter: none; -webkit-backdrop-filter: none; }
.draft-header--on-footer .draft-icon-button, .draft-header--on-footer .draft-menu { border-color: var(--color-white); color: var(--color-brand); background: var(--color-white); }
.draft-header--on-footer .draft-icon-button:hover, .draft-header--on-footer .draft-icon-button:focus-visible, .draft-header--on-footer .draft-menu:hover, .draft-header--on-footer .draft-menu:focus-visible { background: var(--color-white); color: var(--color-brand); border-color: var(--color-white); }
.draft-header--on-footer .draft-chevron { color: var(--color-brand); }
.draft-header--on-footer .draft-brand img { content: url('../assets/amblem-white.svg'); }
.draft-header__side { display: flex; align-items: center; }
.draft-header__side--right { justify-content: flex-end; }
.draft-control-wrap { position: relative; }

/* Desktop navigation ---------------------------------------------------
   Below the breakpoint the header keeps the compact Explore panel. From the
   width where the links measurably fit (1120px, checked in EN and the longer
   TR strings) the sections and the primary action sit on the bar itself: a
   desktop visitor should not have to open a menu to find out what the site
   contains. Same red/white parts as the rest of the header — a text link with
   a brand underline, and the existing CTA shape. */
.draft-nav { display: none; }
.draft-header__cta { display: none; }
.draft-header__auth { display: none; }
@media (min-width: 1024px) {
  .draft-header { min-height: 56px; }
  .draft-header .draft-icon-button, .draft-header .draft-menu { min-height: 34px; padding: 0 .6rem; font-size: 13px; gap: .4rem; }
  .draft-header .draft-icon-button { border-color: transparent; background: transparent; }
  .draft-header .draft-icon-button:hover, .draft-header .draft-icon-button:focus-visible, .draft-header .draft-icon-button[aria-expanded="true"] { border-color: transparent; background: color-mix(in srgb, var(--color-charcoal) 6%, transparent); }
  .draft-header .draft-flag { font-size: 15px; }
  .draft-header__side--left { gap: clamp(1rem, 1.6vw, 2.25rem); }
  .draft-header__side--right { gap: clamp(.75rem, 1vw, 1rem); }
  .draft-nav { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 2rem); }
  .draft-nav a { position: relative; padding: .55rem 0; color: var(--color-charcoal); font-size: 14px; font-weight: 600; letter-spacing: -.012em; text-decoration: none; white-space: nowrap; }
  .draft-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 2px; border-radius: 2px; background: var(--color-brand); transform: scaleX(0); transform-origin: left center; transition: transform .22s var(--ease-out); }
  .draft-nav a:hover, .draft-nav a:focus-visible { color: var(--color-brand); }
  .draft-nav a:hover::after, .draft-nav a:focus-visible::after { transform: scaleX(1); }
  .draft-header__cta { display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: 0 .9rem; border: 1px solid var(--color-brand); border-radius: 999px; background: var(--color-brand); color: var(--color-white); font-size: 14px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
  .draft-header__cta { font-size: 13px; }
  .draft-header__cta:hover, .draft-header__cta:focus-visible { background: var(--color-brand-press); border-color: var(--color-brand-press); }
  /* Panel access: a plain pair of text links, same weight as the section nav,
     so the red CTA stays the only filled shape in the header. */
  .draft-header__auth { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .1rem; color: var(--color-charcoal); font-size: 13px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
  .draft-header__auth:hover, .draft-header__auth:focus-visible { color: var(--color-brand); }
  .draft-header--on-footer .draft-header__auth { color: var(--color-white); }
  /* Explore would be a second, redundant route to the same sections. */
  .draft-header__side--right .draft-control-wrap { display: none; }
  .draft-header--on-footer .draft-nav a { color: var(--color-white); }
  .draft-header--on-footer .draft-nav a::after { background: var(--color-white); }
  .draft-header--on-footer .draft-header__cta { background: var(--color-white); border-color: var(--color-white); color: var(--color-brand); }
}
/* The fourth link only earns its place once there is room for it beside the
   mark — measured in Turkish, whose labels are the longer set. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .draft-nav a:nth-child(4) { display: none; }
}
/* Overlay backdrop for menus */
.draft-overlay { position: fixed; inset: 0; z-index: 7; background: color-mix(in srgb, var(--color-charcoal) 38%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out); }
.draft-overlay.is-active { opacity: 1; pointer-events: auto; }
.draft-brand { display: grid; place-items: center; line-height: 0; }
.draft-brand img { width: clamp(30px, 2.4vw, 36px); height: auto; animation: pulse 2.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.draft-icon-button, .draft-menu { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .55rem; padding: 0 1rem; border: 1px solid color-mix(in srgb, var(--color-charcoal) 22%, transparent); background: var(--color-white); color: var(--color-charcoal); font-weight: 700; cursor: pointer; border-radius: 999px; font-size: 14px; letter-spacing: .02em; }
.draft-icon-button { min-width: 108px; }
.draft-menu { min-width: 108px; }
.draft-menu__label { display: inline; }
.draft-icon-button:hover, .draft-icon-button:focus-visible, .draft-menu:hover, .draft-menu:focus-visible, .draft-icon-button[aria-expanded="true"], .draft-menu[aria-expanded="true"] { border-color: color-mix(in srgb, var(--color-charcoal) 34%, transparent); color: var(--color-charcoal); outline: none; }
.draft-flag { font-size: 18px; line-height: 1; }
.draft-chevron { color: var(--color-brand); font-size: 16px; line-height: 1; transform: translateY(-2px); }
.draft-menu__icon { position: relative; display: block; width: 18px; height: 12px; flex: 0 0 auto; }
.draft-menu__icon i { position: absolute; left: 0; display: block; width: 18px; height: 1.5px; background: currentColor; transition: top .25s var(--ease-out), transform .25s var(--ease-out), opacity .15s ease; border-radius: 1px; }
.draft-menu__icon i:first-child { top: 2px; }
.draft-menu__icon i:last-child { top: 9px; }
.draft-menu[aria-expanded="true"] .draft-menu__icon i { top: 5px; }
.draft-menu[aria-expanded="true"] .draft-menu__icon i:first-child { transform: rotate(45deg); }
.draft-menu[aria-expanded="true"] .draft-menu__icon i:last-child { transform: rotate(-45deg); }
.draft-menu:hover .draft-menu__icon i:first-child { transform: translateY(-1px); }
.draft-menu:hover .draft-menu__icon i:last-child { transform: translateY(1px); }
.draft-popover { position: absolute; top: calc(100% + .65rem); z-index: 8; min-width: 190px; padding: 1rem; border: 1px solid color-mix(in srgb, var(--color-charcoal) 16%, transparent); border-radius: 4px; background: var(--color-white); color: var(--color-charcoal); transform-origin: 100% 0; animation: popover-in var(--dur-medium) var(--ease-out) both; box-shadow: 0 18px 45px -20px color-mix(in srgb, var(--color-charcoal) 38%, transparent); }
@keyframes popover-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
.draft-language-panel { left: 0; width: 270px; }
.draft-menu-panel { right: 0; width: min(520px, calc(100vw - 2rem)); padding: 1.25rem; }
.draft-popover__head { display: grid; gap: .35rem; margin-bottom: .85rem; }
.draft-popover__label { display: block; color: var(--color-brand); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.draft-popover__head p { max-width: 43ch; margin: 0; color: var(--color-quiet); font-size: 12px; line-height: 1.5; }
.draft-language-panel__options { border-top: 1px solid var(--color-rule); }
.draft-language-panel strong, .draft-language-panel small { display: block; }
.draft-language-panel strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.draft-language-panel small { margin-top: 1px; color: var(--color-quiet); font-size: 11.5px; letter-spacing: -.005em; }
.draft-language-panel button { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; gap: .7rem; width: 100%; min-height: 58px; padding: .65rem .4rem; border: 0; border-bottom: 1px solid var(--color-rule); background: transparent; color: var(--color-charcoal); font: inherit; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease; }
.draft-language-panel button::after { content: ''; width: 7px; height: 7px; justify-self: center; border: 1px solid color-mix(in srgb, var(--color-charcoal) 28%, transparent); border-radius: 50%; }
.draft-language-panel button:hover { background: color-mix(in srgb, var(--color-charcoal) 4%, var(--color-white)); }
.draft-language-panel button[aria-pressed="true"] { color: var(--color-brand); }
.draft-language-panel button[aria-pressed="true"]::after { border-color: var(--color-brand); background: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent); }
.draft-language-panel button[aria-pressed="true"] strong { color: var(--color-brand); }
.draft-language-panel button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; }
.draft-menu-panel nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-rule); }
.draft-menu-panel nav a { min-height: 58px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: .7rem; padding: .7rem .5rem; border-bottom: 1px solid var(--color-rule); font-size: 13px; text-decoration: none; opacity: 0; transform: translateY(8px); animation: menu-item-in .35s var(--ease-out) forwards; }
.draft-menu-panel nav a:nth-child(1) { animation-delay: .04s; }
.draft-menu-panel nav a:nth-child(2) { animation-delay: .08s; }
.draft-menu-panel nav a:nth-child(3) { animation-delay: .12s; }
.draft-menu-panel nav a:nth-child(4) { animation-delay: .16s; }
.draft-menu-panel nav a:nth-child(5) { animation-delay: .2s; }
.draft-menu-panel nav a:nth-child(6) { animation-delay: .24s; }
.draft-menu-panel nav a:nth-child(7) { animation-delay: .28s; }
@keyframes menu-item-in { to { opacity: 1; transform: none; } }
.draft-menu-panel nav a:nth-child(odd) { border-right: 1px solid var(--color-rule); }
.draft-menu-panel nav a > span { color: var(--color-brand); font: 600 11px/1 var(--font-mono); letter-spacing: .08em; }
.draft-menu-panel nav a strong { min-width: 0; font-size: 13px; line-height: 1.3; }
.draft-menu-panel nav a:hover, .draft-menu-panel nav a:focus-visible, .draft-menu-panel nav a[aria-current="true"] { color: var(--color-brand); outline: none; }
.draft-menu-panel nav a[aria-current="true"] { box-shadow: inset 3px 0 0 var(--color-brand); }
.draft-menu-panel__auth { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .85rem; }
.draft-menu-panel__auth a { display: flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--color-rule-strong); color: var(--color-charcoal); font-size: 13px; font-weight: 600; text-decoration: none; }
.draft-menu-panel__auth a:hover, .draft-menu-panel__auth a:focus-visible { border-color: var(--color-brand); color: var(--color-brand); }
.draft-menu-panel__cta { position: relative; display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .75rem .9rem; border: 1px solid var(--color-brand); background: var(--color-brand); color: var(--color-white); font-size: 13px; font-weight: 700; text-decoration: none; overflow: hidden; transition: background .2s ease, transform .2s ease; }
.draft-menu-panel__cta:hover, .draft-menu-panel__cta:focus-visible { background: var(--color-brand-press); color: var(--color-white); transform: translateY(-1px); }
.draft-menu-panel__cta b { font-size: 17px; transition: transform var(--dur-short) var(--ease-out); position: relative; z-index: 1; }
.draft-menu-panel__cta:hover b { transform: translate(3px, -3px); }
.draft-icon-button:focus-visible, .draft-menu:focus-visible, .draft-cta:focus-visible, .draft-text-link:focus-visible, .btn-red:focus-visible, .btn-white:focus-visible, .draft-menu-panel a:focus-visible, .draft-language-panel button:focus-visible, .draft-nav a:focus-visible, .draft-header__cta:focus-visible, .draft-header__auth:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.draft-hero { overflow: clip; padding: clamp(1rem, 2vw, 2rem) 1.25rem clamp(3rem, 6vw, 6rem); background-color: var(--color-white); position: relative; }
.draft-hero__intro { width: min(100%, 900px); margin: 0 auto; text-align: center; transition: opacity .4s ease; }
.draft-stage { width: min(100%, 1240px); margin: clamp(2rem, 5vw, 4rem) auto 0; transition: opacity .4s ease; }
.draft-hero.is-scrolling .draft-hero__intro,
.draft-hero.is-scrolling .draft-stage { opacity: .3; }
.fade-section { position: relative; }
.fade-section .draft-scene-copy { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.fade-section.is-in .draft-scene-copy { opacity: 1; transform: none; }
.fade-section .draft-scene-media { opacity: 0; transform: translateY(18px); transition: opacity .5s ease .15s, transform .5s ease .15s; }
.fade-section.is-in .draft-scene-media { opacity: 1; transform: none; }
.fade-section.is-scrolling .draft-scene-copy,
.fade-section.is-scrolling .draft-scene-media { opacity: .3; transform: translateY(-8px); }
.draft-kicker { display: inline-flex; align-items: center; gap: .75rem; margin: 0 0 1rem; padding: 5px 12px; background: var(--color-brand); color: #fff; border: 1px solid var(--color-brand); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: 0; }
.draft-hero__intro > .draft-kicker { margin-top: .5rem; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 12ch; margin: 0 auto; font-family: var(--font-display); font-size: clamp(43px, 7vw, 92px); line-height: .98; letter-spacing: -.065em; }
h1 em, h2 em { color: var(--color-brand); font-style: normal; }
html[lang="tr"] h1 { max-width: 15ch; font-size: clamp(41px, 6.5vw, 84px); }
html[lang="tr"] .typewriter { font-size: .88em; letter-spacing: -.07em; }
.typewriter { display: inline-block; position: relative; white-space: nowrap; height: 1.05em; vertical-align: text-bottom; }
.typewriter::after { content: ''; position: absolute; left: var(--tw-x, 0); bottom: .08em; width: 0; height: 1em; border-right: 2px solid var(--color-brand); animation: blink-cursor .7s step-end infinite; }
.typewriter.no-cursor::after { display: none; }
.draft-lead { max-width: 680px; margin: clamp(1.8rem, 3.5vw, 2.5rem) auto 0; font-size: clamp(15px, 1.45vw, 18px); line-height: 1.55; letter-spacing: -.012em; }
.draft-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; margin-top: clamp(2rem, 4.5vw, 3rem); }
.draft-cta { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .75rem; padding: .75rem 1.1rem; border: 1px solid var(--color-brand); background: var(--color-brand); color: var(--color-white); font-weight: 700; text-align: center; text-decoration: none; border-radius: 12px; }
.draft-cta:hover, .draft-cta:focus-visible { background: var(--color-brand-press); }
.draft-cta span { display: inline-block; }
.draft-cta:hover span { transform: none; }
.draft-text-link { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding-top: 4px; font-weight: 700; text-underline-offset: .25em; color: var(--color-charcoal); text-decoration: none; transition: color .18s ease; }
.draft-text-link:hover { color: var(--color-brand); }
.draft-text-link span { font-size: 18px; }
 .draft-text-link span:last-child { animation: bounce-down 1.5s ease-in-out infinite; }
@keyframes bounce-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes blink-cursor { 0%, 100% { border-color: var(--color-brand); } 50% { border-color: transparent; } }
.draft-stage { width: min(100%, 1240px); margin: clamp(2rem, 5vw, 4rem) auto 0; }
.draft-video { position: relative; z-index: 0; width: min(100%, 1010px); margin: 0 auto; }
.draft-video__canvas { position: relative; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--color-rule-strong); border-radius: 14px; background-color: var(--color-mist); }
.draft-video__stamp { position: absolute; top: .75rem; left: .75rem; z-index: 1; padding: .35rem .5rem; border: 1px solid var(--color-rule-strong); background: var(--color-porcelain); color: var(--color-brand); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.draft-video figcaption { max-width: 73ch; margin: 1rem auto 0; color: var(--color-quiet); font-size: 13px; line-height: 1.45; text-align: center; }
.draft-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-mist); }
.draft-video figcaption { max-width: 73ch; margin: 1rem auto 0; color: var(--color-quiet); font-size: 13px; line-height: 1.45; text-align: center; }
.safari-frame { position: relative; z-index: 1; display: flex; flex-direction: column; aspect-ratio: 16 / 9; margin: clamp(1.5rem, 3vw, 2rem) 0 0; border: 1px solid color-mix(in srgb, var(--color-charcoal) 26%, transparent); border-radius: 14px; overflow: hidden; background: var(--color-white); }
.safari-frame figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--color-rule); color: var(--color-charcoal); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.safari-frame figcaption span:last-child { color: var(--color-brand); text-align: right; }
.safari-frame__chrome { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 42px; padding: 0 1rem; border-bottom: 1px solid color-mix(in srgb, var(--color-charcoal) 15%, transparent); background: var(--color-mist); }
.safari-frame__dots { display: flex; gap: .42rem; }
.safari-frame__dots b { width: 10px; height: 10px; border-radius: 50%; }
.safari-frame__dots b:nth-child(1) { background: #FF5F57; }
.safari-frame__dots b:nth-child(2) { background: #FEBC2E; }
.safari-frame__dots b:nth-child(3) { background: #28C840; }
.safari-frame__bar { height: 18px; max-width: 380px; width: 100%; margin: auto; border: 1px solid color-mix(in srgb, var(--color-charcoal) 12%, transparent); border-radius: 999px; background: var(--color-white); }
.safari-frame__mark { width: 16px; height: 16px; border: 1px solid color-mix(in srgb, var(--color-charcoal) 35%, transparent); border-radius: 50%; }
.safari-frame__image { flex: 1; min-height: 0; width: 100%; overflow: hidden; background: var(--color-white); line-height: 0; display: flex; align-items: center; justify-content: center; }
.safari-frame__image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; }
.workspace { display: grid; flex: 1; grid-template-columns: 132px minmax(0, 1fr); min-height: 0; }
.workspace__rail { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem .75rem; border-right: 1px solid var(--color-rule); background: var(--color-porcelain); }
.workspace__rail img { width: 29px; height: auto; margin: 0 .4rem 1.75rem; }
.workspace__rail-item { padding: .7rem .6rem; font-size: 13px; font-weight: 600; }
.workspace__rail-item--active { color: var(--color-white); background: var(--color-brand); }
.workspace__main { display: grid; min-width: 0; grid-template-rows: auto minmax(0, 1fr); }
.workspace__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.35rem 1.5rem; }
.workspace__summary article { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .8rem; min-width: 0; padding: 1rem; border: 1px solid var(--color-rule); }
.workspace__summary article > span { color: var(--color-brand); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.workspace__summary small { display: block; color: var(--color-brand); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.workspace__summary strong { display: block; margin-top: .25rem; font-size: 14px; }
.workspace__summary p { margin: .45rem 0 0; color: var(--color-quiet); font-size: 12px; line-height: 1.4; }
.workspace__body { display: grid; min-height: 0; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr); border-top: 1px solid var(--color-rule); }
.workspace__path, .workspace__handoff { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); }
.workspace__handoff { border-left: 1px solid var(--color-rule); background: var(--color-porcelain); }
.workspace__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-rule); }
.workspace__heading small, .workspace__steps small, dt { display: block; color: var(--color-brand); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.workspace__heading strong { display: block; margin-top: .25rem; font-family: var(--font-display); font-size: 20px; letter-spacing: -.04em; }
.workspace__heading > span:not(.workspace__status) { padding: .35rem .45rem; border: 1px solid var(--color-rule); font-family: var(--font-mono); font-size: 11px; }
.workspace__steps { display: grid; gap: 1.2rem; padding: 1.5rem 0 0; margin: 0; list-style: none; }
.workspace__steps li { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: .8rem; }
.workspace__steps li > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--color-brand); border-radius: 50%; color: var(--color-brand); font-family: var(--font-mono); font-size: 11px; }
.workspace__steps li.is-complete > span { background: var(--color-brand); color: var(--color-white); }
.workspace__steps strong { display: block; margin-top: .3rem; font-size: 15px; }
.workspace__steps p { margin: .35rem 0 0; color: var(--color-quiet); font-size: 13px; line-height: 1.45; }
.workspace__handoff dl { display: grid; gap: 1rem; margin: 1.5rem 0; }
.workspace__handoff dl div { padding-bottom: .8rem; border-bottom: 1px solid var(--color-rule); }
dt { margin-bottom: .35rem; }
dd { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; }
.workspace__status { color: var(--color-brand); font-size: 11px; font-weight: 700; text-align: right; }
.workspace__handoff button { width: 100%; min-height: 42px; border: 1px solid color-mix(in srgb, var(--color-charcoal) 20%, transparent); background: var(--color-mist); color: var(--color-quiet); font-weight: 700; }
.draft-video-sequence { background: var(--color-white); }
.draft-video-scene { padding: clamp(2.5rem, 5vw, 5rem) 1.25rem; border-top: 1px solid var(--color-rule); }
.draft-video-scene:nth-child(even) { background-color: var(--color-white); }
.draft-video-scene--answer, .draft-video-scene--book { background-color: var(--color-white); }
.draft-scene-rule { display: flex; width: min(100%, 370px); align-items: center; gap: 1rem; margin: 0 auto clamp(2.25rem, 4.5vw, 3.5rem); color: var(--color-brand); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; }
.draft-scene-rule i { flex: 1; height: 1px; background: var(--color-brand); }
.draft-scene-copy { width: min(100%, 930px); margin: 0 auto clamp(1.5rem, 3.2vw, 2.5rem); text-align: center; }
.draft-scene-index { margin: 0 0 1rem; color: var(--color-brand); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.draft-scene-copy h2 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3vw, 40px); line-height: 1.1; letter-spacing: -.035em; color: var(--color-charcoal); }
.draft-scene-copy h2 span { white-space: nowrap; }
.draft-scene-copy > p:last-child { max-width: 640px; margin: 1.25rem auto 0; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.6; color: var(--color-quiet); letter-spacing: -.01em; }
/* The scene is sized by the screen it plays on, so one story section is
   always one screenful — which is what makes centring it possible. */
.draft-scene-media { position: relative; width: min(100%, 820px, calc((100svh - 400px) * 1.777)); margin: 0 auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-charcoal) 22%, transparent); border-radius: 14px; background: var(--color-mist); }
.draft-scene-placeholder { width: 100%; height: 100%; background-color: var(--color-mist); }
.draft-scene-video { position: relative; width: 100%; aspect-ratio: 16 / 9; line-height: 0; }
.draft-scene-video .draft-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-mist); }
.draft-scene-media figcaption { position: absolute; inset: auto 0 0; z-index: 1; display: flex; justify-content: space-between; padding: .8rem 1rem; background: var(--color-white); border-top: 1px solid var(--color-rule); color: var(--color-charcoal); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.draft-loop--cover { object-position: center 38%; }
.draft-statement { padding: clamp(5rem, 12vw, 10rem) 1.25rem; border-top: 1px solid var(--color-rule); background: var(--color-white); text-align: center; }
.draft-statement h2 { max-width: 980px; margin: 0 auto; font-family: var(--font-display); font-size: clamp(26px, 4vw, 52px); line-height: 1.05; letter-spacing: -.05em; }
.draft-statement > p:last-child { max-width: 670px; margin: 1.5rem auto 0; color: var(--color-quiet); font-size: 16px; line-height: 1.55; }
.stmtwrap { position: relative; background: var(--color-white); padding-bottom: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--color-rule); }
.stmtpin { transition: opacity .4s ease; }
.stmtwrap.is-scrolling .stmtpin { opacity: .3; }
.stmtpin { position: relative; height: auto; padding: clamp(4rem, 10vw, 8rem) 1.25rem; display: flex; align-items: center; background: var(--color-white); }
.stmtpin > .wrap { justify-items: center; text-align: center; width: 100%; }
.stmtwrap .eyebrow { justify-content: center; }
.stmtpin .stmt { max-width: 20ch !important; margin-inline: auto !important; text-align: center; }
.stmt {
  font-family: var(--font-display); font-weight: 800; color: var(--color-charcoal);
  font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -.04em;
  margin: 20px 0 0; max-width: 20ch; text-wrap: balance; text-align: center;
}
.stmt-founder { display: grid; justify-items: center; gap: 14px; margin-top: clamp(28px, 4vh, 44px); }
.stmt-founder .portrait { width: 74px; height: 74px; margin: 0; border-radius: 50%; overflow: hidden; border: 2px solid var(--color-brand); background: var(--color-white); }
.stmt-founder .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stmt-founder-name { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stmt-founder-name strong { font: 700 15px/1.2 var(--font-display); letter-spacing: -.012em; color: var(--color-charcoal); display: inline-flex; align-items: center; gap: 3px; }
.stmt-founder-name span { font: 600 11px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--color-brand); }
.stmt-founder .btn { margin-top: 4px; }
.verified-light { width: 14px; height: 14px; flex: 0 0 auto; position: relative; top: .5px; }
.btn-red { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .75rem; padding: .75rem 1.1rem; border: 1px solid var(--color-brand); background: var(--color-brand); color: var(--color-white); font-weight: 700; text-align: center; text-decoration: none; border-radius: 7px; }
.btn-red:hover { background: var(--color-brand-press); }
.btn-white { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .75rem; padding: .75rem 1.1rem; border: 1px solid #fff; background: var(--color-white); color: var(--color-brand); font-weight: 700; text-align: center; text-decoration: none; border-radius: 7px; }
.btn-white:hover { background: #FFEDF1; }
.wrap { width: min(100%, var(--wrap-max, 1200px)); margin: 0 auto; padding: 0 1.25rem; }
/* Above 1600px a fixed 1200px column leaves a third of the screen as margin
   and the page reads as a phone layout stretched across a desk monitor. The
   column grows in two measured steps; the type scale is untouched. */
@media (min-width: 1600px) { :root { --wrap-max: 1320px; } }
@media (min-width: 1800px) { :root { --wrap-max: 1400px; } }
.founder-close { padding: clamp(4rem, 10vw, 8rem) 1.25rem; background: var(--color-charcoal); color: var(--color-white); }
.founder-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(2rem, 4vw, 4rem); max-width: 1100px; margin: 0 auto; }
.founder-grid img { width: clamp(120px, 15vw, 200px); height: clamp(120px, 15vw, 200px); border-radius: 50%; object-fit: cover; }
.founder-grid h2 { margin: .5rem 0; font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); line-height: 1.2; letter-spacing: -.03em; }
.founder-role { color: var(--color-brand); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.founder-grid .draft-cta { white-space: nowrap; }
.founder-band { background: var(--color-charcoal); color: var(--color-white); padding: clamp(1.2rem, 2.5vw, 1.8rem) 1.25rem; overflow: hidden; }
.founder-band h2 { font: 800 clamp(16px, 2vw, 22px)/1.2 var(--font-display); letter-spacing: -.03em; margin: 0; color: var(--color-white); }
.founder-band h2 em { font-style: normal; color: var(--color-brand); }
.founder-band p { margin: .4rem 0 0; font-size: 14px; line-height: 1.55; opacity: .82; max-width: 55ch; }
.founder-band-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.founder-band .fnote-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; font: 700 14px/1 var(--font-body); color: var(--color-brand); text-decoration: none; border-bottom: 1.5px solid var(--color-brand); padding-bottom: 5px; transition: opacity .18s ease; }
.founder-band .fnote-go:hover { opacity: .78; }
.founder-band .fnote-go span:last-child { transition: transform .25s ease; }
.founder-band .fnote-go:hover span:last-child { transform: translateX(4px); }
.founder-band[data-io] .founder-band-row { transform: translateY(20px); opacity: 0; transition: transform .6s ease, opacity .6s ease; }
.founder-band.is-in .founder-band-row { transform: translateY(0); opacity: 1; }

/* ======================================================================
   Capabilities — six claims, each carried by a single silent object.

   Surface system (the reason the old all-white cards read as flat): the
   card is a tinted surface, the stage inside it is pure white. Two planes
   instead of one, separated by a soft brand-tinted lift rather than a hard
   border. Radii step down 24 -> 18 -> full circle.

   Nothing inside a stage is labelled. The object has to carry the meaning
   on its own; the heading under it names what you just watched.

   All six run one 7s loop so two playing cards stay in phase:
     0-25% reality · 25-60% system · 60-92% result · 92-100% reset

   Motion blur is velocity-linked, never decorative: it peaks at the fastest
   part of a travel and returns to 0 at every hold, so nothing ever reads as
   permanently soft. Objects that do not travel get scale and opacity — a
   blurred hairline just looks like a rendering fault.
   ====================================================================== */
.capabilities-section { position: relative; padding: 0; border-top: 1px solid var(--color-rule); background: var(--color-white); }
.capability-prologue { position: relative; height: auto; background: var(--color-white); }
.capabilities-head { display: grid; align-content: center; justify-items: center; gap: 1.2rem; width: min(100%, 930px); min-height: 66svh; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 1.25rem; text-align: center; }
.js .capability-prologue .capabilities-head { position: static; opacity: 1; filter: none; transform: none; will-change: auto; }
.capabilities-head .eyebrow { justify-content: center; }
.capabilities-head .eyebrow::before { display: none; }
.capabilities-head h2, .pricing-reveal h2 { max-width: 790px; margin: 0; font: 800 clamp(26px, 3.5vw, 44px)/1.06 var(--font-display); letter-spacing: -.045em; }
.capabilities-head h2 span, .pricing-reveal h2 span, .capabilities-head h2 em, .pricing-reveal h2 em { white-space: nowrap; }
.capabilities-head h2 em, .pricing-reveal h2 em { color: var(--color-brand); font-style: normal; }
.capabilities-intro { max-width: 690px; }
.capabilities-intro > p { margin: 0; color: var(--color-quiet); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.6; }
.capabilities-cards { padding-top: clamp(2.25rem, 4.5vw, 4rem); padding-bottom: clamp(3.25rem, 6.5vw, 6.5rem); }

.capability-grid { --cap-gap: clamp(1rem, 1.7vw, 1.6rem); position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; gap: var(--cap-gap); background: transparent; }
/* Section rules between the cards: the same hairline the sections are
   separated by, drawn down the middle of each gutter. Each card owns the
   rule on its right and the one below it, and the segments overlap into
   the gutter so they meet as one continuous line at every crossing. */
.capability-item { position: relative; }
.capability-item::before, .capability-item::after { content: ""; position: absolute; z-index: 2; background: var(--color-rule); pointer-events: none; }
.capability-item::before { top: 0; bottom: calc(var(--cap-gap) / -2); right: calc(var(--cap-gap) / -2); width: 1px; }
.capability-item::after { left: calc(var(--cap-gap) / -2); right: calc(var(--cap-gap) / -2); bottom: calc(var(--cap-gap) / -2); height: 1px; }
.capability-item:last-child::before { display: none; }
/* Rules are per row, not per card: the last row draws no rule under itself,
   and its verticals stop at the card instead of poking into the gap below. */
.capability-item:nth-last-child(-n+3)::after { display: none; }
.capability-item:nth-last-child(-n+3)::before { bottom: 0; }
/* three columns: no rule to the right of the third card in a row, and the
   rules of the first and last column stop at the edge of the grid. */
.capability-item:nth-child(3n)::before { display: none; }
.capability-item:nth-child(n+4)::before { top: calc(var(--cap-gap) / -2); }
.capability-item:nth-child(3n+1)::after { left: 0; }
.capability-item:nth-child(3n)::after { right: 0; }
.capability-item { display: grid; min-width: 0; opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.capability-item.is-in { opacity: 1; transform: none; }
/* The scroll spotlight that faded every card except one is gone: on a wide
   screen it read as cards flickering, not as focus. */
.capability-item.is-dimmed .capability-card { opacity: 1; transform: none; }
.capability-item:nth-child(1) { transition-delay: 0s; }
.capability-item:nth-child(2) { transition-delay: .08s; }
.capability-item:nth-child(3) { transition-delay: .16s; }
.capability-item:nth-child(4) { transition-delay: .24s; }
.capability-item:nth-child(5) { transition-delay: .32s; }
.capability-item:nth-child(6) { transition-delay: .4s; }
/* No shadow and no border: the card is flat on the ground, and the only
   surface break in the tile is the tinted stage inside it. */
.capability-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .85rem; min-width: 0; padding: clamp(1.05rem, 1.5vw, 1.4rem) clamp(1.05rem, 1.5vw, 1.4rem) clamp(1.4rem, 2vw, 1.8rem); border: 0; border-radius: 24px; background: var(--color-white); box-shadow: none; text-align: center; }
.capability-card h3 { min-width: 0; max-width: 20ch; margin: .25rem auto 0; font: 700 clamp(15px, 1.2vw, 18px)/1.25 var(--font-display); letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: balance; }
.cap-mark { display: block; width: 22px; height: auto; margin: auto auto 4px; opacity: .5; }
.cap-copy { max-width: 32ch; margin: 0 auto; color: var(--color-quiet); font-size: clamp(13.5px, 1.02vw, 14.5px); line-height: 1.6; text-wrap: pretty; }

/* The stage is the brighter plane, and a fixed ratio rather than a fixed
   height so every card is the same shape at every width. */
/* The second accent: brand red is the assistant, teal is a person or the
   step that follows. Declared once so cards 04 and 06 cannot drift apart. */
.capabilities-section { --cap-human: #0E9384; }
.cap-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 1.1rem; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--color-charcoal) 4.5%, var(--color-white)); overflow: hidden; }
.cap-visual { position: relative; display: grid; place-items: center; align-content: center; justify-items: center; gap: .75rem; width: 100%; min-width: 0; margin: 0; }
.cap-hours { display: flex; flex-direction: column; align-items: center; gap: .75rem; }

/* The orb -------------------------------------------------------------
   AutoSmile's presence in the interface, and the one object shared across
   cards (01 answers, 04 hands over) — which is what makes the two read as
   the same assistant. Sphere shading is a radial highlight over a brand
   disc plus a seated inner shadow: volume without any glow. */
.cap-orb { position: relative; display: grid; place-items: center; width: clamp(140px, 13vw, 180px); aspect-ratio: 1; }
.cap-orb__ring { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--color-brand) 55%, transparent); border-radius: 50%; opacity: 0; }
.cap-orb__core { position: relative; display: flex; align-items: center; justify-content: center; gap: 3.5px; width: 58%; aspect-ratio: 1; border-radius: 50%; background-color: var(--color-brand); background-image: radial-gradient(circle at 32% 26%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 34%, rgba(255,255,255,0) 62%); box-shadow: inset 0 -6px 14px -6px rgba(120,6,32,.55), 0 10px 22px -10px color-mix(in srgb, var(--color-brand) 60%, transparent); }
.cap-orb__core b { display: block; width: 3px; height: 22%; border-radius: 2px; background: var(--color-white); }
.cap-orb--sm { width: 72px; }
.cap-orb--sm .cap-orb__core { gap: 2px; width: 50%; }
.cap-orb--sm .cap-orb__core b { width: 2.5px; }
.capability-item.is-playing .cap-orb__ring { animation: cap-ping 2.333s var(--ease-out) infinite; }
.capability-item.is-playing .cap-orb__ring:nth-child(2) { animation-delay: .583s; }
.capability-item.is-playing .cap-orb__ring:nth-child(3) { animation-delay: 1.166s; }
.capability-item.is-playing .cap-orb__core { animation: cap-breathe 3.5s ease-in-out infinite; }
.capability-item.is-playing .cap-orb__core b { animation: cap-voice .92s ease-in-out infinite; }
.capability-item.is-playing .cap-orb__core b:nth-child(2) { animation-delay: .12s; }
.capability-item.is-playing .cap-orb__core b:nth-child(3) { animation-delay: .24s; }
.capability-item.is-playing .cap-orb__core b:nth-child(4) { animation-delay: .07s; }
.capability-item.is-playing .cap-orb__core b:nth-child(5) { animation-delay: .19s; }
/* A ring is fastest as it clears the core, so that is where its blur peaks;
   it fades before the blur could settle into looking like softness. */
@keyframes cap-ping { 0% { transform: scale(.58); opacity: 0; filter: blur(3px); } 18% { opacity: .5; filter: blur(0); } 100% { transform: scale(1); opacity: 0; filter: blur(2px); } }
@keyframes cap-voice { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.8); } }
@keyframes cap-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* 02 · Language — the sentence rolls through vertical motion blur ------ */
.cap-lines { display: grid; width: 100%; min-height: 2.7em; align-content: center; }
.cap-lines p { grid-area: 1 / 1; align-self: center; margin: 0; padding: 0 .2rem; font: 600 clamp(15px, 1.3vw, 18px)/1.35 var(--font-body); text-align: center; text-wrap: balance; opacity: 0; }
.cap-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 22px; }
.cap-wave b { display: block; width: 2px; height: 7px; border-radius: 1px; background: color-mix(in srgb, var(--color-brand) 30%, transparent); }
.cap-langs { display: flex; justify-content: center; gap: .4rem; }
.cap-langs i { display: block; padding: .34rem .6rem; border: 1px solid color-mix(in srgb, var(--color-brand) 22%, transparent); border-radius: 999px; color: var(--color-quiet); font: normal 600 11px/1 var(--font-mono); letter-spacing: .06em; }
.capability-item.is-playing .cap-lines p:nth-child(1) { animation: cap-say-1 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-lines p:nth-child(2) { animation: cap-say-2 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-lines p:nth-child(3) { animation: cap-say-3 7s var(--ease-out) infinite; }
/* Equal thirds, overlapping: each line starts rising before the last has
   cleared, so the stack never shows an empty beat. */
@keyframes cap-say-1 { 0% { opacity: 0; transform: translateY(15px); filter: blur(7px); } 4%, 25% { opacity: 1; transform: none; filter: blur(0); } 31%, 100% { opacity: 0; transform: translateY(-15px); filter: blur(7px); } }
@keyframes cap-say-2 { 0%, 24% { opacity: 0; transform: translateY(15px); filter: blur(7px); } 31%, 58% { opacity: 1; transform: none; filter: blur(0); } 64%, 100% { opacity: 0; transform: translateY(-15px); filter: blur(7px); } }
@keyframes cap-say-3 { 0%, 57% { opacity: 0; transform: translateY(15px); filter: blur(7px); } 64%, 93% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: translateY(-15px); filter: blur(7px); } }
.capability-item.is-playing .cap-langs i:nth-child(1) { animation: cap-chip-en 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-langs i:nth-child(2) { animation: cap-chip-tr 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-langs i:nth-child(3) { animation: cap-chip-es 7s var(--ease-out) infinite; }
@keyframes cap-chip-en {
  0% { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); transform: scale(1.06); }
  4%, 26% { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); transform: scale(1); }
  31%, 100% { background: transparent; border-color: color-mix(in srgb, var(--color-brand) 22%, transparent); color: var(--color-quiet); transform: scale(1); }
}
@keyframes cap-chip-tr {
  0%, 26% { background: transparent; border-color: color-mix(in srgb, var(--color-brand) 22%, transparent); color: var(--color-quiet); transform: scale(1); }
  31% { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); transform: scale(1.06); }
  35%, 59% { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); transform: scale(1); }
  64%, 100% { background: transparent; border-color: color-mix(in srgb, var(--color-brand) 22%, transparent); color: var(--color-quiet); transform: scale(1); }
}
@keyframes cap-chip-es {
  0%, 59% { background: transparent; border-color: color-mix(in srgb, var(--color-brand) 22%, transparent); color: var(--color-quiet); transform: scale(1); }
  64% { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); transform: scale(1.06); }
  68%, 94% { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); transform: scale(1); }
  99%, 100% { background: transparent; border-color: color-mix(in srgb, var(--color-brand) 22%, transparent); color: var(--color-quiet); transform: scale(1); }
}
.capability-item.is-playing .cap-wave b { animation: cap-wave-bar 1.4s ease-in-out infinite; }
.capability-item.is-playing .cap-wave b:nth-child(2n) { animation-delay: .13s; }
.capability-item.is-playing .cap-wave b:nth-child(3n) { animation-delay: .26s; }
.capability-item.is-playing .cap-wave b:nth-child(5n) { animation-delay: .39s; }
@keyframes cap-wave-bar { 0%, 100% { transform: scaleY(.7); background: color-mix(in srgb, var(--color-brand) 28%, transparent); } 50% { transform: scaleY(2.2); background: var(--color-brand); } }

/* 03 · Scheduling — a week of slots, one of them taken ---------------- */
.cap-week { display: grid; gap: .5rem; width: min(100%, 290px); }
.cap-week__days, .cap-week__slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.cap-week__days span { color: var(--color-quiet); font: 600 11px/1 var(--font-mono); letter-spacing: .04em; text-align: center; }
.cap-week__slots i { aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent); border-radius: 7px; background: var(--color-white); }
.cap-week__slots i.is-busy { border-color: transparent; background: color-mix(in srgb, var(--color-charcoal) 11%, var(--color-white)); }
.cap-week__slots i.is-slot { border-color: color-mix(in srgb, var(--color-brand) 45%, transparent); }
/* One 7s clock for the whole card, and every beat is written as a percentage
   of it — no `animation-delay`. Delays were the bug: on an `infinite`
   animation a delay only offsets the first run, so the slots and the
   appointment cards drifted apart and the keyframes' own start percentage
   was applied on top of the delay, pushing the first card a full loop late.
   M → W → F → 09:15 → 10:30 → 14:00 now land half a second apart with no
   dead air, hold together, then clear together. */
.capability-item.is-playing .cap-week__slots i.is-slot--m { animation: cap-slot-m 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-week__slots i.is-slot--w { animation: cap-slot-w 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-week__slots i.is-slot--f { animation: cap-slot-f 7s var(--ease-out) infinite; }
@keyframes cap-slot-m {
  0%, 2% { background: var(--color-white); border-color: color-mix(in srgb, var(--color-brand) 45%, transparent); transform: scale(1); filter: blur(0); box-shadow: none; }
  4.5% { transform: scale(1.18); filter: blur(2.5px); }
  7%, 86% { background: var(--color-brand); border-color: var(--color-brand); transform: scale(1); filter: blur(0); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--color-brand) 70%, transparent); }
  92%, 100% { background: var(--color-white); border-color: color-mix(in srgb, var(--color-brand) 45%, transparent); transform: scale(1); filter: blur(0); box-shadow: none; }
}
@keyframes cap-slot-w {
  0%, 9% { background: var(--color-white); border-color: color-mix(in srgb, var(--color-brand) 45%, transparent); transform: scale(1); filter: blur(0); box-shadow: none; }
  11.5% { transform: scale(1.18); filter: blur(2.5px); }
  14%, 86% { background: var(--color-brand); border-color: var(--color-brand); transform: scale(1); filter: blur(0); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--color-brand) 70%, transparent); }
  92%, 100% { background: var(--color-white); border-color: color-mix(in srgb, var(--color-brand) 45%, transparent); transform: scale(1); filter: blur(0); box-shadow: none; }
}
@keyframes cap-slot-f {
  0%, 16% { background: var(--color-white); border-color: color-mix(in srgb, var(--color-brand) 45%, transparent); transform: scale(1); filter: blur(0); box-shadow: none; }
  18.5% { transform: scale(1.18); filter: blur(2.5px); }
  21%, 86% { background: var(--color-brand); border-color: var(--color-brand); transform: scale(1); filter: blur(0); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--color-brand) 70%, transparent); }
  92%, 100% { background: var(--color-white); border-color: color-mix(in srgb, var(--color-brand) 45%, transparent); transform: scale(1); filter: blur(0); box-shadow: none; }
}

/* The booked slots — they pick up where F leaves off, on the same clock. */
.appts { display: flex; flex-direction: column; gap: .4rem; width: min(100%, 290px); margin: 0; padding: 0; list-style: none; }
.appt { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .7rem; border-radius: 12px; background: var(--color-white); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--color-charcoal) 45%, transparent); opacity: 0; }
.appt__time { color: var(--color-brand); font: 600 11px/1 var(--font-mono); letter-spacing: .04em; }
.appt__who { color: var(--color-charcoal); font-size: 12px; font-weight: 600; letter-spacing: -.012em; min-width: 7.5ch; }
.capability-item.is-playing .appt--1 { animation: appt-in-1 7s var(--ease-out) infinite; }
.capability-item.is-playing .appt--2 { animation: appt-in-2 7s var(--ease-out) infinite; }
.capability-item.is-playing .appt--3 { animation: appt-in-3 7s var(--ease-out) infinite; }
@keyframes appt-in-1 {
  0%, 23% { opacity: 0; transform: translateY(9px) scale(.96); filter: blur(7px); }
  29%, 86% { opacity: 1; transform: none; filter: blur(0); }
  92%, 100% { opacity: 0; transform: translateY(-5px); filter: blur(4px); }
}
@keyframes appt-in-2 {
  0%, 30% { opacity: 0; transform: translateY(9px) scale(.96); filter: blur(7px); }
  36%, 86% { opacity: 1; transform: none; filter: blur(0); }
  92%, 100% { opacity: 0; transform: translateY(-5px); filter: blur(4px); }
}
@keyframes appt-in-3 {
  0%, 37% { opacity: 0; transform: translateY(9px) scale(.96); filter: blur(7px); }
  43%, 86% { opacity: 1; transform: none; filter: blur(0); }
  92%, 100% { opacity: 0; transform: translateY(-5px); filter: blur(4px); }
}

/* 04 · Handover — the call, and its context, crossing to a person ---- */
/* 04 · Handover — the call, and the context it collected, crossing from
   the assistant to a person. Horizontal because the stage is square and a
   left-to-right pass reads as "sent to someone" rather than "dropped".
   Teal is the second accent: brand red is the assistant, teal is a human
   holding it. Every beat is a percentage of the shared 7s clock — no
   `animation-delay`, which on an infinite animation only offsets the first
   run and lets the parts drift out of step. */
.cap-handoff { display: grid; grid-template-columns: auto minmax(48px, 1fr) auto; align-items: center; gap: .45rem; width: min(100%, 262px); }
.cap-handoff .cap-orb--sm { width: 72px; }
.cap-handoff .cap-orb__core { width: 100%; gap: 3px; }
.cap-handoff .cap-orb__core b { width: 3px; }
.cap-handoff__end { position: relative; display: grid; place-items: center; }
.cap-handoff__path { position: relative; height: 46px; }
.cap-handoff__note { position: absolute; left: 0; top: 50%; display: grid; gap: 3px; width: 38px; padding: 6px 5px; border-radius: 8px; background: var(--color-white); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--color-charcoal) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 9%, transparent); opacity: 0; transform: translateY(-50%) scale(.85); }
.cap-handoff__note b { display: block; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--color-brand) 55%, transparent); }
.cap-handoff__note b:last-child { width: 60%; background: color-mix(in srgb, var(--color-charcoal) 24%, transparent); }
.cap-person { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid color-mix(in srgb, var(--color-charcoal) 14%, transparent); border-radius: 50%; background: var(--color-white); color: var(--color-quiet); }
.cap-person svg { width: 32px; height: 32px; }
/* The ring that leaves the person the moment the note lands. */
.cap-handoff__end--human::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--cap-human); border-radius: 50%; opacity: 0; }
.capability-item.is-playing .cap-handoff__note { animation: cap-handoff-note 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-person { animation: cap-handoff-take 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-handoff__end--human::after { animation: cap-handoff-ring 7s var(--ease-out) infinite; }
/* ponytail: animating `left` skips the compositor — the travel is the
   track's width, which only the layout knows, and it is one 34px box. */
@keyframes cap-handoff-note {
  0%, 12% { left: 0; opacity: 0; transform: translateY(-50%) scale(.5) rotate(-4deg); filter: blur(0); }
  19% { left: 0; opacity: 1; transform: translateY(-50%) scale(1) rotate(-4deg); filter: blur(0); }
  26% { left: calc(30% - 11px); opacity: 1; transform: translateY(calc(-50% - 9px)) scale(1) rotate(-2deg); filter: blur(4px); }
  31% { left: calc(70% - 27px); opacity: 1; transform: translateY(calc(-50% - 9px)) scale(1) rotate(2deg); filter: blur(4px); }
  37%, 39% { left: calc(100% - 38px); opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); filter: blur(0); }
  45%, 100% { left: calc(100% - 38px); opacity: 0; transform: translateY(-50%) scale(.45) rotate(0deg); filter: blur(0); }
}
@keyframes cap-handoff-take {
  0%, 36% { border-color: color-mix(in srgb, var(--color-charcoal) 14%, transparent); background: var(--color-white); color: var(--color-quiet); transform: scale(1); }
  42% { border-color: var(--cap-human); background: var(--cap-human); color: var(--color-white); transform: scale(1.09); }
  48%, 88% { border-color: var(--cap-human); background: var(--cap-human); color: var(--color-white); transform: scale(1); }
  95%, 100% { border-color: color-mix(in srgb, var(--color-charcoal) 14%, transparent); background: var(--color-white); color: var(--color-quiet); transform: scale(1); }
}
@keyframes cap-handoff-ring {
  0%, 38% { opacity: 0; transform: scale(1); }
  44% { opacity: .55; transform: scale(1.12); }
  56%, 100% { opacity: 0; transform: scale(1.45); }
}

/* 05 · After hours — a day passes, coverage never drops ---------------
   Built on the micro-animated SVG icon bar idea, developed from a nav bar
   into a clock. The pill walks sunrise -> midday -> dusk -> night and every
   icon it leaves stays lit. Each hour carries its own light rather than one
   flat red, so the bar reads as a day passing instead of four toggles. */
.cap-daybar { --dawn: #F2A65A; --noon: #F0B429; --dusk: #D9683A; --night: #5B6B9E; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; width: min(100%, 296px); padding: 7px; border: 1px solid color-mix(in srgb, var(--color-charcoal) 9%, transparent); border-radius: 999px; background: var(--color-white); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--color-charcoal) 40%, transparent); }
/* One transition on the pill instead of a keyframe per stop: the browser
   interpolates between positions, so the walk eases instead of snapping. */
.cap-daybar__pill { position: absolute; left: 7px; top: 7px; bottom: 7px; width: calc((100% - 14px) / 4); border-radius: 999px; background-color: var(--dawn); background-image: radial-gradient(circle at 34% 26%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 64%); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--color-charcoal) 45%, transparent); transform: translateX(0); transition: transform 1.05s cubic-bezier(.65,0,.35,1), background-color 1.05s cubic-bezier(.65,0,.35,1); }
.cap-daybar[data-step="1"] .cap-daybar__pill { transform: translateX(100%); background-color: var(--noon); }
.cap-daybar[data-step="2"] .cap-daybar__pill { transform: translateX(200%); background-color: var(--dusk); }
.cap-daybar[data-step="3"] .cap-daybar__pill { transform: translateX(300%); background-color: var(--night); }
.cap-dayicon { position: relative; z-index: 1; display: grid; place-items: center; height: 74px; transition: color .28s var(--ease-out), transform .28s var(--ease-out); }
.cap-dayicon svg { width: 30px; height: 30px; }
.cap-dayicon:nth-child(2) { color: var(--dawn); }
.cap-dayicon:nth-child(3) { color: var(--noon); }
.cap-dayicon:nth-child(4) { color: var(--dusk); }
.cap-dayicon:nth-child(5) { color: var(--night); }
/* Lit once passed, white while the pill is under it. */
.cap-daybar[data-step="0"] .cap-dayicon:nth-child(2),
.cap-daybar[data-step="1"] .cap-dayicon:nth-child(3),
.cap-daybar[data-step="2"] .cap-dayicon:nth-child(4),
.cap-daybar[data-step="3"] .cap-dayicon:nth-child(5) { color: var(--color-white); transform: scale(1.08); transition: color .3s var(--ease-out) .66s, transform .34s var(--ease-out) .6s; }
.cap-daybar[data-step="1"] .cap-dayicon:nth-child(2) { color: var(--dawn); }
.cap-daybar[data-step="2"] .cap-dayicon:nth-child(2) { color: var(--dawn); }
.cap-daybar[data-step="2"] .cap-dayicon:nth-child(3) { color: var(--noon); }
.cap-daybar[data-step="3"] .cap-dayicon:nth-child(2) { color: var(--dawn); }
.cap-daybar[data-step="3"] .cap-dayicon:nth-child(3) { color: var(--noon); }
.cap-daybar[data-step="3"] .cap-dayicon:nth-child(4) { color: var(--dusk); }

/* 06 · Record — three notes fly in and land as one tidy stack, the front
   one carrying the summary and the next step. Same 7s clock, same two
   accents: brand red tags what the call was about, teal marks the step
   that follows. The back cards are bottom-anchored to the front one, so
   the badge always sits on its corner whatever the card measures. */
.cap-notes { position: relative; width: min(78%, 190px); padding-top: 24px; }
.cap-notes__card { display: grid; align-content: start; gap: 7px; padding: 13px 14px 16px; border-radius: 12px; background: var(--color-white); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-charcoal) 8%, transparent), 0 14px 30px -16px color-mix(in srgb, var(--color-charcoal) 42%, transparent); opacity: 0; }
.cap-notes__card--a { position: relative; z-index: 3; }
.cap-notes__card--b, .cap-notes__card--c { position: absolute; inset: 24px 0 0 0; box-shadow: 0 1px 2px color-mix(in srgb, var(--color-charcoal) 7%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 9%, transparent); }
.cap-notes__card--b { z-index: 2; }
.cap-notes__card--c { z-index: 1; }
.cap-notes__tag { display: block; width: 38%; height: 6px; border-radius: 3px; background: var(--color-brand); opacity: 0; }
.cap-notes__line { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--color-charcoal) 13%, transparent); transform: scaleX(.05); transform-origin: left center; }
.cap-notes__line + .cap-notes__line { width: 66%; }
.cap-notes__pill { display: block; width: 56%; height: 15px; margin-top: 4px; border-radius: 8px; background: color-mix(in srgb, var(--cap-human) 15%, var(--color-white)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cap-human) 36%, transparent); opacity: 0; }
.cap-notes__check { position: absolute; right: -9px; bottom: -9px; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background-color: var(--cap-human); background-image: radial-gradient(circle at 34% 28%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 62%); color: var(--color-white); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cap-human) 75%, transparent); opacity: 0; }
.cap-notes__check svg { width: 17px; height: 17px; stroke-dasharray: 26; stroke-dashoffset: 26; }
.capability-item.is-playing .cap-notes__card--c { animation: cap-note-c 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-notes__card--b { animation: cap-note-b 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-notes__card--a { animation: cap-note-a 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-notes__tag { animation: cap-note-tag 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-notes__line { animation: cap-note-line-1 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-notes__line + .cap-notes__line { animation-name: cap-note-line-2; }
.capability-item.is-playing .cap-notes__pill { animation: cap-note-pill 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-notes__check { animation: cap-note-check 7s var(--ease-out) infinite; }
.capability-item.is-playing .cap-notes__check svg { animation: cap-tick 7s var(--ease-out) infinite; }
@keyframes cap-note-c {
  0%, 2% { opacity: 0; transform: translate(-30px, 10px) rotate(-12deg) scale(.86); filter: blur(6px); }
  10% { opacity: .9; transform: translate(-6px, -18px) rotate(-4deg) scale(.87); filter: blur(2px); }
  17%, 88% { opacity: 1; transform: translate(0, -22px) rotate(0deg) scale(.88); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translate(0, -26px) scale(.88); filter: blur(3px); }
}
@keyframes cap-note-b {
  0%, 9% { opacity: 0; transform: translate(28px, 12px) rotate(10deg) scale(.93); filter: blur(6px); }
  17% { opacity: .95; transform: translate(5px, -8px) rotate(3deg) scale(.94); filter: blur(2px); }
  24%, 88% { opacity: 1; transform: translate(0, -11px) rotate(0deg) scale(.94); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translate(0, -15px) scale(.94); filter: blur(3px); }
}
@keyframes cap-note-a {
  0%, 16% { opacity: 0; transform: translateY(22px) scale(.96); filter: blur(7px); }
  24% { opacity: 1; transform: translateY(4px) scale(1); filter: blur(2px); }
  31%, 88% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translateY(-4px) scale(1); filter: blur(3px); }
}
@keyframes cap-note-tag { 0%, 33% { opacity: 0; } 39%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cap-note-line-1 { 0%, 38% { transform: scaleX(.05); opacity: .35; } 48%, 88% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(.05); opacity: .35; } }
@keyframes cap-note-line-2 { 0%, 44% { transform: scaleX(.05); opacity: .35; } 54%, 88% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(.05); opacity: .35; } }
@keyframes cap-note-pill { 0%, 56% { opacity: 0; transform: translateY(6px); filter: blur(5px); } 64%, 88% { opacity: 1; transform: none; filter: blur(0); } 96%, 100% { opacity: 0; transform: translateY(-3px); filter: blur(3px); } }
@keyframes cap-note-check { 0%, 66% { opacity: 0; transform: scale(.4); filter: blur(5px); } 74%, 88% { opacity: 1; transform: scale(1); filter: blur(0); } 96%, 100% { opacity: 0; transform: scale(.9); filter: blur(3px); } }
@keyframes cap-tick { 0%, 72% { stroke-dashoffset: 26; } 80%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 26; } }

.capabilities-note { max-width: 78ch; margin: 2.25rem auto 0; color: var(--color-quiet); font-size: 11px; line-height: 1.55; text-align: center; }

/* ======================================================================
   Bento surfaces — the reference language, in AutoSmile's palette.

   The single move that makes these read: the SECTION is grey and the
   CARDS are white. White cards on a white ground need a border to exist,
   and a border is what made the old panels look like spreadsheet cells.
   On grey, a card needs no border at all — a wide soft shadow is enough,
   and the card floats.

   Accent discipline: brand red appears once, at most twice, per card, and
   only on the thing that carries the meaning. Everything structural is
   ink, grey or white. That restraint is the style; more red would read as
   a template, not a product.
   ====================================================================== */
.bento-section { --bento-ground: var(--color-white); --bento-panel: color-mix(in srgb, var(--color-charcoal) 4.5%, var(--color-white)); --bento-ink: var(--color-charcoal); --bento-quiet: var(--color-quiet); --bento-r: 24px; --bento-lift: 0 1px 3px color-mix(in srgb, var(--color-charcoal) 7%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--color-charcoal) 24%, transparent); position: relative; padding: clamp(3.25rem, 6.5vw, 6.5rem) 0; background: var(--bento-ground); border-top: 1px solid var(--color-rule); }
.bento-section + .bento-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 0; }
.bento-section--close { border-top: 1px solid var(--color-rule); padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(3.25rem, 6.5vw, 6.5rem); }
.bento-head { display: grid; justify-items: center; gap: .7rem; max-width: 780px; margin: 0 auto clamp(1.5rem, 3.5vw, 2.5rem); text-align: center; }
.bento-head--left { justify-items: start; max-width: 620px; margin-inline: 0; text-align: left; }
.bento-eyebrow { margin: 0; color: var(--color-brand); font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.bento-head h2 { margin: 0; color: var(--bento-ink); font: 800 clamp(24px, 3.2vw, 42px)/1.08 var(--font-display); letter-spacing: -.04em; }
.bento-head h2 em { color: var(--bento-quiet); font-style: normal; }
.bento-head h2 em.is-brand { color: var(--color-brand); }
.bento-sub { margin: 0; max-width: 62ch; color: var(--bento-quiet); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.55; }
.bento-sub--wide { max-width: 68ch; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.bento-note { max-width: 74ch; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; color: var(--bento-quiet); font-size: 11px; line-height: 1.55; text-align: center; }

.bento-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.85rem, 1.2vw, 1.1rem); }
.bento { display: grid; align-content: start; gap: .85rem; min-width: 0; padding: clamp(1.15rem, 1.6vw, 1.6rem); border-radius: var(--bento-r); background: var(--color-white); box-shadow: var(--bento-lift); }
.bento--chain { grid-column: span 2; grid-row: span 2; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.bento--honest { grid-column: span 2; }
.bento--rules { grid-column: span 4; }
.bento__label { margin: 0; color: var(--bento-quiet); font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.bento__note { margin: 0; color: var(--bento-quiet); font-size: 13px; line-height: 1.45; }
/* Units greyed and tucked against the figure, the way the reference drops
   the cents on a balance. */
.bento__figure { display: flex; align-items: baseline; gap: .04em; margin: auto 0 0; color: var(--bento-ink); font: 800 clamp(46px, 5.4vw, 72px)/.9 var(--font-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.bento__figure span { color: var(--bento-quiet); }

/* Safari panel — the product shown inside the thing customers actually use
   to look at it. The frame is locked to MacBook proportions (16:10) at
   every width: a laptop is a laptop on a phone too, so the product never
   reads as a different product depending on the device. Everything inside
   is sized in container units, so the page scales, never re-lays-out. */
.browser { container-type: inline-size; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(100%, 940px); margin-inline: auto; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--color-white); box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 12px 40px -8px rgba(0,0,0,.1), inset 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 10%, transparent); }
.browser__chrome { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.6cqw; padding: 1.4cqw 1.8cqw; border-bottom: 1px solid color-mix(in srgb, var(--color-charcoal) 8%, transparent); background: color-mix(in srgb, var(--color-charcoal) 4%, var(--color-white)); }
.browser__dots { display: flex; gap: 7px; padding-left: 2px; }
.browser__dots i { width: 11px; aspect-ratio: 1; border-radius: 50%; }
.browser__dots i:nth-child(1) { background: #FF5F57; }
.browser__dots i:nth-child(2) { background: #FEBC2E; }
.browser__dots i:nth-child(3) { background: #28C840; }
.browser__url { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; justify-self: center; padding: .35rem 1rem; border-radius: 8px; background: var(--color-white); color: var(--bento-quiet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 8%, transparent); }
.browser__url svg { width: 12px; height: auto; }
.browser__url b { font-size: 12px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: var(--color-charcoal); }
.browser__spacer { width: 52px; }
.browser__stage { position: relative; display: grid; min-height: 0; }

/* One page per idea, each one a panel inside the panel. Always the same
   centred composition — no breakpoint reshuffles the slide. */
.pane { grid-area: 1 / 1; display: grid; align-content: center; justify-items: center; gap: clamp(.45rem, 1.7cqw, 1rem); min-height: 0; padding: clamp(.55rem, 3cqw, 1.9rem); text-align: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), visibility .55s; }
.pane.is-current { opacity: 1; visibility: visible; transform: none; }
.pane__label { display: inline-flex; align-items: center; gap: .5em; margin: 0; color: var(--bento-quiet); font: 600 clamp(11px, 1.3cqw, 13px)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.pane__label::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--color-brand); }
.pane__note { margin: 0; color: var(--bento-quiet); font-size: clamp(11px, 1.4cqw, 14px); line-height: 1.4; }
.pane__card { display: grid; align-content: center; width: min(100%, 560px); min-height: clamp(78px, 17cqw, 160px); padding: clamp(.6rem, 2cqw, 1.3rem); border-radius: clamp(12px, 1.8cqw, 18px); background: var(--bento-panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 5%, transparent); }
/* The rail doubles as the progress bar: five pages, the active one filling. */
.browser__rail { display: flex; gap: clamp(3px, .6cqw, 5px); padding: 1.35cqw 1.8cqw; border-top: 1px solid color-mix(in srgb, var(--color-charcoal) 8%, transparent); }
.browser__rail i { position: relative; flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--color-charcoal) 11%, transparent); overflow: hidden; }
.browser__rail i::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--color-brand); transform: scaleX(0); transform-origin: left center; }
.browser__rail i.is-active::after { animation: rail-fill 5s linear forwards; }
.browser__rail i.is-done::after { transform: scaleX(1); }
@keyframes rail-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Live reasoning — a decision log, not three bubbles: one panel, hairline
   rows, the verdict row carrying the only colour. */
.think { display: grid; margin: 0; padding: 0; list-style: none; text-align: left; }
.think__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .7rem; align-items: baseline; padding: clamp(.32rem, 1.1cqw, .55rem) clamp(.25rem, .8cqw, .5rem); }
.think__step + .think__step { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-charcoal) 7%, transparent); }
.think__key { color: var(--bento-quiet); font: 600 11px/1.35 var(--font-mono); letter-spacing: .06em; white-space: nowrap; }
.think__val { color: var(--bento-ink); font-size: clamp(11px, 1.5cqw, 17px); line-height: 1.35; font-weight: 500; letter-spacing: -.012em; }
.think__step--out .think__key, .think__step--out .think__val { color: var(--color-brand); }
.pane.is-current .think__step { animation: think-in .7s var(--ease-out) both; }
.pane.is-current .think__step:nth-child(2) { animation-delay: .5s; }
.pane.is-current .think__step:nth-child(3) { animation-delay: 1s; }
@keyframes think-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Not a phone tree — the menu it replaces, struck through, then the one
   thing a caller actually has to do. */
.tree { display: grid; justify-items: center; gap: clamp(.3rem, .9cqw, .5rem); }
.tree__old { display: grid; justify-items: center; gap: .2rem; }
.tree__old i { position: relative; color: var(--bento-quiet); font-size: clamp(11px, 1.35cqw, 14px); line-height: 1.35; font-style: normal; letter-spacing: -.01em; }
.tree__old i::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; opacity: .55; transform-origin: left center; }
.tree__arrow { display: grid; place-items: center; color: var(--bento-quiet); opacity: .45; }
.tree__arrow svg { width: clamp(11px, 1.5cqw, 15px); height: auto; }
.tree__new { padding: clamp(.4rem, 1.1cqw, .65rem) clamp(.6rem, 1.6cqw, .9rem); border-radius: 12px; background: var(--color-brand); color: var(--color-white); font-size: clamp(11px, 1.5cqw, 17px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.pane.is-current .tree__old i::after { animation: tree-strike .45s var(--ease-out) both; }
.pane.is-current .tree__old i:nth-child(2)::after { animation-delay: .18s; }
.pane.is-current .tree__old i:nth-child(3)::after { animation-delay: .36s; }
.pane.is-current .tree__new { animation: think-in .6s .62s var(--ease-out) both; }
@keyframes tree-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Asks instead of assuming — a two-line thread, so the question has
   something to be a question about. */
.ask { display: grid; gap: clamp(.35rem, 1cqw, .5rem); }
.ask__in, .ask__bubble { padding: clamp(.4rem, 1.1cqw, .6rem) clamp(.55rem, 1.5cqw, .8rem); font-size: clamp(11px, 1.45cqw, 16px); line-height: 1.35; font-weight: 500; letter-spacing: -.012em; }
.ask__in { justify-self: start; border-radius: 14px 14px 14px 4px; background: var(--color-white); color: var(--bento-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 7%, transparent); }
.ask__out { display: inline-flex; align-items: center; gap: .4rem; justify-self: end; }
.ask__bubble { border-radius: 14px 14px 4px 14px; background: var(--color-brand); color: var(--color-white); }
.ask__dots { display: flex; gap: 3px; }
.ask__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--color-brand); opacity: .45; }
.pane.is-current .ask__dots i { animation: ask-dot 1.25s ease-in-out infinite; }
.pane.is-current .ask__dots i:nth-child(2) { animation-delay: .16s; }
.pane.is-current .ask__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes ask-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Says what it is — a caller-ID row, which is where a patient would
   actually read it. */
.honest { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 1.4cqw, .75rem); }
.honest__orb { display: flex; align-items: center; justify-content: center; gap: 2.5px; width: clamp(30px, 4.8cqw, 48px); aspect-ratio: 1; flex: 0 0 auto; border-radius: 50%; background-color: var(--color-brand); background-image: radial-gradient(circle at 34% 26%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 62%); }
.honest__orb b { display: block; width: 2.5px; height: 9px; border-radius: 2px; background: var(--color-white); }
.honest__id { display: grid; justify-items: start; gap: .2rem; text-align: left; }
.honest__id b { color: var(--bento-ink); font-size: clamp(12px, 1.6cqw, 17px); font-weight: 700; letter-spacing: -.02em; }
.honest__chip { padding: .28rem .55rem; border-radius: 999px; background: var(--color-white); color: var(--bento-quiet); font: 600 11px/1 var(--font-body); letter-spacing: -.01em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 8%, transparent); }
.pane.is-current .honest__orb b { animation: cap-voice .92s ease-in-out infinite; }
.pane.is-current .honest__orb b:nth-child(2) { animation-delay: .12s; }
.pane.is-current .honest__orb b:nth-child(3) { animation-delay: .24s; }

/* Lines it will not cross — a policy list, one rule per hairline row. */
.rules { display: grid; margin: 0; padding: 0; list-style: none; text-align: left; }
.rules li { display: flex; align-items: center; gap: .55rem; padding: clamp(.3rem, 1cqw, .5rem) clamp(.25rem, .8cqw, .5rem); color: var(--bento-ink); font-size: clamp(11px, 1.45cqw, 16px); font-weight: 500; letter-spacing: -.012em; }
.rules li + li { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-charcoal) 7%, transparent); }
.rules li::before { content: ""; width: clamp(12px, 1.5cqw, 15px); aspect-ratio: 1; flex: 0 0 auto; border-radius: 50%; background: var(--color-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 62% no-repeat, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 62% no-repeat, linear-gradient(#000, #000); mask-composite: exclude; }

/* Phone — iPhone 17 Pro Max proportions, and the frame is the same 1px
   hairline the Safari panel uses, so the pair reads as one family
   instead of a device mockup dropped next to a screenshot. */
.phone { justify-self: center; width: fit-content; margin: 0 auto; }
.phone__frame { position: relative; width: clamp(198px, 21vw, 248px); padding: 5px; border-radius: clamp(36px, 3.9vw, 46px); background: var(--color-white); box-shadow: var(--bento-lift), inset 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 9%, transparent); }
.phone__island { position: absolute; top: 3%; left: 50%; width: 27%; height: 3.1%; border-radius: 999px; background: var(--color-charcoal); translate: -50% 0; z-index: 1; }
.phone__screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; aspect-ratio: 1320 / 2868; padding: .6rem .8rem .5rem; border-radius: clamp(31px, 3.4vw, 41px); background: var(--color-white); overflow: hidden; }
.phone__status { display: flex; align-items: center; gap: 3px; width: 100%; padding: 0 .3rem; }
.phone__status b { margin-right: auto; color: var(--bento-ink); font: 700 12px/1 var(--font-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.phone__status i { width: 4px; height: 4px; border-radius: 1px; background: color-mix(in srgb, var(--color-charcoal) 30%, transparent); }
.phone__status i:nth-child(3) { height: 6px; }
.phone__status i:nth-child(4) { height: 8px; }
.phone__call { display: grid; justify-items: center; align-content: center; gap: .3rem; }
.phone__orb { display: flex; align-items: center; justify-content: center; gap: 3px; width: 66px; height: 66px; border-radius: 50%; background-color: var(--color-brand); background-image: radial-gradient(circle at 34% 26%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 62%); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-brand) 70%, transparent); }
.phone__orb b { display: block; width: 3px; height: 14px; border-radius: 2px; background: var(--color-white); }
.phone__who { margin: .75rem 0 0; color: var(--bento-quiet); font-size: 11px; font-weight: 600; letter-spacing: -.01em; }
.phone__state { margin: 0; color: var(--color-brand); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.phone__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 26px; margin-top: .55rem; }
.phone__wave i { width: 3px; height: 24%; border-radius: 2px; background: color-mix(in srgb, var(--color-brand) 34%, var(--color-white)); animation: phone-wave 1.15s ease-in-out infinite; }
.phone__wave i:nth-child(2n) { animation-delay: .14s; }
.phone__wave i:nth-child(3n) { animation-delay: .29s; }
.phone__wave i:nth-child(4n) { animation-delay: .43s; }
.phone__wave i:nth-child(5n) { animation-delay: .07s; }
@keyframes phone-wave { 0%, 100% { height: 24%; opacity: .5; } 50% { height: 100%; opacity: 1; } }
.phone__pill { width: 34%; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--color-charcoal) 22%, transparent); }
.phone__orb b { animation: cap-voice .92s ease-in-out infinite; }
.phone__orb b:nth-child(2) { animation-delay: .12s; }
.phone__orb b:nth-child(3) { animation-delay: .24s; }
.phone__orb b:nth-child(4) { animation-delay: .07s; }

/* Without / With — the left card is deliberately inert, the right one is
   the only place colour appears. The contrast is the argument. */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.85rem, 1.2vw, 1.1rem); }
.compare__card { display: grid; align-content: start; gap: 1.15rem; padding: clamp(1.25rem, 1.8vw, 1.8rem); border-radius: var(--bento-r); background: var(--color-white); box-shadow: var(--bento-lift); }
.compare__card header { display: flex; align-items: center; gap: .55rem; }
.compare__card header p { margin: 0; font-size: clamp(15px, 1.25vw, 17px); font-weight: 700; letter-spacing: -.02em; }
.compare__dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: color-mix(in srgb, var(--color-charcoal) 26%, var(--color-white)); }
.compare__card dl { display: grid; gap: .45rem; margin: 0; }
.compare__card dl > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .95rem; border-radius: 16px; background: var(--bento-panel); }
.compare__card dt { color: var(--bento-quiet); font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
.compare__card dd { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.015em; }
.compare__card--lost header p { color: var(--bento-quiet); }
.compare__card--lost dd { color: color-mix(in srgb, var(--color-charcoal) 45%, var(--color-white)); }
.compare__card--kept .compare__dot { background: var(--color-brand); }
.compare__card--kept header p { color: var(--bento-ink); }
.compare__card--kept dd { color: var(--color-brand); }

/* Pricing — both numbers framed inside one tinted well, the ongoing plan
   lifted out of it in white. Two cards because the price genuinely is two
   numbers (setup once, then monthly), not because there are two tiers. */
.bento-pricing { margin-top: clamp(3rem, 6vw, 5rem); }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(.85rem, 1.3vw, 1.2rem); max-width: 880px; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0; border-radius: 0; background: transparent; }
.tier { position: relative; display: grid; align-content: start; gap: .45rem; min-width: 0; padding: clamp(1.2rem, 2vw, 1.8rem); border-radius: 24px; background: var(--color-white); box-shadow: 0 1px 3px color-mix(in srgb, var(--color-charcoal) 7%, transparent), 0 12px 30px -14px color-mix(in srgb, var(--color-charcoal) 18%, transparent); }
.tier--main { padding-block: clamp(1.5rem, 2.5vw, 2.3rem); border-radius: 26px; background: var(--color-white); box-shadow: 0 1px 3px color-mix(in srgb, var(--color-charcoal) 7%, transparent), 0 24px 50px -22px color-mix(in srgb, var(--color-charcoal) 30%, transparent); }
.tier__chip { position: absolute; top: clamp(.95rem, 1.6vw, 1.35rem); right: clamp(.95rem, 1.6vw, 1.35rem); padding: .34rem .62rem; border-radius: 999px; background: color-mix(in srgb, var(--color-brand) 8%, var(--color-white)); color: var(--color-brand); font: 600 11px/1 var(--font-body); letter-spacing: -.01em; }
.tier__chip--quiet { background: color-mix(in srgb, var(--color-charcoal) 6%, var(--color-white)); color: var(--color-quiet); }
.tier__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--color-charcoal); }
.tier__icon--brand { background-color: var(--color-brand); background-image: radial-gradient(circle at 32% 26%, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 64%); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--color-brand) 70%, transparent); }
.tier__icon img { width: 18px; height: auto; }
.tier__name { margin: .5rem 0 0; color: var(--bento-ink); font: 700 clamp(17px, 1.5vw, 20px)/1.2 var(--font-display); letter-spacing: -.028em; }
.tier__for { margin: 0; color: var(--bento-quiet); font-size: clamp(12.5px, 1vw, 13.5px); line-height: 1.45; letter-spacing: -.01em; }
/* The unit greyed and tucked against the figure, the way the reference
   drops the cents on a price. */
.tier__price { display: flex; align-items: baseline; gap: .12em; margin: .5rem 0 .1rem; color: var(--bento-ink); font: 800 clamp(38px, 4.2vw, 56px)/.95 var(--font-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.tier__price span { color: var(--bento-quiet); font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; letter-spacing: -.02em; }
.tier__setup { margin: .2rem 0 0; color: var(--bento-quiet); font-size: clamp(12px, .9vw, 13px); letter-spacing: -.01em; }
.tier__setup span:first-child { color: var(--bento-ink); font-weight: 700; }
.tier__inc { margin: .5rem 0 .15rem; padding-top: clamp(.8rem, 1.4vw, 1.1rem); border-top: 1px solid color-mix(in srgb, var(--color-charcoal) 10%, transparent); color: var(--bento-ink); font-size: 12px; font-weight: 700; letter-spacing: -.01em; }
.tier__list { display: grid; gap: .4rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.tier__list li { display: flex; align-items: flex-start; gap: .5rem; color: var(--bento-quiet); font-size: clamp(12.5px, 1vw, 13.5px); line-height: 1.4; letter-spacing: -.012em; }
.tier__list li::before { content: ""; width: 14px; height: 14px; margin-top: .12em; flex: 0 0 auto; border-radius: 50%; background: var(--color-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l5 5 10-10.2'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l5 5 10-10.2'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(#000, #000); mask-composite: exclude; }
.tier__cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; margin-top: .35rem; padding: 0 1.2rem; border-radius: 999px; background: var(--color-white); color: var(--bento-ink); font-size: clamp(13.5px, 1.1vw, 15px); font-weight: 700; letter-spacing: -.012em; text-align: center; text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 14%, transparent); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.tier__cta:hover, .tier__cta:focus-visible { background: color-mix(in srgb, var(--color-charcoal) 5%, var(--color-white)); outline: none; }
.tier__cta--brand { background: var(--color-brand); color: var(--color-white); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--color-brand) 70%, transparent); }
.tier__cta--brand:hover, .tier__cta--brand:focus-visible { background: var(--color-brand-press); }
.tier__cta:active { transform: scale(.985); }
.tiers__sum { max-width: 880px; margin: clamp(.9rem, 1.6vw, 1.2rem) auto 0; color: var(--color-quiet); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.5; letter-spacing: -.015em; text-align: center; }
.tiers__sum b { color: var(--bento-ink); font-weight: 700; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem; padding: 0; list-style: none; }
.trust li { display: flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px; background: color-mix(in srgb, var(--color-brand) 7%, var(--color-white)); color: var(--color-brand); font-size: 12px; font-weight: 600; letter-spacing: -.008em; white-space: nowrap; }
.trust li::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; background: var(--color-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l5 5 10-10.2'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l5 5 10-10.2'/%3E%3C/svg%3E") center / 11px no-repeat, linear-gradient(#000, #000); mask-composite: exclude; }
.bento-pricing .trust { max-width: 880px; margin: clamp(1.1rem, 2vw, 1.5rem) auto 0; }

/* The "still not sure" band from the reference, with the person who
   actually runs onboarding instead of a stock face. */
.advise { display: grid; justify-items: center; gap: .6rem; max-width: 880px; margin: clamp(1.4rem, 2.4vw, 2rem) auto 0; padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.2rem, 2vw, 2rem); border-radius: 26px; background: var(--bento-panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 8%, transparent); text-align: center; }
.advise__face { display: block; width: 58px; height: 58px; margin-bottom: .55rem; }
.advise__face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--color-white), 0 12px 24px -14px color-mix(in srgb, var(--color-charcoal) 60%, transparent); }
.advise__title { margin: 0; color: var(--bento-ink); font: 700 clamp(17px, 1.7vw, 22px)/1.25 var(--font-display); letter-spacing: -.03em; }
.advise__sub { margin: 0; max-width: 52ch; color: var(--bento-quiet); font-size: clamp(12.5px, 1vw, 14px); line-height: 1.5; }
.advise__cta { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; margin-top: .75rem; padding: 0 1.4rem; border-radius: 999px; background: var(--color-charcoal); color: var(--color-white); font-size: clamp(13.5px, 1.1vw, 14.5px); font-weight: 700; letter-spacing: -.012em; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.advise__cta:hover, .advise__cta:focus-visible { background: color-mix(in srgb, var(--color-charcoal) 82%, var(--color-white)); outline: none; }
.advise__cta:active { transform: scale(.985); }

@media (max-width: 1000px) {
  .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento--chain { grid-column: span 2; grid-row: auto; }
  .bento--honest, .bento--rules { grid-column: span 2; }
}
@media (max-width: 680px) {
  .bento-grid { grid-template-columns: minmax(0, 1fr); }
  .bento--chain, .bento--honest, .bento--rules { grid-column: auto; }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .bento-head h2 { font-size: clamp(22px, 7vw, 32px); }
  .bento { border-radius: 22px; }
  .compare__card { border-radius: 22px; }
  .tiers { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .tier, .tier--main { border-radius: 20px; }
  .advise { border-radius: 22px; }
}

@media (max-width: 1100px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-item:nth-child(3n)::before { display: none; }
  .capability-item:nth-child(2n)::before { display: none; }
  .capability-item:nth-child(2n+1)::before { display: block; }
  .capability-item:nth-child(n+3)::before { top: calc(var(--cap-gap) / -2); }
  .capability-item:nth-child(3n+1)::after, .capability-item:nth-child(3n)::after { left: calc(var(--cap-gap) / -2); right: calc(var(--cap-gap) / -2); }
  .capability-item:nth-child(2n+1)::after { left: 0; }
  .capability-item:nth-child(2n)::after { right: 0; }
  .capability-item:nth-last-child(-n+3)::after { display: block; }
  .capability-item:nth-last-child(-n+2)::after { display: none; }
  .capability-item:nth-last-child(-n+3)::before { bottom: calc(var(--cap-gap) / -2); }
  .capability-item:nth-last-child(-n+2)::before { bottom: 0; }
  .capability-item:last-child::before { display: none; }
}

.workspace-section { padding: clamp(3rem, 6vw, 6rem) 1.25rem clamp(3.5rem, 7vw, 7rem); background: var(--color-white); text-align: center; border-top: 1px solid var(--color-rule); overflow: clip; }
.workspace-section .wrap { transition: opacity .4s ease; }
.workspace-section.is-scrolling .wrap { opacity: .3; }
.capabilities-section .wrap { transition: opacity .4s ease; }
.capabilities-section.is-scrolling .wrap { opacity: .3; }
.capability-grid { transition: opacity .4s ease; }
.capability-grid.is-dimmed { opacity: .2; }
.bento-section .wrap { transition: opacity .4s ease; }
.bento-section.is-scrolling .wrap { opacity: .3; }
.founder { transition: none; }
.founder.is-scrolling { opacity: 1; }
.workspace-section .eyebrow { justify-content: center; }
.workspace-section .eyebrow::before { display: none; }
.js [data-io]::before { display: none !important; width: 0 !important; height: 0 !important; content: none !important; }
.workspace-section h2 { font: 800 clamp(24px, 3.2vw, 42px)/1.08 var(--font-display); letter-spacing: -.035em; margin: 0 0 clamp(1rem, 2vw, 1.5rem); }
.workspace-section h2 em { font-style: normal; color: var(--color-brand); }
.workspace-desc { max-width: 640px; margin: 0 auto clamp(2rem, 5vw, 3.5rem); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.6; color: var(--color-quiet); letter-spacing: -.01em; }
.workspace-glow { position: relative; width: min(100%, 1180px, calc((100svh - 200px) * 1.6)); margin: 0 auto; transform: none; }
.workspace-glow::before { content: ""; position: absolute; inset: -40px; background: radial-gradient(ellipse at center, rgba(225,29,72,.07) 0%, transparent 65%); z-index: -1; border-radius: 50%; filter: blur(20px); }
.workspace-frame { margin: 0; border: 1px solid color-mix(in srgb, var(--color-charcoal) 22%, transparent); border-radius: 14px; overflow: hidden; background: var(--color-white); }
.workspace-frame__image { position: relative; line-height: 0; }
.workspace-frame__image img { display: block; width: 100%; height: auto; object-fit: contain; }


@media (max-width: 760px) {
  .workspace-frame { border-radius: 10px; }
}
.foot { background: var(--color-brand); color: #fff; border-top: 1px solid rgba(255,255,255,.25); padding: 38px 0; }
.foot-row { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.foot-row .brand { display: block; text-align: center; margin-top: -8px; }
.foot-row .brand img { width: 41px; height: 34px; animation: pulse 2.5s ease-in-out infinite; }
.foot-row nav { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.foot-row nav a { font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; }
.foot-row nav a:hover { text-decoration: underline; }
.s-red { background: var(--color-brand); color: var(--color-white); }
.s-red h2, .s-red h3, .s-red .eyebrow { color: var(--color-white); }
.s-red a:focus-visible, .s-red button:focus-visible { outline-color: #fff; }
.eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; color: var(--color-brand); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: 0 0 auto; }
.founder { text-align: center; padding: clamp(4rem, 10vw, 8rem) 1.25rem; border-top: 1px solid var(--color-rule); }
.founder .amb { width: 60px; height: 49px; object-fit: contain; margin-inline: auto; }
.founder .eyebrow { justify-content: center; margin: 28px 0 44px; }
.portrait { width: 210px; height: 210px; margin: 0 auto; border: 3px solid #fff; border-radius: 50%; padding: 9px; position: relative; }
.portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 32%; }
.fname { margin-top: 26px; }
.fname strong { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.2; }
.fname span { display: block; font-weight: 600; margin-top: 8px; }
.fname small { display: block; font: 600 12px/1 var(--font-mono); letter-spacing: .09em; margin-top: 9px; opacity: .9; }
.verified { width: 24px; height: 24px; flex: 0 0 auto; }
.verified-light path:first-child { fill: var(--color-brand); }
.verified-light path:last-child { fill: #fff; }
.founder blockquote { margin: 36px auto 0; max-width: 60ch; font-size: 18px; line-height: 1.65; }
.slogan { margin-top: 56px; font-size: clamp(24px, 7.6vw, 84px); line-height: 1.1; font-family: var(--font-display); font-weight: 800; letter-spacing: -.022em; }
.slogan span { display: block; white-space: nowrap; }
.slogan i { font-style: normal; }
.fcta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.expect { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px 28px; margin: 0; padding: 0; list-style: none; font: 600 11px/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.expect li { display: flex; align-items: center; gap: 10px; }
.expect li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-white); }
.family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.28); border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); margin-top: clamp(54px, 8vh, 92px); text-align: left; }
.family-grid a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 24px); background: var(--color-brand); color: #fff; text-decoration: none; transition: background-color .18s ease; }
.family-grid a:hover, .family-grid a:focus-visible { background: var(--color-brand-press); }
.family-grid a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.family-grid .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.family-grid .ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.family-grid a > span:nth-of-type(2) { font: 600 14.5px/1.3 var(--font-body); letter-spacing: -.004em; }
.family-grid .soon-tag { grid-column: 3; justify-self: end; display: inline-block; margin-left: auto; padding: 3px 7px; border-radius: 5px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; font: 600 11px/1.25 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
@media (max-width: 760px) {
  .draft-header { min-height: 60px; padding-inline: .85rem; }
  .draft-icon-button, .draft-menu { min-height: 46px; padding-inline: .75rem; }
  .draft-icon-button { min-width: 96px; font-size: 13px; }
  .draft-menu { min-width: 96px; font-size: 13px; }
  .draft-flag { font-size: 16px; }
  .draft-popover { top: calc(100% + .75rem); }
  .draft-menu-panel { position: fixed; top: 68px; right: .75rem; left: .75rem; width: auto; max-height: calc(100svh - 80px); overflow-y: auto; border-radius: 4px; }
  .draft-menu-panel nav { grid-template-columns: minmax(0, 1fr); }
  .draft-menu-panel nav a { min-height: 48px; }
  .draft-menu-panel nav a:nth-child(odd) { border-right: 0; }
  .draft-language-panel { position: fixed; top: 72px; left: .75rem; right: .75rem; width: auto; min-width: 0; border-radius: 4px; }
  .draft-hero { padding-inline: 1rem; background-position: center 24px; background-size: 28px 28px; }
  h1 { font-size: clamp(42px, 13vw, 58px); }
  .draft-lead { max-width: 38em; font-size: 14px; line-height: 1.5; }
  .draft-actions { align-items: stretch; flex-direction: column; gap: .5rem; }
  .draft-cta { width: 100%; }
  .draft-text-link { justify-content: center; }
  .draft-video__canvas { aspect-ratio: 16 / 9; border-radius: 10px; }
  .draft-video__stamp { top: .75rem; left: .75rem; font-size: 11px; }
  .safari-frame { margin-top: 1.5rem; border-radius: 10px; }
  .safari-frame figcaption { display: none; }
  .safari-frame__chrome { min-height: 36px; padding: 0 .8rem; }
  .safari-frame__dots b { width: 8px; height: 8px; }
  .workspace { grid-template-columns: 62px minmax(0, 1fr); min-height: 0; }
  .workspace__rail { gap: .25rem; padding: .7rem .35rem; }
  .workspace__rail img { width: 22px; margin: 0 auto .6rem; }
  .workspace__rail-item { padding: .42rem .3rem; font-size: 11px; text-align: center; }
  .workspace__summary { gap: .35rem; padding: .5rem; }
  .workspace__summary article { display: block; padding: .45rem; }
  .workspace__summary article > span { display: none; }
  .workspace__summary small { font-size: 11px; }
  .workspace__summary strong { margin-top: .15rem; font-size: 11px; line-height: 1.2; }
  .workspace__summary p { display: none; }
  .workspace__body { grid-template-columns: minmax(0, 1.35fr) minmax(96px, .8fr); }
  .workspace__path, .workspace__handoff { padding: .6rem; }
  .workspace__heading { gap: .4rem; padding-bottom: .65rem; }
  .workspace__heading strong { font-size: 14px; }
  .workspace__heading > span:not(.workspace__status) { display: none; }
  .workspace__steps { gap: .4rem; padding-top: .45rem; }
  .workspace__steps li:nth-child(2) { display: none; }
  .workspace__steps li { grid-template-columns: 22px minmax(0,1fr); gap: .45rem; }
  .workspace__steps li > span { width: 22px; height: 22px; }
  .workspace__steps strong { margin-top: .12rem; font-size: 11px; line-height: 1.25; }
  .workspace__steps p { display: none; }
  .workspace__handoff dl { gap: .55rem; margin: .8rem 0; }
  .workspace__handoff dl div { padding-bottom: .45rem; }
  .workspace__handoff dl div:nth-child(n+2) { display: none; }
  .workspace__handoff dd { font-size: 11px; line-height: 1.25; }
  .workspace__status { display: none; }
  .workspace__handoff button { display: none; }
  .draft-video-scene { padding-inline: 1rem; background-size: 28px 28px; }
  .draft-scene-rule { margin-bottom: 3.25rem; }
  .draft-scene-copy { margin-bottom: 1.75rem; }
  .draft-scene-copy h2 { font-size: clamp(22px, 6vw, 30px); line-height: 1.1; }
  .draft-scene-copy > p:last-child { font-size: 14px; line-height: 1.55; max-width: 100%; }
  .draft-scene-media { border-radius: 10px; }
  .draft-statement { padding-inline: 1rem; }
  .draft-statement h2 br { display: none; }
  .founder-grid { grid-template-columns: 1fr; text-align: center; }
  .founder-grid img { margin: 0 auto; }
  .founder-grid .draft-cta { width: 100%; }
  .foot-row nav { gap: 17px; }
  .portrait { width: 176px; height: 176px; }
  .founder blockquote { font-size: 16px; }
  .slogan { margin: 56px 0 0; }
  .fcta { margin-top: 54px; gap: 54px; }
  .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .capabilities-section, .pricing-reveal { padding-inline: 0; }
  .capability-prologue { height: auto !important; }
  .capabilities-head { align-items: center; }
  .capabilities-head h2, .pricing-reveal h2 { font-size: clamp(26px, 8vw, 38px); line-height: 1.08; }
  /* One column, capped at a readable card width and centred in the wrap,
     rather than a full-bleed card that stretches with the viewport. */
  .capability-grid { --cap-gap: 1rem; grid-template-columns: min(100%, 420px); justify-content: center; gap: var(--cap-gap); }
  .capability-grid .capability-item::before { display: none; }
  .capability-grid .capability-item::after { display: block; left: 0; right: 0; }
  .capability-grid .capability-item:last-child::after { display: none; }
  .capability-card { gap: .9rem; padding: 1rem; border-radius: 20px; }
  .capability-card h3 { font-size: 19px; }
  .cap-stage { border-radius: 16px; }
  .capabilities-note { text-align: center; }

                html[lang="tr"] h1 { max-width: 16ch; font-size: clamp(38px, 10.8vw, 50px); }
  html[lang="tr"] .draft-scene-copy h2 { max-width: 22ch; margin-inline: auto; font-size: clamp(21px, 6vw, 28px); }
}
/* Short viewports — a phone in landscape, or a laptop at 200% zoom. Neither
   panel may grow past the screen it opens on. */
@media (max-height: 620px) {
  .draft-popover { max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
  .draft-menu-panel nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .founder .family-grid { grid-template-columns: minmax(0, 1fr); margin-top: clamp(36px, 6vh, 56px); }
  .family-grid a { padding: 15px 14px; gap: 12px; }
  .family-grid .ic { width: 34px; height: 34px; border-radius: 10px; }
  .family-grid .ic svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation: none !important; }
  .stmtwrap { height: auto !important; }
  .stmtpin { position: static !important; height: auto !important; padding: 88px 0; }
  .stmtwrap.dotfield > .stmtpin { position: static !important; }
  .stmt > span { opacity: 1 !important; }
  .capability-prologue { height: auto !important; }
  .js .capability-prologue .capabilities-head { position: static !important; opacity: 1 !important; filter: none !important; transform: none !important; will-change: auto !important; }
  .draft-hero.is-scrolling .draft-hero__intro,
  .draft-hero.is-scrolling .draft-stage,
  .fade-section.is-scrolling .draft-scene-copy,
  .fade-section.is-scrolling .draft-scene-media,
  .capabilities-section.is-scrolling .wrap,
  .bento-section.is-scrolling .wrap,
  .workspace-section.is-scrolling .wrap,
  .stmtwrap.is-scrolling .stmtpin,
  .founder.is-scrolling,
    .capability-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .capability-grid.is-dimmed { opacity: 1 !important; }
  .capability-item.is-dimmed .capability-card { opacity: 1 !important; transform: none !important; }
  /* Motion blur is the one thing the global reset above does not clear:
     `filter` is neither an animation nor a transition, so a mid-travel
     blur would freeze on screen as a permanently soft element. */
  .capability-card .cap-visual *, .capability-card .cap-visual *::before, .capability-card .cap-visual *::after { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  /* The reasoning steps start hidden and are revealed by animation, so the
     global `animation: none` above would leave this card blank. */
  .pane { position: static; opacity: 1 !important; visibility: visible !important; transform: none !important; border-top: 1px solid color-mix(in srgb, var(--color-charcoal) 8%, transparent); }
  .pane:first-child { border-top: 0; }
  .browser { aspect-ratio: auto; }
  .browser__stage { display: block; }
  .browser__rail { display: none; }
  .tree__old i::after { transform: scaleX(1) !important; }
  .think__step, .bento__figure, .ask, .honest, .rules, .tree__new { opacity: 1 !important; transform: none !important; filter: none !important; }
  .cap-lines p { position: static; grid-area: auto; display: none; }
  .cap-lines p:last-of-type { display: block; }
  .capability-card .cap-visual .cap-handoff__note { opacity: 0 !important; }
  .capability-card .cap-visual .cap-notes__card, .capability-card .cap-visual .cap-notes__tag, .capability-card .cap-visual .cap-notes__pill, .capability-card .cap-visual .cap-notes__check { opacity: 1 !important; }
  .capability-card .cap-visual .cap-notes__line { transform: scaleX(1) !important; opacity: 1 !important; }
  .capability-card .cap-visual .cap-notes__card--a { transform: none !important; }
  .capability-card .cap-visual .cap-notes__card--b { transform: translateY(-11px) scale(.94) !important; }
  .capability-card .cap-visual .cap-notes__card--c { transform: translateY(-22px) scale(.88) !important; }
  .capability-card .cap-visual .cap-orb__ring { opacity: .18 !important; }
  .capability-card .cap-visual .cap-notes__check svg { stroke-dashoffset: 0 !important; }
  .capability-card .cap-visual .cap-daybar__pill { opacity: 0 !important; }
  .capability-card .cap-visual .cap-dayicon { color: color-mix(in srgb, var(--color-charcoal) 45%, var(--color-white)); }
  .capability-card .cap-visual .cap-person { border-color: var(--cap-human); background: var(--cap-human); color: var(--color-white); }
  .capability-card .cap-visual .cap-week__slots i.is-slot { background: var(--color-brand); border-color: var(--color-brand); }
  .capability-card .cap-visual .appt { opacity: 1 !important; }
  .capability-card .cap-visual .cap-langs i:first-child { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); }
}

/* Masaüstünde sayfa gövdesi ve footer, tarayıcıda iki kez Ctrl+− yapılmış gibi
   %80 ölçekte. Header hariç: menü kendi ölçüsünde kalır. */
@media (min-width: 1024px) {
  #main, .foot { zoom: .8; }
}