/* Debt Digest home page (T-10744): "The pile becomes the picture".
   Loaded by landing/index.html, last in its stylesheet run, and also by
   landing/for-business.html (before org.css, which styles that page's own
   floating Comfort button). Every rule is scoped under .hm, so no shell element moves.

   Founder-approved 2026-10-02 (chat): the soft light stage look, Instrument
   Serif for display headings, bills wording. This supersedes the T-10739
   "no serif" and "green only on the main button" home rules; the Design System
   and Design Map still say serif retired and need the desk to reconcile.

   Rules this file keeps:
   1. Honest faces. A dashed warm paper edge always means "yours, your
      estimate"; a company color always means "their record".
   2. Motion is user-driven or one-time. Scroll scrubs the one scene, nothing
      loops on its own, and Comfort > Calm (or prefers-reduced-motion) stops
      every animation and shows the finished state.
   3. Green marks progress, live status and the primary button. Labels and
      kickers use ink tones.
   4. No raw hex: every color is a design-system token or a mix of tokens. */

.hm {
  --hm-bg: var(--cream);
  --hm-stage-a: color-mix(in srgb, var(--green) 8%, var(--cream));
  --hm-stage-b: color-mix(in srgb, var(--copper) 7%, var(--cream));
  --hm-stage-glow: rgba(255,255,255,.85);
  --hm-surface: var(--white);
  --hm-ink: var(--ink);
  --hm-ink-2: var(--ink-mid);
  --hm-dim: var(--ink-muted);
  --hm-line: color-mix(in srgb, var(--ink) 14%, transparent);
  --hm-green: var(--green);
  --hm-green-deep: var(--green-deep);
  --hm-on-green: var(--white);
  --hm-green-soft: var(--green-light);
  --hm-copper: var(--copper);
  --hm-sand: var(--cream-deep);
  --hm-sky: color-mix(in srgb, var(--navy) 7%, var(--cream));
  --hm-blush: var(--copper-tint);
  --hm-mist: color-mix(in srgb, var(--green) 10%, var(--cream));
  --hm-paper-edge: #B9B2A2;
  --hm-shadow: 0 1px 2px rgba(11,42,31,.06), 0 18px 34px -18px rgba(11,42,31,.28);
  --hm-shadow-soft: 0 1px 2px rgba(11,42,31,.05), 0 24px 50px -24px rgba(11,42,31,.22);
  --hm-font-display: var(--font-serif);
  --hm-font-body: var(--font-display);
  --hm-r-stage: 34px; --hm-r-lg: 26px; --hm-r-md: 18px;
  --hm-sp: clamp(4.5rem, 10vw, 8rem);
  --hm-t-h2: clamp(2.3rem, 5.2vw, 4.2rem);
  --hm-ease: cubic-bezier(.2,.7,.2,1);
  --hm-nav: 75px;
  --hm-fs-xs: .8rem; --hm-fs-sm: .86rem; --hm-fs-md: .92rem; --hm-fs-base: 1.02rem; --hm-fs-lg: 1.3rem; --hm-fs-h4: 1.6rem; --hm-fs-h3: 2rem; --hm-fs-num: 3rem;
  --hm-co-clearwater-a: var(--blue); --hm-co-clearwater-b: color-mix(in srgb, var(--blue) 80%, var(--white));
  --hm-co-summit-a: var(--navy-light); --hm-co-summit-b: color-mix(in srgb, var(--navy-light) 78%, var(--white));
  --hm-co-orbit-a: color-mix(in srgb, var(--blue) 55%, var(--copper-deep)); --hm-co-orbit-b: color-mix(in srgb, var(--blue) 40%, var(--copper-deep));
  --hm-co-dentist-a: color-mix(in srgb, var(--blue) 72%, var(--green-deep)); --hm-co-dentist-b: color-mix(in srgb, var(--blue) 60%, var(--white));
  --hm-co-hospital-a: var(--navy-light); --hm-co-hospital-b: color-mix(in srgb, var(--navy-light) 70%, var(--white));
  --hm-co-card-a: color-mix(in srgb, var(--blue) 62%, var(--navy)); --hm-co-card-b: color-mix(in srgb, var(--blue) 70%, var(--white));
  --hm-co-car-a: var(--copper-deep); --hm-co-car-b: color-mix(in srgb, var(--copper-deep) 70%, var(--copper));
  --hm-co-collections-a: color-mix(in srgb, var(--blue) 50%, var(--copper-deep)); --hm-co-collections-b: color-mix(in srgb, var(--blue) 40%, var(--copper));
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.hm *, .hm *::before, .hm *::after { box-sizing: border-box; }
.hm h1, .hm h2, .hm h3, .hm h4, .hm p, .hm ul, .hm ol, .hm figure { margin: 0; }
.hm ul, .hm ol { padding: 0; list-style: none; }
:where(.hm) :where(a) { color: inherit; }
.hm :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.hm .serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.015em; }
.hm button { font: inherit; }
.hm .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-large="1"] { font-size: 112.5%; }
html[data-large="2"] { font-size: 125%; }
html[data-hc="1"] .hm { --hm-ink-2: var(--ink); --hm-dim: var(--ink-mid); --hm-line: color-mix(in srgb, var(--ink) 42%, transparent); --hm-paper-edge: var(--ink-mid); }
/* Comfort (text size, motion, contrast): opened from the header icon or the phone menu; the panel hangs under the header, there is no floating button */
.hm .cf { position: fixed; right: 12px; top: calc(var(--hm-nav) + 8px); z-index: 60; }

.hm .cf-p { position: absolute; right: 0; top: 0; width: 320px; max-width: calc(100vw - 24px); max-height: calc(100vh - var(--hm-nav) - 24px); max-height: calc(100svh - var(--hm-nav) - 24px); overflow-y: auto; overscroll-behavior: contain; background: var(--white); border: 1px solid var(--hm-line); border-radius: 22px; box-shadow: var(--hm-shadow-soft); padding: 1rem 1.1rem 1.1rem; display: none; gap: .9rem; text-align: left; }
.hm .cf-p.open { display: grid; }
.hm .cf-p h3 { font: 400 1.5rem/1.1 var(--font-serif); letter-spacing: -.015em; }
.hm .cf-p .sub { margin: -.5rem 0 0; font-size: var(--hm-fs-md); color: var(--hm-ink-2); }
.hm .cf-r { display: grid; gap: .4rem; }
.hm .cf-r > span { font-size: var(--hm-fs-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hm-ink-2); }
.hm .cf-seg { display: flex; background: var(--hm-green-soft); border-radius: 999px; padding: 3px; gap: 3px; }
.hm .cf-seg button { flex: 1; cursor: pointer; border: 0; background: none; min-height: 44px; border-radius: 999px; font: 600 .92rem var(--font-display); color: var(--hm-ink-2); }
.hm .cf-seg button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: var(--hm-shadow); }
.hm .cf-note { font-size: var(--hm-fs-md); color: var(--hm-ink-2); }
html[data-calm="1"] .hm *, html[data-calm="1"] .hm *::before, html[data-calm="1"] .hm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media (max-width: 520px) {
  .hm .hint-t { font-size: 0;}
  .hm .hint-t::after { content: "Scroll"; font-size: var(--hm-fs-sm);}
}
.hm .pill { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.05rem; border-radius: 999px; background: var(--hm-green); color: var(--hm-on-green); font-weight: 600; font-size: var(--hm-fs-md); text-decoration: none; border: 0; cursor: pointer; font-family: inherit;}
.hm .pill:hover { filter: brightness(1.07);}
.hm .scene { position: relative; height: 380vh; height: 380svh;}
.hm .stage { position: sticky; top: var(--hm-nav); height: calc(100vh - var(--hm-nav) - 12px); height: calc(100svh - var(--hm-nav) - 12px); min-height: 600px; overflow: hidden; margin-inline: 12px; border-radius: 34px;
  background:
    radial-gradient(55% 45% at 50% 34%, var(--hm-stage-glow), transparent 72%),
    linear-gradient(155deg, var(--hm-stage-a) 0%, color-mix(in srgb, var(--hm-stage-a) 50%, var(--hm-stage-b)) 55%, var(--hm-stage-b) 100%);
  box-shadow: inset 0 0 0 1px var(--hm-line);}
@media (max-width: 560px) {
  .hm .stage { margin-inline: 8px; border-radius: 26px;}
}
.hm .hello { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(1.4rem, 4.5vh, 3rem) 1.25rem 0; z-index: 11; will-change: transform, opacity;}
.hm .hello h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.9rem); line-height: 1; max-width: 22ch;}
.hm .hello h1 span { display: block; text-wrap: balance;}
.hm .hello h1 em { color: var(--hm-green-deep); font-style: italic;}
.hm .hello .sub { margin: .9rem 0 0; font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--hm-ink-2); max-width: 52ch; text-wrap: balance;}
.hm .ask { margin-top: clamp(1.1rem, 3vh, 1.9rem); width: min(640px, 100%);}
.hm .ask-box { display: flex; align-items: center; gap: .5rem; padding: .45rem .45rem .45rem 1.4rem; border-radius: 999px; background: var(--hm-surface); box-shadow: var(--hm-shadow-soft); border: 1px solid var(--hm-line);}
.hm .ask-box:focus-within { outline: 3px solid var(--hm-green); outline-offset: 2px;}
.hm .ask-box label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
.hm .ask-box input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 1.05rem var(--hm-font-body); color: var(--hm-ink); padding: .8rem 0; outline: none;}
.hm .ask-box input::placeholder { color: var(--hm-dim);}
.hm .go { flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 0; background: var(--hm-green); color: var(--hm-on-green); display: grid; place-items: center; cursor: pointer;}
.hm .go:hover { filter: brightness(1.08);}
.hm .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .9rem; padding: 0; list-style: none;}
.hm .chips button { font: 500 .85rem var(--hm-font-body); color: var(--hm-ink-2); background: rgba(255,255,255,.70); border: 1px solid var(--hm-line); border-radius: 999px; padding: .4rem .85rem; cursor: pointer;}
.hm .chips button:hover { color: var(--hm-ink); border-color: var(--hm-ink-2);}
.hm .promise { margin: 1rem 0 0; font-size: var(--hm-fs-sm); color: var(--hm-ink-2);}
.hm .promise b { color: var(--hm-ink); font-weight: 600;}
.hm .ask-note { min-height: 1.4em; margin: .6rem 0 0; font-size: var(--hm-fs-md); color: var(--hm-green);}
.hm .it { position: absolute; left: 0; top: 0; width: var(--cw, 340px); height: 68px; will-change: transform; transform-origin: center;}
.hm .layer { position: absolute; inset: 0; border-radius: 16px; padding: .5rem .95rem; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;}
.hm .layer .row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;}
.hm .name { font-weight: 600; font-size: var(--hm-fs-md); letter-spacing: -.005em; line-height: 1.35;}
.hm .amt { font-weight: 600; font-variant-numeric: tabular-nums;}
.hm .meta { display: flex; gap: .5rem; align-items: center; font-size: var(--hm-fs-sm); line-height: 1.3;}
.hm .tag { border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; white-space: nowrap;}
.hm .paper { background: var(--hm-surface); box-shadow: var(--hm-shadow); border: 1px solid var(--hm-line); overflow: hidden;}
.hm .paper .skel { display: block; height: 5px; border-radius: 3px; background: var(--hm-line); width: 70%;}
.hm .paper .skel + .skel { width: 45%; margin-top: 4px;}
.hm .paper .sk { margin-top: 6px;}
.hm .paper .bar { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--b, var(--hm-dim));}
.hm .paper .bal { font-size: var(--hm-fs-sm); color: var(--hm-ink-2);}
.hm .paper.est { border: 1.5px dashed var(--hm-paper-edge);}
.hm .hmcard { color: var(--white); background: linear-gradient(140deg, var(--a), var(--b)); box-shadow: var(--hm-shadow);}
.hm .hmcard.est { color: var(--hm-ink); background: var(--hm-surface); border: 1.5px dashed var(--hm-paper-edge);}
.hm .hmcard.est .meta { color: var(--hm-ink-2);}
.hm .hmcard .meta { color: rgba(255,255,255,.92);}
.hm .pocket { position: absolute; left: 0; top: 0; width: calc(var(--cw, 340px) + 40px); padding: 1.15rem 1.25rem 1.2rem; border-radius: 24px; background: var(--hm-surface); color: var(--hm-ink); box-shadow: var(--hm-shadow-soft); border: 1px solid var(--hm-line); will-change: transform, opacity; z-index: 10;}
.hm .pocket .who { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--hm-fs-md); color: var(--hm-ink-2);}
.hm .pocket .who svg { color: var(--hm-green-deep);}
.hm .pocket .title { margin: .45rem 0 0; font-size: var(--hm-fs-h3); line-height: 1.05;}
.hm .pocket .total { margin: .2rem 0 0; font-size: var(--hm-fs-base); font-variant-numeric: tabular-nums; color: var(--hm-ink-2);}
.hm .pocket .total span { color: var(--hm-ink); font-weight: 600;}
.hm .pips { display: flex; gap: .3rem; margin: .8rem 0 .35rem;}
.hm .pips i { flex: 1; height: 6px; border-radius: 3px; background: var(--hm-green);}
.hm .pips i.p { background: transparent; border: 1.5px dashed var(--hm-paper-edge);}
.hm .pocket .legend { margin: 0; font-size: var(--hm-fs-sm); color: var(--hm-ink-2);}
.hm .nextbox { margin-top: .95rem; padding: .8rem 1rem .85rem; border-radius: 16px; background: var(--hm-green-soft);}
.hm .pocket .k { margin: 0; font-size: var(--hm-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-green-deep);}
.hm .pocket .hmstep { margin: .25rem 0 0; font-size: var(--hm-fs-base); font-weight: 500;}
.hm .pocket .pen { display: block; margin-top: .3rem;}
.hm .pocket .choose { margin: .6rem 0 0; font-size: var(--hm-fs-md); color: var(--hm-ink-2);}
.hm .pocket .pill { font-size: var(--hm-fs-md);}
.hm .caps { position: absolute; z-index: 4; left: clamp(1.5rem, 5vw, 4.5rem); top: 50%; width: min(340px, 36vw); transform: translateY(-50%);}
.hm .cap { position: absolute; left: 0; top: 0; right: 0; opacity: 0; transform: translateY(calc(-50% + 10px)); transition: opacity .35s, transform .35s; pointer-events: none;}
.hm .cap.on { opacity: 1; transform: translateY(-50%);}
.hm .cap .kick { font-size: var(--hm-fs-xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--hm-ink-2); margin: 0 0 .6rem;}
.hm .cap h2 { margin: 0; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.02; text-wrap: balance;}
.hm .cap p { margin: .8rem 0 0; color: var(--hm-ink-2);}
.hm .scroll-hint { position: absolute; left: 50%; bottom: .9rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(255,255,255,.88); z-index: 12; transform: translateX(-50%); font-size: var(--hm-fs-sm); color: var(--hm-ink-2); display: flex; align-items: center; gap: .4rem; z-index: 5;}
@media (max-width: 860px) {
  .hm .ask-box input { text-overflow: ellipsis;}
  .hm .caps { left: 0; right: 0; width: auto; top: 4.7rem; transform: none; padding-inline: 1.25rem; text-align: center;}
  .hm .cap { left: 1.25rem; right: 1.25rem; transform: translateY(10px);}
  .hm .cap.on { transform: none;}
  .hm .chips button { min-height: 44px;}
  .hm .cap h2 { font-size: var(--hm-fs-h3);}
  .hm .cap p { font-size: var(--hm-fs-md); margin-top: .5rem;}
  .hm .stage[data-s="0"] .cap p,
.hm .stage[data-s="1"] .cap p { display: none;}
  .hm .pocket .pen,
.hm .pocket .legend,
.hm .pocket .choose { display: none;}
  .hm .stage { min-height: 0;}
  .hm .face:not(.on) { filter: none;}
  .hm .face > * { transition: opacity .4s;}
  .hm .face:not(.on) > * { opacity: 0;}
}
.hm .cam { position: absolute; inset: 0; perspective: 1700px; perspective-origin: var(--cx, 66%) 42%; pointer-events: none; opacity: 0; transition: opacity .7s; z-index: 6;}
.hm .cam.on { opacity: 1;}
.hm .tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--py, 0deg)) rotateY(var(--px, 0deg)); transition: transform .3s ease-out;}
.hm .prism { position: absolute; left: var(--cx, 66%); top: var(--cy, 50%); width: 0; height: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--r, 260px) * -1)) rotateY(calc(var(--k, 0) * var(--ang, 60deg) * -1)); transition: transform 1.05s cubic-bezier(.55,.05,.2,1);}
.hm .face { position: absolute; left: calc(var(--fw, 340px) / -2); top: calc(var(--fh, 310px) / -2); width: var(--fw, 340px); height: var(--fh, 310px);
  transform: rotateY(calc(var(--i) * var(--ang, 60deg))) translateZ(var(--r, 260px)); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 26px; padding: 1.15rem 1.25rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; background: var(--hm-surface); border: 1px solid var(--hm-line);
  box-shadow: var(--hm-shadow-soft); opacity: .22; filter: blur(1.2px); transition: opacity .7s, filter .7s;}
.hm .face.on { opacity: 1; filter: none;}
.hm .face .k { margin: 0; font-size: var(--hm-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-green-deep);}
.hm .face h3 { margin: 0; font-size: var(--hm-fs-h4); line-height: 1.05;}
.hm .face p { margin: 0;}
.hm .face .sm { font-size: var(--hm-fs-md); color: var(--hm-ink-2);}
.hm .face .grow { flex: 1;}
.hm .f-card { color: var(--white); border: 0; background: linear-gradient(140deg, var(--a, var(--hm-green-deep)), var(--b, var(--navy-light)));}
.hm .f-card .k { color: rgba(255,255,255,.82);}
.hm .f-card.est { color: var(--hm-ink); background: var(--hm-surface); border: 1.5px dashed var(--hm-paper-edge);}
.hm .f-card.est .k { color: var(--hm-green-deep);}
.hm .f-card .big { font-size: var(--hm-fs-num); line-height: 1; font-variant-numeric: tabular-nums;}
.hm .f-card .tag { align-self: flex-start; font-size: var(--hm-fs-sm); padding: 1px 10px;}
.hm .f-plan .hmdate { font-size: var(--hm-fs-num); line-height: 1; color: var(--hm-green-deep);}
.hm .track { position: relative; height: 8px; border-radius: 4px; background: var(--hm-line); margin: .5rem 0 .2rem;}
.hm .track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--hm-green); transition: width 1.6s cubic-bezier(.3,.1,.2,1) .5s;}
.hm .face.on .track i { width: 100%;}
.hm .track-l { display: flex; justify-content: space-between; font-size: var(--hm-fs-sm); color: var(--hm-ink-2);}
.hm .chip { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--hm-green-soft); color: var(--hm-green-deep); font-size: var(--hm-fs-sm); font-weight: 500;}
.hm .due { display: flex; align-items: center; gap: .8rem;}
.hm .cal { width: 52px; border-radius: 12px; overflow: hidden; background: var(--hm-surface); border: 1px solid var(--hm-line); text-align: center; flex: none;}
.hm .cal b { display: block; background: var(--hm-copper); color: var(--white); font-size: var(--hm-fs-xs); letter-spacing: .1em; padding: 2px 0;}
.hm .cal span { display: block; font-size: var(--hm-fs-lg); font-weight: 600; line-height: 1.5;}
.hm .f-pay .pill { align-self: flex-start;}
.hm .f-done { background: var(--hm-green-soft); align-items: flex-start;}
.hm .f-done svg { margin-bottom: .2rem;}
.hm .f-done .ring { fill: none; stroke: var(--hm-green); stroke-width: 3;}
.hm .f-done .tick { fill: none; stroke: var(--hm-green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .8s ease .55s;}
.hm .face.on .tick { stroke-dashoffset: 0;}
.hm .f-done h3 { font-size: var(--hm-fs-h3);}
.hm .hud { position: absolute; z-index: 7; top: 1rem; right: 1.2rem; display: flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .6rem; border-radius: 999px; background: var(--hm-surface); box-shadow: var(--hm-shadow); border: 1px solid var(--hm-line); font-size: var(--hm-fs-md); opacity: 0; transform: translateY(-6px); transition: opacity .5s, transform .5s; pointer-events: none;}
.hm .hud.on { opacity: 1; transform: none;}
.hm .hud svg { color: var(--hm-green-deep);}
.hm .hud b { font-variant-numeric: tabular-nums;}
.hm .hud .res { color: var(--hm-green-deep); font-weight: 600;}
.hm .rail { position: absolute; z-index: 8; left: clamp(1.5rem, 5vw, 4.5rem); right: clamp(1.5rem, 5vw, 4.5rem); bottom: 1.1rem; margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; opacity: 0; transition: opacity .5s;}
.hm .rail.on { opacity: 1;}
.hm .rail::before,
.hm .rail::after { content: ""; position: absolute; left: 5px; top: 5px; height: 2px; border-radius: 1px;}
.hm .rail::before { right: 5px; background: var(--hm-line);}
.hm .rail::after { width: calc((100% - 10px) * var(--rp, 0)); background: var(--hm-green);}
.hm .rail li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; z-index: 1; min-width: 12px;}
.hm .rail li i { width: 12px; height: 12px; border-radius: 50%; background: var(--hm-bg); border: 2px solid var(--hm-paper-edge); transition: background .4s, border-color .4s, transform .4s;}
.hm .rail li span { font-size: var(--hm-fs-xs); color: var(--hm-ink-2); white-space: nowrap; transition: color .4s;}
.hm .rail li.done i { background: var(--hm-green); border-color: var(--hm-green);}
.hm .rail li.now i { background: var(--hm-green); border-color: var(--hm-green); transform: scale(1.35); box-shadow: 0 0 0 5px color-mix(in srgb, var(--hm-green) 22%, transparent);}
.hm .rail li.now span { color: var(--hm-ink); font-weight: 600;}
@media (max-width: 640px) {
  .hm .hud #hud-who { display: none;}
  .hm .hud { white-space: nowrap;}
  .hm .rail li span { display: none;}
  .hm .rail li.now span { display: block; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);}
  .hm .rail { bottom: 1.6rem;}
  .hm .hud { top: .6rem; bottom: auto; right: 50%; transform: translate(50%, -6px);}
  .hm .hud.on { transform: translate(50%, 0);}
}
@media (prefers-reduced-motion: reduce) {
  .hm .prism,
.hm .tilt,
.hm .face,
.hm .face > *,
.hm .cam,
.hm .hud,
.hm .rail,
.hm .track i,
.hm .f-done .tick { transition: none !important;}
  .hm .track i { width: 100%;}
  .hm .f-done .tick { stroke-dashoffset: 0;}
}
/* Snug phones (stage under 700px tall; home.js sets data-fit): the caption, the card and the picture share the stage without covering each other */
.hm .stage[data-fit="snug"] .caps { top: 3.6rem;}
.hm .stage[data-fit="snug"] .cap:nth-child(-n+2) { top: -2.6rem;}
.hm .stage[data-fit="snug"] .cap h2 { font-size: var(--hm-fs-h4);}
.hm .stage[data-fit="snug"] .cap p { font-size: var(--hm-fs-sm);}
.hm .stage[data-fit="snug"] .face { padding: .9rem 1rem; gap: .5rem;}
.hm .stage[data-fit="snug"] .face .sm { font-size: var(--hm-fs-sm) !important;}
.hm .stage[data-fit="snug"] .pocket { padding: .8rem 1rem;}
.hm .stage[data-fit="snug"] .pocket .title { font-size: var(--hm-fs-h4);}
.hm .stage[data-fit="snug"] .pips { margin: .5rem 0 .2rem;}
.hm .stage[data-fit="snug"] .nextbox { margin-top: .6rem; padding: .6rem .8rem;}
.hm .stage[data-fit="snug"] .cam,
.hm .stage[data-mask] .cam { -webkit-mask-image: linear-gradient(to bottom, black calc(var(--lane-bot, 100%) - 28px), transparent var(--lane-bot, 100%)); mask-image: linear-gradient(to bottom, black calc(var(--lane-bot, 100%) - 28px), transparent var(--lane-bot, 100%));}
/* Comfort > Calm: the cue promises a scroll show that does not play */
html[data-calm="1"] .hm .scroll-hint,
.hm .stage[data-cue="off"] .scroll-hint { visibility: hidden;}
/* Very short screens (a phone held sideways; home.js sets data-fit="flat" on the scene and the stage): no pinned story.
   The headline, subhead, ask box and promise line sit in plain page flow and scroll with the page;
   the same story is told in full by the sections below. */
.hm .scene[data-fit="flat"] { height: auto;}
.hm .stage[data-fit="flat"] { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; padding-bottom: 1.4rem;}
.hm .stage[data-fit="flat"] .caps,
.hm .stage[data-fit="flat"] .cam,
.hm .stage[data-fit="flat"] .hud,
.hm .stage[data-fit="flat"] .rail,
.hm .stage[data-fit="flat"] #pile,
.hm .stage[data-fit="flat"] .pocket,
.hm .stage[data-fit="flat"] .scroll-hint { display: none;}
.hm .stage[data-fit="flat"] .hello { position: relative; inset: auto; padding: .6rem 1.25rem .4rem;}
.hm .stage[data-fit="flat"] .hello h1 { max-width: none; font-size: clamp(1.7rem, 4.6vw, 2.2rem);}
.hm .stage[data-fit="flat"] .hello .sub { display: block;}
.hm .stage[data-fit="flat"] .hello .sub { margin-top: .4rem; max-width: none; font-size: var(--hm-fs-md);}
.hm .stage[data-fit="flat"] .ask { margin-top: .8rem;}
/* The story chips switch the pinned story, which is not drawn here, so they would do nothing a person can see: not shown. */
.hm .stage[data-fit="flat"] .hello .chips-l,
.hm .stage[data-fit="flat"] .chips { display: none;}
.hm .it,
.hm .pocket { opacity: 0; transition: opacity .45s;}
.hm .ico { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: transparent; color: var(--hm-ink-2); display: grid; place-items: center; cursor: pointer;}
.hm .ico:hover { background: var(--hm-green-soft); color: var(--hm-green-deep);}
.hm .step2 { margin: .8rem 0 0; font-size: var(--hm-fs-sm); color: var(--hm-ink-2);}
.hm .linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;}
.hm .linkish:hover { color: var(--hm-ink);}
.hm .linkish.on-night { color: var(--hm-ink-2); margin-left: .9rem; font-size: var(--hm-fs-md);}
.hm .keep[hidden] { display: none;}
.hm .keep { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center;}
.hm .keep .pill { margin: 0;}
.hm .keepnote { flex-basis: 100%; margin: .6rem 0 0; font-size: var(--hm-fs-md); color: var(--hm-ink-2);}
.hm .f-pp .hmdate, .hm .f-tm .hmdate { font-size: var(--hm-fs-num); line-height: 1; color: var(--hm-green-deep);}
.hm .f-tm .pill { align-self: flex-start;}
.hm .cnt2 { border-radius: 20px; background: var(--hm-ink); color: var(--hm-bg); padding: 14px 14px 16px; display: grid; justify-items: center; text-align: center;}
.hm .cnt2 .v { margin: -22px 0 0; font-size: var(--hm-fs-num); line-height: 1; font-variant-numeric: tabular-nums;}
.hm .cnt2 .v small { font-family: var(--hm-font-body); font-size: var(--hm-fs-md); opacity: .75; letter-spacing: 0;}
.hm .cnt2 .l { margin: 4px 0 0; font-size: var(--hm-fs-md); opacity: .82;}
.hm .co { max-width: 1380px; margin: clamp(2rem, 4vw, 3rem) auto 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding: clamp(1.4rem, 3.4vw, 2.6rem);}
.hm .co-search { display: flex; align-items: center; gap: .7rem; background: var(--hm-surface); border-radius: 999px; padding: .35rem 1.3rem; min-height: 3.6rem; box-shadow: var(--hm-shadow-soft); border: 1px solid var(--hm-line); color: var(--hm-ink-2);}
.hm .co-search:focus-within { outline: 3px solid var(--hm-green); outline-offset: 2px;}
.hm .co-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 1.05rem var(--hm-font-body); color: var(--hm-ink); outline: none;}
.hm .co-search input::placeholder { color: var(--hm-dim);}
.hm .co-sugg[hidden] { display: none; }
.hm .co-sugg { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem;}
.hm .co-sugg button { cursor: pointer; font: 500 .95rem var(--hm-font-body); color: var(--hm-ink); background: rgba(255,255,255,.75); border: 1px solid var(--hm-line); border-radius: 999px; padding: .55rem 1rem; transition: background .2s, transform .2s var(--hm-ease);}
.hm .co-sugg button { min-height: 44px; }
.hm .co-sugg button:hover { background: var(--hm-surface); transform: translateY(-1px);}
.hm .co-sugg button[aria-pressed="true"] { background: var(--hm-ink); color: var(--hm-bg); border-color: var(--hm-ink);}
.hm .co-note { margin: 1.1rem 0 0; font-size: var(--hm-fs-md); color: var(--hm-ink-2); max-width: 44ch;}
.hm .co-card { background: var(--hm-surface); border-radius: 26px; padding: 1.3rem 1.4rem 1.5rem; box-shadow: var(--hm-shadow-soft); display: grid; gap: 1rem;}
.hm .co-card.co-idle { background: none; box-shadow: none; padding: 0; }
.hm .co-card h3 { margin: 0; font-size: var(--hm-fs-h3); line-height: 1.05;}
.hm .co-card .sm { margin: .25rem 0 0; color: var(--hm-ink-2); font-size: var(--hm-fs-md);}
.hm .co-fact { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: 16px; background: var(--hm-bg); border: 1px solid var(--hm-line);}
.hm .co-fact i { width: 36px; height: 36px; border-radius: 50%; background: var(--hm-green-soft); color: var(--hm-green-deep); display: grid; place-items: center; flex: none;}
.hm .co-fact b { display: block; font-weight: 600;}
.hm .co-fact span { display: block; font-size: var(--hm-fs-md); color: var(--hm-ink-2);}
.hm .co-card .cnt2 .v { font-size: var(--hm-fs-num);}
.hm .co-card .cta { justify-self: start; min-height: 44px;}
.hm #company { scroll-margin-top: max(0px, calc(var(--hm-nav) + 1rem - var(--hm-sp))); }
@media (max-width: 900px) and (orientation: portrait) {
  .hm .co { grid-template-columns: minmax(0, 1fr);}
}

html[data-large="1"] { font-size: 112.5%;}
html[data-large="2"] { font-size: 125%;}
html[data-calm="1"] .hm *,
html[data-calm="1"] .hm *::before,
html[data-calm="1"] .hm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important;}

.hm .sec { padding: var(--hm-sp) 1.25rem 0;}
.hm .sec-in { max-width: 1180px; margin-inline: auto;}
.hm .kick { margin: 0 0 .9rem; font-size: var(--hm-fs-xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--hm-ink-2);}
.hm .big { margin: 0; font-size: var(--hm-t-h2); line-height: 1; max-width: 20ch; text-wrap: balance;}
.hm .lead { margin: 1.1rem 0 0; max-width: 56ch; color: var(--hm-ink-2); font-size: var(--hm-fs-base); text-wrap: pretty;}
.hm .inset { margin-inline: 12px; border-radius: var(--hm-r-stage); box-shadow: inset 0 0 0 1px var(--hm-line);}
@media (max-width: 560px) {
  .hm .inset { margin-inline: 0; border-radius: 26px;}
}
@media (max-width: 860px) {
  .hm .co.inset { margin-inline: 0;}
}
.hm .wash { background: radial-gradient(55% 45% at 50% 30%, var(--hm-stage-glow), transparent 72%), linear-gradient(155deg, var(--hm-stage-a) 0%, color-mix(in srgb, var(--hm-stage-a) 50%, var(--hm-stage-b)) 55%, var(--hm-stage-b) 100%);}

.hm .wn { font-family: var(--hm-font-display); font-size: var(--hm-fs-h4); line-height: 1.08; letter-spacing: -.015em;}

.hm .st { flex: none; font-size: var(--hm-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: var(--hm-green-soft); color: var(--hm-green-deep); white-space: nowrap;}
.hm .st.soon { background: var(--hm-sand); color: var(--hm-ink-2);}
.hm .st.later { background: transparent; color: var(--hm-ink-2); border: 1px dashed var(--hm-paper-edge);}


@media (max-width: 960px) {
  
  
  
  
  
  
  .hm .wn { font-size: var(--hm-fs-lg);}
  
  
  
  
  
  
  
}


.hm .ledger { padding-top: var(--hm-sp);}
.hm .led { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--hm-ink);}
.hm .led > div { padding: 1.4rem clamp(1rem, 3vw, 2.4rem) 0 0;}
.hm .led > div + div { border-left: 1px solid var(--hm-line); padding-left: clamp(1rem, 3vw, 2.4rem); padding-right: 0;}
.hm .led h3 { margin: 0 0 1rem; font-size: var(--hm-fs-h3); line-height: 1.05;}
.hm .led ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .65rem;}
.hm .led li { display: flex; gap: .75rem; align-items: baseline; color: var(--hm-ink-2); font-size: var(--hm-fs-base);}
.hm .led li b { color: var(--hm-ink); font-weight: 500;}
.hm .led li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--hm-green); transform: translateY(-1px);}
.hm .led .never li::before { border-radius: 2px; height: 3px; width: 10px; background: var(--hm-copper); transform: translateY(-4px);}
.hm .led-note { margin: 1.4rem 0 0; color: var(--hm-ink-2); font-size: var(--hm-fs-md); max-width: 70ch;}
.hm .led-note a { color: var(--hm-ink); text-underline-offset: 3px;}
@media (max-width: 760px) and (orientation: portrait) {
  .hm .led { grid-template-columns: 1fr;}
  .hm .led > div + div { border-left: 0; border-top: 1px solid var(--hm-line); padding-left: 0; margin-top: 1.2rem;}
  .hm .led > div { padding-right: 0;}
}
.hm .statement { padding: var(--hm-sp) 1.25rem 0; display: grid; place-items: center;}
.hm .statement-wrap { width: 100%; max-width: 1180px; margin-inline: auto; display: flex; flex-direction: column; align-items: center;}
.hm .statement #stmt { margin: 0; max-width: 20ch; font-size: clamp(2.2rem, 6.2vw, 4.6rem); line-height: 1.04; text-align: center; text-wrap: balance;}
@media (max-width: 900px) and (orientation: landscape) and (min-aspect-ratio: 7/4) { .hm { --hm-sp: 2.5rem; } .hm .statement #stmt { font-size: clamp(2.2rem, min(6.2vw, 12vh), 4.6rem); } }
.hm .orgs { padding-top: var(--hm-sp);}
.hm .og { max-width: 1380px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: clamp(2.2rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4.5rem); background: radial-gradient(60% 55% at 78% 40%, var(--hm-stage-glow), transparent 70%), linear-gradient(160deg, var(--hm-mist), color-mix(in srgb, var(--hm-sky) 55%, var(--hm-mist)));}
.hm .og-pro { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.2rem;}
.hm .og-pro li { display: flex; align-items: center; gap: .65rem; font-weight: 500;}
.hm .og-pro .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--hm-surface); display: grid; place-items: center; color: var(--hm-green-deep); box-shadow: var(--hm-shadow); flex: none;}
.hm .og-2 { margin: 1rem 0 0; color: var(--hm-ink-2); font-size: var(--hm-fs-md);}
.hm .og .pill { margin-top: 1.5rem; min-height: 44px;}
.hm .og-also { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.3rem 0 0; padding: 0; list-style: none;}
.hm .og-also a { display: inline-block; font-size: var(--hm-fs-md); padding: .3rem .8rem; border-radius: 999px; background: rgba(255,255,255,.70); border: 1px solid var(--hm-line); text-decoration: none; transition: background .2s, transform .2s;}
.hm .og-also a:hover { background: var(--hm-surface); transform: translateY(-1px);}
.hm .og-card { margin: 0; padding: 1.3rem 1.4rem 1.4rem; border-radius: 26px; background: var(--hm-surface); box-shadow: var(--hm-shadow-soft); transform: perspective(1200px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .25s ease-out;}
.hm .og-card figcaption { font-size: var(--hm-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-ink-2);}
.hm .og-co { margin: .8rem 0 0; font-weight: 600; font-size: var(--hm-fs-base);}
.hm .og-n { margin: 0; font-family: var(--hm-font-display); font-size: clamp(4rem, 8vw, 6rem); line-height: .95; font-variant-numeric: tabular-nums; color: var(--hm-green-deep); letter-spacing: -.02em;}
.hm .og-t { margin: .3rem 0 0; font-size: var(--hm-fs-base);}
.hm .og-dots { display: grid; grid-template-columns: repeat(25, 1fr); gap: 5px; margin: 1.1rem 0 .3rem;}
.hm .og-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--hm-line); transition: background .4s, transform .5s var(--hm-ease); transition-delay: calc(var(--i) * 22ms);}
.hm .og-dots i.f { background: var(--hm-line);}
.hm .og-card.on .og-dots i.f { background: var(--hm-green); transform: scale(1.12);}
.hm .og-s { margin: .9rem 0 0; font-size: var(--hm-fs-md); color: var(--hm-ink-2); max-width: 44ch;}
@media (max-width: 860px) {
  .hm .og { grid-template-columns: 1fr;}
  .hm .og-dots { grid-template-columns: repeat(10, 1fr); gap: 6px;}
  .hm .og-also a { min-height: 44px; display: inline-flex; align-items: center;}
}
@media (max-width: 860px) and (orientation: portrait) { .hm .og-pro { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .hm .og-card { transform: none; transition: none;}
  .hm .og-dots i { transition: none;}
  .hm .og-dots i.f { background: var(--hm-green);}
}
.hm .cl-wrap { padding: var(--hm-sp) 0 clamp(2.5rem, 6vw, 4rem);}
@media (max-width: 860px) { .hm .cl-wrap { padding-inline: 1.25rem;} }
.hm .cl { max-width: 1380px; margin-inline: auto; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(4rem, 9vw, 7.5rem) 1.25rem clamp(3.5rem, 8vw, 6rem);}
.hm .cl h2 { margin: 0; font-size: clamp(2.6rem, 6.6vw, 5.2rem); line-height: 1; text-wrap: balance; max-width: 14ch; position: relative; z-index: 2;}
.hm .cl .sub { margin: 1rem 0 0; color: var(--hm-ink-2); position: relative; z-index: 2;}
.hm .cl .ask { position: relative; z-index: 2;}
.hm .fl { position: absolute; width: 215px; z-index: 1; pointer-events: none; transform: rotate(var(--r));}

.hm .fl.f1 { left: 5%; top: 14%; --r: -7deg;}
.hm .fl.f2 { right: 5%; top: 18%; --r: 6deg;}
.hm .fl.f3 { left: 11%; bottom: 14%; --r: 5deg;}
.hm .fl.f4 { right: 10%; bottom: 12%; --r: -5deg;}
@media (max-width: 900px) {
  .hm .fl.f3,
.hm .fl.f4 { display: none;}
  .hm .fl { width: 150px;}
  html:is([data-large="1"], [data-large="2"]) .hm .fl { display: none; }
  .hm .fl.f1 { left: -2%; top: 5%;}
  .hm .fl.f2 { right: -2%; top: 4%;}
  .hm .cl { padding-top: 9rem; }
}
@media (max-width: 335px) { .hm .fl { width: 136px; } .hm .cl { padding-top: 10.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .hm .fl { animation: none; transform: rotate(var(--r));}
}
.hm p { text-wrap: pretty;}
.hm .pill,
.hm .go { transition: filter .2s, transform .15s;}
.hm .pill:active,
.hm .go:active { transform: scale(.97);}
.hm .stage { box-shadow: inset 0 0 0 1px var(--hm-line), inset 0 1px 0 rgba(255,255,255,.7);}
.hm .ask-box { transition: box-shadow .25s, border-color .25s;}
.hm .ask-box:focus-within { border-color: var(--hm-green);}
.hm .chips button { transition: transform .2s var(--hm-ease), border-color .2s, color .2s, background .2s;}
.hm .chips button:hover { transform: translateY(-1px); background: var(--hm-surface);}
.hm .chips button:active { transform: scale(.97);}
.hm .rail::after { transition: width .8s var(--hm-ease);}
.hm .cap > * { opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .5s var(--hm-ease);}
.hm .cap.on > * { opacity: 1; transform: none;}
.hm .cap.on > .kick { transition-delay: 0s;}
.hm .cap.on > h2 { transition-delay: .07s;}
.hm .cap.on > p { transition-delay: .14s;}
.hm .face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%); opacity: 0; transition: opacity .8s;}
.hm .face.on::after { opacity: .5;}
.hm .f-card:not(.est)::after { background: linear-gradient(125deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 40%);}
.hm .hello > * { animation: hm-hrise .7s var(--hm-ease) both;}
.hm .hello > h1 { animation-delay: .12s;}
.hm .hello > .sub { animation-delay: .22s;}
.hm .hello > .ask { animation-delay: .32s;}
.hm .hud b { transition: color .3s;}
@media (prefers-reduced-motion: reduce) {
  .hm .hello > *,
.hm .cap > * { animation: none; transition: none;}
  .hm .cap > * { opacity: 1; transform: none;}
  .hm .cap:not(.on) { visibility: hidden;}
}
@media (max-width: 520px) {
  .hm .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -1.25rem; padding: .45rem 2.5rem .45rem 1.25rem; scroll-padding-inline: 1.25rem; -webkit-mask-image: linear-gradient(90deg, black calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, black calc(100% - 2rem), transparent);}
  .hm .chips li { flex: none; scroll-snap-align: start;}
  .hm .chips button { min-height: 44px; white-space: nowrap;}
}
@media (max-width: 360px) {
  /* narrow phones at larger text: the placeholder still fits (inputs stay at 16px or more) */
  .hm .hello .ask-box { padding-left: 1.1rem; gap: .35rem;}
  .hm .hello .ask-box input { font-size: max(16px, .9rem);}
}
@media (prefers-reduced-motion: reduce) {
  .hm .cap { transition: none;}
}

/* production additions */
.hm .hm-textlink { color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }
.hm .promise .hm-textlink { position: relative; }
.hm .promise .hm-textlink::after { content: ""; position: absolute; left: -6px; right: -6px; top: -13px; bottom: -13px; }
.hm .chips-l { margin: .9rem 0 0; font-size: var(--hm-fs-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hm-ink-2); }
.hm .chips-l + .chips { margin-top: .5rem; }
.hm .cl h2 em { color: var(--hm-green-deep); font-style: italic; }
.hm .cl-cta { position: relative; z-index: 2; margin-top: 1.4rem; }
.hm .cl .promise { position: relative; z-index: 2; margin-top: 1rem; }
.hm .co-note a { color: var(--ink); text-underline-offset: 3px; }
.hm .og-also a { color: inherit; }

/* Motion lives here and only here: it changes where things start, never whether
   they show. Every keyframe sits inside prefers-reduced-motion: no-preference;
   the resting state of every element is the finished state; nothing loops. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hm-hrise { from { transform: translateY(10px); } to { transform: none; } }
}
/* No-script fallback: the finished page, stacked, with no pinned scenes */
html:not(.js) .hm .scene { height: auto; }
html:not(.js) .hm .stage { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; padding: 2rem 1.25rem; display: block; }
html:not(.js) .hm .hello { position: relative; }
html:not(.js) .hm .pocket { position: relative; inset: auto; transform: none; margin: 1.5rem auto 0; opacity: 1; }
html:not(.js) #hint { display: none; }

.hm .facts { max-width: 1180px; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding-inline: 1.25rem;}
.hm .facts-h { font-size: var(--hm-t-h2); line-height: 1; margin-bottom: 1.6rem;}
.hm .truths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2.4rem;}
.hm .truths li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .9rem; border-top: 1px solid var(--hm-line); padding-top: 1rem;}
.hm .truths b { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hm-line); background: var(--hm-surface); display: grid; place-items: center; font-weight: 600;}
.hm .truths p { font-size: var(--hm-fs-base); color: var(--ink); max-width: 68ch;}
.hm .sees { max-width: 52rem; margin-top: 2rem; padding: 1.4rem 1.5rem; border-radius: 22px; background: var(--hm-surface); border: 1px solid var(--hm-line); box-shadow: var(--hm-shadow);}
.hm .sees h3 { font-size: var(--hm-fs-h4); line-height: 1.05; margin-bottom: .6rem;}
.hm .sees p { color: var(--hm-ink-2); max-width: 62ch;}
.hm .truths-links { margin-top: 1.2rem; color: var(--hm-ink-2);}
.hm .truths-links a { color: var(--ink); text-underline-offset: 3px;}
@media (max-width: 760px) and (orientation: portrait) { .hm .truths { grid-template-columns: 1fr;} }
html:not(.js) .hm .cap > * { opacity: 1; transform: none; }
.hm .hello h1 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.015em; }

/* Short or narrow viewports: the pinned hero must show its whole promise line */
@media (max-height: 780px) {
  .hm .hello .chips-l { display: none; }
  .hm .hello { padding-top: 1rem; }
  .hm .hello .sub { margin-top: .6rem; font-size: var(--hm-fs-md); }
  .hm .ask { margin-top: .9rem; }
}
@media (max-height: 700px) {
  .hm .hello h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hm .hello .sub { display: none; }
}
html[data-large="2"] .hm .hello .chips-l { display: none; }
html[data-large="2"] .hm .hello .sub { display: none; }
@media (min-width: 521px) { html[data-large="1"] .hm .chips li:nth-child(n+4), html[data-large="2"] .hm .chips li:nth-child(n+3) { display: none; } }


/* ================= 1. Start where you are: four doors, one first screen ================= */
.hm .fk { max-width: 1380px; margin: clamp(2rem, 4vw, 3rem) auto 0; display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.6rem); padding: clamp(1rem, 2.6vw, 2rem); }
.hm .fk-list { display: grid; gap: .6rem; align-content: center; }
.hm .fk-o { width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--hm-line); background: rgba(255,255,255,.72); border-radius: 22px; padding: 1rem 1.1rem; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: .9rem; align-items: center; transition: background .2s, border-color .2s, transform .2s var(--hm-ease), box-shadow .2s; color: inherit; font: inherit; }
.hm .fk-o:hover { background: var(--white); transform: translateX(3px); }
.hm .fk-o .dn { grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; background: var(--hm-green-soft); color: var(--hm-green-deep); display: grid; place-items: center; }
.hm .fk-o b { font-family: var(--font-serif); font-weight: 400; font-size: var(--hm-fs-h4); line-height: 1.05; letter-spacing: -.015em; }
.hm .fk-o .s { font-size: var(--hm-fs-md); color: var(--hm-ink-2); }
.hm .fk-o[aria-checked="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); box-shadow: var(--hm-shadow); transform: translateX(8px); }
.hm .fk-o[aria-checked="true"] .dn { background: rgba(255,255,255,.14); color: var(--white); }
.hm .fk-o[aria-checked="true"] .s { color: rgba(255,255,255,.8); }
.hm .fk-card { background: var(--hm-surface); border-radius: 28px; border: 1px solid var(--hm-line); box-shadow: var(--hm-shadow-soft); padding: clamp(1.2rem, 2.6vw, 2rem); min-height: 430px; }
.hm .fk-pane { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.2rem); align-items: start; }
.hm .fk-pane.on { display: grid; }
.hm .fk-k { font-size: var(--hm-fs-sm); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-ink-2); margin-bottom: .6rem; }
.hm .fk-pane h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--hm-fs-h3); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 1.1rem; text-wrap: balance; }
.hm .fk-steps { display: grid; gap: .9rem; counter-reset: fk; }
.hm .fk-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .8rem; counter-increment: fk; position: relative; }
.hm .fk-steps li::before { content: counter(fk); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hm-line); background: var(--hm-surface); display: grid; place-items: center; font-weight: 600; font-size: var(--hm-fs-md); }
.hm .fk-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14.5px; top: 32px; bottom: -.9rem; width: 1px; background: var(--hm-line); }
.hm .fk-steps b { display: block; font-weight: 600; } .hm .fk-steps span { color: var(--hm-ink-2); font-size: var(--hm-fs-md); }
.hm .fk-go { margin-top: 1.4rem; }
.hm .fk-screen { background: var(--cream); border: 1px solid var(--hm-line); border-radius: 22px; padding: 1rem 1.05rem 1.1rem; display: grid; gap: .65rem; box-shadow: var(--hm-shadow); position: relative; }
.hm .fk-screen .fk-lab { font-size: var(--hm-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hm-ink-2); }
.hm .fk-screen .samp { position: absolute; top: .8rem; right: 1rem; font-size: var(--hm-fs-xs); color: var(--hm-ink-2); }
.hm .fk-screen h4, .hm .fk-screen .fk-name { font-family: var(--font-serif); font-weight: 400; font-size: var(--hm-fs-h4); line-height: 1.05; margin: 0; }
.hm .fk-fact { display: flex; align-items: center; gap: .65rem; background: var(--white); border: 1px solid var(--hm-line); border-radius: 14px; padding: .55rem .75rem; }
.hm .fk-fact i { width: 30px; height: 30px; border-radius: 50%; background: var(--hm-green-soft); color: var(--hm-green-deep); display: grid; place-items: center; flex: none; }
.hm .fk-fact b { display: block; font-weight: 600; font-size: var(--hm-fs-md); overflow-wrap: anywhere; } .hm .fk-fact span { color: var(--hm-ink-2); font-size: var(--hm-fs-sm); }
.hm .fk > *, .hm .fk-pane > *, .hm .fk-fact > div { min-width: 0; }
.hm .fk-meter { height: 10px; border-radius: 5px; background: var(--hm-line); overflow: hidden; } .hm .fk-meter i { display: block; height: 100%; width: var(--w, 70%); background: var(--hm-green); border-radius: 5px; }
.hm .fk-field { background: var(--white); border: 1px solid var(--ink-mid); border-radius: 12px; padding: .55rem .8rem; display: grid; gap: 1px; }
.hm .fk-field small { color: var(--hm-ink-2); font-size: var(--hm-fs-xs); font-weight: 600; } .hm .fk-field b { font-weight: 500; font-size: var(--hm-fs-base); }
.hm .fk-seg { display: flex; background: var(--cream-deep); border-radius: 999px; padding: 3px; gap: 3px; } .hm .fk-seg b { flex: 1; text-align: center; padding: .4rem .2rem; border-radius: 999px; font-size: var(--hm-fs-sm); font-weight: 600; color: var(--hm-ink-2); } .hm .fk-seg b.on { background: var(--white); color: var(--ink); box-shadow: var(--hm-shadow); }
.hm .fk-tot { font-family: var(--font-serif); font-size: var(--hm-fs-num); line-height: 1; font-variant-numeric: tabular-nums; }
.hm .fk-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .2rem; border-top: 1px solid var(--hm-line); font-size: var(--hm-fs-md); } .hm .fk-row:first-of-type { border-top: 0; } .hm .fk-row span { color: var(--hm-ink-2); } .hm .fk-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hm .fk-dots { display: flex; gap: 6px; } .hm .fk-dots i { flex: 1; height: 8px; border-radius: 4px; background: var(--hm-green); } .hm .fk-dots i.n { background: var(--hm-line); }
@media (max-width: 960px) { .hm .fk { grid-template-columns: 1fr; } .hm .fk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm .fk-o[aria-checked="true"], .hm .fk-o:hover { transform: none; } .hm .fk-pane { grid-template-columns: 1fr; } .hm .fk-card { min-height: 0; } }
@media (max-width: 520px) { .hm .fk-list { grid-template-columns: 1fr; } .hm .fk-o b { font-size: var(--hm-fs-lg); } }
html:not(.js) .hm .fk-pane { display: grid; margin-bottom: 1.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .hm .fk-pane.on > * { animation: hm-swap .32s var(--hm-ease) both; }
  .hm .fk-pane.on > *:nth-child(2) { animation-delay: .06s; }
  @keyframes hm-swap { from { transform: translateY(10px); } to { transform: none; } }
}

/* ================= 2. Bring your bills in: six sources, one card ================= */
.hm .cv { position: relative; max-width: 1380px; margin: clamp(2rem, 4vw, 3rem) auto 0; display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: clamp(2rem, 8vw, 7rem); padding: clamp(1.2rem, 3vw, 2.2rem); }
.hm .cv-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hm .cv-lines path { fill: none; stroke: var(--hm-line); stroke-width: 2; stroke-linecap: round; transition: stroke .3s, stroke-width .3s; }
.hm .cv-lines path.on { stroke: var(--hm-green); stroke-width: 3.5; }
.hm .cv-lines circle { fill: var(--hm-green); }
.hm .cv-nodes { position: relative; z-index: 2; display: grid; gap: .5rem; align-content: center; }
.hm .cv-n { width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--hm-line); background: rgba(255,255,255,.72); border-radius: 20px; padding: .8rem .95rem; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: .8rem; align-items: center; transition: background .25s, box-shadow .25s, border-color .25s; color: inherit; font: inherit; }
.hm .cv-n:hover { background: var(--white); }
.hm .cv-n .wic { grid-row: span 2; width: 42px; height: 42px; border-radius: 50%; background: var(--white); border: 1px solid var(--hm-line); color: var(--hm-ink-2); display: grid; place-items: center; transition: background .25s, color .25s, border-color .25s; }
.hm .cv-n .wn { font-family: var(--font-serif); font-size: var(--hm-fs-lg); line-height: 1.08; letter-spacing: -.015em; }
.hm .cv-n .wd { grid-column: 2 / 4; font-size: var(--hm-fs-md); color: var(--hm-ink-2); line-height: 1.35; }
.hm .cv-n[aria-selected="true"] { background: var(--white); border-color: var(--hm-green); box-shadow: var(--hm-shadow); }
.hm .cv-n[aria-selected="true"] .wic { background: var(--hm-green); color: var(--hm-on-green); border-color: var(--hm-green); }
.hm .st { flex: none; font-size: var(--hm-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: var(--hm-green-soft); color: var(--hm-green-deep); white-space: nowrap; }
.hm .st.soon { background: var(--hm-sand); color: var(--hm-ink-2); }
.hm .st.later { background: transparent; color: var(--hm-ink-2); border: 1px dashed var(--hm-paper-edge); }
.hm .cv-card { position: relative; z-index: 2; align-self: center; background: var(--hm-surface); border: 2px dashed var(--hm-paper-edge); border-radius: 30px; padding: clamp(1.2rem, 2.6vw, 2rem); box-shadow: var(--hm-shadow-soft); display: grid; gap: 1rem; min-height: 420px; align-content: start; }
.hm .cv-card.ai { border-color: var(--blue); }
.hm .cv-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hm .cv-src { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--hm-fs-md); font-weight: 600; padding: 3px 12px; border-radius: 999px; background: var(--hm-sand); color: var(--ink); }
.hm .cv-card.ai .cv-src { background: color-mix(in srgb, var(--blue) 12%, var(--white)); color: var(--blue); }
.hm .cv-live { font-size: var(--hm-fs-sm); color: var(--hm-ink-2); }
.hm .cv-name { font-family: var(--font-serif); font-size: var(--hm-fs-h3); line-height: 1.04; letter-spacing: -.015em; }
.hm .cv-amt { font-family: var(--font-serif); font-size: var(--hm-fs-num); line-height: 1; font-variant-numeric: tabular-nums; }
.hm .cv-meta { color: var(--hm-ink-2); font-size: var(--hm-fs-base); }
.hm .cv-name + .cv-amt, .hm .cv-amt + .cv-meta { margin-top: .3rem; }
.hm .cv-rows { display: grid; }
.hm .cv-rows div { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem .1rem; border-top: 1px solid var(--hm-line); font-size: var(--hm-fs-base); }
.hm .cv-rows div:first-child { border-top: 0; }
.hm .cv-rows .cb { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--hm-paper-edge); flex: none; position: relative; }
.hm .cv-rows .cb.on { background: var(--hm-ink-2); border-color: var(--hm-ink-2); }
.hm .cv-rows .cb.on::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hm .cv-rows .sw { width: 40px; height: 24px; border-radius: 999px; background: var(--hm-line); position: relative; flex: none; }
.hm .cv-rows .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(11,42,31,.25); }
.hm .cv-rows .sw.on { background: var(--hm-ink-2); } .hm .cv-rows .sw.on::after { transform: translateX(16px); }
.hm .cv-do { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .8rem; align-items: start; background: var(--cream); border-radius: 18px; padding: .8rem 1rem; }
.hm .cv-do i { width: 34px; height: 34px; border-radius: 50%; background: var(--white); border: 1px solid var(--hm-line); display: grid; place-items: center; color: var(--hm-green-deep); }
.hm .cv-do b { display: block; font-size: var(--hm-fs-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--hm-ink-2); font-weight: 600; margin-bottom: 2px; }
.hm .cv-act { display: flex; gap: .5rem; flex-wrap: wrap; }
.hm .cv-act span { display: inline-flex; padding: .5rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: var(--hm-fs-md); background: var(--cream); color: var(--hm-ink-2); border: 1px solid var(--hm-line); }
.hm .cv-act span.q { background: var(--white); color: var(--ink); border: 1px solid var(--hm-line); }
.hm .cv-foot { margin: 0; color: var(--hm-ink-2); font-size: var(--hm-fs-md); border-top: 1px solid var(--hm-line); padding-top: .8rem; }
.hm .came { max-width: min(1180px, 72ch); margin: 1.4rem auto 0; padding-inline: 1.25rem; color: var(--hm-ink-2); font-size: var(--hm-fs-base); }
.hm .came b { color: var(--ink); font-weight: 600; }
@media (max-width: 960px) {
  .hm .cv { grid-template-columns: 1fr; gap: 1rem; }
  .hm .cv-lines { display: none; }
  .hm .cv-nodes { grid-auto-flow: column; grid-auto-columns: minmax(240px, 80%); overflow-x: auto; scroll-snap-type: x mandatory; gap: .5rem; scrollbar-width: none; padding: .4rem clamp(1.2rem, 3vw, 2.2rem) 2.2rem; margin: -.4rem calc(-1 * clamp(1.2rem, 3vw, 2.2rem)) -1.8rem; scroll-padding-inline: clamp(1.2rem, 3vw, 2.2rem); -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 22px), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - 22px), transparent); }
  .hm .cv-nodes::-webkit-scrollbar { display: none; } .hm .cv-n { scroll-snap-align: start; } .hm .cv-n .wd { display: none; } .hm .cv-n .wic { grid-row: 1; }
  .hm .cv-card { min-height: 0; }
  .hm .came { padding-inline: 0; }
}
@media (max-width: 360px) {
  .hm .cv-nodes { grid-auto-columns: minmax(200px, 80%); }
  .hm .cv-n { grid-template-columns: 42px minmax(0, 1fr); }
  .hm .cv-n .st { grid-column: 2; grid-row: 2; justify-self: start; }
  .hm .cv-src { padding-inline: 9px; white-space: nowrap; }
}
@media (prefers-reduced-motion: no-preference) {
  .hm .cv-card > * { animation: hm-swap .34s var(--hm-ease) both; }
  .hm .cv-card > *:nth-child(2) { animation-delay: .04s; } .hm .cv-card > *:nth-child(3) { animation-delay: .08s; } .hm .cv-card > *:nth-child(4) { animation-delay: .12s; }
}

.hm .fk-go .pill { min-height: 44px; }
.hm .co-page { display: block; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding-block: .6rem; min-height: 44px; }
.hm .co-r { min-width: 0; }
.hm .co-card { overflow-wrap: anywhere; }
.hm .co-card svg { max-width: 100%; height: auto; }
.hm .fl .smp { font-size: var(--hm-fs-xs); font-style: normal; color: var(--hm-ink-2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* the four decorative cards in the closing section: sample bills, drawn like the product's own cards */
.hm .fl .wm { background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: 16px; padding: .7rem .9rem; box-shadow: var(--hm-shadow-soft); display: grid; gap: .25rem; }
.hm .fl .wm.dash { background: transparent; border: 2px dashed var(--hm-paper-edge); box-shadow: none; }
.hm .fl .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; font-size: var(--hm-fs-md); }
.hm .fl .row b { flex: 1 1 100%; font-weight: 600; color: var(--ink); }
.hm .fl .row span { color: var(--hm-ink-2); font-variant-numeric: tabular-nums; }
.hm .fl .smp { margin-left: auto; }

/* no one-word last lines on labels, list items and short headings */
.hm .fk-o .s, .hm .fk-screen .fk-lab, .hm .fk-steps li, .hm .led li, .hm .og-pro li, .hm .cv-do, .hm .cv-meta, .hm .cv-name, .hm .cv-n .wn, .hm .co-card h3, .hm .sees h3, .hm .og-card figcaption, .hm .pill { text-wrap: pretty; }
.hm .cv-n .wn, .hm .cv-name, .hm .fk-o .s, .hm .cv-do, .hm .cv-do > div { text-wrap: balance; }

/* Plan-first home (T-10844): what waits on a company is one quiet block; the ways that are not live yet sit quieter than the one that is */
.hm .later .lead + .lead { margin-top: .7rem; }
.hm .cv-n:not([data-i="0"]) { background: transparent; }
.hm .cv-n:not([data-i="0"]) .wn { color: var(--hm-ink-2); }
.hm .cv-n:not([data-i="0"]):hover, .hm .cv-n:not([data-i="0"])[aria-selected="true"] { background: var(--white); }
.hm .stage[data-fit="snug"] .f-pp .hmdate, .hm .stage[data-fit="snug"] .f-tm .hmdate { font-size: var(--hm-fs-h3);}

/* T-10853: the due-this-month face, and the header controls the router page carries (generated by scripts/render-marketing-shell.js) */
.hm .f-tm .tmlist { display: grid; }
.hm .f-tm .tmrow { display: flex; justify-content: space-between; gap: .6rem; padding: .3rem 0; border-top: 1px solid var(--hm-line); font-size: var(--hm-fs-md); color: var(--hm-ink-2);}
.hm .f-tm .tmrow:first-child { border-top: 0;}
.hm .f-tm .tmrow b { color: var(--hm-ink); font-weight: 600; font-variant-numeric: tabular-nums;}
.hm .stage[data-fit="snug"] .f-tm .tmrow { padding: .15rem 0; font-size: var(--hm-fs-sm);}
.nav .nav-comfort { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-mid); cursor: pointer;}
.nav .nav-comfort:hover, .nav .nav-comfort[aria-expanded="true"] { background: var(--cream-deep); color: var(--ink);}
.nav .nav-add { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.05rem; border-radius: 999px; background: var(--green); color: var(--white); font-size: var(--fs-base); font-weight: 700; text-decoration: none; white-space: nowrap;}
.nav .nav-add:hover { background: var(--green-deep);}
.nav .nav-comfort:focus-visible, .nav .nav-add:focus-visible { outline: 3px solid var(--green); outline-offset: 2px;}
@media (min-width: 1024px) { .nav .nav-comfort { display: inline-flex;} }
@media (max-width: 420px) { .nav .nav-add { padding-inline: .8rem; font-size: var(--fs-sm);} }
.mobile-menu a.mobile-add { margin: .35rem 0 .6rem; background: var(--green); color: var(--white); text-align: center; border-radius: 999px; border-bottom: 0;}
.mobile-menu .mobile-comfort { display: block; width: 100%; padding: .8rem .5rem; background: none; border: 0; border-bottom: 1px solid var(--border-cool); color: var(--ink); font: inherit; font-size: var(--fs-body); font-weight: 600; text-align: left; cursor: pointer;}
html:not(.js) .nav .nav-comfort, html:not(.js) .mobile-menu .mobile-comfort, html:not(.js) .mobile-menu a.mobile-add { display: none; }   /* no script: Comfort cannot open, and the static menu would repeat the header's Add a bill */