/* The homepage hero: a live Foxstep window beside the headline, the film beneath.
   Everything is scoped to .hl. The window's sizes are design pixels inside a stage that home-live.js scales.
   From the 14 Oct 2026 prototype in docs/launch/2026-10-14/home-live-window. */

/* Tokens, from the site's own */
.hl {
  --ink: var(--dark-text); --body: var(--body-text); --muted: var(--muted-text);
  --orange: var(--forest); --orange-dark: var(--forest-dark); --hair: var(--light-border); --hair-2: var(--medium-border);
  --mac: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --mac-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --panel-shadow: 0 0 0 .5px rgb(0 0 0 / .16), 0 4px 12px rgb(0 0 0 / .06), 0 26px 60px -18px rgb(17 17 17 / .5);
  color: var(--ink); line-height: 1.55;   /* the site's body is 1.7; the window was drawn at 1.55 */
}

.hl * { box-sizing: border-box; }
/* The site's img rule sets max-width without height: keep every picture's own shape */
.hl img { height: auto; }
/* The site balances and prettifies every heading and paragraph; inside the window, text wraps as the app's does */
.hl .stage :is(h1, h2, h3, h4, h5, p) { text-wrap: wrap; }
.hl .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero and the screen after it: one window, pinned while the words beside it change (as on granola.ai).
   The skies bleed right, so the page clips sideways without becoming a scroll box, which would stop the pinning. */
.hl { overflow-x: clip; }
.hl .story {
  position: relative; max-width: 1200px; margin: 0 auto; padding: var(--hl-nav, 72px) 32px 0;
  display: grid; grid-template-columns: minmax(330px, 430px) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 60px);
  container-type: inline-size;
}
.hl .hl-hero { grid-column: 1; grid-row: 1; min-height: calc(100svh - var(--hl-nav, 72px)); display: flex; align-items: center; }
.hl .hero-copy { position: relative; z-index: 2; padding: 24px 0 58px; }
.hl .hero-pill { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 20px; padding: .3rem .8rem; border: 1px solid var(--hair-2); border-radius: 999px; background: #fff; font-size: .82rem; color: var(--body); }
.hl .hero-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* One line, as wide as the column; the E's side bearing pulled back so its stem lines up with the text below */
.hl .hl-hero h1 { margin: 0 0 0 -.05em; font-weight: 600; font-size: 4.1rem; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
/* Marker: the word that matters, underlined in two quick strokes (desktop/Brand/marker). */
.hl .hl-hero h1 .hl-mark { padding-bottom: .08em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M6 12C60 4 140 4 194 9' fill='none' stroke='%23ff4f00' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M22 24C78 18 132 18 176 21' fill='none' stroke='%23ff4f00' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .34em; }
.hl .hl-sub { max-width: 24em; margin: 18px 0 0; font-size: 1.13rem; line-height: 1.5; color: var(--body); text-wrap: pretty; }
.hl .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.hl .hero-link { font-weight: 500; color: var(--orange); text-decoration: none; }
.hl .hero-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hl .hero-fine { margin: 14px 0 0; font-size: .85rem; line-height: 1.55; color: var(--muted); }
.hl .works { max-width: 430px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--hair); }
.hl .works-label { margin: 0 0 9px; font-size: .82rem; color: var(--muted); }
.hl .works-list { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; font-size: .9rem; font-weight: 500; color: var(--body); }
.hl .works-list li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hl .works-list svg { width: 16px; height: 16px; color: var(--ink); }

/* The window may run 40 px past the grid on the right, as the skies run on to the edge */
.hl .hero-visual { grid-column: 2; grid-row: 1 / span 2; position: relative; z-index: 3; min-width: 0; margin-right: calc(-1 * clamp(0px, (100vw - 1200px) / 2, 40px)); }
.hl .pin { --away: 0; position: sticky; top: var(--hl-nav, 72px); height: calc(100svh - var(--hl-nav, 72px)); display: flex; flex-direction: column; justify-content: center; }
/* As the page moves on, the skies, the PDF and the scene row drift off and leave the window on its own */
.hl .sky-dawn { translate: calc(var(--away) * 180px) calc(var(--away) * -30px); opacity: calc(1 - var(--away)); }
.hl .sky-dusk { translate: calc(var(--away) * -70px) calc(var(--away) * 110px); opacity: calc(1 - var(--away) * 1.25); }
.hl .page { translate: calc(var(--away) * -110px) 0; opacity: calc(1 - var(--away) * 1.4); }
.hl .tour { translate: 0 calc(var(--away) * 14px); opacity: calc(1 - var(--away) * 1.7); }

/* The screen after the hero: what makes it fit your Mac, in ruled rows that run on behind the window */
.hl .hl-why { grid-column: 1; grid-row: 2; position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: var(--hl-nav, 72px) 0 40px; }
/* Each sentence on its own line, sized so the longer one fits the 430 px column */
.hl .hl-why h2 { margin: 0 0 36px; font-size: clamp(1.9rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; color: var(--ink); }
.hl .hl-why h2 span { display: block; white-space: nowrap; }
.hl .why-list { margin: 0; padding: 0; list-style: none; }
.hl .why-list li { position: relative; display: flex; align-items: center; gap: 18px; min-height: 84px; padding: 16px 0; font-size: 1.03rem; line-height: 1.45; color: var(--body); }
.hl .why-list li::before, .hl .why-list li:last-child::after { content: ""; position: absolute; left: -32px; width: calc(100cqw + 64px); height: 1px; background: var(--hair-2); }
.hl .why-list li::before { top: 0; }
.hl .why-list li:last-child::after { bottom: 0; }
/* Two empty ruled rows, fading out, so the rules read as a page rather than a box */
.hl .why-list::after { content: ""; display: block; width: calc(100cqw + 64px); height: 168px; margin-left: -32px; background: repeating-linear-gradient(to bottom, transparent 0 83px, var(--hair) 83px 84px); -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.hl .why-list b { font-weight: 600; color: var(--ink); }
.hl .why-list svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Dashed edges on the site's grid frame that screen, as on granola.ai */
.hl .story::after { content: ""; position: absolute; grid-column: 1 / -1; grid-row: 2; inset: 0 -32px; border-inline: 1px dashed var(--hair-2); pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }

.hl .stage-box { position: relative; height: calc(640px * var(--s, .8)); }
/* text-align: the centred one-column hero must not centre the app's own text */
.hl .stage { position: absolute; left: 0; top: 0; width: 860px; height: 640px; transform: scale(var(--s, .8)); transform-origin: 0 0; text-align: left; }

/* The collage: dawn and dusk skies (Paper shaders), a PDF page */
.hl .sky { position: absolute; overflow: hidden; border-radius: 22px; }
.hl .sky canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.hl .sky-dawn { left: 250px; top: 0; width: 1300px; height: 486px; background: linear-gradient(120deg, #ffffff, #ffc4a3 28%, #ff8a4c 50%, #ff6a2b 72%, #ff4f00); }
.hl .sky-dusk { left: 64px; top: 404px; width: 352px; height: 236px; background: linear-gradient(120deg, #c83a00, #5a1e05 35%, #262626 65%, #111111); }
.hl .page { position: absolute; left: 0; top: 128px; width: 214px; height: 300px; padding: 22px 18px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 18px 40px -16px rgb(17 17 17 / .35); font-family: var(--mac-serif); color: #222; }
.hl .page h4 { margin: 0; font: 600 15px/1.18 var(--mac-serif); letter-spacing: -.01em; }
.hl .page .pg-meta { margin: 7px 0 12px; padding-bottom: 10px; border-bottom: 1px solid #eee; font-size: 8px; color: #888; }
.hl .page h5 { margin: 0 0 6px; font: 600 10.5px var(--mac-serif); }
.hl .page ol { margin: 0; padding-left: 13px; font-size: 8.2px; line-height: 1.85; color: #333; }
.hl .page .pg-num { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 7px; color: #aaa; }

/* The window */
.hl .win { position: absolute; left: 124px; top: 52px; width: 612px; height: 440px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 .5px rgb(0 0 0 / .16), 0 2px 6px rgb(0 0 0 / .06), 0 30px 70px -24px rgb(17 17 17 / .48); font-family: var(--mac); color: #1d1d1f; }
.hl .win svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hl .app { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.hl .bar { position: relative; flex: none; height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.hl .lights { display: flex; gap: 7px; }
.hl .lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .14); }
.hl .lights i:nth-child(2) { background: #febc2e; }
.hl .lights i:nth-child(3) { background: #28c840; }
.hl .bar-safari { border-bottom: 1px solid #ececec; }
.hl .bar-title { position: absolute; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 600; color: #4a4a4a; }

/* The sample shop (Juniper & Oak), redrawn from the app's own shop */
.hl .shop { flex: 1; min-height: 0; display: flex; }
.hl .shop-side { flex: none; width: 156px; display: flex; flex-direction: column; padding: 14px 10px 12px; background: #f5f5f2; border-right: 1px solid #e7e7e2; }
.hl .shop-brand { display: flex; align-items: center; gap: 8px; padding: 0 4px 14px; }
.hl .shop-logo { flex: none; width: 26px; height: 26px; border-radius: 6px; background: #2f5d46; color: #fff; font-size: 8.5px; font-weight: 700; line-height: 26px; text-align: center; }
.hl .shop-brand b { display: block; font-size: 13px; font-weight: 600; line-height: 1.15; }
.hl .shop-brand small { display: block; font-size: 10px; color: #8a8a85; }
.hl .shop-nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hl .shop-nav li { padding: 6px 10px; border-radius: 7px; font-size: 13px; color: #2b2b2b; transition: background-color .2s, color .2s; }
.hl .shop-nav li.on { background: #e3e8e2; color: #2f5d46; font-weight: 600; }
.hl .shop-note { margin: auto 0 0; padding: 0 4px; font-size: 9.5px; color: #8a8a85; }
.hl .shop-main { position: relative; flex: 1; min-width: 0; }
.hl .view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), visibility 0s linear .22s; }
.hl .view.is-on { opacity: 1; visibility: visible; transition: opacity .22s var(--ease), visibility 0s; }
.hl .view-head { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid #ececec; }
.hl .view-head h5 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.hl .view-body { padding: 18px 24px; }
.hl .s-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; background: #2f5d46; color: #fff; font-size: 12.5px; font-weight: 600; }
.hl .s-btn svg { width: 13px; height: 13px; stroke-width: 2.2; }
.hl .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hl .card { padding: 10px 12px; border: 1px solid #e6e6e2; border-radius: 9px; }
.hl .card small { display: block; font-size: 10.5px; color: #6b6b66; }
.hl .card b { display: block; margin-top: 3px; font-size: 19px; font-weight: 650; }
.hl .cap { margin: 16px 0 4px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: #77776f; }
.hl .orders { font-size: 12.5px; }
.hl .orders div { display: grid; grid-template-columns: 54px 1fr auto; padding: 7px 0; }
.hl .orders span:first-child { color: #8a8a85; }
.hl .t-head, .hl .t-row { display: grid; grid-template-columns: 1fr 64px 50px 56px; align-items: center; padding: 0 24px; }
.hl .t-head { height: 34px; border-bottom: 1px solid #ececec; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; color: #77776f; }
.hl .t-row { height: 46px; border-bottom: 1px solid #f0f0ee; font-size: 12.5px; }
.hl .t-name { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
.hl .t-ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: #e8ece6; color: #4d7a60; }
.hl .t-ico svg { width: 13px; height: 13px; }
.hl .t-dim { color: #77776f; }
.hl .pill { display: inline-block; padding: 2px 7px; border-radius: 10px; background: #e5efe6; color: #2f6b45; font-size: 10px; font-style: normal; font-weight: 600; }
.hl .pill-draft { background: #efefed; color: #6d6d68; }
.hl .form { display: grid; gap: 12px; max-width: 362px; padding: 20px 24px; }
.hl .field label { display: block; margin-bottom: 5px; font-size: 11.5px; font-weight: 500; color: #55554f; }
.hl .input { position: relative; height: 32px; display: flex; align-items: center; padding: 0 10px; border: 1px solid #dcdcd8; border-radius: 7px; background: #fff; font-size: 13px; white-space: pre; }
.hl .input .ph { color: #a9a9a3; }
.hl .input .val:not(:empty) + .ph { display: none; }
.hl .input .caret { display: none; width: 1.5px; height: 15px; margin-left: 1px; background: #2563eb; animation: hl-blink 1.05s steps(1) infinite; }
.hl .input .val:empty ~ .caret { order: -1; margin: 0 1px 0 0; }
.hl .input.is-focus { border-color: #9cb7ef; box-shadow: 0 0 0 3px rgb(37 99 235 / .14); }
.hl .input.is-focus .caret { display: inline-block; }
@keyframes hl-blink { 50% { opacity: 0; } }
.hl .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hl .form-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.hl .cancel { margin-right: auto; padding: 0 8px; font-size: 12.5px; color: #66665f; }
.hl .s-ghost { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid #dcdcd8; border-radius: 7px; font-size: 12.5px; }

/* Foxstep's own window, from the app's views */
.hl .app-fox .bar { height: 44px; }
.hl .app-fox .lights i { background: #dedede; }
.hl .fx-nav { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 7px; border: 1px solid #e6e6e6; border-radius: 13px; color: #6b6b6b; }
.hl .fx-nav svg, .hl .fx-ico { width: 16px; height: 16px; color: #6b6b6b; }
.hl .fx-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hl .fx-right .fx-ico circle { fill: currentColor; stroke: none; }
.hl .fx-share { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 13px; border-radius: 14px; background: #2b2b2b; color: #fff; font-size: 12.5px; font-weight: 600; }
.hl .fx-share svg { width: 13px; height: 13px; stroke-width: 2; }
.hl .fx-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.hl .fx-actions { flex: none; height: 40px; display: flex; align-items: center; gap: 16px; padding: 0 12px; border-top: 1px solid #eee; font-size: 12.5px; color: #555; }
.hl .fx-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: #f2f2f2; }
.hl .fx-seg span { width: 27px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: #6a6a6a; transition: background-color .2s, box-shadow .2s, color .2s; }
.hl .fx-seg span.on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgb(0 0 0 / .14); }
.hl .fx-seg svg { width: 14px; height: 14px; }
.hl .fx-act { display: inline-flex; align-items: center; gap: 6px; }
.hl .fx-act svg { width: 15px; height: 15px; color: #7a7a7a; }
.hl .fx-act kbd { font: 10px var(--mac); color: #a6a6a6; }
.hl .fx-push { margin-left: auto; }

.hl .guide-view { position: absolute; inset: 0; }
.hl .guide-scroll { padding: 22px 64px 40px; }
.hl .g-title { min-height: 2.24em; margin: 0; font: 700 27px/1.12 var(--mac-serif); letter-spacing: -.01em; color: #1d1d1f; }
.hl .g-meta { display: flex; gap: 6px; margin: 12px 0 10px; }
.hl .g-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border: 1px solid #e3e3e3; border-radius: 11px; font-size: 11px; color: #555; }
.hl .g-pill svg { width: 12px; height: 12px; color: #6b6b6b; }
.hl .g-intro { min-height: 1.45em; margin: 0 0 16px; font-size: 14.5px; color: #3b3b3b; }
.hl .g-app { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; font-size: 12px; color: #777; }
.hl .g-app svg, .hl .rec-latest small svg { width: 13px; height: 13px; }
.hl .g-step { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #2b2b2b; }
.hl .g-step p { margin: 0; }
.hl .g-step b { font-weight: 650; }
.hl .g-num { flex: none; width: 24px; height: 24px; margin-top: -2px; display: grid; place-items: center; border-radius: 50%; background: #f1f1f1; font-size: 11px; color: #777; }
.hl .g-shot { position: relative; margin: 0 0 22px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px #e4e4e4; }
.hl .g-note { min-height: 1.45em; margin: -2px 0 10px; padding-left: 12px; border-left: 2px solid #e2e2e2; font-size: 13.5px; color: #444; }

/* The capture's orange outline: orange with a white edge either side */
.hl .mk { position: absolute; border: 2px solid var(--orange); border-radius: 5px; box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(255 255 255 / .9); }

/* Foxstep's record options: the app's popover, before Start recording */
.hl .opts { position: absolute; left: 548px; top: 128px; width: 300px; padding: 12px 14px 14px; border-radius: 14px; background: #fff; box-shadow: var(--panel-shadow); font-family: var(--mac); color: #1d1d1f; }
.hl .opts svg { width: 17px; height: 17px; fill: none; stroke: #6b6b6b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hl .opts-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 8px; background: #f0f0f0; font-size: 12.5px; text-align: center; color: #3b3b3b; }
.hl .opts-seg span { padding: 5px 0; border-radius: 6px; }
.hl .opts-seg .on { background: #e0e0e0; font-weight: 500; }
.hl .opts-note { margin: 8px 2px 6px; font-size: 11px; line-height: 1.35; color: #8a8a8a; }
.hl .opts-row { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 2px; font-size: 13.5px; }
.hl .sw { position: relative; width: 34px; height: 20px; margin-left: auto; border-radius: 10px; background: #e6e6e6; transition: background-color .25s var(--ease); }
.hl .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .25s var(--ease); }
.hl .opts-row.is-on .sw { background: var(--orange); }
.hl .opts-row.is-on .sw::after { transform: translateX(14px); }
.hl .opts-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; height: 34px; margin: 10px 0 0 auto; padding: 0 16px; border-radius: 17px; background: #262626; color: #fff; font-size: 13.5px; font-weight: 600; }
.hl .opts-go kbd { font: 11px var(--mac); color: #b9b9b9; }

/* The camera bubble on screen while recording; a real clip at img/presenter.mp4 replaces the silhouette */
.hl .cam { position: absolute; left: 138px; top: 328px; width: 104px; height: 104px; overflow: hidden; border-radius: 50%; background: linear-gradient(140deg, #ff8a4c, #ff4f00 58%, #262626); box-shadow: 0 0 0 3px #fff, 0 10px 24px -8px rgb(17 17 17 / .55); }
.hl .cam svg { position: absolute; left: 18px; top: 19px; width: 68px; height: 85px; }
.hl .cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hl .cam.has-video video { opacity: 1; }
.hl .cam.has-video svg { display: none; }

/* Export: the guide's files under Share, as the app's export tiles */
.hl .xp { position: absolute; left: 404px; top: 94px; width: 324px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: var(--panel-shadow); font-family: var(--mac); color: #1d1d1f; transform-origin: 92% 0; }
.hl .xp-head { margin: 0 2px 9px; font-size: 13px; font-weight: 650; }
.hl .xp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hl .xp-tile { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 10px; background: #f6f6f5; font-size: 12px; font-weight: 500; transition: background-color .2s, box-shadow .2s; }
.hl .xp-tile svg { width: 22px; height: 22px; fill: none; stroke: #4a4a4a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hl .xp-tile.is-hover { background: #fff1e8; box-shadow: inset 0 0 0 1.5px var(--orange); }
.hl .xp-detail { margin: 9px 2px 0; font-size: 11.5px; color: #8a8a8a; }
.hl .pg-badge { position: absolute; right: -10px; top: -10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--orange); color: #fff; font: 600 11px/1 var(--mac); box-shadow: 0 6px 14px -6px rgb(200 58 0 / .7); opacity: 0; visibility: hidden; }
.hl .pg-badge svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Your AI: an agent on this Mac reads the guide through Foxstep */
.hl .app-ai { background: #fbfaf8; }
.hl .bar-ai { border-bottom: 1px solid #ecebe7; }
.hl .ai-who { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; font-size: 13px; font-weight: 650; }
.hl .ai-who svg { width: 16px; height: 16px; }
.hl .ai-conn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6b6b6b; }
.hl .ai-conn i { width: 7px; height: 7px; border-radius: 50%; background: #34a853; }
.hl .ai-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 24px 8px; overflow: hidden; }
.hl .ai-q { align-self: flex-end; max-width: 75%; margin: 0 0 4px; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: #ecebe7; font-size: 13.5px; }
.hl .ai-tool { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; color: #6b6b6b; }
.hl .ai-tool img { width: 16px; height: 16px; border-radius: 4px; }
.hl .ai-tool b { font-weight: 600; color: #3b3b3b; }
.hl .ai-steps { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: #2b2b2b; }
.hl .ai-steps b { font-weight: 650; }
.hl .ai-shot { position: relative; width: 236px; margin: 2px 0 0 20px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px #e4e4e4; }
.hl .ai-then { min-height: 1.45em; margin: 2px 0 0; font-size: 13.5px; color: #2b2b2b; }
.hl .ai-input { flex: none; display: flex; align-items: center; height: 44px; margin: 0 16px 12px; padding: 0 8px 0 14px; border: 1px solid #e2e1dd; border-radius: 14px; background: #fff; font-size: 13.5px; white-space: pre; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.hl .ai-ph { color: #a3a29d; }
.hl .ai-typed:not(:empty) ~ .ai-ph { display: none; }
.hl .ai-input .caret { display: none; width: 1.5px; height: 16px; margin-left: 1px; background: #1d1d1f; animation: hl-blink 1.05s steps(1) infinite; }
.hl .ai-typed:empty ~ .caret { order: -1; margin: 0 1px 0 0; }
.hl .ai-input.is-focus .caret { display: inline-block; }
.hl .ai-send { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #1d1d1f; color: #fff; }
.hl .ai-send svg { width: 14px; height: 14px; stroke-width: 2.3; }

/* Foxstep's recording panel, redrawn from the app */
.hl .rec { position: absolute; left: 560px; top: 258px; width: 296px; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: var(--panel-shadow); font-family: var(--mac); color: #1d1d1f; }
.hl .rec svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hl .rec-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 14px; border-bottom: 1px solid #efefef; }
.hl .rec-state b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; }
.hl .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4f00; animation: hl-pulse 1.6s ease-in-out infinite; }
@keyframes hl-pulse { 50% { opacity: .35; } }
.hl .rec-state small { display: block; margin-top: 2px; font-size: 11px; color: #8a8a8a; font-variant-numeric: tabular-nums; }
.hl .rec-pause { width: 17px; height: 17px; margin-left: auto; color: #8a8a8a; stroke-width: 2.4; }
.hl .rec-stop { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 16px; background: #262626; color: #fff; font-size: 13px; font-weight: 600; }
.hl .rec-stop i { width: 9px; height: 9px; border-radius: 2px; background: #fff; }
.hl .rec-stop kbd { font: 10px var(--mac); color: #b9b9b9; }
.hl .rec-list { position: relative; height: 4px; overflow: hidden; transition: height .35s var(--ease); }
.hl .rec-track { padding: 6px 0; transition: transform .35s var(--ease); }
.hl .rec-row { display: flex; align-items: baseline; gap: 10px; height: 26px; padding: 0 14px; font-size: 12.5px; color: #333; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.hl .rec-row.is-on { opacity: 1; transform: none; }
.hl .rec-row span { width: 12px; flex: none; color: #9a9a9a; }
.hl .rec-latest { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 4px 14px 12px; transition: opacity .25s var(--ease); }
.hl .rec-latest img { flex: none; width: 90px; height: 61px; border-radius: 6px; box-shadow: 0 0 0 1px #e3e3e3; object-fit: cover; object-position: left top; }
.hl .rec-latest p { margin: 0; }
.hl .rec-latest b { display: block; font-size: 13px; font-weight: 650; line-height: 1.3; }
.hl .rec-latest small { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; color: #8a8a8a; }
.hl .rec-latest.is-empty { opacity: 0; }
.hl .rec-foot { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 9px 14px; border-top: 1px solid #efefef; font-size: 11.5px; line-height: 1.35; color: #8a8a8a; }
.hl .rec-foot svg { flex: none; width: 15px; height: 15px; color: #ff4f00; }
.hl .rec-foot.is-said { color: #2b2b2b; }

/* The orange outline, the click ring and the pointer */
.hl .mark { position: absolute; left: 0; top: 0; width: 100px; height: 30px; border: 3px solid var(--orange); border-radius: 9px; box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 1.5px rgb(255 255 255 / .95), 0 8px 18px -8px rgb(200 58 0 / .5); opacity: 0; visibility: hidden; pointer-events: none; }
.hl .ring { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid rgb(17 17 17 / .35); border-radius: 50%; opacity: 0; visibility: hidden; }
.hl .cursor { position: absolute; left: 0; top: 0; width: 20px; height: 28px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .28)); }
.hl .cursor svg { display: block; width: 20px; height: 28px; }

/* Scene row under the window */
.hl .tour { position: relative; z-index: 3; width: max-content; max-width: 100%; display: flex; align-items: center; gap: 2px; margin: 14px auto 0; padding: 5px; border-radius: 14px; background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--hair), 0 10px 26px -16px rgb(17 17 17 / .4); }
.hl .tour-step { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 500 .9rem/1 var(--font-ui); cursor: pointer; transition: color .2s, background-color .2s; }
.hl .tour-step:hover { color: var(--ink); background: rgb(17 17 17 / .04); }
.hl .tour-step[aria-pressed="true"] { color: var(--ink); background: rgb(17 17 17 / .06); }
.hl .tour-step svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hl .tour-step svg .fill { fill: currentColor; stroke: none; }
.hl .tour-step .i-rec circle { fill: var(--orange); stroke: none; }
.hl .tour-bar { position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 1px; }
.hl .tour-bar i { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; }
.hl .tour-pause { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: color .2s, background-color .2s; }
.hl .tour-pause:hover { color: var(--ink); background: rgb(17 17 17 / .04); }
.hl .tour-pause svg { width: 15px; height: 15px; fill: currentColor; }
.hl .tour-pause .i-play, .hl .tour-pause.is-paused .i-pause { display: none; }
.hl .tour-pause.is-paused .i-play { display: block; }

/* The film: one big line on white, then the film in the dark with the three answers under it,
   where granola.ai shows its logos. The band is lit from the horizon, like the page's night ending. */
.hl .film { padding: clamp(96px, 14vh, 168px) 0 0; }
.hl .film-line { max-width: 12ch; margin: 0 auto clamp(48px, 7vh, 88px); padding: 0 24px; text-align: center; font-size: clamp(3rem, 1.5rem + 5.4vw, 7.5rem); font-weight: 600; line-height: .95; letter-spacing: -.055em; color: var(--ink); text-wrap: balance; }
.hl .film-band { position: relative; padding: clamp(56px, 7vw, 112px) 32px clamp(40px, 5vw, 72px); background: var(--night); }
.hl .film-band::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, #ff8a4c 18%, #ff4f00 36%, #c83a00 58%, #262626 80%, transparent); }
.hl .film-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 50% 0%, rgb(200 58 0 / .22), rgb(38 38 38 / .12) 45%, transparent 75%); }
.hl .film-stage { position: relative; z-index: 1; isolation: isolate; max-width: 1180px; margin: 0 auto; padding: clamp(14px, 2.6vw, 34px); overflow: hidden; border-radius: 30px; background: linear-gradient(120deg, #ffc4a3, #ff4f00 35%, #5a1e05 65%, #111111); box-shadow: 0 34px 80px -44px rgb(38 38 38 / .6); }
.hl .film-sky { position: absolute; inset: 0; z-index: -1; }
.hl .film-sky canvas { width: 100% !important; height: 100% !important; }
.hl .film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 26px 60px -26px rgb(17 17 17 / .65); }
.hl .film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl .film-ctl { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.hl .film-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .74); color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgb(255 255 255 / .6), 0 4px 14px -4px rgb(0 0 0 / .3); cursor: pointer; transition: background-color .2s, transform .2s; }
.hl .film-btn:hover { background: #fff; transform: translateY(-1px); }
.hl .film-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hl #filmPlay svg { fill: currentColor; stroke: none; }
.hl .film-btn .i-on, .hl .film-btn.is-on .i-off, .hl #filmPlay .i-pause, .hl #filmPlay.is-playing .i-play { display: none; }
.hl .film-btn.is-on .i-on, .hl #filmPlay.is-playing .i-pause { display: block; }

.hl .proof { max-width: 1180px; margin: 40px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.hl .proof li + li { border-left: 1px solid var(--hair); }
.hl .proof a { display: block; height: 100%; padding: 22px 26px; text-decoration: none; }
.hl .proof strong { display: block; font-weight: 600; transition: color .2s; }
.hl .proof a > span { display: block; margin-top: 2px; font-size: .9rem; color: var(--muted); }
.hl .proof a:hover strong { color: var(--orange); }
.hl .film-band .proof { position: relative; z-index: 1; margin-top: clamp(32px, 4vw, 52px); border-color: rgb(255 255 255 / .14); }
.hl .film-band .proof li + li { border-color: rgb(255 255 255 / .14); }
.hl .film-band .proof strong { color: #fff; }
.hl .film-band .proof a > span { color: rgb(255 255 255 / .64); }
.hl .film-band .proof a:hover strong { color: #ff8a4c; }
.hl .film-band :focus-visible { outline-color: #fff; }

@media (max-width: 1000px) {
  .hl .story { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--hl-nav, 72px) + 28px); text-align: center; }
  .hl .hl-hero { min-height: 0; display: block; }
  .hl .hero-copy { padding: 0 0 6px; }
  .hl .hl-hero h1 { margin-left: 0; font-size: clamp(2.5rem, 11vw, 4.1rem); }
  .hl .hl-sub { margin-left: auto; margin-right: auto; }
  .hl .hero-actions { justify-content: center; }
  .hl .hero-visual { grid-column: 1; grid-row: 2; margin: 26px 0 0; }
  .hl .pin { position: static; height: auto; }
  .hl .works { margin-left: auto; margin-right: auto; }
  .hl .works-list { justify-content: center; }
  .hl .hl-why { grid-row: 3; min-height: 0; padding: 72px 0 0; text-align: left; }
  .hl .hl-why h2 span { white-space: normal; }
  .hl .story::after { content: none; }
}
@media (max-width: 640px) {
  .hl .story { padding-left: 16px; padding-right: 16px; }
  .hl .why-list li::before, .hl .why-list li:last-child::after { left: -16px; width: calc(100cqw + 32px); }
  .hl .why-list::after { margin-left: -16px; width: calc(100cqw + 32px); }
  .hl .film { padding-top: 80px; }
  .hl .film-band { padding: 40px 16px 32px; }
  .hl .film-stage { border-radius: 22px; }
  .hl .proof { grid-template-columns: 1fr; margin: 28px 0 0; }
  .hl .proof li + li { border-left: 0; border-top: 1px solid var(--hair); }
  .hl .tour { gap: 0; padding: 4px; }
  .hl .tour-step { height: 36px; padding: 0 8px; gap: 6px; font-size: .8rem; }
  .hl .tour-step svg { display: none; }
  .hl .tour-bar { left: 8px; right: 8px; }
  .hl .tour-pause { width: 32px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .hl *, .hl *::before, .hl *::after { transition-duration: .01ms !important; animation: none !important; }
  .hl .sky, .hl .page, .hl .tour { translate: none; }
}


/* Before the tour runs, and without JavaScript, the window rests on its first frame: the shop and the record options */
.hl .app-fox, .hl .app-ai, .hl .rec, .hl .xp, .hl .cam, .hl .cursor { opacity: 0; visibility: hidden; }
.hl .tour[hidden], .hl .film-ctl[hidden] { display: none; }

/* Download buttons carry the Apple mark */
.marketing-home .i-apple { flex: none; width: 17px; height: 17px; margin: -3px 1px 0 -2px; }
.marketing-home .btn-download .i-apple { width: 15px; height: 15px; }

/* The nav's download button steps aside while the hero's own is on screen */
.marketing-home .navbar .nav-inner .nav-cta { transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), opacity .3s var(--ease), visibility 0s; }
.marketing-home .navbar .nav-inner .nav-cta.is-tucked { opacity: 0; transform: translateY(-4px); visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }

/* After you press Stop: the list stays put while the panels pass and marks the one in view (as on granola.ai).
   The panels keep their own pieces from the sections they were; only the frame around them is new. */
.marketing-home .home-steps { padding: clamp(96px, 13vh, 150px) 0 clamp(72px, 10vh, 120px); }
.home-steps .steps { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); column-gap: clamp(36px, 5vw, 88px); align-items: start; }
.marketing-home .home-steps .steps-title { grid-column: 2; grid-row: 1; max-width: 13ch; margin: 0 0 clamp(56px, 8vh, 96px); font-size: clamp(2.4rem, 1.3rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -.045em; }
.home-steps .steps-nav { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--hl-nav, 72px) + 32px); display: grid; }
.home-steps .steps-nav a { position: relative; padding: 13px 0; border-bottom: 1px solid var(--light-border); font-size: .95rem; font-weight: 500; line-height: 1.35; color: var(--muted-text); text-decoration: none; transition: color .2s var(--ease); }
.home-steps .steps-nav a:hover, .home-steps .steps-nav a[aria-current="true"] { color: var(--dark-text); }
.home-steps .steps-nav a::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 28px; height: 2px; background: var(--dark-text); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.home-steps .steps-nav a[aria-current="true"]::after { transform: none; }
.home-steps .steps-panels { grid-column: 2; grid-row: 2; display: grid; gap: clamp(96px, 14vh, 160px); min-width: 0; }
.home-steps .step-panel { min-width: 0; scroll-margin-top: calc(var(--hl-nav, 72px) + 32px); }
.home-steps .step-panel h3 { max-width: 18ch; margin: 0 0 1rem; font-size: clamp(1.7rem, 1.15rem + 1.4vw, 2.35rem); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; color: var(--dark-text); text-wrap: balance; }
.home-steps :is(.product-view-copy, .handover-copy, .assistant-copy) p:not(.home-detail) { max-width: 38em; margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.7; }
.home-steps .text-link { display: inline-block; padding-block: .35rem; font-size: .9rem; }
.home-steps .step-panel figure { margin: 2rem 0 0; }
.home-steps .step-panel figcaption { margin-top: .75rem; font-size: .75rem; color: var(--muted-text); }
/* Privacy: the three steps as ruled columns rather than boxes */
.home-steps .privacy-steps { max-width: none; margin: 2rem 0 1.25rem; gap: 0; border-top: 1px solid var(--medium-border); }
.home-steps .privacy-steps li { padding: 1.4rem 1.4rem 0 0; border: 0; border-radius: 0; background: none; }
.home-steps .privacy-steps li + li { padding-left: 1.4rem; border-left: 1px solid var(--light-border); }
.home-steps .privacy-steps h4 { margin: 0 0 .45rem; font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; color: var(--dark-text); }
/* Hand it over: the copy stacks above the live walkthrough and its files */
.home-steps .handover-copy { display: block; }
.home-steps .handover-formats { margin-top: 2rem; }
.home-steps .later { margin-top: clamp(2.5rem, 5vw, 4rem); }
.home-steps .later h4 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--dark-text); }
@media (max-width: 900px) {
  .home-steps .steps { grid-template-columns: minmax(0, 1fr); }
  .home-steps .steps-nav { display: none; }
  .marketing-home .home-steps .steps-title, .home-steps .steps-panels { grid-column: 1; }
  .home-steps .steps-panels { grid-row: 2; }
}
@media (max-width: 700px) {
  .home-steps .privacy-steps li, .home-steps .privacy-steps li + li { padding: 1.2rem 0; border-left: 0; }
  .home-steps .privacy-steps li + li { border-top: 1px solid var(--light-border); }
}

/* The bar becomes a floating pill once the page scrolls (as on granola.ai); everything in it stays where it was */
.marketing-home .navbar .nav-inner { border-radius: 999px; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
@supports (animation-timeline: scroll()) {
  .marketing-home .navbar { animation: nav-clear linear both; animation-timeline: scroll(); animation-range: 0 56px; }
  .marketing-home .navbar .nav-inner { animation: nav-pill linear both; animation-timeline: scroll(); animation-range: 0 56px; }
  @keyframes nav-clear { from { border-bottom-color: transparent; } to { background-color: transparent; border-bottom-color: transparent; } }
  @keyframes nav-pill { to { background-color: rgb(255 255 255 / .86); box-shadow: 0 0 0 1px var(--light-border), 0 12px 32px -20px rgb(17 17 17 / .45); } }
}
@media (max-width: 1240px) { .marketing-home .navbar .nav-inner { margin-inline: 8px; } }