/* One promise, real product evidence, and the terms needed to choose. */
.site-nav { height:76px; border-bottom:0; }
.hero {
  --hero-width:min(1240px, calc(100vw - 112px));
  --hero-gap:52px;
  display:grid; grid-template-columns:.9fr 1.1fr; align-items:center;
  gap:var(--hero-gap); width:var(--hero-width); padding-block:64px 80px;
}
.hero-copy { min-width:0; display:flex; flex-direction:column; justify-content:center; }
/* Preserve the supplied image; crop its PDF and expanded note in the layout. */
.hero-product { min-width:0; overflow:hidden; border:1px solid #d8dfd0; border-radius:9px; background:#f8f9f3; box-shadow:0 24px 50px -36px #263e354d; }
.hero-product-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:46px; padding:8px 14px 8px 18px; background:#edf0e6; border-bottom:1px solid #d8dfd0; font-size:12px; font-weight:550; }
.hero-product-bar>span { display:flex; align-items:center; gap:9px; }
.hero-product-bar .icon { width:16px; height:16px; }
.hero-product-bar>a { display:grid; place-items:center; width:30px; height:30px; border-radius:4px; }
.hero-product-bar>a:hover { background:#e0e7d8; }
.hero-product-bar>a:focus-visible { outline:2px solid #466b51; outline-offset:2px; }
.hero-screenshot-crop { position:relative; overflow:hidden; aspect-ratio:924 / 720; }
/* Match the 924 × 720 video. Source crop: x=341, y=440, width=1592, height≈1241. */
.hero-screenshot-crop img { position:absolute; display:block; max-width:none; width:142.964824%; height:auto; left:-21.419598%; top:-35.469012%; }

/* The video follows the still hero, in a separate spread. */
.walkthrough-section { border-top:1px solid var(--rule); padding-block:var(--section-space); }
.walkthrough-heading { text-align:center; margin-bottom:32px; }
.walkthrough-player { width:100%; max-width:980px; margin-inline:auto; min-width:0; border:1px solid #d7dfce; border-radius:7px; }

.hero-video-frame { position:relative; overflow:hidden; aspect-ratio:16 / 9; border-radius:6px 6px 0 0; background:#f6f4ed; }
.hero-video-frame picture, .hero-video-frame img, .hero-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.hero-video-controls { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:6px 12px; border-radius:0 0 6px 6px; background:#edf0e6; }
.hero-video-controls button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 11px; border:0; border-radius:6px; font:500 12px/1.3 var(--sans); cursor:pointer; color:#526b58; background:transparent; transition:background .15s, color .15s; }
.hero-video-timeline { display:flex; align-items:center; gap:12px; min-width:0; }
.hero-video-seek { flex:1; min-width:0; width:100%; height:44px; margin:0; padding:0; cursor:pointer; accent-color:#466b51; touch-action:none; background:transparent; }
.hero-video-seek:disabled { cursor:default; opacity:.45; }
.hero-video-seek:focus-visible { outline:2px solid #466b51; outline-offset:2px; border-radius:4px; }
.hero-video-time { flex:none; font:500 11px/1.4 var(--sans); font-variant-numeric:tabular-nums; color:#526b58; white-space:nowrap; }
@media(max-width:480px) {
  .hero-video-controls { gap:0 8px; padding:3px 10px; }
  .hero-video-timeline { grid-column:1 / -1; grid-row:1; gap:10px; }
  .hero-video-toggle { grid-column:1; grid-row:2; }
  .hero-video-sound { grid-column:3; grid-row:2; }
}
.hero-video-controls .hero-video-sound { background:#fff9; box-shadow:inset 0 0 0 1px #cfdbc7; }
.hero-video-controls button:hover { color:#263e35; background:#e0e7d8; }
.hero-video-controls button:focus-visible { outline:2px solid #466b51; outline-offset:2px; }
.hero-video-controls svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.video-play-icon { fill:currentColor; stroke:none; }
.video-pause-icon, .video-audible-icon { display:none; }
[data-video-playing] .video-pause-icon, [data-video-audible] .video-audible-icon { display:block; }
[data-video-playing] .video-play-icon, [data-video-audible] .video-muted-icon { display:none; }
.hero-video-status, .hero-video-fallback { margin:0; padding:10px 18px; font-size:13px; color:#466b51; }
.hero-video-fallback { display:flex; flex-wrap:wrap; gap:12px; }
.walkthrough-player [hidden] { display:none !important; }
@media(max-width:600px) {
  .hero-video-controls button { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { .hero-video-controls button { transition:none; } }
@media print { .hero-video-controls, .hero-video { display:none !important; } .hero-video-frame picture[hidden] { display:block !important; } }
.hero-kicker { color:#466b51; font-size:16px; font-weight:500; line-height:1.5; margin-bottom:22px; }
.hero h1 { font-family:var(--sans); font-size:clamp(46px,4.4vw,63px); font-weight:560; letter-spacing:-.045em; line-height:1.08; }
.hero h1 em { font-family:var(--serif); font-weight:400; color:#466b51; }
.hero-details { max-width:485px; }
.hero-lede { font-size:19px; line-height:1.6; letter-spacing:-.15px; margin-top:26px; color:var(--muted); }
.hero-action { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:30px; }
.hero-action .button { min-width:168px; justify-content:space-between; border-radius:7px; min-height:52px; padding-inline:20px; background:#466b51; border-color:#466b51; gap:18px; font-size:14px; }
.hero-action .button:hover { background:#34543e; }
.hero-pricing { display:inline-flex; align-items:center; gap:9px; min-height:52px; font-size:15px; font-weight:500; white-space:nowrap; }
.hero-pricing .icon { width:17px; height:17px; }
.hero-pricing:hover { color:#466b51; text-decoration:underline; text-underline-offset:4px; }
.hero-footnote { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:16px; font-size:13px; line-height:1.5; color:var(--muted); }
.hero-requirements { margin-top:26px; font-size:12px; line-height:1.6; color:var(--muted); }
.hero-availability { margin-top:4px; font-size:12px; line-height:1.6; color:var(--muted); }
@media(max-width:1150px) {
  .hero { --hero-width:calc(100vw - 72px); --hero-gap:40px; }
  .hero h1 { font-size:clamp(42px,4.2vw,49px); }
  .hero-lede { font-size:17px; }
  .hero-action { gap:18px; }
}
@media(max-width:900px) {
  .hero { --hero-width:calc(100vw - 64px); grid-template-columns:1fr; gap:32px; padding-block:28px 48px; }
  .hero-copy { max-width:650px; }
  .hero-product { width:100%; max-width:680px; justify-self:center; }
  .hero h1 { font-size:clamp(44px,6.6vw,60px); }
  .hero-details { max-width:550px; }
  .hero-lede { font-size:18px; }
}
@media(max-width:600px) {
  .site-nav { height:auto; }
  .hero { --hero-width:calc(100vw - 40px); gap:28px; padding-top:24px; }
  .hero-kicker { font-size:15px; margin-bottom:18px; }
  .hero h1 { font-size:clamp(33px,8.7vw,49px); }
  .hero-lede { font-size:17px; margin-top:22px; }
  .hero-action { gap:16px; margin-top:26px; }
  .hero-action .button { font-size:13px; padding-inline:16px; gap:14px; }
  .hero-pricing { font-size:14px; min-height:44px; }
  .hero-footnote { gap:18px; font-size:12px; }
  .hero-requirements { margin-top:22px; }
}
@media(max-width:360px) {
  .hero { --hero-width:calc(100vw - 32px); }
  .hero h1 { font-size:29px; }
  .hero-lede { font-size:16px; }
  .hero-action { gap:12px; }
  .hero-action .button { padding-inline:13px; gap:9px; }
  .hero-pricing { font-size:14px; }
}
@media(min-width:901px) and (max-height:760px) {

  .hero h1 { font-size:clamp(42px,4vw,54px); }
  .hero-kicker { margin-bottom:18px; }
  .hero-lede { font-size:17px; margin-top:22px; }
  .hero-action { margin-top:24px; }
  .hero-requirements { margin-top:20px; }
}
@media print {
  .hero { display:block; padding-block:24px; }
  .hero-copy { position:static; min-height:0; padding:0; }
}

.hero-action { align-items:flex-start; gap:18px; }
.hero-action .download-cta { justify-content:center; }
.hero-footnote { gap:6px 18px; }
.hero-footnote>span:first-child { color:#466b51; font-weight:550; }
@media(max-width:600px) {
  .hero-action { gap:10px; }
  .hero-action .download-action { width:100%; }
  .hero-action .download-cta { width:100%; font-size:14px; }
  .hero-footnote { margin-top:10px; font-size:13px; }
}

/* Portrait serves narrow, upright screens; sideways phones keep the landscape cut.
   Cap its width against both the viewport and its stable height so controls fit. */
@media(max-width:600px) and (orientation:portrait) {
  .walkthrough-player { width:min(100%, 380px); width:min(100%, 380px, calc(56.25svh - 45px)); }
  .hero-video-frame { aspect-ratio:9 / 16; }
}

@media(max-width:600px) { .walkthrough-heading { margin-bottom:24px; } .hero-product-bar { padding-left:13px; } }