/* Home: the fridge-door landing page, ported from the approved design.
   Loads after site.css; where the two disagree, these rules win on this page.
   The shared header and footer keep their own styles (buttons here are scoped to main). */

:root {
  --serif-scale: 1;
  --nav-h: 68px;       /* the shared floating header: 10px inset plus the 58px capsule */
  --head-h: 84px;      /* space above the hero copy inside the door, as on the landing page */
  --door-inset: 10px;
  --peek: 170px;
  --hero-space: clamp(32px, 5.5vh, 64px);
}

body.home { overflow-x: hidden; }
html { -webkit-tap-highlight-color: transparent; }

[id] { scroll-margin-top: calc(var(--head-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
main :focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; border-radius: 6px; }
main .pill:focus-visible { border-radius: 999px; }
.plan.hi :focus-visible { outline-color: var(--butter-strong); }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* type scale */
.d1, .d2, .d3, .d4 { font-family: var(--serif); font-weight: var(--serif-weight); letter-spacing: var(--serif-track); }
.d1 { font-size: calc(var(--serif-scale) * clamp(46px, 7vw, 88px)); line-height: .98; }
.d2 { font-size: calc(var(--serif-scale) * clamp(34px, 4.4vw, 54px)); line-height: 1.04; }
.d3 { font-size: calc(var(--serif-scale) * clamp(28px, 3.2vw, 40px)); line-height: 1.08; }
.d4 { font-size: calc(var(--serif-scale) * 24px); line-height: 1.2; }
.d1 em, .d2 em, .d3 em, .d4 em { font-style: italic; }
.body { font-size: 15.5px; color: var(--ink-2); max-width: 44ch; }
.hand { font-family: var(--hand); font-variation-settings: 'INFM' 100; font-weight: 500; color: var(--pen); }
main .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.2, .8, .3, 1); min-height: 0; line-height: 1.55; white-space: normal; }
main .pill:active { transform: translateY(1px) scale(.985); }
main .pill.dark { background: var(--ink); color: #fff; }
main .pill.soft { background: rgba(255, 255, 255, .66); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 4px 10px -6px rgba(31, 28, 25, .16); backdrop-filter: blur(6px); }
main .pill.line { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
main .pill.butter { background: var(--butter-strong); color: var(--ink); }
@media (hover: hover) {
  main .pill.dark:hover { background: #38332E; }
  main .pill.soft:hover { background: rgba(255, 255, 255, .9); }
  main .pill.line:hover { background: rgba(31, 28, 25, .05); }
  main .pill.butter:hover { background: color(display-p3 0.9892 0.8536 0.3669); }
}


/* realistic phone (devices.css iPhone 14 Pro in black, real app screens inside) */
.dev { --s: 0.6; position: relative; flex: none; width: calc(428px * var(--s)); height: calc(868px * var(--s)); max-width: 100%; filter: drop-shadow(0 18px 26px rgba(31, 28, 25, .14)) drop-shadow(0 2px 3px rgba(31, 28, 25, .08)); }
/*! Devices.css v0.2.0 (iPhone 14 Pro subset) | MIT License | github.com/picturepan2/devices.css */
.device,.device *,.device ::after,.device ::before,.device::after,.device::before{box-sizing:border-box;display:block}.device{position:relative;transform:scale(1);z-index:1}.device .device-frame{z-index:1}.device .device-screen{background-color:#000;background-position:center center;background-size:cover;object-fit:cover;position:relative}.device-iphone-14-pro{height:868px;width:428px}.device-iphone-14-pro .device-frame{background:#010101;border:1px solid color(display-p3 0.1038 0.0897 0.1299);border-radius:68px;box-shadow:inset 0 0 4px 2px color(display-p3 0.7482 0.7168 0.8046),inset 0 0 0 6px color(display-p3 0.1999 0.1715 0.248);height:868px;padding:19px;width:428px}.device-iphone-14-pro .device-screen{border-radius:49px;height:830px;width:390px}.device-iphone-14-pro .device-stripe::after,.device-iphone-14-pro .device-stripe::before{border:solid rgba(1,1,1,.25);border-width:0 7px;content:"";height:7px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-14-pro .device-stripe::after{top:85px}.device-iphone-14-pro .device-stripe::before{bottom:85px}.device-iphone-14-pro .device-header{background:#010101;border-radius:20px;height:35px;left:50%;margin-left:-60px;position:absolute;top:29px;width:120px}.device-iphone-14-pro .device-sensors::after,.device-iphone-14-pro .device-sensors::before{content:"";position:absolute}.device-iphone-14-pro .device-sensors::after{background:#010101;border-radius:17px;height:33px;left:50%;margin-left:-60px;top:30px;width:74px}.device-iphone-14-pro .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,color(display-p3 0.382 0.447 0.7576) 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,color(display-p3 0.3051 0.2059 0.5291) 0,color(display-p3 0.1747 0.3318 0.371) 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:9px;left:50%;margin-left:36px;top:42px;width:9px}.device-iphone-14-pro .device-btns{background:color(display-p3 0.1038 0.0897 0.1299);border-radius:2px;height:32px;left:-2px;position:absolute;top:115px;width:3px}.device-iphone-14-pro .device-btns::after,.device-iphone-14-pro .device-btns::before{background:color(display-p3 0.1038 0.0897 0.1299);border-radius:2px;content:"";height:62px;left:0;position:absolute;width:3px}.device-iphone-14-pro .device-btns::after{top:60px}.device-iphone-14-pro .device-btns::before{top:140px}.device-iphone-14-pro .device-power{background:color(display-p3 0.1038 0.0897 0.1299);border-radius:2px;height:100px;position:absolute;right:-2px;top:200px;width:3px}.device-iphone-14-pro .device-home::after,.device-iphone-14-pro .device-home::before{border:solid rgba(1,1,1,.25);border-width:6px 0;content:"";height:6px;position:absolute;width:6px;z-index:9}.device-iphone-14-pro .device-home::after{right:86px;top:0}.device-iphone-14-pro .device-home::before{bottom:0;left:86px}.device-iphone-14-pro.device-black .device-frame{border-color:#5c5956;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #76726f}.device-iphone-14-pro.device-black .device-btns{background:#5c5956}.device-iphone-14-pro.device-black .device-btns::after,.device-iphone-14-pro.device-black .device-btns::before{background:#5c5956}.device-iphone-14-pro.device-black .device-power{background:#5c5956}
.device-iphone-14-pro .device-frame { border-radius: 74px; }
.device-iphone-14-pro .device-screen { border-radius: 55px; }
.dev > .device { position: absolute; top: 0; left: 0; transform: scale(var(--s)); transform-origin: 0 0; }
.dev .device-screen { overflow: hidden; background: #FBFAF9; }
.dev .chrome { position: absolute; top: 0; left: 0; width: 390px; height: 830px; pointer-events: none; color: #000; z-index: 2; }
.dev .chrome .bar { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 50px; font: 600 17px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; }
.dev .chrome .icons { display: flex; gap: 6px; align-items: center; }
.dev .chrome .home { position: absolute; bottom: 9px; left: 50%; width: 136px; height: 5px; margin-left: -68px; background: #000; border-radius: 3px; opacity: .9; }
.dev.dark .chrome { color: #fff; }
.dev.dark .chrome .home { background: #fff; }

/* the call screen inside each phone (it was its own page in the design files; here it is drawn in place) */
.dev .call-screen { position: absolute; top: 0; left: 0; width: 390px; height: 844px; overflow: hidden; color: #fff; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  background:
    radial-gradient(214px 467px at 242px 251px, color(display-p3 .03 .42 .58 / .8) 0%, color(display-p3 .02 .31 .43 / .6) 25%, color(display-p3 .02 .21 .29 / .4) 50%, transparent 100%),
    radial-gradient(211px 458px at 425px 505px, rgba(105, 131, 139, .667) 0%, rgba(79, 98, 104, .5) 25%, rgba(53, 66, 70, .333) 50%, transparent 100%),
    radial-gradient(207px 450px at 98px 615px, color(display-p3 .1 .54 .52 / .93) 0%, color(display-p3 .07 .4 .39 / .7) 25%, color(display-p3 .05 .27 .26 / .47) 50%, color(display-p3 .03 .13 .13 / .23) 75%, transparent 100%),
    radial-gradient(273px 594px at 339px 810px, color(display-p3 .08 .35 .52 / .6) 0%, color(display-p3 .04 .18 .26 / .3) 50%, transparent 100%),
    linear-gradient(50.58deg, #557E81 16.28%, #3C737B 31.61%, #00616D 49.25%, #00444F 71.49%, #002D3C 92.97%); }
.call-screen, .call-screen * { corner-shape: round; }
.call-screen .cs-who { position: absolute; left: 0; right: 0; top: 110px; display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.3; }
/* in the hero only the top of the screen shows above the torn edge, so the call details sit higher */
.stage .call-screen .cs-who { top: 68px; }
.call-screen .cs-dur { font-size: 22px; color: #89DFF5; font-variant-numeric: tabular-nums; }
.call-screen .cs-name { font-size: 46px; font-weight: 600; letter-spacing: -0.4px; }
/* the pill: a dark capsule that closes around the dot, then opens on the next label */
.call-screen .cs-pill { --ease: cubic-bezier(.3, 1.3, .5, 1); position: relative; height: 36px; width: var(--pw, 200px); border-radius: 999px; overflow: hidden; margin-top: 2px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: width .55s var(--ease), background-color .6s ease, box-shadow .6s ease; }
.call-screen .cs-lab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; font-size: 15.5px; font-weight: 500; transition: opacity .45s ease; }
.call-screen .cs-lab i { width: 15px; height: 15px; border-radius: 5px; flex: none; box-shadow: 0 0 10px 1px var(--glow, transparent); transition: background-color .3s ease, box-shadow .3s ease; }
.call-screen .cs-lab b { transition: opacity .2s ease; animation: cs-lab-in .4s ease .12s both; }
.call-screen .cs-lab.dot b { display: none; }
.call-screen .cs-lab.mute b { opacity: 0; }
@keyframes cs-lab-in { from { opacity: 0; } }
.call-screen .cs-measure { position: absolute; visibility: hidden; left: -999px; top: 0; display: inline-flex; gap: 8px; padding: 0 12px; font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.call-screen .cs-measure i { width: 15px; height: 15px; flex: none; }
@media (prefers-reduced-motion: reduce) { .call-screen .cs-pill, .call-screen .cs-lab { transition: none !important; } }

/* hero: the fridge door */
.hero { margin-top: calc(-1 * var(--nav-h)); padding: max(var(--door-inset), env(safe-area-inset-top, 0px)) max(var(--door-inset), env(safe-area-inset-right, 0px)) 0 max(var(--door-inset), env(safe-area-inset-left, 0px)); }
.door { position: relative; border-radius: 34px 34px 0 0; overflow: hidden; isolation: isolate; background: var(--dawn); padding-top: var(--head-h); display: flex; flex-direction: column; height: clamp(600px, calc(100svh - var(--peek) - var(--door-inset)), 1080px); }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"), radial-gradient(45% 38% at 18% 30%, color(display-p3 0.8189 0.5908 0.3766 / .10), transparent 70%), radial-gradient(40% 34% at 82% 62%, color(display-p3 0.8189 0.5908 0.3766 / .08), transparent 70%), radial-gradient(30% 26% at 55% 88%, color(display-p3 0.687 0.4729 0.3131 / .06), transparent 70%), radial-gradient(rgba(31, 28, 25, .055) 1.2px, transparent 1.2px); background-size: 256px 256px, 256px 256px, 100% 100%, 100% 100%, 100% 100%, 24px 24px; }
.hero-h { font-size: calc(var(--serif-scale) * clamp(42px, 6vw, 80px)); line-height: .98; }
.hero-copy { position: relative; z-index: 4; text-align: center; display: grid; justify-items: center; gap: clamp(30px, 4.4vh, 44px); padding: calc(var(--hero-space) - 20px) 16px 0; flex: none; }
.hero-copy .lede { text-align: center; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.stage { position: relative; flex: 1 1 auto; min-height: 300px; margin-top: var(--hero-space); }
.stage .dev { --s: 1.12; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 3; max-width: none; }
.stream { position: absolute; left: 0; right: 0; top: calc((100% - 56px) / 2); transform: translateY(-50%); z-index: 2; pointer-events: auto; }
.lane { overflow: hidden; padding-block: 48px; }
.track { display: flex; gap: 34px; width: max-content; animation: drift 116s linear infinite; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 17px)); } }
.stream:hover .track { animation-play-state: paused; }
.stream .note { position: relative; flex: none; }
.stream .note:nth-child(4n+1) { transform: rotate(-5deg); }
.stream .note:nth-child(4n+2) { transform: rotate(3deg) translateY(14px); }
.stream .note:nth-child(4n+3) { transform: rotate(-2deg) translateY(-6px); }
.stream .note:nth-child(4n+4) { transform: rotate(5deg) translateY(10px); }

/* sticky notes */
.note { position: absolute; z-index: 4; width: 184px; aspect-ratio: 1; padding: 30px 18px 16px; display: grid; align-content: start; gap: 8px;
  background-color: var(--c);
  background-image: linear-gradient(180deg, rgba(31, 28, 25, .06) 0 22px, rgba(31, 28, 25, 0) 22px), linear-gradient(155deg, rgba(255, 255, 255, 0) 70%, rgba(31, 28, 25, .035) 100%), var(--grain);
  background-size: auto, auto, 180px 180px;
  border-radius: 2px 2px 34px 2px / 2px 2px 7px 2px;
  filter: drop-shadow(0 1px 1px rgba(31, 28, 25, .09)) drop-shadow(0 4px 6px rgba(31, 28, 25, .06));
  transition: transform .3s cubic-bezier(.2, .8, .3, 1); }
.note:hover { transform: rotate(0deg) translateY(-6px) !important; }
.note .tm { font-family: var(--serif); font-weight: var(--serif-weight); font-size: calc(var(--serif-scale) * 34px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.note .wh { font-family: var(--hand); font-variation-settings: 'INFM' 100; font-weight: 500; font-size: 19px; line-height: 1.18; }
.note .rp { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; opacity: .62; margin-top: auto; }
.tear { position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; z-index: 6; display: block; width: 100%; overflow: visible; }
/* the hero paper is torn off along a generated edge: page below, a soft contact shadow, a ragged strip of white paper core with fibres, and a faint lip on the cut */
.tear .t-canvas { fill: var(--canvas); }
.tear .t-shadow { fill: none; stroke: color(display-p3 0.366 0.2444 0.1189 / .16); stroke-width: 5; }
.tear .t-fringe { fill: #FFFDF8; }
.tear .t-lip { fill: none; stroke: color(display-p3 0.4572 0.2996 0.1431 / .14); stroke-width: .8; }

/* colour panels */
.panel { position: relative; border-radius: 30px; overflow: hidden; isolation: isolate; box-shadow: 0 20px 40px -32px rgba(31, 28, 25, .18); }
.paper-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; overflow: hidden; }
.paper-fx canvas { display: block; width: 100%; height: 100%; }
.has-paper .door::before { background-image: radial-gradient(rgba(31, 28, 25, .05) 1.2px, transparent 1.2px) !important; background-size: 24px 24px !important; mix-blend-mode: normal; }
.has-paper .panel::before { display: none; }
.panel::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 180px 180px; z-index: -1; }
.panel-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: clamp(28px, 5vw, 64px); }
.panel.flip .visual { order: 2; }
.panel .copy { display: grid; gap: 18px; align-content: center; min-width: 0; }
.panel .visual { display: flex; justify-content: center; align-items: flex-end; gap: 18px; min-height: 420px; }
.p-butter { background: var(--butter); }
.p-sage { background: var(--sage); }
.p-peri { background: var(--peri); }
.p-peach { background: var(--peach); }
.stack { display: grid; gap: 34px; padding-bottom: 34px; }
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin-top: 8px; }
.feat { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 15px; line-height: 1.35; }
.feat svg { width: 24px; height: 24px; flex: none; }
.feat span { display: block; font-weight: 400; color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }

/* feature cards, built from Figma (Web · Section 1) */
#features.wrap { max-width: calc(1137px + 32px); }
#features .panel { border-radius: 48px; }
#features .panel-in { display: flex; justify-content: center; align-items: center; gap: clamp(32px, 4.5vw, 64px); padding: clamp(32px, 4.5vw, 64px); }
#features .panel .visual { display: block; min-height: 0; flex: 0 1 448px; min-width: 0; }
#features .panel .copy { flex: 0 1 497px; min-width: 0; gap: 18px; color: #000; }
#features .d3 { font-size: 40px; line-height: 1.375; letter-spacing: -0.32px; color: #000; }
#features .body { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: none; }
#features .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-top: 0; }
#features .feat { gap: 12px; font-size: 16px; font-weight: 600; line-height: normal; color: #000; }
#features .feat img, #features .feat .ic { flex: none; }
#features .feat p { margin: 0; }
#features .feat span { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.well { position: relative; padding: 12px; border-radius: 30px; display: flex; flex-direction: column; gap: 16px; font-family: var(--sans); color: #2C2825; }
.well::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, .14); mix-blend-mode: multiply; pointer-events: none; }
.ui-card { position: relative; box-sizing: border-box; background: #fff; border-radius: 24px; padding: 16px; }
.cu { padding: 15px; border: 1px solid rgba(71, 70, 69, .1); display: flex; flex-direction: column; gap: 24px; }
.cu-head { display: flex; justify-content: space-between; align-items: center; }
.cu-head b { font-family: var(--serif); font-weight: var(--serif-weight); font-size: 20px; line-height: 23px; letter-spacing: -0.01em; }
.cu-new { background: #2C2825; color: #fff; border-radius: 30px; padding: 6px 12px; font-size: 14px; font-weight: 500; line-height: 16px; }
.cu-list { display: flex; flex-direction: column; gap: 12px; }
.cu-row { display: flex; justify-content: space-between; align-items: center; }
.cu-txt { display: flex; flex-direction: column; gap: 4px; }
.cu-txt b { font-size: 16px; font-weight: 500; line-height: 19px; }
.cu-txt span { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; line-height: 21px; color: #736F6F; }
.cu-acts { display: flex; gap: 4px; }
.chip { background: #F3F3F3; color: #6B6661; border-radius: 30px; padding: 4px 8px; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.cu-line { display: block; width: 100%; height: 1px; margin-bottom: -1px; }
.miss p { margin: 0 0 8px; font-size: 12px; line-height: normal; color: #878787; mix-blend-mode: multiply; }
.sel { position: relative; height: 40px; box-sizing: border-box; border: 1px solid rgba(71, 70, 69, .1); border-radius: 8px; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .04); padding-left: 13px; display: flex; align-items: center; font-family: 'Inter', var(--sans); font-weight: 500; font-size: 14px; line-height: 16px; }
.sel img { position: absolute; right: 7.5px; top: 50%; transform: translateY(-50%); }
.well-int { height: 399px; box-sizing: border-box; }
.in-card { position: relative; flex: 1 0 0; min-height: 0; background: #fff; border: 1px solid rgba(71, 70, 69, .1); border-radius: 24px; padding: 16px 16px 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.in-head { display: flex; justify-content: space-between; align-items: center; min-height: 24px; }
.in-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; line-height: normal; }
.in-opt { display: flex; justify-content: space-between; align-items: center; }
.in-txt { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.in-txt b { font-size: 16px; font-weight: 500; line-height: normal; }
.in-txt small { font-size: 12px; line-height: normal; color: #6B6661; }
.tog { position: relative; width: 42px; height: 24px; border-radius: 12px; background: #D9D6D2; transition: background .25s ease; flex: none; }
.tog i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 10px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: left .25s ease; }
.tog.on { background: color(display-p3 0.2528 0.6392 0.3005); }
.tog.on i { left: 20px; }
/* call card: our phone, cropped by the card edge */
#features .call-visual { align-self: flex-start; flex-shrink: 0; height: 399px; display: flex; justify-content: center; }
#call .dev { --s: 1.02; max-width: none; }
@media (max-width: 1140px) { #call .dev { --s: .9; } }
@media (prefers-reduced-motion: reduce) { .tog, .tog i { transition: none; } }
/* corner smoothing (Figma-style continuous corners); pills and circles stay round */
*, *::before, *::after { corner-shape: superellipse(1.6); }
.device, .device *, .device ::before, .device ::after, .dev, .pill, .win-bar i, .cu-new, .chip, .tog, .tog i, .plan .badge, .note { corner-shape: round; }

/* feature cards: a sticky stack */
#features .panel:nth-child(1) { --i: 0; }
#features .panel:nth-child(2) { --i: 1; }
#features .panel:nth-child(3) { --i: 2; }
#features[data-cards="stack"] { gap: 24px; padding-bottom: 96px; }
#features[data-cards="stack"] .panel { position: sticky; top: calc(var(--nav-h) + 15px + var(--i) * 57px); box-shadow: 0 -14px 30px -24px rgba(31, 28, 25, .22); }

/* faq */
.faq { padding-block: 72px 96px; }
.faq-h { text-align: center; display: grid; gap: 14px; justify-items: center; margin-bottom: 44px; }
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.q { background: var(--card); border-radius: 22px; padding: 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-content: start; box-shadow: inset 0 0 0 1px rgba(31, 28, 25, .08); }
.q svg { width: 32px; height: 32px; grid-row: span 2; margin-top: 2px; }
.q p { color: var(--ink-2); font-size: 15.5px; }
.q h3 { font-family: var(--sans); font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: 0; align-self: center; }

/* plans */
.plans-in { padding: clamp(28px, 5vw, 64px); display: grid; gap: 36px; }
.plans-head { display: grid; gap: 14px; text-align: center; justify-items: center; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; max-width: 900px; margin: 0 auto; width: 100%; align-items: stretch; }
.plan { background: #fff; border-radius: 26px; padding: 32px; display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 20px; align-content: start; box-shadow: 0 14px 28px -24px rgba(31, 28, 25, .16); }
.plan .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan .desc { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.plan .price { display: flex; align-items: baseline; gap: 8px; }
/* prices: serif numerals, a small dollar sign and smaller cents */
.plan .price .num { font-family: var(--serif); font-weight: var(--serif-weight); letter-spacing: var(--serif-track); font-size: calc(var(--serif-scale) * 60px); line-height: 1; }
.plan .price .cur { font-size: .5em; letter-spacing: 0; margin-right: .06em; }
.plan .price .cents { font-size: .56em; letter-spacing: -0.02em; margin-left: .02em; }
.plan .price .per { color: var(--ink-2); font-size: 15px; }
.plan .alt { color: var(--ink-2); font-size: 13.5px; margin: -12px 0 0; }
.plan .pill { width: 100%; padding: 15px 22px; }
.plan .checks { list-style: none; padding: 0; margin: 0; display: grid; align-content: start; gap: 11px; font-size: 15px; border-top: 1px solid rgba(31, 28, 25, .1); padding-top: 20px; }
.plan .checks li { display: flex; gap: 10px; align-items: flex-start; }
.plan .checks li::before { content: ""; width: 20px; height: 20px; flex: none; margin-top: 1px; background: var(--check) center / 20px 20px no-repeat; }
.plan .checks li.no { color: var(--ink-3); }
.plan .checks li.no::before { background-image: var(--cross); opacity: .5; }
.plan.hi { background: var(--ink); color: #FBF6EE; }
.plan.hi .desc, .plan.hi .price .per, .plan.hi .alt { color: rgba(251, 246, 238, .7); }
.plan.hi .checks { border-top-color: rgba(251, 246, 238, .16); }
.plan.hi .checks li::before { filter: invert(1); }

/* where site.css styles the same component differently, the landing's version wins here */
.jl .well { background: none; display: flex; }
.jl .ui-card { box-shadow: none; }
.jl .note { background-blend-mode: normal; }
.cu-line { background: #E7E7E7; }
.sel svg { position: absolute; right: 7.5px; top: 50%; transform: translateY(-50%); }
/* FAQ questions are sans, although they carry .d4 */
.jl .q h3 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

/* responsive */
@media (max-width: 960px) {
  #features[data-cards] { grid-template-columns: minmax(0, 1fr); }
  #features[data-cards="stack"] .panel { position: relative; top: auto; }
  .panel-in { grid-template-columns: minmax(0, 1fr); }
  .panel.flip .visual { order: 0; }
  .panel .visual { min-height: 0; }
  #features .panel-in { flex-direction: column; align-items: center; gap: 32px; padding: 40px 32px; }
  #features .panel .visual { flex: none; width: 100%; max-width: 448px; }
  #features .panel .copy { flex: none; width: 100%; max-width: 560px; }
  #call .panel-in { padding-bottom: 0; }
  #features #call .call-visual { order: 2; align-self: center; height: 360px; }
}
@media (max-width: 680px) {
  /* phones: the hero hugs its content instead of the screen height, so the phone stays cropped like on desktop
     and the sticky row passes behind its top, where the call details are */
  .door { height: auto; }
  .stage { flex: none; min-height: 0; height: 250px; }
  :root { --peek: 120px; }
  /* small enough that the stickies show either side of the phone */
  .stage .dev { --s: 0.5; }
  .stream .note { width: 136px; padding: 24px 13px 12px; gap: 5px; }
  .stream .note .tm { font-size: calc(var(--serif-scale) * 26px); }
  .stream .note .wh { font-size: 15px; }
  .track { gap: 20px; }
  .feats, .qa, .plans { grid-template-columns: minmax(0, 1fr); }
  .uses-track { gap: 36px; }
  #features .panel { border-radius: 32px; }
  #features .panel-in { flex-direction: column; align-items: stretch; gap: 28px; padding: 28px 20px; }
  #features .panel .visual, #features .panel .copy { width: auto; }
  #features .d3 { font-size: 30px; }
  #features .feats { grid-template-columns: minmax(0, 1fr); }
  .cu-row { gap: 8px; }
  .cu-acts .chip:first-child { display: none; }
  .plans-in { padding: 28px 14px 14px; }
  .plan { padding: 24px 22px; border-radius: 22px; }
  .cu-txt b { font-size: 15px; }
  .well-int { height: auto; }
  .in-card { flex: none; }
  #call .panel-in { padding-bottom: 0; }
  #call .dev { --s: .74; }
  #features #call .call-visual { height: 300px; }
  :root { --head-h: 68px; }
  .use { font-size: 14px; }
  .use svg { width: 26px; height: 26px; }
}
@media (min-width: 420px) and (max-width: 680px) {
  .stage { height: 270px; }
  .stage .dev { --s: 0.56; }
}
/* phones: the hero buttons stack at one width */
@media (max-width: 560px) {
  .hero-ctas { flex-direction: column; align-items: stretch; width: min(340px, 100%); }
  .hero-ctas .pill { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .note { transition: none; } .track, .uses-track { animation: none; } }

/* sign-off: the landing's closing line, plus a quiet way back in for existing accounts */
.jl .signoff .signoff-login { margin-top: -8px; }

/* the rest of the FAQ, one tap away (still in the page for search) */
.qa-more { margin-top: 20px; }
.qa-more > summary { list-style: none; display: flex; justify-content: center; cursor: pointer; }
.qa-more > summary::-webkit-details-marker { display: none; }
.qa-more[open] > summary { display: none; }
.qa-more .qa { margin-top: 0; }
.faq-answer .link { font-weight: 600; }