/* ==========================================================================
   HankoSign homepage (public landing at /). Standalone — does NOT load the
   app's style.css. Converted from the Claude Design handoff: all inline styles
   extracted here, style-hover -> :hover, dc conventions removed. Only the giant
   watermark glyphs keep inline positioning in home.ejs.
   ========================================================================== */

/* ── Self-hosted webfonts (2026-08-20) ───────────────────────────────────────
   Was two render-blocking requests to fonts.googleapis.com feeding eight files
   off fonts.gstatic.com — HTML → CSS → font, three hops on a third-party origin
   (PageSpeed charged ~2s on Slow 4G). Now same-origin and, because this
   stylesheet is INLINED into the page, the browser sees these @font-face rules
   in the first HTML packet: no CSS hop at all.

   LATIN SUBSET ONLY (U+0000-00FF + punctuation) — this page's copy is ours and
   English; latin-ext/cyrillic/greek were dead weight. Archivo and Public Sans
   are VARIABLE (one file spans every weight we use); Lora ships as two static
   instances (roman + italic 500); Noto Sans JP is subset to the three seal
   glyphs (ハ 判 印) at 1.4 KB.

   ⚠️ These files are served IMMUTABLE for a year (esign-stack DeployFonts). A
   woff2 is immutable content: to change a face, ship it under a NEW filename —
   overwriting one in place leaves year-old copies cached in the wild.
   ⚠️ Adding a glyph beyond ハ判印 needs a re-subset of the JP file (scratch
   script in the 2026-08-20 session; re-fetch with a wider text= param).

   Licenses vendored beside the files: SIL OFL 1.1 for all four families
   (OFL-archivo / OFL-publicsans / OFL-lora / OFL-notosansjp .txt). */
@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/archivo-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/public-sans-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/lora-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic; font-weight: 500; font-display: swap;
  src: url('/fonts/lora-italic-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('/fonts/noto-sans-jp-900-hanko.woff2') format('woff2');
  unicode-range: U+30CF, U+5224, U+5370;
}

:root {
  --ink: #C8382A;
  --paper: #F1EBE0;
  --sumi: #1C1815;
  --text: #221C18;
  --muted: #57534E;
  /* AA-audited 2026-08-20 (PageSpeed): --faint darkened #A8A29E → #6E6A67 so small
     labels pass 4.5:1 on BOTH white cards (5.36) and washi (4.51). Same warm-gray hue. */
  --faint: #6E6A67;
  --border: #EDE7DD;
  /* Canonical brand tokens shared across the public pages — the SAME values the app
     chrome (style.css) and the tab surfaces (tab-layout.css) use, exposed here by their
     house names so a public page never hardcodes a near-miss red or cream. --seal is the
     exact shu vermillion (== --ink, the canonical name); the cream trio matches the
     Settings/tab surface. */
  --seal: #C8382A;
  --seal-dark: #A52D22;
  /* Vermillion for TEXT on light grounds only — #C8382A reads 4.36:1 on washi (AA
     fail); this 3% darkening passes on washi (4.66) and the badge tint (4.77) while
     staying visually identical. Fills/buttons keep the canonical --seal. */
  --seal-text: #C03628;
  /* Text ON the vermillion featured card. AA leaves almost no room there: white is
     5.18:1 and anything below ~#FFF0EE fails, so the old translucent-white ladder
     (.72/.88/.6 → 3.37/4.34/2.76) could not stay. Quiet text uses this warm
     near-white (4.67); the price keeps pure white, which is the whole hierarchy
     the colour still affords. */
  --on-seal: #FFF0EE;
  /* Vermillion for the wordmark on DARK grounds (the footer). The brand red is
     3.41:1 on sumi; the old `filter: brightness(1.15)` only *looked* brighter —
     it rendered 4.32:1 (still AA-fail) and an auditor reads the declared colour,
     never the filter, so it could never pass. This is the same hue lifted for a
     dark surface: 5.22:1. Light grounds keep --seal / --seal-text. */
  --seal-on-dark: #E8604F;
  --tint: #fbf8f1;
  --cream-line: #e2d9c8;
  --cream-line-soft: #eee5d4;
  /* Reused hanko-seal gradient (nav + hero stamp). */
  --seal-bg:
    radial-gradient(58% 52% at 34% 28%, rgba(255,247,240,.14), transparent 62%),
    radial-gradient(54% 54% at 74% 80%, rgba(60,10,4,.22), transparent 64%),
    var(--ink);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { margin: 0; }

.hs-root {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #FFFFFF;
  color: var(--text);
  font-family: 'Public Sans', system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;  /* fallback for browsers without overflow: clip */
  overflow-x: clip;    /* clips the watermarks WITHOUT creating a scroll container,
                          so the sticky topbar keeps sticking (hidden would break it) */
}
.hs-root a { text-decoration: none; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
.hs-ink { color: var(--ink); }

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes hs-stamp {
  0%   { opacity: 0; transform: rotate(-9deg) scale(1.55); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}
@keyframes hs-float {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-9px); }
}
@keyframes hs-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Watermark glyph (shared) ────────────────────────────────────────────── */
.hs-watermark {
  position: absolute;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ── Shared: buttons ─────────────────────────────────────────────────────── */
.hs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Public Sans', system-ui, sans-serif; white-space: nowrap;
  cursor: pointer;
}
.hs-btn--solid {
  font-size: .9rem; font-weight: 600; color: #fff; background: var(--ink);
  border-radius: 9px; padding: 9px 19px; transition: filter .15s;
}
.hs-btn--solid:hover { filter: brightness(.92); }
.hs-btn--ghost {
  font-size: .9rem; font-weight: 600; color: var(--text);
  border: 1.5px solid #DED6CB; border-radius: 9px; padding: 8px 17px;
  transition: border-color .15s;
}
.hs-btn--ghost:hover { border-color: var(--text); }

/* Large hero / CTA buttons */
.hs-cta-primary {
  font-size: 1rem; font-weight: 600; color: #fff; background: var(--ink);
  border-radius: 11px; padding: 15px 30px; box-shadow: 0 1px 4px rgba(28,24,21,.15);
  transition: box-shadow .12s ease, filter .15s ease;
}
.hs-cta-primary:hover { filter: brightness(.96); box-shadow: 0 2px 7px rgba(28,24,21,.18); }
.hs-cta-secondary {
  font-size: 1rem; font-weight: 600; color: var(--text);
  border: 1.5px solid #C7BEB2; border-radius: 11px; padding: 14px 28px;
  box-shadow: 0 1px 4px rgba(28,24,21,.15);
  transition: border-color .15s, box-shadow .12s ease;
}
.hs-cta-secondary:hover { border-color: var(--text); box-shadow: 0 2px 7px rgba(28,24,21,.18); }
/* These are <a> elements, and `.hs-root a { color: inherit }` out-specifies a
   single class — so pin white text on the red-filled buttons explicitly.
   ⚠️ EVERY red-filled <a> must be listed here: .hs-plat__cta was missing and
   rendered ink-on-vermillion (3.25:1) until 2026-08-20. Adding a solid button?
   Add it to this list. */
.hs-root .hs-btn--solid, .hs-root .hs-cta-primary, .hs-root .hs-plat__cta { color: #fff; }

/* Shared eyebrow (Lora italic — the house accent face; we ruled against Newsreader). */
.hs-eyebrow {
  font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 1.05rem;
  color: var(--seal-text); margin-bottom: 12px;
}
.hs-h2 {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -.03em;
  margin-bottom: 14px; color: var(--text);
}
.hs-lede { font-size: 1.05rem; color: var(--muted); line-height: 1.7; }

/* ── Seal marks (CSS divs, not SVG) ──────────────────────────────────────── */
.hs-seal {
  position: relative; width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--seal-bg); box-shadow: 0 3px 9px rgba(40,18,12,.2);
  display: flex; align-items: center; justify-content: center;
}
.hs-seal__inner { position: absolute; inset: 3px; border-radius: 6px; border: 1.5px solid rgba(245,238,224,.9); }
.hs-seal__glyph { font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 18px; line-height: 1; color: #F6EFE1; }

/* ── NAV ─────────────────────────────────────────────────────────────────── */
.hs-nav-toggle { display: none; }
.hs-nav {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); padding: 0 clamp(20px,4vw,48px);
  height: 66px; display: flex; align-items: center; justify-content: space-between;
}
.hs-nav--scrolled { box-shadow: 0 2px 12px rgba(28,24,21,.08); }
.hs-logo { display: flex; align-items: center; gap: 11px; }
.hs-wordmark { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.28rem; letter-spacing: -.02em; line-height: 1; }
.hs-nav__right { display: flex; align-items: center; gap: 34px; }
.hs-nav__links { display: flex; align-items: center; gap: 30px; font-size: .9rem; font-weight: 500; color: var(--muted); }
.hs-nav__links a { transition: color .15s; }
.hs-nav__links a:hover { color: var(--text); }
.hs-nav__cta { display: flex; align-items: center; gap: 12px; }
.hs-nav__signin-mobile { display: none; }
.hs-hamburger { display: none; cursor: pointer; padding: 4px; }
.hs-hamburger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; }

/* Mobile nav drawer (hidden until the checkbox toggles it) */
.hs-nav-drawer {
  display: none; background: #fff; border-bottom: 1px solid var(--border);
  padding: 8px 20px 14px; position: sticky; top: 66px; z-index: 99;
}
.hs-nav-drawer a { display: block; padding: 12px 0; font-size: 1rem; font-weight: 500; color: var(--text); border-bottom: 1px solid #F4EFE7; }
.hs-nav-drawer a:last-child { border-bottom: none; }
.hs-nav-toggle:checked ~ .hs-nav-drawer { display: block; }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hs-hero { position: relative; background: var(--paper); overflow: hidden; }
.hs-hero__wm { top: 50%; left: -4%; transform: translateY(-50%); font-size: 52vw; color: rgba(200,56,42,.045); }
.hs-hero__grid {
  position: relative; max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
  padding: clamp(56px,7vw,96px) clamp(20px,5vw,56px);
}
.hs-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.hs-hero__eyebrow .bar { display: block; width: 22px; height: 2px; background: var(--ink); }
.hs-hero__eyebrow .txt { font-family: 'Lora', serif; font-style: italic; font-size: 1.02rem; color: var(--seal-text); }
.hs-hero h1 {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: clamp(2.9rem,5vw,4.4rem); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 24px;
}
.hs-hero__sub { font-size: 1.1rem; color: var(--muted); line-height: 1.7; max-width: 468px; margin-bottom: 38px; }
.hs-hero__ctas { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; flex-wrap: wrap; }
.hs-hero__trust { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hs-trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 500; color: var(--muted); }

.hs-hero__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 440px; }
.hs-doc-mini {
  position: absolute; top: 6px; right: -6px; z-index: 1; width: 172px; background: #fff;
  border-radius: 14px; box-shadow: 0 12px 38px rgba(28,24,21,.12); padding: 15px 14px;
  animation: hs-float 6s ease-in-out infinite;
}
.hs-skel { height: 6px; background: #F0EBE4; border-radius: 3px; margin-bottom: 6px; }
.hs-doc-mini__done { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .66rem; font-weight: 700; color: #166534; }

.hs-doc {
  position: relative; width: 330px; background: #fff; border-radius: 20px;
  box-shadow: 0 30px 80px rgba(28,24,21,.16), 0 4px 14px rgba(28,24,21,.06);
  padding: 28px 26px; transform: rotate(-2deg);
}
.hs-doc__head { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid #F0EBE4; }
.hs-doc__icon { width: 32px; height: 38px; flex: none; background: #FCE6E3; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.hs-doc__title { font-family: 'Archivo', sans-serif; font-size: .82rem; font-weight: 700; }
.hs-doc__meta { font-size: .7rem; color: var(--faint); margin-top: 1px; }
.hs-doc__body { margin-bottom: 18px; }
.hs-doc__body .hs-skel { height: 7px; border-radius: 4px; margin-bottom: 8px; }
.hs-doc__signers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.hs-signer { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; background: #FAF8F5; border: 1px solid var(--border); border-radius: 9px; }
.hs-signer__who { display: flex; align-items: center; gap: 9px; }
.hs-avatar { width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; color: #fff; }
.hs-avatar--ink { background: var(--ink); }
.hs-avatar--grey { background: #78716C; }
.hs-signer__name { font-size: .75rem; font-weight: 500; }
.hs-pill { font-size: .63rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.hs-pill--signed { background: #DCFCE7; color: #166534; }
.hs-pill--pending { background: #FEF3C7; color: #92400E; }
.hs-doc__sigbox { border: 1.5px dashed #D3CABE; border-radius: 9px; padding: 11px 13px; }
.hs-doc__siglabel { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-bottom: 5px; }
.hs-stamp {
  position: absolute; bottom: -20px; right: -18px;
  animation: hs-stamp .55s cubic-bezier(.34,1.56,.64,1) .7s both;
  filter: drop-shadow(0 5px 15px rgba(200,56,42,.42));
}
.hs-stamp__seal { position: relative; width: 96px; height: 96px; border-radius: 20px; background: var(--seal-bg); display: flex; align-items: center; justify-content: center; }
.hs-stamp__inner { position: absolute; inset: 8px; border-radius: 12px; border: 2.5px solid rgba(245,238,224,.9); }
.hs-stamp__glyph { font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 50px; line-height: 1; color: #F6EFE1; }

/* ── SOCIAL PROOF ────────────────────────────────────────────────────────── */

/* ── FEATURES ────────────────────────────────────────────────────────────── */
.hs-section { padding: clamp(72px,8vw,104px) clamp(20px,5vw,56px); }
.hs-section__inner { max-width: 1200px; margin: 0 auto; }
.hs-features__head { margin-bottom: 52px; max-width: 620px; }
.hs-features__head h2 { margin-bottom: 14px; }
.hs-features__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.hs-feature { background: var(--paper); border-radius: 16px; padding: 28px 24px; }
.hs-feature__icon { width: 46px; height: 46px; background: #fff; border-radius: 11px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(28,24,21,.06); margin-bottom: 20px; }
.hs-feature__title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 9px; line-height: 1.3; }
.hs-feature p { font-size: .88rem; color: var(--muted); line-height: 1.62; }

/* ── HOW IT WORKS ────────────────────────────────────────────────────────── */
.hs-how { background: var(--paper); }
.hs-how__inner { max-width: 1080px; margin: 0 auto; }
.hs-how__head { text-align: center; margin-bottom: 60px; }
.hs-how__head h2 { margin-bottom: 14px; }
.hs-how__head p { max-width: 560px; margin: 0 auto; }
.hs-how__grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.hs-how__line { position: absolute; top: 32px; left: 22%; right: 22%; height: 0; border-top: 2px dashed rgba(200,56,42,.28); }
.hs-step { text-align: center; padding: 0 26px; }
.hs-step__num { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; position: relative; z-index: 1; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 1.25rem; color: var(--ink); }
.hs-step__title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.08rem; margin-bottom: 10px; }
.hs-step p { font-size: .88rem; color: var(--muted); line-height: 1.62; }

/* ── TRUST / LEGAL BAND ──────────────────────────────────────────────────── */
.hs-legal { position: relative; background: var(--sumi); padding: clamp(64px,7vw,88px) clamp(20px,5vw,56px); overflow: hidden; }
.hs-legal__wm { top: 50%; right: -2%; transform: translateY(-50%); font-size: 36vw; color: rgba(200,56,42,.07); }
.hs-legal__inner { position: relative; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
.hs-legal__copy { max-width: 500px; }
.hs-legal__copy h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(1.7rem,2.6vw,2.1rem); letter-spacing: -.02em; color: #fff; margin-bottom: 14px; }
.hs-legal__copy p { font-size: .96rem; color: rgba(255,255,255,.56); line-height: 1.72; }
.hs-legal__badges { display: flex; gap: 14px; flex-wrap: wrap; }
.hs-badge { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 20px 22px; text-align: center; min-width: 130px; }
.hs-badge__mark { color: var(--ink); margin-bottom: 8px; line-height: 1; display: flex; justify-content: center; }
.hs-badge__mark--section { font-family: 'Lora', serif; font-size: 1.5rem; display: block; }
.hs-badge__mark--scale { font-size: 1.4rem; }
.hs-badge__label { font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.78); line-height: 1.4; }

/* ── TESTIMONIALS ────────────────────────────────────────────────────────── */
.hs-tst__head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.hs-tst__head h2 { margin-bottom: 14px; }
.hs-tst__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hs-tst { background: var(--paper); border-radius: 16px; padding: 30px 28px; display: flex; flex-direction: column; gap: 18px; }
.hs-tst__quote { font-family: 'Lora', serif; font-size: 3.4rem; line-height: .5; color: var(--ink); height: 26px; }
.hs-tst__text { font-family: 'Lora', serif; font-size: 1.1rem; line-height: 1.6; color: var(--text); flex: 1; }
.hs-tst__by { display: flex; align-items: center; gap: 12px; border-top: 1px solid #E3DACC; padding-top: 18px; }
.hs-tst__avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #fff; font-family: 'Archivo', sans-serif; }
.hs-tst__name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .9rem; }
.hs-tst__role { font-size: .8rem; color: #8A7E72; }

/* ── TRUSTPILOT ──────────────────────────────────────────────────────────── */

/* ── PRICING ─────────────────────────────────────────────────────────────── */
.hs-pricing__inner { max-width: 1280px; margin: 0 auto; }
.hs-pricing__head { text-align: center; margin-bottom: 36px; }
.hs-pricing__head h2 { margin-bottom: 14px; }
.hs-pricing__head p { max-width: 520px; margin: 0 auto; }
/* ── Monthly / Annual toggle (CSS-only: hidden radios drive it via :checked) ── */
.hs-bill-radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.hs-bill-toggle { display: flex; justify-content: center; margin: 0 0 30px; }
.hs-bill-opt { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; font-size: .9rem; font-weight: 600; color: var(--muted); border: 1.5px solid var(--border); cursor: pointer; user-select: none; background: #fff; transition: background .12s, color .12s, border-color .12s; }
.hs-bill-opt--mo { border-radius: 999px 0 0 999px; }
.hs-bill-opt--yr { border-radius: 0 999px 999px 0; border-left: none; }
#hs-bill-mo:checked ~ .hs-bill-toggle .hs-bill-opt--mo,
#hs-bill-yr:checked ~ .hs-bill-toggle .hs-bill-opt--yr { background: var(--ink); color: #fff; border-color: var(--ink); }
.hs-bill-radio:focus-visible ~ .hs-bill-toggle .hs-bill-opt { outline: 2px solid var(--ink); outline-offset: 2px; }
/* price/cadence swap: monthly by default, annual when the annual radio is checked */
.hs-price--yr, .hs-cad--yr { display: none; }
#hs-bill-yr:checked ~ .hs-pricing__grid .hs-price--mo,
#hs-bill-yr:checked ~ .hs-pricing__grid .hs-cad--mo { display: none; }
#hs-bill-yr:checked ~ .hs-pricing__grid .hs-price--yr,
#hs-bill-yr:checked ~ .hs-pricing__grid .hs-cad--yr { display: inline; }
/* The "billed annually — $X/year · Save Y%" line: annual view only. */
.hs-billed--yr { display: none; }
#hs-bill-yr:checked ~ .hs-pricing__grid .hs-billed--yr { display: block; }
.hs-plan__billed { font-size: .76rem; color: var(--faint); margin: -6px 0 12px; }
.hs-plan--featured .hs-plan__billed { color: var(--on-seal); }
.hs-plan__billed .hs-save { display: inline-block; font-weight: 700; color: #166534; background: #dcfce7; border-radius: 20px; padding: 1px 8px; margin-left: 2px; }
.hs-plan--featured .hs-plan__billed .hs-save { color: var(--seal-dark); background: var(--on-seal); }
.hs-pricing__group { margin-bottom: 44px; }
.hs-pricing__group:last-child { margin-bottom: 0; }
.hs-pricing__group-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; margin: 0 0 4px; }
.hs-pricing__group-sub { color: var(--muted); font-size: .9rem; margin: 0 0 22px; }
.hs-pricing__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: start; }
/* All five tiers in a single row, stretched to fill the width. Cards are tightened
   so five fit comfortably; stretch so equal-height regardless of feature count. */
.hs-pricing__grid--plans { grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.hs-pricing__grid--plans .hs-plan { padding: 24px 18px; border-radius: 16px; display: flex; flex-direction: column; }
.hs-pricing__grid--plans .hs-plan--featured { padding: 26px 18px; }
.hs-pricing__grid--plans .hs-plan__name { margin-bottom: 13px; }
.hs-pricing__grid--plans .hs-plan__price { font-size: 2.2rem; }
.hs-pricing__grid--plans .hs-plan__desc { font-size: .82rem; padding-bottom: 16px; margin-bottom: 16px; }
.hs-pricing__grid--plans .hs-plan__feats { font-size: .82rem; gap: 8px; margin-bottom: 20px; flex: 1; }
.hs-pricing__grid--plans .hs-plan__feats li { font-size: .82rem; }
.hs-pricing__grid--plans .hs-plan__cta { margin-top: auto; }
/* Below the full-row width, wrap gracefully rather than squashing to 5. */
@media (max-width: 1080px) {
  .hs-pricing__grid--plans { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
.hs-plan { border: 1.5px solid var(--border); border-radius: 20px; padding: 32px 28px; }
.hs-plan--featured { position: relative; background: var(--ink); border: none; padding: 34px 28px; box-shadow: 0 20px 50px rgba(200,56,42,.28); }
.hs-plan__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--sumi); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; white-space: nowrap; }
.hs-plan__name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 18px; }
.hs-plan--featured .hs-plan__name { color: var(--on-seal); }
.hs-plan__price { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 2.8rem; letter-spacing: -.03em; line-height: 1; }
.hs-plan--featured .hs-plan__price { color: #fff; }
.hs-plan__cadence { font-size: .82rem; color: var(--faint); margin-bottom: 12px; }
.hs-plan--featured .hs-plan__cadence { color: var(--on-seal); }
.hs-plan__desc { font-size: .86rem; color: var(--muted); line-height: 1.55; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.hs-plan--featured .hs-plan__desc { color: var(--on-seal); border-bottom-color: rgba(255,255,255,.22); }
.hs-plan__feats { list-style: none; margin-bottom: 26px; display: flex; flex-direction: column; gap: 9px; }
.hs-plan__feats li { display: flex; align-items: flex-start; gap: 9px; font-size: .86rem; color: var(--muted); }
.hs-plan--featured .hs-plan__feats li { color: var(--on-seal); }
/* Small sub-note under a card's feature list (Free's honest limits — kept, not leading). */
.hs-plan__note { font-size: .78rem; color: var(--faint); margin: -8px 0 18px; }
.hs-plan--featured .hs-plan__note { color: var(--on-seal); }
.hs-tick { width: 17px; height: 17px; flex: none; border-radius: 50%; background: #DCFCE7; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.hs-plan--featured .hs-tick { background: rgba(255,255,255,.22); }
.hs-plan__cta { display: block; text-align: center; padding: 13px; border-radius: 10px; font-size: .92rem; font-weight: 600; border: 1.5px solid #DED6CB; color: var(--text); box-shadow: 0 1px 4px rgba(28,24,21,.15); transition: border-color .15s, box-shadow .12s ease; }
.hs-plan__cta:hover { border-color: var(--text); box-shadow: 0 2px 7px rgba(28,24,21,.18); }
.hs-plan__cta--white { font-weight: 700; background: #fff; color: var(--ink); border: none; transition: box-shadow .12s ease; }
.hs-plan__cta--white:hover { box-shadow: 0 2px 7px rgba(28,24,21,.18); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.hs-faq__inner { max-width: 760px; margin: 0 auto; }
.hs-faq__head { text-align: center; margin-bottom: 44px; }
.hs-faq__list { border-top: 1px solid var(--border); }
.hs-faq details { border-bottom: 1px solid var(--border); padding: 20px 2px; }
.hs-faq summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text); list-style: none; }
.hs-faq summary::-webkit-details-marker { display: none; }
.hs-faq summary > span:last-child { flex: none; font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--ink); transition: transform .2s; }
.hs-faq details[open] summary > span:last-child { transform: rotate(45deg); }
.hs-faq p { margin: 14px 0 0; font-size: .95rem; color: var(--muted); line-height: 1.7; max-width: 640px; }

/* ── FINAL CTA ───────────────────────────────────────────────────────────── */
.hs-final { position: relative; background: var(--paper); padding: clamp(80px,9vw,120px) clamp(20px,5vw,56px); text-align: center; overflow: hidden; }
.hs-final__wm { top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 44vw; color: rgba(200,56,42,.05); }
.hs-final__inner { position: relative; max-width: 640px; margin: 0 auto; }
.hs-final h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(2.1rem,3.6vw,2.9rem); letter-spacing: -.03em; line-height: 1.06; margin-bottom: 16px; }
.hs-final p { font-size: 1.05rem; color: var(--muted); margin-bottom: 36px; }
.hs-final__ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.hs-footer { background: var(--sumi); padding: 40px clamp(20px,5vw,56px); }
.hs-footer__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.hs-footer__logo { display: flex; align-items: center; gap: 10px; }
.hs-footer-seal { position: relative; width: 28px; height: 28px; flex: none; border-radius: 7px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.hs-footer-seal__inner { position: absolute; inset: 3px; border-radius: 5px; border: 1.5px solid rgba(245,238,224,.88); }
.hs-footer-seal__glyph { font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 14px; line-height: 1; color: #F6EFE1; }
.hs-footer__word { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: -.02em; color: rgba(255,255,255,.92); }
.hs-footer__word .hs-ink { color: var(--seal-on-dark); }
.hs-footer__links { display: flex; gap: 24px; flex-wrap: wrap; font-size: .8rem; color: rgba(255,255,255,.6); }
.hs-footer__links a { transition: color .15s; }
.hs-footer__links a:hover { color: rgba(255,255,255,.8); }
.hs-footer__copy { font-size: .75rem; color: rgba(255,255,255,.6); }
/* Trademark / non-affiliation notice (/docusign-alternative). NOT .hs-footer__copy:
   ⭐ .hs-footer__inner is a `space-between` flex row built for the homepage's THREE
   children (logo · links · copyright). A fourth sibling just becomes another item in
   that row, styled identically to the nav links — which is exactly how the disclaimer
   became unfindable (Michael, 2026-08-24: "not appearing visible on any part").
   `flex-basis:100%` forces its OWN full-width row; the hairline above separates it from
   the navigation so it reads as a notice rather than chrome. A distinct class also means
   future footer restyling cannot silently reshape a legal line. Contrast is unchanged
   (7:1 — the problem was grouping and position, never colour). */
.hs-footer__legal {
  flex: 0 0 100%;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .75rem;
  line-height: 1.5;
  color: rgba(255,255,255,.6);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .hs-features__grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  /* Nav: the primary CTA lives in the hero on mobile. Hide the desktop links,
     the ghost Sign in, and the red button; show a plain "Sign in" link that sits
     to the left of the hamburger. */
  .hs-nav__links, .hs-nav__signin { display: none; }
  .hs-nav .hs-btn--solid { display: none; }
  .hs-nav .hs-nav__signin-mobile { display: inline-flex; align-items: center; font-weight: 600; font-size: 0.9rem; color: #221C18; padding: 8px 4px; }
  .hs-nav__right { gap: 8px; }
  .hs-hamburger { display: block; }

  /* Hero -> single column, centered */
  .hs-hero__grid { grid-template-columns: 1fr; padding: clamp(48px,8vw,72px) 20px; text-align: center; }
  .hs-hero__visual { min-height: auto; }
  .hs-hero__eyebrow { justify-content: center; }
  .hs-hero__ctas, .hs-hero__trust { justify-content: center; }
  .hs-hero__sub { margin-left: auto; margin-right: auto; }
  .hs-doc-mini { display: none; }
  .hs-doc { transform: none; }

  .hs-how__grid { grid-template-columns: 1fr; gap: 40px; }
  .hs-how__line { display: none; }
  .hs-tst__grid { grid-template-columns: 1fr; }
  .hs-pricing__grid, .hs-pricing__grid--plans { grid-template-columns: 1fr; }
  .hs-plan--featured { order: -1; }
  .hs-legal__inner { flex-direction: column; text-align: center; }
  .hs-legal__copy { max-width: none; }
  .hs-legal__badges { justify-content: center; }
  .hs-footer__inner { flex-direction: column; gap: 28px; }
  .hs-footer__links { flex-wrap: wrap; justify-content: center; }

  /* Comfortable touch targets */
  .hs-btn, .hs-cta-primary, .hs-cta-secondary, .hs-plan__cta, .hs-nav-drawer a { min-height: 44px; }
  .hs-cta-primary, .hs-cta-secondary { display: inline-flex; align-items: center; }
}

@media (max-width: 640px) {
  .hs-features__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hs-final__ctas { flex-direction: column; align-items: center; }
  .hs-final__ctas a { width: 100%; }
}

/* ============================================================
   3D BUTTONS · keycap look for the nav "Sign in" + "Get started
   free" buttons (matches the app-wide keycap system). Appearance
   only; appended last so it wins on source order. --ink is the
   homepage vermillion; #A52D22 is its pressed-dark ledge.
   ============================================================ */

/* "Get started free" — vermillion keycap. Border added + padding
   trimmed 1px so total box size stays put and it stays aligned with
   the ghost button. */
.hs-btn--solid {
  padding: 8px 18px;
  border: 1px solid #A52D22;
  background: var(--ink);
  box-shadow: 0 1px 4px rgba(28,24,21,.15);
  transition: box-shadow .12s ease, background .15s ease, filter .15s ease;
}
.hs-btn--solid:hover { filter: brightness(.96); box-shadow: 0 2px 7px rgba(28,24,21,.18); }
.hs-btn--solid:active { box-shadow: 0 1px 3px rgba(28,24,21,.13); }

/* "Sign in" — flat paper button (keeps its existing 1.5px border). */
.hs-btn--ghost {
  background: #fff;
  border-color: #E2D6C2;
  box-shadow: 0 1px 4px rgba(28,24,21,.15);
  transition: box-shadow .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.hs-btn--ghost:hover {
  border-color: var(--ink); color: #A52D22;
  box-shadow: 0 2px 7px rgba(28,24,21,.18);
}
.hs-btn--ghost:active { box-shadow: 0 1px 3px rgba(28,24,21,.13); }

/* ── Bottom "final CTA" pair — flat, scoped to the final section so the
   hero's .hs-cta-* buttons (shared classes) stay as-is. ── */
.hs-final__ctas .hs-cta-primary {
  padding: 14px 29px;
  border: 1px solid #A52D22;
  background: var(--ink);
  box-shadow: 0 1px 4px rgba(28,24,21,.15);
  transition: box-shadow .12s ease, background .15s ease, filter .15s ease;
}
.hs-final__ctas .hs-cta-primary:hover {
  filter: brightness(.96);
  box-shadow: 0 2px 7px rgba(28,24,21,.18);
}
.hs-final__ctas .hs-cta-primary:active { box-shadow: 0 1px 3px rgba(28,24,21,.13); }
.hs-final__ctas .hs-cta-secondary {
  background: #fff;
  border-color: #E2D6C2;
  box-shadow: 0 1px 4px rgba(28,24,21,.15);
  transition: box-shadow .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.hs-final__ctas .hs-cta-secondary:hover {
  border-color: var(--ink); color: #A52D22;
  box-shadow: 0 2px 7px rgba(28,24,21,.18);
}
.hs-final__ctas .hs-cta-secondary:active { box-shadow: 0 1px 3px rgba(28,24,21,.13); }
@media (prefers-reduced-motion: reduce) {
  .hs-final__ctas .hs-cta-primary, .hs-final__ctas .hs-cta-secondary { transition: none; }
}

/* ==========================================================================
   PLATFORM REFRESH (additive — new selectors only, no existing rule touched).
   "What's new" hero ribbon, the Platform bento section, and the how-it-works
   4th (optional) step. Extends the production tokens above.
   ========================================================================== */

/* ── "What's new" hero ribbon ────────────────────────────────────────────── */
.hs-hero__whatsnew {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 24px;
  font-size: .84rem; font-weight: 600; color: var(--ink);
  background: rgba(200,56,42,.08); border: 1px solid rgba(200,56,42,.2);
  padding: 9px 16px; border-radius: 999px;
  transition: background .15s, border-color .15s;
}
.hs-hero__whatsnew:hover { background: rgba(200,56,42,.14); border-color: rgba(200,56,42,.32); }
.hs-hero__whatsnew-dot { font-size: .9rem; line-height: 1; }
@media (max-width: 768px) { .hs-hero__whatsnew { margin-left: auto; margin-right: auto; } }

/* ── Platform section (bento pillars) ────────────────────────────────────── */
.hs-platform { background: var(--paper); }
.hs-platform__head { margin-bottom: 52px; max-width: 640px; }
.hs-platform__head h2 { margin-bottom: 14px; }
.hs-platform__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.hs-plat { position: relative; background: #fff; border-radius: 18px; padding: 30px 30px; box-shadow: 0 2px 10px rgba(28,24,21,.06); }
.hs-plat__badge { position: absolute; top: 24px; right: 24px; background: rgba(200,56,42,.1); color: var(--seal-text); font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.hs-plat__icon { width: 46px; height: 46px; background: var(--paper); border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.hs-plat__title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.08rem; margin-bottom: 10px; line-height: 1.3; }
.hs-plat p { font-size: .9rem; color: var(--muted); line-height: 1.64; max-width: 48ch; }
/* API / integrations card — an ORDINARY cell, not a full-bleed one.
   It used to carry .hs-plat--wide (grid-column: 1 / -1) plus an inline flex CTA. With
   five ordinary cards, five doesn't divide by two and a full-bleed card can never
   backfill a half-cell, so the 5th card sat alone with the right-hand cell EMPTY and the
   API card started its own row beneath it. The card was also wider than its own copy
   (p was capped at 68ch), which pushed the CTA to the far right with a dead gap in the
   middle — so the extra width read as a layout accident rather than as emphasis.
   Six equal cards give a clean 3×2: no hole, and ~185px less page height.
   ⭐ The CTA STAYS. It is the only button in the section and is now what marks this card
   out, since size no longer does. It simply sits under the copy instead of beside it.
   (.hs-plat--wide, .hs-plat__wide-main and the ≤640px flex-direction override are gone
   rather than left as orphans; the ≤760px rule below is the GRID's, not the wide card's,
   and still collapses the section to one column.) */
.hs-plat--api { display: flex; flex-direction: column; align-items: flex-start; }
/* Push the CTA to the card's bottom edge so it lines up with its row-mate regardless of
   how the two copy blocks differ in length. */
.hs-plat--api p { flex: 1; }
.hs-plat__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; background: var(--seal); color: #fff; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .92rem; padding: 13px 24px; border-radius: 12px; text-decoration: none; white-space: nowrap; transition: background .15s ease; }
.hs-plat__cta:hover { background: var(--seal-dark); }
.hs-plat__cta span { font-size: 1.15em; line-height: 1; }
@media (max-width: 760px) { .hs-platform__grid { grid-template-columns: 1fr; } }

/* ── How-it-works 4th (optional) step ────────────────────────────────────── */
.hs-how__grid--4 { grid-template-columns: repeat(4,1fr); }
.hs-how__grid--4 .hs-how__line { left: 12%; right: 12%; }
.hs-step__tag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
@media (max-width: 768px) { .hs-how__grid--4 { grid-template-columns: 1fr; } }

.hs-features__grid--5 { grid-template-columns: repeat(6, 1fr); }
.hs-features__grid--5 .hs-feature { grid-column: span 2; }
.hs-features__grid--5 .hs-feature:nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 1024px) {
  .hs-features__grid--5 { grid-template-columns: repeat(2, 1fr); }
  .hs-features__grid--5 .hs-feature,
  .hs-features__grid--5 .hs-feature:nth-child(4) { grid-column: auto; }
  .hs-features__grid--5 .hs-feature:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hs-features__grid--5 { grid-template-columns: 1fr; }
  .hs-features__grid--5 .hs-feature:nth-child(5) { grid-column: auto; }
}