/* ============================================================================
   home.css — marketing homepage styling. References tokens from foundation.css.
   Type specs (per spec): hero 96px Prata, subhead 32px IBM Plex Sans, CTA 48px tall /
   16px IBM Plex Sans, nav 20px IBM Plex Sans, nav bar 92px tall. Desktop sizes are exact;
   they scale down responsively via clamp().
   ============================================================================ */

/* 0.1.433: every marketing page now sits on the same flat canvas as the homepage.
   This used to be a linear-gradient(--bg -> --bg-bottom) left over from the design
   that preceded the 0.1.381 homepage rebuild. The rebuilt homepage draws its own
   flat --hp-bg on the .hp wrapper, which covered the gradient there but nowhere
   else — so pricing, about, terms, privacy and concepts were still showing a
   background the homepage had already abandoned. One token now feeds both. */
body {
  font-family: var(--font-body);
  color: var(--ink);
  min-height: 100vh;
}
/* The background is scoped AWAY from the app, using the same body:not([class*="app"])
   convention as the header rules below. The app <link>s this file AFTER src/styles.css,
   so an unscoped body background here overrides the app's own white one. The old
   gradient leaked the same way and simply went unnoticed, because .app-shell is
   100vh with body overflow:hidden, so nothing of the body ever showed. Keep this
   scoped or the app shell silently changes colour. */
body:not([class*="app"]) {
  background: var(--bg-canvas);
}

/* ---- Nav ------------------------------------------------------------------- */
.site-nav-wrap { padding-top: 12px; transition: padding .18s ease; }
body:not([class*="app"]) #site-header { position: sticky; top: 0; z-index: 70; background: transparent; transition: background .18s ease; }
body:not([class*="app"]) .site-nav-wrap { padding-bottom: 12px; }
body:not([class*="app"]) .site-nav { box-shadow: 0 10px 30px -18px rgba(74, 20, 23, .22); }
body:not([class*="app"]) .nav-login,
body:not([class*="app"]) .nav-cta,
body:not([class*="app"]) .ea-submit,
body:not([class*="app"]) .ea-cancel { border-radius: 8px; }
.site-nav-wrap .container { max-width: calc(var(--container-max) + 64px); transition: max-width .18s ease, padding .18s ease; }
.site-nav {
  height: 76px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.nav-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-brand .logo-mark { width: 34px; height: 34px; }
.nav-brand .wordmark { font-family: var(--font-body); font-size: 20px; font-weight: 600; color: #000; }
.nav-brand .brand-logo { height: 24px; width: auto; display: block; margin-left: 4px; }
.nav-brand .env-badge { font: 600 12px/1 var(--font-body); letter-spacing: .02em; text-transform: uppercase; color: var(--accent); background: rgba(95,42,55,0.08); border-radius: 999px; padding: 4px 9px; }

.nav-links { display: flex; align-items: center; gap: 40px; }
.nav-links a { font-size: 17px; color: #000; transition: color .15s ease; }
.nav-links a:hover { color: var(--accent); }

.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-right .btn-accent { height: 44px; }
.nav-login { font-size: 16px; font-weight: 600; color: #000; background: none; border: 1px solid var(--accent); border-radius: 4px; height: 44px; padding: 0 20px; display: inline-flex; align-items: center; }
.nav-login:hover { color: var(--accent); background: rgba(95,42,55,0.04); }

/* ---- Buttons --------------------------------------------------------------- */
.btn-accent {
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 28px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 4px;
  transition: background .15s ease, transform .05s ease;
}
.btn-accent:hover { background: var(--accent-hover); }
.btn-accent:active { transform: translateY(1px); }
.nav-cta { height: 44px; padding-inline: 24px; }
.nav-burger { display: none; }
.nav-mobile { display: none; }

/* ---- Hero ------------------------------------------------------------------ */
.hero { padding-top: calc(clamp(48px, 9vw, 120px) - 32px); padding-bottom: 96px; }
.hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 8.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.hero-headline .accent-line { color: var(--ink); display: block; }
.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(18px, 2.6vw, 28px);
  line-height: 1.4;
  color: var(--ink2);
  margin: calc(clamp(24px, 3vw, 40px) - 12px) 0 0;
  max-width: none;   /* fills the 10-col hero block */
}
.hero-cta { margin-top: calc(clamp(28px, 4vw, 48px) - 12px); }

/* ---- Early-access modal ---------------------------------------------------- */
.ea-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 18, 22, 0.45);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.ea-overlay.open { display: flex; }
.ea-modal {
  width: 100%; max-width: 460px;
  background: var(--surface);
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.ea-modal h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin: 0 0 8px; color: var(--ink); }
.ea-modal p { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: #555; margin: 0 0 20px; }
.ea-field { display: flex; flex-direction: column; gap: 8px; }
.ea-field input {
  height: 48px; padding-inline: 16px;
  font-family: var(--font-body); font-size: 16px;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fafafa; color: var(--ink);
  width: 100%;
}
/* Neutral focus, not burgundy. Removing the indicator entirely would strand
   keyboard users, so it darkens the border instead of drawing a coloured ring. */
.ea-field input:focus { outline: none; border-color: #9A9A9A; }
.ea-field input:focus-visible { outline: none; border-color: #6E6E6E; }
.ea-actions { display: flex; gap: 12px; margin-top: 20px; }
.ea-submit { flex: 1; }
.ea-cancel { height: 48px; padding-inline: 20px; background: none; border: 1px solid var(--line); border-radius: 4px; font-size: 16px; color: var(--ink-soft); }
.ea-cancel:hover { background: #f3f3f3; }
.ea-error { color: #b3261e; font-size: 14px; min-height: 18px; margin-top: 8px; }
.ea-success { text-align: center; padding: 8px 0; }
.ea-success h2 { margin-bottom: 10px; }
.ea-success .ea-done { margin-top: 20px; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-right { display: none; }            /* desktop Login + CTA move into the burger menu */
  .site-nav-wrap { padding-top: 0; }                 /* flush to the top */
  .site-nav-wrap .container { max-width: none; padding-inline: 0; }  /* full width, no side gaps */
  .site-nav { padding-inline: 20px; height: 76px; position: relative; border-radius: 0; border-top: 0; border-left: 0; border-right: 0; }
  .nav-brand .brand-logo { height: 26px; }
  .hero .col-12 { margin-top: 40px; }   /* push header/subheader/CTA down on mobile */
  .nav-brand .wordmark { font-size: 18px; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 9px; margin-left: auto;
    border: 0; background: none; cursor: pointer;
  }
  .nav-burger span { display: block; width: 100%; height: 2px; background: #000; border-radius: 2px; }
  .nav-mobile:not([hidden]) { display: flex; }
  .nav-mobile {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    flex-direction: column; gap: 6px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.12);
  }
  .nav-mobile a { font-size: 18px; color: #000; padding: 10px 8px; border-radius: 6px; }
  .nav-mobile a:hover { background: rgba(0,0,0,.04); }
  .nav-mobile .nav-login, .nav-mobile .nav-cta {
    display: inline-flex; justify-content: center; width: 100%; margin-top: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-accent, .nav-links a, .nav-login { transition: none; }
}


/* ---- Footer --------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); margin-top: clamp(48px, 8vw, 96px); padding: 28px 0; }
body:has(.hero) .site-footer { margin-top: 800px; }   /* homepage only */
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-family: var(--font-body); font-size: 15px; color: var(--ink-soft); opacity: .65; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-family: var(--font-body); font-size: 15px; color: var(--ink-soft); opacity: .85; transition: color .15s ease, opacity .15s ease; }
.footer-links a:hover { color: var(--accent); opacity: 1; }
@media (max-width: 640px) { .footer-inner { justify-content: center; text-align: center; } }

/* ── Features mega-menu + shared page chrome (0.1.192) ── */
.nav-feature { position: relative; display: inline-flex; align-items: center; }
.nav-feature-trigger { font-size: 20px; color: #000; transition: color .15s ease; }
.nav-feature:hover .nav-feature-trigger { color: var(--accent); }
.nav-mega {
  position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%) translateY(6px);
  width: min(720px, 88vw); background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(26,26,26,0.14); padding: 30px 34px;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; z-index: 200;
}
.nav-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.nav-feature:hover .nav-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; }
.nav-mega-item { display: flex; gap: 14px; align-items: flex-start; }
.nav-mega-item svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 2px; }
.nmi-name { font-size: 16px; font-weight: 600; color: #000; margin-bottom: 3px; }
.nmi-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 620px) { .nav-mega-grid { grid-template-columns: 1fr; } .nav-mega { width: 88vw; } }

/* Simple content pages (About / Privacy / Terms) */
.page-title { font-family: var(--font-display); font-size: clamp(40px, 6vw, 64px); font-weight: 400; color: var(--ink); line-height: 1.08; margin: 0 0 20px; }
.page-body { font-size: clamp(16px, 2vw, 20px); color: var(--ink-soft); line-height: 1.55; max-width: 620px; margin: 0; }
/* 0.1.588: reserve the FIXED nav's height, then add the owner's 40px.
   Since 0.1.582 the nav is `position:fixed`, so it takes no space in flow.
   The homepage handles that with `.hp{padding-top:61px}`, but about, pricing,
   privacy and terms mount the nav through `.site-nav-host` and reserved
   nothing — their content simply started underneath the bar. On mobile the
   clamp floor is 40px against a 61px bar, which is the reported collision.
   61px is the bar (60px min-height + its 1px rule); the 40px on top is the
   breathing room asked for, so the header clears the nav at every width
   rather than only on the phone where it was noticed. */
.page-section { padding-top: calc(61px + clamp(40px, 6vw, 72px)); padding-bottom: clamp(64px, 10vw, 120px); }

/* ── Signed-in homepage avatar + menu (0.1.193) ── */
.nav-avatar-wrap { position: relative; display: inline-flex; align-items: center; }
.nav-avatar { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); padding: 0; cursor: pointer; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.nav-avatar:hover { border-color: var(--accent); }
.nav-av-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-av-img-lg { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex: none; }
.nav-av-initials { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; }
.nav-av-img-lg.nav-av-initials { width: 40px; height: 40px; }
.nav-avatar-menu { display: none; position: absolute; top: calc(100% + 12px); right: 0; width: 260px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px rgba(26,26,26,0.16); padding: 8px; z-index: 300; }
.nav-av-header { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.nav-av-id { min-width: 0; }
.nav-av-name { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-av-email { font-size: 12.5px; color: var(--ink-soft); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-av-sep { height: 1px; background: var(--line); margin: 2px 0 6px; }
.nav-av-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 10px; font-family: var(--font-body); font-size: 14px; color: var(--ink); border-radius: 8px; cursor: pointer; }
.nav-av-item:hover { background: rgba(95,42,55,0.06); color: var(--accent); }

/* Shared with the app (foundation.css is not loaded there): constrain the nav + kill link underlines (0.1.209) */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); box-sizing: border-box; }
.site-nav a { text-decoration: none; }
.site-nav, .site-nav * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* 0.1.319: homepage section subhead + Top-features grid */
.section-sub{text-align:center;color:var(--muted);font-size:17px;margin-top:-4px;margin-bottom:8px;}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;}
.feat-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:24px 22px 22px;box-shadow:0 1px 2px rgba(40,22,26,.04),0 14px 30px -24px rgba(40,22,26,.28);transition:transform .16s ease,box-shadow .16s ease;}
.feat-card:hover{transform:translateY(-3px);box-shadow:0 20px 38px -24px rgba(40,22,26,.38);}
.feat-ic{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:10px;background:#F7EFEF;margin-bottom:12px;color:var(--burgundy);}
.feat-card h3{font-size:17px;margin:0 0 6px;color:var(--ink);}
.feat-card p{font-size:14px;line-height:1.5;color:var(--muted);margin:0;}
@media(max-width:820px){.feat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr;}}

/* 0.1.320: nav keeps its normal centered look, then goes full-width + gapless
   once the page is scrolled (class toggled by home.js on scroll). */
body:not([class*="app"]) #site-header.scrolled { background: transparent; }
#site-header.scrolled .site-nav-wrap { padding-top: 0; }
#site-header.scrolled .site-nav-wrap .container { max-width: none; padding-inline: 24px; }

/* 0.1.320: 'We don't waste your time' — centered heading, numbered step cards
   with a connecting rhythm, softer shadows. */
.ivx .loop{padding:88px 0 20px;}
.ivx .loop h2{text-align:center;margin-bottom:6px;}
.ivx .loop .section-sub{margin-bottom:40px;}
.ivx .qa{gap:24px;}
.ivx .step{border-radius:16px;padding:28px 26px;border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(40,22,26,.04),0 12px 28px -20px rgba(40,22,26,.22);
  transition:transform .16s ease,box-shadow .16s ease;}
.ivx .step:hover{transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(40,22,26,.32);}
.ivx .step .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:5px 11px;border-radius:999px;margin-bottom:14px;}
.ivx .step h3{font-size:18px;margin:0 0 8px;}

/* 0.1.320: 'Tired of Workday' — icon + heading, chips read as a tidy list */
.wd-head{display:flex;flex-direction:column;gap:6px;}
.wd-frown{margin-bottom:8px;filter:drop-shadow(0 8px 20px rgba(35,56,118,.28));}
.ivx .pinkb .wdchip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(2px);transition:background .16s ease;}
.ivx .pinkb .wdchip:hover{background:rgba(255,255,255,.24);}
.ivx .pinkb .wdchip h3{font-size:16px;margin:0 0 4px;}
.ivx .pinkb .wdchip p{opacity:.92;font-size:14px;line-height:1.5;margin:0;}

/* 0.1.322: at rest the nav is fully transparent and flush on the hero band —
   no white pill, no border, no top gap. The white bar + border return only when
   scrolled (paired with the #site-header.scrolled bg already defined above). */
/* 0.1.324: at rest the nav is the white pill with the top gap (its default look).
   On scroll it spans full width and squares off — and #site-header stays
   TRANSPARENT so no page-coloured strip shows behind the bar. */
body:not([class*="app"]) #site-header.scrolled .site-nav {
  border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
}

.ivx .featbg{background:#fff;}

/* 0.1.323: editorial feature index (icon | name | right-aligned desc) */
.ivx .findex{max-width:900px;margin:36px auto 0;border-top:1px solid var(--line);}
.ivx .findex .frow{display:grid;grid-template-columns:44px 1fr auto;gap:20px;align-items:center;
  padding:22px 6px;border-bottom:1px solid var(--line);transition:padding-left .15s ease,background .15s ease;}
.ivx .ivx .findex .frow:hover{padding-left:16px;background:#FCFAFB;}
.ivx .findex .fic{color:var(--burgundy);display:inline-flex;align-items:center;}
.ivx .ivx .findex .fic svg{width:22px;height:22px;}
.ivx .findex .fnm{font-size:18px;font-weight:600;color:var(--ink);}
.ivx .findex .fds{color:var(--muted);font-size:15px;justify-self:end;text-align:right;max-width:360px;}
@media(max-width:720px){
  .ivx .findex .frow{grid-template-columns:34px 1fr;}
  .ivx .findex .fds{grid-column:2;justify-self:start;text-align:left;margin-top:2px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE 0.1.381 — rebuilt to the approved design.
   Scoped under .hp so nothing here can reach the app or the other pages.
   Canvas is a warm off-white; cards are white; sections are separated by a
   hairline rule rather than by colour blocks.
   ═════════════════════════════════════════════════════════════════════════ */
/* 0.1.442: the --hp-* tokens moved off `.hp` alone onto a shared scope so the
   nav can be reused on about/pricing/terms/privacy. They CANNOT be inherited by
   putting class="hp" on a nav wrapper, because `.hp::before/::after` draw the
   full-height editorial column rules and would paint two stray 1px marks the
   height of the nav. `.site-nav-host` carries the tokens and nothing else. */
.hp, .site-nav-host{
  /* 0.1.433: --hp-bg now derives from the shared --bg-canvas token rather than
     repeating the hex, so the homepage and every other surface using that canvas
     move together. Changing the canvas is a one-line edit in tokens.css. */
  --hp-bg:var(--bg-canvas); --hp-card:#FFFFFF; --hp-ink:#1A1A1A; --hp-muted:#5F5F5F;
  /* 0.1.573: dividers are black at 20% (owner, 08-08). Overridden HERE rather
     than on --rule in tokens.css, which every other surface reads. */
  --hp-rule:rgba(0,0,0,.2); --hp-burg:#611A1E; --hp-burg-d:#4A1417; --hp-mustard:var(--mustard); /* 0.1.443: one mustard, in tokens.css */
  --hp-gutter:120px; --hp-max:1300px;
  /* Distance from the viewport edge to the column edge. max() keeps the rules
     pinned to the viewport once it is narrower than the column. */
  --hp-edge:var(--col-edge);   /* 0.1.444: shared via tokens.css */
  position:relative;
  background:var(--hp-bg); color:var(--hp-ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
.hp *{box-sizing:border-box}
.hp a{text-decoration:none;color:inherit}
.hp-wrap{max-width:var(--hp-max);margin:0 auto;padding:0 var(--hp-gutter)}

/* Vertical rules framing the content column, full page height. Drawn on the
   container rather than per-section so they run unbroken THROUGH the
   horizontal dividers instead of restarting at every section. */
.hp::before,.hp::after{content:'';position:absolute;top:0;bottom:0;width:1px;
  background:var(--hp-rule);pointer-events:none;z-index:1}
.hp::before{left:var(--hp-edge)}
.hp::after{right:var(--hp-edge)}
.hp-center{text-align:center}

/* rule between every section, matching the reference */
.hp-nav, .hp-hero, .hp-sec{border-bottom:1px solid var(--hp-rule)}

/* ── 0.1.571: hero artwork ──────────────────────────────────────────────────
   The image bleeds off the RIGHT edge and tucks up under the nav, so the arm
   reads as reaching in from outside the frame.

   Stacking is the whole point of this block. The vertical column rules are
   drawn on .hp::before/::after at z-index 1, and the section divider is a
   border on .hp-hero itself. A positioned child paints ABOVE its parent's
   border, so the image would have covered both. Two things prevent that:
     - the image sits at z-index 0 and the hero's own content at z-index 2
     - .hp-hero gets isolation:auto and NO stacking context of its own, so the
       .hp rules at z-index 1 stay above the image
   Result: rules and divider read over the artwork, which is what was asked. */
.hp-hero{position:relative}
.hp-hero-art{
  position:absolute;
  top:0;                       /* from the top of .hp — runs THROUGH the nav */
  /* 0.1.575: anchored to the GRID, not the viewport (owner, 08-08).
     --hp-edge is the distance from the viewport edge to the column edge, so
     subtracting 60px puts the artwork's right edge exactly 60px OUTSIDE the
     column's right rule — and it holds that relationship at any window width,
     which `right:0` did not: pinned to the viewport, the gap between the rule
     and the artwork grew on every wider screen. */
  right:calc(var(--hp-edge) - 140px);   /* 0.1.578: 60px + a further 80px */
  width:min(68%, 988px);       /* 0.1.575: 30% larger (was 52% / 760px) */
  height:auto;
  z-index:0;                   /* under the column rules (z-index 1) */
  pointer-events:none;
  user-select:none;
}
/* Content rides above the artwork so the headline and form stay readable. */
.hp-hero .hp-wrap{position:relative;z-index:2}

/* 0.1.573: the headline and copy must WRAP before they reach the artwork.
   The image occupies the right 52% of the column, so the text column stops at
   54% — the 2% is the gap, not a coincidence. Below 1080 the artwork narrows
   and fades, so the text may use more of the line. */
/* 0.1.576: the text column stops where the PAPER starts, not where the image
   starts. Measured from hero_image.jpg: the left 23.2% of that file is empty
   background, so the artwork's box begins ~230px before anything is drawn in
   it. 0.1.575's `max-content` let the headline run to 1366px against a paper
   edge at 1054px — a 312px overlap — because it sized to the copy and ignored
   the artwork entirely.
   41% leaves a ~50px gap to the paper at the widths checked (45% cleared it by 4px, which reads as a collision). The
   headline WRAPS within that, so the <br> in the markup is now a hint rather
   than a guarantee; if a line breaks awkwardly the fix is shorter copy, not a
   wider column, or the paper is back over the text. */
/* 0.1.579: the headline column is 52% (owner, 08-08), up from the 41% that was
   breaking the line after "past" and back down from the brief 100% in 0.1.578.
   The <br> stays out of the markup, so 52% is now the ONLY thing deciding where
   the line breaks — one rule, one place. At the 1060px inner column that is a
   551px measure. The sub and the form keep 41%: they are 16px type, and a
   longer measure of body text is harder to read, not easier. */
.hp-hero h1{max-width:52%}
.hp-hero .hp-sub, .hp-hero .hp-inline-form{max-width:41%}
@media(max-width:1080px){ .hp-hero .hp-sub, .hp-hero .hp-inline-form{max-width:62%} }
/* 0.1.585: on MOBILE the headline, the copy, the input and the button all
   share ONE measure — the full column. The h1's 52% cap had no mobile override,
   so on a 390px screen it was ~178px wide and wrapped every two or three words;
   the form's flex-wrap let the button size to its own text, so it sat narrower
   than the input beneath it. Both now fill the column, so the left AND right
   edges line up down the whole hero. */
@media(max-width:760px){
  .hp-hero h1{max-width:none}
  .hp-hero .hp-sub, .hp-hero .hp-inline-form{max-width:none}
  .hp-inline-form{gap:12px}
  .hp-inline-form input,
  .hp-inline-form .hp-btn{width:100%;max-width:none;flex:1 1 100%;box-sizing:border-box}
  .hp-inline-form .hp-btn{justify-content:center;text-align:center}
  /* NOTE: the hero's bottom padding is NOT set here. `@media(max-width:900px)`
     appears LATER in this file and its `.hp-hero{padding:64px 0 72px}`
     shorthand wins the cascade on every phone, so a padding-bottom written in
     this 760 block does nothing. The 0.1.585 "28px" never applied for exactly
     that reason. It is set at the 900 rule instead — see below. */
}

/* Below the column width the artwork would crowd the headline, so it fades out
   rather than being cropped to an unreadable sliver. */
@media(max-width:1080px){ .hp-hero-art{width:44%;opacity:.5} }
/* NOTE: the 760 block below resets opacity to 1 — this 1080 rule would
   otherwise leave the mobile band at half strength, since both match. */
/* 0.1.582: on MOBILE the artwork is not decoration behind the text — it is its
   own full-bleed band below the hero's rule, matching the Figma frame. So it
   leaves absolute positioning entirely and returns to normal flow, which is
   also why the <img> sits after the hero section in the markup. */
@media(max-width:760px){
  .hp-hero-art{
    position:static;
    width:100%;
    max-width:none;
    display:block;
    opacity:1;
    border-bottom:1px solid var(--hp-rule);
    /* 0.1.587: the 0.1.586 clip and pull-up are REVERTED — the artwork sits at
       its natural position again. The space came out of the hero instead. */
  }
}

/* ── nav ── */
/* Sticky: needs an opaque background or content scrolls through it, and a
   z-index above the vertical edge rules (which sit at z-index 1). */
/* 0.1.573: TRANSPARENT at the top of the page so the hero artwork reads through
   the nav, opaque once scrolled so page content does not run up through a
   see-through sticky bar. Set on this rule rather than as a later override: a
   separate `.hp-nav{background:transparent}` block lost the cascade to this
   line, which is the kind of thing that looks right in the diff and does
   nothing in the browser. The alpha is written by home.js on scroll — the
   existing scroll handler targets #site-header, a mount this page does not
   have, so the nav has its own listener. */
/* 0.1.582: the nav is FIXED on both desktop and mobile (owner, 08-08), and its
   background fades in as the page scrolls: #EFEDEA at 0 alpha at the top,
   opaque once scrolled, driven by home.js writing the alpha inline.
   Fixed rather than sticky so it stays put on mobile, where a sticky element
   inside a scrolling ancestor can detach during momentum scroll in Safari.
   .hp then needs top padding equal to the bar, or the hero starts underneath. */
/* The bar is out of flow now, so the page reserves its height. 60px is
   .hp-nav-in's min-height plus its 1px rule; without this the headline starts
   underneath the nav. */
.hp{padding-top:61px}
.hp-nav{position:fixed;top:0;left:0;right:0;z-index:20;
  background-color:rgba(239,237,234,0)}
/* 0.1.588: while the drawer is open the BAR goes white too, so the logo and the
   close X sit on the same sheet as the menu rather than on the scroll-faded
   canvas colour. `!important` because home.js writes the scroll alpha as an
   INLINE style, and an inline background always beats a stylesheet rule. */
.hp-nav.drawer-open{background-color:#fff !important}
/* 0.1.584: NO transition on background-color, and no `.is-stuck` rule. home.js
   writes the alpha on every scroll frame, proportional to position (0 at the
   top, 1.0 at 80px). A transition would fight those per-frame updates and leave
   the bar lagging behind the page, and any `.is-stuck` background would
   override the inline alpha at exactly the moment it reaches 1. */
/* 0.1.571: the column rules inside the NAV.
   .hp::before/::after run the full page height at z-index 1, but .hp-nav is
   sticky with z-index 20 and an opaque background, so it paints straight over
   them — which is why the rules appeared everywhere EXCEPT the nav. Redrawing
   them here, inside the nav's own stacking context, is the only way to get them
   over that background without unsticking the nav or making it transparent
   (which would let the hero artwork scroll through it).
   Positions come from the same --hp-edge token as .hp, so the four segments
   stay on one grid: change the token and all of them move. */
.hp-nav::before,.hp-nav::after{content:'';position:absolute;top:0;bottom:0;width:1px;
  background:var(--hp-rule);pointer-events:none;z-index:1}
.hp-nav::before{left:var(--hp-edge)}
.hp-nav::after{right:var(--hp-edge)}
/* 0.1.569: 24px inside the nav (owner, 08-08). Width was ALREADY 1300 — that
   comes from .hp-wrap's --hp-max and needed no change.
   The gutter is overridden HERE rather than on --hp-gutter, because that
   variable is shared by every .hp-wrap section on the page (5 of them); moving
   it would have re-gutted the whole homepage to fix the nav. */
.hp-nav-in{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px;min-height:60px;padding-left:24px;padding-right:24px}
.hp-brand{display:flex;align-items:center}
.hp-brand img{display:block;height:27px;width:auto}
.hp-nav-right{display:flex;align-items:center;gap:18px}
.hp-nav-right a{font-size:15px;color:var(--hp-ink)}
.hp-nav-right a:hover{color:var(--hp-burg)}

/* ── 0.1.440: Features mega menu ──────────────────────────────────────────────
   The trigger is a <button> styled to match the sibling nav links, because the
   old <a href="#features"> scrolled the page instead of revealing anything.
   Opens on hover AND on :focus-within, so it is reachable by keyboard rather
   than being a mouse-only affordance; home.js also toggles .is-open on click so
   touch devices (which have no hover) can get at it. */
.hp-nav-feat{position:relative;display:flex;align-items:center}
.hp-nav-feat-btn{font:inherit;font-size:15px;font-weight:400;color:var(--hp-ink);background:none;border:0;padding:0;cursor:pointer;line-height:1}
.hp-nav-feat:hover .hp-nav-feat-btn,
.hp-nav-feat.is-open .hp-nav-feat-btn{color:var(--hp-burg)}
.hp-mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);
  width:640px;max-width:calc(100vw - 32px);
  background:var(--hp-card);border:1px solid var(--hp-rule);border-radius:14px;
  box-shadow:0 24px 60px -18px rgba(74,20,23,.25);
  padding:18px;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:30;
}
/* A padded bridge over the 14px gap, so the panel does not vanish while the
   cursor travels from the trigger down to it. */
.hp-mega::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.hp-nav-feat:hover .hp-mega,
.hp-nav-feat:focus-within .hp-mega,
.hp-nav-feat.is-open .hp-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.hp-mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hp-mega-item{display:flex;gap:10px;align-items:flex-start;padding:9px;border-radius:9px}
.hp-mega-item svg{width:19px;height:19px;color:var(--hp-burg);flex:none;margin-top:1px}
.hpm-name{display:block;font-size:13.5px;font-weight:600;color:var(--hp-ink);line-height:1.3}
.hpm-desc{display:block;font-size:12px;color:var(--hp-muted);line-height:1.35;margin-top:2px}
.hp-mega-item .hpm-ic{display:flex;flex:none}
@media (max-width:760px){
  .hp-mega{width:min(420px,calc(100vw - 32px))}
  .hp-mega-grid{grid-template-columns:1fr 1fr}
}

/* ── 0.1.442: mobile burger + full-width drawer ───────────────────────────────
   Hidden above 900px; the media query above switches them in. The drawer is
   edge-to-edge under the nav, so it reads as an extension of the bar rather than
   a floating card. */
.hp-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0;margin-left:auto;background:none;border:0;cursor:pointer}
.hp-burger span{display:block;width:22px;height:2px;background:var(--hp-ink);border-radius:2px;transition:transform .18s ease,opacity .12s ease;margin:0 auto}
.hp-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hp-burger.is-open span:nth-child(2){opacity:0}
.hp-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* 0.1.485: the drawer was --hp-bg, the SAME canvas colour as the page behind it,
   so on mobile the open menu had no edge and read as part of the page. Uses
   --hp-card (the existing white) plus a shadow so it sits above the content. */
/* 0.1.588: the open drawer is a FULL-SCREEN white sheet, with the actions
   pinned to the bottom of the viewport (owner, 08-08).
   Fixed rather than absolute: the nav is `position:fixed`, so an absolutely
   positioned child could only ever be as tall as the space below the bar, and
   `100vh` on it would still be measured from the nav rather than the screen.
   `100dvh` with a `100vh` fallback, because on iOS Safari `100vh` includes the
   collapsing address bar — the actions would sit below the fold until the user
   scrolled. The shadow and the bottom rule are gone: a sheet covering the whole
   screen has nothing to cast a shadow onto and no edge to separate. */
.hp-drawer{
  display:none;position:fixed;left:0;right:0;top:61px;
  height:calc(100vh - 61px);
  height:calc(100dvh - 61px);
  background:#fff;border-top:1px solid var(--hp-rule);
  /* 0.1.589: padding moved to the children. The sheet no longer scrolls — its
     link region does — so a padding-bottom here would sit below the pinned
     actions and add dead space under them. */
  padding:0;overflow:hidden;z-index:25;
}
/* Flex column so the actions can be pushed to the foot with margin-top:auto
   rather than positioned absolutely, which would overlap a long link list
   instead of being pushed below it. */
.hp-drawer.is-open{display:flex;flex-direction:column}
.hp-drawer a,.hp-drawer .hp-drawer-feat-btn{display:block;width:100%;text-align:left;font:inherit;font-size:17px;color:var(--hp-ink);background:none;border:0;padding:13px 0;border-bottom:1px solid var(--hp-rule);cursor:pointer}
.hp-drawer .hp-drawer-feat-btn::after{content:'+';float:right;color:var(--hp-muted);font-size:18px;line-height:1}
.hp-drawer .hp-drawer-feat-btn.is-open::after{content:'\2212'}
.hp-drawer-feats{display:none;padding:4px 0 10px}
.hp-drawer-feats.is-open{display:block}
.hp-drawer-feat{display:flex;gap:10px;align-items:flex-start;padding:9px 0}
.hp-drawer-feat svg{width:18px;height:18px;color:var(--hp-burg);flex:none;margin-top:2px}
.hp-drawer-feat .hpm-name{font-size:14px}
.hp-drawer-feat .hpm-desc{font-size:12.5px}
/* 0.1.589: the links SCROLL, the actions do not.
   `margin-top:auto` (0.1.588) put the actions at the foot but left them in the
   same scrolling box, so expanding Features pushed Login and Sign up off the
   screen. Splitting the sheet into a scrolling region and a fixed footer is the
   only arrangement where a long menu scrolls UNDER buttons that never move. */
.hp-drawer-scroll{
  flex:1 1 auto;
  min-height:0;              /* without this a flex child refuses to shrink and never scrolls */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px var(--hp-gutter) 8px;
}
.hp-drawer-actions{
  flex:0 0 auto;             /* never compressed by a long link list */
  display:flex;flex-direction:column;gap:10px;
  padding:14px var(--hp-gutter) 22px;
  background:#fff;
  border-top:1px solid var(--hp-rule);   /* the edge the scrolling links pass under */
}
.hp-drawer-actions .hp-btn{width:100%;justify-content:center;text-align:center}
/* The nav is the positioning context for the drawer. */
/* 0.1.584: the duplicate `.hp-nav{position:sticky}` that used to sit here is
   gone. It came AFTER the fixed rule with identical specificity, so it won
   the cascade and quietly reverted 0.1.582's fixed nav — the change was in
   the file and had no effect in the browser. Second time a duplicate
   .hp-nav declaration has done this; position now lives in ONE place, at
   the top of the nav block. */

/* ── buttons ── */
.hp-btn{font:inherit;font-weight:600;font-size:14px;border-radius:6px;padding:13px 22px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.hp-btn-solid{background:var(--hp-burg);color:#fff;border:1px solid var(--hp-burg)}
.hp-btn-solid:hover{background:var(--hp-burg-d);border-color:var(--hp-burg-d)}
/* Outline only — a white fill read as a second solid button against the warm canvas. */
.hp-btn-ghost{background:transparent;color:var(--hp-burg);border:1px solid var(--hp-burg)}
.hp-btn-ghost:hover{background:rgba(97,26,30,.06)}
/* Nav buttons sit tighter than in-page ones to keep the bar at ~60px. */
.hp-nav .hp-btn{padding:8px 18px}

/* ── hero: left aligned, email capture inline ── */
.hp-hero{padding:110px 0 120px}
.hp-hero h1{font-family:'Prata',serif;font-weight:400;font-size:clamp(34px,4.4vw,50px);line-height:1.26;letter-spacing:-.3px;margin:0}
.hp-sub{font-size:16.5px;line-height:1.65;color:var(--hp-muted);max-width:62ch;margin:26px 0 34px}
.hp-inline-form{display:flex;gap:10px;flex-wrap:wrap}
.hp-inline-center{justify-content:center}
.hp-inline-form input{width:300px;max-width:100%;font:inherit;font-size:15px;padding:14px 16px;border:1px solid var(--hp-rule);border-radius:6px;background:#fff;color:var(--hp-ink)}
.hp-inline-form input::placeholder{color:#9A9A9A}
/* Same here: a quiet border change rather than a burgundy ring, which also
   stopped the ring appearing during the shake (rejectField calls focus()). */
.hp-inline-form input:focus{outline:none;border-color:#9A9A9A}
.hp-inline-form input:focus-visible{outline:none;border-color:#6E6E6E}
/* The error border must win over the focus border while shaking. */
.hp-inline-form input.hp-shake:focus,
.hp-inline-form input.hp-shake:focus-visible{border-color:#B3261E}

/* ── shared section rhythm ── */
.hp-sec{padding:96px 0 110px}
.hp-h2{font-family:'Prata',serif;font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.2;margin:0}
.hp-sec-sub{font-size:15.5px;color:var(--hp-muted);margin:14px 0 0}

/* ── output cards ── */
.hp-out{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:54px}
.hp-out-card h3{font-size:17px;font-weight:700;margin:22px 0 10px}
.hp-out-card p{font-size:14.5px;line-height:1.6;color:var(--hp-muted);margin:0}
.hp-shot{aspect-ratio:3/2;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* Photo fills the frame like the mockup. Its white studio background has been
   replaced with the panel colour in the asset itself, so the panel and the photo
   are the same #2E3338 and the crop edges are invisible. Cover-cropped and nudged
   up (center 42%) to keep the keyboard and hands rather than slicing the wrists. */
.hp-shot-human{background:#2E3338 url('hero-typing.jpg') center 42%/cover no-repeat}
.hp-shot-wd{background:#C5CFC0}
/* flex-start, not center/end: the page must show its TOP (name, summary) and
   run off the bottom of the card. Bottom-aligning clipped the header instead. */
.hp-shot-doc{background:#E8C68E;padding:22px 0 0;align-items:flex-start}
/* The resume is a rendered PNG now, so the type is real and stays sharp. It sits
   flush to the bottom of the card and runs past it, as in the mockup: a page
   peeking up rather than a whole document shrunk to fit. */
.hp-shot-doc img{display:block;width:74%;height:auto;border-radius:2px 2px 0 0;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.45)}

/* ── feature grid ── */
.hp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.hp-card{background:var(--hp-card);border-radius:8px;padding:28px 28px 34px}
.hp-card svg{width:30px;height:30px;color:var(--hp-mustard);display:block}
.hp-card h3{font-size:16.5px;font-weight:500;margin:18px 0 8px}
.hp-card p{font-size:14px;line-height:1.6;color:var(--hp-muted);margin:0}

/* ── closing CTA + footer ── */
.hp-cta{border-bottom:1px solid var(--hp-rule)}
.hp-cta .hp-inline-form{margin-top:30px}
.hp-foot{padding:30px 0 34px}
.hp-foot-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--hp-muted)}
.hp-foot-in nav{display:flex;gap:26px}
.hp-foot-in a:hover{color:var(--hp-burg)}

/* ── responsive ── */
@media(max-width:1080px){ .hp, .site-nav-host{--hp-gutter:56px} }
@media(max-width:900px){
  /* 0.1.442: .site-nav-host needs the responsive gutter too. Without it the
     standalone pages kept the 120px desktop gutter and the logo sat 120px from
     the screen edge on a phone. */
  .hp, .site-nav-host{--hp-gutter:24px}
  .hp::before,.hp::after{display:none}
  .hp-out,.hp-grid{grid-template-columns:1fr}
  /* 0.1.590: +28px of vertical space between the stacked tiles (owner, 08-08).
     The base rule already carries `gap:28px`, and it is top-level so it does
     apply on a phone — this ADDS to it rather than setting it, giving 56px
     between the cards. Row gap only: with one column there is no column gap to
     change, and leaving the shorthand alone keeps the desktop 28px untouched. */
  .hp-out{row-gap:56px}
  /* 0.1.587: bottom padding 72px -> 12px, the 60px reduction under the Request
     access button (owner, 08-08), so the rule, the artwork band and every
     section below move UP together.
     This is the rule that actually governs a phone: it lives in the 900
     breakpoint, which comes after the 760 block, so a padding-bottom set there
     loses the cascade. Third time this file has done that — .hp-nav position
     (0.1.584) and .hp-nav background (0.1.573) were the others. */
  .hp-hero{padding:64px 0 12px}
  .hp-sec{padding:64px 0 72px}
  /* 0.1.442: under 900px the inline items are replaced by a burger + drawer
     rather than simply hidden (which is what 0.1.441 did, leaving mobile with no
     navigation at all beyond the two buttons). Logo stays left, burger goes
     right, and every nav item lives in the drawer. */
  .hp-nav-right > a, .hp-nav-feat, .hp-nav-right > .hp-btn{display:none}
  .hp-burger{display:flex}
}

/* Inline form feedback: the page-level email fields submit in place, so success
   and failure are reported here rather than by opening the modal. */
.hp-form-note{font-size:14px;color:var(--hp-muted);margin:12px 0 0;min-height:1em}
.hp-form-note.is-bad{color:#B3261E}
.hp-inline-center + .hp-form-note{text-align:center}

/* Invalid submit shakes the field instead of disabling the button. Small
   amplitude and a short duration: enough to draw the eye, not enough to feel
   like a malfunction. */
@keyframes hp-shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)}
  40%,60%{transform:translateX(5px)}
}
.hp-inline-form input.hp-shake{
  animation:hp-shake .5s cubic-bezier(.36,.07,.19,.97) both;
  border-color:#B3261E;
}
/* Motion can be genuinely unpleasant for vestibular disorders, so the reduced
   motion path keeps the signal but drops the movement. */
@media (prefers-reduced-motion: reduce){
  .hp-inline-form input.hp-shake{animation:none;border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
}
/* Announced to screen readers, hidden visually — the shake is the visual cue. */
.hp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}