@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --editor-bg: #faf5f6;
  --editor-surface: #f4eaec;
  --editor-surface-strong: #eddbe0;
  --editor-border: #e2ccce;
  --editor-ink: #28141d;
  --editor-muted: #6e4f5c;
  --editor-faint: #967382;
  --editor-eggplant: #1f0b15;
  --editor-purple: #af2a98;
  --editor-purple-dark: #76205f;
  --editor-yellow: #fbc035;
  --editor-cream: #fffafa;
  --editor-h1-size: clamp(60px, 7vw, 104px);
  --editor-h2-size: clamp(48px, 5.5vw, 80px);
  --editor-logo-size: 29px;
  --editor-fruit-size: min(63%, 360px);
  --editor-icon-size: 33px;
  --editor-table-font-size: 13px;
  --bg: var(--editor-bg);
  --surface: var(--editor-surface);
  --surface-strong: var(--editor-surface-strong);
  --border: var(--editor-border);
  --ink: var(--editor-ink);
  --muted: var(--editor-muted);
  --faint: var(--editor-faint);
  --eggplant: var(--editor-eggplant);
  --purple: var(--editor-purple);
  --purple-dark: var(--editor-purple-dark);
  --yellow: var(--editor-yellow);
  --cream: var(--editor-cream);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 92px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 700; letter-spacing: -0.04em; }
.brand img { width: var(--editor-logo-size); height: var(--editor-logo-size); object-fit: contain; }
.brand-wordmark { background: linear-gradient(105deg, var(--purple) 5%, #d544a6 52%, var(--yellow) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-nav { display: flex; align-items: center; gap: 30px; color: var(--muted); font-size: 12px; font-weight: 600; }
.site-nav a { transition: color 180ms ease, transform 180ms ease; }
.site-nav a:hover { color: var(--purple); transform: translateY(-1px); }
.site-nav .nav-cta { padding: 11px 15px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--cream) 55%, transparent); }
.site-nav .nav-cta:hover { border-color: var(--purple); color: var(--purple); }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr); align-items: center; gap: 70px; min-height: 650px; padding: 54px 0 92px; }
.hero-copy { z-index: auto; }
.hero-copy h1, .hero-copy .lede, .hero-copy .hero-proof, .hero-actions > .button-primary, .hero-actions > .text-link { position: relative; z-index: 2; }
.eyebrow, .section-kicker { margin: 0 0 20px; color: var(--purple); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px color-mix(in srgb, var(--yellow) 20%, transparent); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.045em; }
h1 { max-width: 650px; margin-bottom: 24px; font-size: var(--editor-h1-size); line-height: 0.88; }
h1 em, h2 em { color: var(--purple); font-style: italic; }
.lede { max-width: 500px; margin-bottom: 32px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 23px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 999px; padding: 15px 21px; cursor: pointer; font-size: 12px; font-weight: 700; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(40, 20, 29, 0.12); }
.button-primary { background: var(--purple); color: white; white-space: nowrap; }
.button-primary:hover { background: var(--purple-dark); }
.button-dark { background: var(--eggplant); color: white; white-space: nowrap; }
.text-link { color: var(--muted); font-size: 12px; font-weight: 700; }
.text-link:hover { color: var(--purple); }
.hero-proof { display: flex; align-items: baseline; gap: 10px; margin-top: 58px; }
.hero-proof strong { color: var(--eggplant); font-size: 15px; letter-spacing: -0.04em; }
.hero-proof span { color: var(--faint); font-size: 11px; }

.hero-art { position: fixed; z-index: 1; inset: 0; min-height: 0; overflow: visible; pointer-events: none; }
.hero-fruit { position: absolute; z-index: 1; width: var(--editor-fruit-size); top: clamp(105px, 18vh, 220px); left: 72%; transform: translateX(-50%) rotate(-18deg); filter: drop-shadow(26px 30px 20px rgba(69, 18, 60, 0.2)); animation: fruit-float 7s ease-in-out infinite; transition: opacity 220ms ease; pointer-events: auto; }
.hero-art.is-over-content .hero-fruit { opacity: .2; }
.hero-caption { position: absolute; z-index: 3; padding: 10px 13px; border: 1px solid var(--border); background: rgba(255, 250, 250, .82); color: var(--muted); font-size: 10px; line-height: 1.35; letter-spacing: .02em; backdrop-filter: blur(12px); }
.hero-caption strong { color: var(--purple); font-weight: 700; }
.hero-caption-top { top: 45px; right: 15px; transform: rotate(5deg); }
.hero-caption-bottom { bottom: 42px; left: 15px; border-radius: 999px; color: var(--eggplant); font-size: 10px; font-weight: 600; }
.hero-copy .hero-caption-bottom { position: static; display: inline-flex; margin: -12px 0 28px; }
.hero-actions .hero-caption-bottom { align-items: center; justify-content: center; min-height: 46px; margin: 0; }
.hero-actions .hero-platforms { position: absolute; top: auto; right: auto; bottom: 100px; left: calc(72% - 180px); width: max-content; white-space: nowrap; }
@keyframes fruit-float { 0%, 100% { transform: translate(-50%, 0) rotate(-18deg); } 50% { transform: translate(-50%, -16px) rotate(-10deg); } }

.signal-strip { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: transparent; color: var(--purple); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.signal-strip i { width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); }
.section { padding: 140px 0; }
#surfaces { padding-bottom: 56px; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; margin-bottom: 55px; }
.section-intro .section-kicker { grid-column: 1 / -1; margin-bottom: -20px; }
h2 { margin-bottom: 0; font-size: var(--editor-h2-size); line-height: .9; }
.section-intro > p:last-child, .section-aside { position: relative; z-index: 3; max-width: 340px; margin-bottom: 3px; background: transparent; color: var(--muted); font-size: 14px; line-height: 1.7; }
.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.loop-mobile-nav { display: none; }
.loop-card { min-height: 270px; padding: 22px; border: 1px solid transparent; position: relative; overflow: hidden; }
.loop-card h3 { margin: 62px 0 10px; font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -.03em; }
.loop-card p { width: 100%; max-width: none; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.card-index { position: absolute; top: 22px; right: 22px; font-size: 10px; font-weight: 700; opacity: .6; }
.card-icon { position: absolute; top: 17px; left: 20px; font-size: var(--editor-icon-size); font-weight: 400; }
.loop-card-purple { background: #e7d6e5; color: var(--eggplant); }
.loop-card-yellow { background: var(--yellow); }
.loop-card-blush { background: var(--surface-strong); }
.loop-card-eggplant { background: var(--eggplant); color: var(--cream); }
.loop-card-eggplant p { color: #d9bfcf; }

.signal-strip, #loop, #surfaces, #trust, #updates, .site-footer { position: relative; z-index: 2; }
.time-section { position: relative; padding: 125px 0; background: var(--eggplant); color: var(--cream); }
.time-copy, .time-table { position: relative; z-index: 3; }
.time-table { background: transparent; }
.time-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 110px; align-items: center; }
.section-kicker-light { color: var(--yellow); }
.time-copy h2 { color: var(--cream); }
.time-copy > p:not(.section-kicker) { max-width: 355px; margin-top: 28px; color: #cbb3c0; font-size: 14px; line-height: 1.7; }
.time-total { display: flex; align-items: baseline; gap: 11px; margin-top: 45px; }
.time-total strong { color: var(--yellow); font-family: var(--serif); font-size: 54px; font-weight: 400; line-height: 1; }
.time-total span { color: #cbb3c0; font-size: 11px; }
.time-table { border-top: 1px solid #563243; }
.time-table-head, .time-row { display: grid; grid-template-columns: 1.55fr .75fr .95fr; align-items: center; gap: 18px; }
.time-table-head { min-height: 47px; border-bottom: 1px solid #563243; color: #aa8699; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.time-row { min-height: 68px; border-bottom: 1px solid #563243; font-size: var(--editor-table-font-size); }
.time-row > span { color: #f2dfe8; }
.time-row strong { color: #cbb3c0; font-weight: 500; }
.time-row b { color: var(--yellow); font-weight: 700; }
.time-footnote { margin: 16px 0 0; color: #9f7b8f; font-size: 10px; }

.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 55px; }
.section-heading-row h2 { margin: 0; }
.surface-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto; gap: 12px; align-items: stretch; }
.surface-mobile-nav { display: none; }
.surface-card { position: relative; display: flex; min-height: 0; flex-direction: column; overflow: hidden; padding: 23px; border: 1px solid var(--border); background: var(--cream); }
.surface-featured { min-height: 0; background: var(--purple); color: white; border-color: var(--purple); }
.surface-muted { background: var(--surface); }
.surface-topline { display: flex; justify-content: space-between; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.surface-featured .surface-topline { color: #e8b8de; }
.surface-status { color: var(--purple); }
.surface-featured .surface-status { color: var(--yellow); }
.status-muted { color: var(--faint); }
.surface-card h3 { margin: 43px 0 9px; font-family: var(--serif); font-size: 36px; font-weight: 400; letter-spacing: -.03em; }
.surface-card p { max-width: 300px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.surface-featured [data-editable="dashboardBody"] { max-width: none; width: 100%; }
.surface-featured p { color: #f1d7ec; }
.ui-showcase { position: relative; right: auto; bottom: auto; left: auto; overflow: hidden; margin-top: auto; border: 1px solid var(--border); background: rgba(255,255,255,.42); }
.ui-showcase-dashboard { flex: 1 1 auto; height: auto; min-height: 380px; margin: 24px -23px -23px; border-color: rgba(255,255,255,.6); background: rgba(31, 11, 21, .28); }
.ui-showcase-compact { top: auto; bottom: auto; min-height: 0; margin-top: 24px; }
.ui-showcase-muted { border-color: #d5bdc3; background: rgba(255,255,255,.28); }
.extension-copy-stack { display: flex; flex: 0 0 auto; flex-direction: column; gap: 18px; min-width: 0; }
.extension-copy-stack > p { margin: 0; }
.extension-launch-copy { display: block; max-width: none; margin: 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--ink); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.extension-launch-arrow { position: absolute; top: 330px; right: 23px; bottom: 104px; z-index: 1; width: 135px; color: var(--purple); opacity: 1; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease; }
.extension-launch-arrow img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.surface-card.is-chat-open .extension-launch-arrow { visibility: hidden; opacity: 0; }
.extension-launch-action { position: absolute; right: 23px; bottom: 23px; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 4px; }
.extension-launch-pill { display: block; flex: 0 0 auto; width: 135px; height: 52px; border-radius: 999px; object-fit: contain; object-position: center; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.extension-launch-pill:hover, .extension-launch-pill:focus-visible { transform: translateY(-2px) scale(1.03); filter: drop-shadow(0 5px 7px rgba(91, 28, 70, .20)); outline: none; }
.extension-launch-hint { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.ui-screenshot { display: block; width: 100%; max-width: none; height: 100%; min-height: 100%; object-fit: cover; object-position: 50% 0; }
.ui-screenshot-dashboard { position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; height: auto; min-height: 0; transform: none; object-position: left top; }
.ui-screenshot-extension, .ui-screenshot-mobile { width: 100%; height: auto; min-height: 0; object-position: 50% 50%; object-fit: contain; background: rgba(255,255,255,.42); }
.mobile-showcase { position: relative; margin-top: 14px; }
.mobile-nav-indicator-row { position: relative; height: 22px; margin-top: 5px; }
.mobile-nav-help { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.mobile-nav-indicator { position: absolute; top: 0; left: calc((var(--mobile-nav-index, 2) + .5) * 20%); color: var(--purple); font-size: 17px; font-weight: 800; line-height: 1; transform: translateX(-50%); pointer-events: none; text-shadow: 0 1px 2px rgba(255,255,255,.9); }
.mobile-nav-hotspots { position: absolute; right: 0; bottom: 0; left: 0; display: flex; height: 11%; }
.mobile-nav-hotspots button { flex: 1 1 20%; min-width: 0; border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; cursor: pointer; }
.mobile-nav-hotspots button:hover, .mobile-nav-hotspots button:focus-visible { border: 0; background: rgba(175, 42, 152, .08); box-shadow: none; outline: 2px solid rgba(175, 42, 152, .42); outline-offset: -5px; }
.ui-showcase-extension { display: none; flex: 0 0 auto; min-height: 0; padding: 0; border-color: var(--purple); }
.ui-showcase-extension.is-expanded { position: absolute; right: 23px; bottom: 100px; left: 23px; display: block; margin: 0; box-shadow: 0 12px 26px rgba(91, 28, 70, .16); }
.ui-showcase-extension .ui-screenshot-extension { width: 100%; height: auto; max-height: none; object-position: top center; object-fit: contain; }

.trust-section { padding: 130px 0; background: transparent; }
.trust-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 105px; align-items: start; }
.trust-heading > p:last-child { max-width: 300px; margin-top: 28px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.trust-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; padding-top: 21px; }
.trust-columns article { border-top: 2px solid var(--purple); }
.trust-columns .trust-user { border-top-color: var(--yellow); }
.trust-label { display: block; margin: 18px 0 25px; color: var(--purple); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.trust-user .trust-label { color: var(--trust-user-accent, var(--yellow)); }
.trust-columns ul { display: grid; gap: 17px; padding: 0; margin: 0; list-style: none; }
.trust-columns li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.trust-icon { display: inline-grid; flex: 0 0 calc(var(--editor-icon-size) * .55); place-items: center; width: calc(var(--editor-icon-size) * .55); height: calc(var(--editor-icon-size) * .55); color: var(--purple); }
.trust-user .trust-icon { color: var(--trust-user-accent, var(--yellow)); }
.trust-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }

.updates-section { padding: 120px 0 130px; }
.updates-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; padding: 65px; border: 1px solid var(--purple-dark); background: var(--eggplant); color: var(--cream); }
.updates-card .section-kicker { color: var(--yellow); }
.updates-card h2 { color: var(--cream); }
.updates-card h2 em { color: var(--yellow); }
.updates-copy > p:last-child { max-width: 285px; margin: 25px 0 0; color: #e8d6e0; font-size: 13px; line-height: 1.6; }
.waitlist-form { align-self: center; }
.waitlist-form > label:first-child { display: block; margin-bottom: 10px; color: var(--cream); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.email-row { display: flex; gap: 8px; }
.email-row input { width: 100%; min-width: 0; border: 1px solid rgba(255,250,250,.32); border-radius: 999px; outline: 0; padding: 16px 18px; background: var(--cream); color: var(--ink); font-size: 13px; }
.email-row input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(175,42,152,.14); }
.updates-card .button-dark { background: var(--yellow); color: var(--eggplant); }
.updates-card .button-dark:hover { background: #ffd86a; }
.consent-label { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; color: #e8d6e0; font-size: 10px; line-height: 1.4; }
.consent-label input { width: 14px; height: 14px; margin: 0; accent-color: var(--purple); }
.form-status { min-height: 18px; margin: 14px 0 0; color: var(--yellow); font-size: 11px; font-weight: 600; }
.form-status[data-state="error"] { color: #8c2631; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; min-height: 100px; border-top: 1px solid var(--border); color: var(--faint); font-size: 10px; }
.site-footer .brand { color: var(--ink); font-size: 13px; }.site-footer p { margin: 0; }.site-footer > span { text-align: right; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--purple) 72%, white); outline-offset: 4px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 20px; padding-top: 70px; }.hero-art { min-height: 440px; }.hero-fruit { top: 70px; width: min(var(--editor-fruit-size), 300px); }
  .loop-grid { grid-template-columns: repeat(2, 1fr); }.time-layout, .trust-layout, .updates-card { grid-template-columns: 1fr; gap: 45px; }.surface-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }.surface-featured { grid-column: span 2; min-height: 0; }.updates-card { padding: 45px; }.trust-columns { padding-top: 0; }
}
@media (max-width: 620px) {
  .shell { width: min(100% - 32px, 1180px); }.site-header { min-height: 75px; }.site-nav a:not(.nav-cta) { display: none; }.site-nav { gap: 0; }.site-nav .nav-cta { padding: 10px 12px; }
  .hero { min-height: auto; padding: 65px 0 72px; }.hero-copy h1 { font-size: clamp(57px, 16vw, 82px); }.lede { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }.hero-proof { margin-top: 40px; }.hero-art { min-height: 350px; margin-top: 8px; }.hero-fruit { top: 52px; width: var(--editor-fruit-size); }.hero-caption-bottom { bottom: 22px; left: 0; font-size: 9px; }
  .signal-strip { justify-content: flex-start; gap: 14px; overflow: hidden; white-space: nowrap; font-size: 8px; }.signal-strip i { flex: 0 0 4px; }.section, .trust-section, .updates-section { padding: 85px 0; }.section-intro, .section-heading-row { display: block; }.section-intro .section-kicker { margin-bottom: 20px; }.section-intro > p:last-child, .section-aside { margin-top: 25px; }.loop-grid { grid-template-columns: 1fr; }.loop-card { min-height: 220px; }.loop-card h3 { margin-top: 54px; }
  .time-section { padding: 85px 0; }.time-layout { gap: 55px; }.time-table-head, .time-row { grid-template-columns: 1.3fr .8fr .85fr; gap: 10px; }.time-table-head { font-size: 8px; }.time-row { font-size: 11px; }.time-total strong { font-size: 46px; }
  #surfaces { padding-bottom: 40px; }.surface-grid { grid-template-columns: 1fr; grid-template-rows: auto; }.surface-featured { grid-column: auto; min-height: 0; }.surface-card { min-height: 0; }.ui-showcase-dashboard { margin: 24px 0 0; }.extension-launch-action { right: 23px; bottom: 23px; }.extension-launch-pill { width: 135px; height: 52px; }.ui-showcase-extension { flex: 0 0 auto; }.ui-showcase-extension.is-expanded { right: 23px; bottom: 100px; left: 23px; margin: 0; }.ui-showcase-extension .ui-screenshot-extension { height: auto; max-height: none; }.trust-columns { grid-template-columns: 1fr; gap: 42px; }.updates-card { gap: 35px; padding: 32px 23px; }.email-row { flex-direction: column; }.email-row .button { width: 100%; }.site-footer { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }.site-footer > span { text-align: left; }
}
@media (max-width: 620px) {
  .site-header { align-items: flex-start; flex-direction: column; gap: 12px; min-height: 0; padding: 18px 0 12px; }
  .brand { width: 100%; gap: 11px; min-width: 0; }
  .brand img { width: 70px !important; height: 70px !important; }
  .brand-wordmark { font-size: 44px !important; }
  .site-nav { width: 100%; flex: 0 0 auto; justify-content: space-between; gap: 8px; font-size: 11px; }
  .site-nav a { white-space: nowrap; }
  .site-nav a:not(.nav-cta) { display: inline-flex; }
  .site-nav .nav-cta { padding: 9px 12px; }
  .hero-actions .text-link { display: none; }
  .hero { position: relative; display: block; }
  .hero-copy { position: relative; z-index: 2; }
  .hero-art { position: fixed; z-index: 1; inset: 0; min-height: 0; margin-top: 0; pointer-events: none; }
  .hero-fruit { top: 190px; left: 58%; z-index: 1; width: min(var(--editor-fruit-size), 310px); opacity: .24; pointer-events: auto; }
  .hero-art.is-over-content .hero-fruit { opacity: .24; }
  .hero-actions { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .hero-actions .hero-platforms { position: static; flex: 0 1 auto; max-width: 100%; min-height: 46px; padding: 0 14px; font-size: 10px; white-space: nowrap; }
  .signal-strip { justify-content: center; gap: 11px; font-size: 8px; letter-spacing: .11em; }
  h2 { font-size: clamp(42px, 11vw, 52px); line-height: .94; }
  #loop .section-intro { margin-bottom: 28px; }
  #loop h2 { max-width: 240px; }
  #loop .section-intro > p:last-child, .section-aside { width: auto !important; max-width: 100%; }
  .loop-mobile-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 14px; }
  .loop-mobile-nav button { display: grid; min-width: 0; gap: 3px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 4px; background: var(--cream); color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.1; }
  .loop-mobile-nav button span { color: var(--purple); font-size: 11px; }
  .loop-mobile-nav button[aria-current="true"] { border-color: var(--purple); background: var(--purple); color: var(--cream); }
  .loop-mobile-nav button[aria-current="true"] span { color: var(--yellow); }
  .loop-grid { display: block; }
  .loop-card { display: none; min-height: 250px; padding: 20px; }
  .loop-card.is-active { display: block; }
  .loop-card h3 { font-size: 40px; }
  .time-section { padding: 72px 0; }
  .time-layout { gap: 30px; }
  .time-copy > p:not(.section-kicker) { margin-top: 20px; }
  .time-total { margin-top: 28px; }
  .time-table-head, .time-row { grid-template-columns: minmax(0, 2.1fr) .65fr .75fr; gap: 8px; }
  .time-table-head { min-height: 32px; font-size: 7px; letter-spacing: .06em; }
  .time-row { min-height: 48px; font-size: 10px; }
  .time-table-head, .time-row > span { white-space: nowrap; }
  .time-footnote { margin-top: 10px; }
  #surfaces .section-heading-row { margin-bottom: 26px; }
  .surface-mobile-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 14px; }
  .surface-mobile-nav button { border: 1px solid var(--border); border-radius: 999px; padding: 9px 6px; background: var(--cream); color: var(--muted); font-size: 10px; font-weight: 700; }
  .surface-mobile-nav button[aria-current="page"] { border-color: var(--purple); background: var(--purple); color: var(--cream); }
  .surface-grid { display: block; }
  .surface-grid .surface-card { display: none; min-height: 0; }
  .surface-grid .surface-card.is-active { display: flex; }
  .surface-grid .surface-card[data-surface-panel="extension"] { min-height: 720px; }
  .surface-card [data-editable] { max-width: 100%; }
  .surface-card [style*="width"] { max-width: 100% !important; }
  .ui-showcase-dashboard { height: 360px; min-height: 360px; margin-top: 14px; }
  .mobile-showcase { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.hero-fruit, .button, .site-nav a { animation: none; transition: none; } }

body[data-editor-mode="true"] [data-editable] { outline: 1px dashed color-mix(in srgb, var(--purple) 65%, transparent); outline-offset: 4px; cursor: text; }
body[data-editor-mode="true"] [data-editable]:focus { outline: 2px solid var(--purple); outline-offset: 5px; }
body[data-editor-mode="true"] [data-media-editable] { outline: 1px dashed color-mix(in srgb, var(--yellow) 75%, var(--purple)); outline-offset: 5px; cursor: crosshair; }
body[data-editor-mode="true"] [data-media-editable]:focus { outline: 2px solid var(--yellow); outline-offset: 6px; }