/* getmoza home / landing v2 (frontend programme WP-2, SPEC §4; design = mockups/FINAL/index.html).
   Loaded only by the v2 body (templates/_home_v2_head.html), after main.css and shell.css (tokens).
   Every class is hv-* (main.css still styles the creator, the cart and the modals; nothing here touches them).
   ONE column: every block sits in .hv-wrap = var(--content-w), so the logo, H1, section heads and footer share
   one left edge at 390…5120 px; sizes are fluid clamp()s, never breakpoint tiers tuned to one screen.
   Hard rule (BRIEF 4): no zoom / transform: scale on #create or anything that can contain the creator. */

.hv-page { background: var(--paper); color: var(--text); font-family: var(--font-ui); font-variant-numeric: lining-nums; }
.hv-page #mzResumeBar { display: none !important; }
.hv-page.collage-cart main.hv, .hv-page.collage-cart #stickyCTA { display: none !important; }   /* ?cart=1&from=collage: panel + cart only */          /* the hero's "Welcome back" card replaces it */
.hv-noscroll { overflow: hidden; }
.hv { display: block; }
.hv-wrap { width: var(--content-w); margin-inline: auto; }
.hv-anchor { position: absolute; }
.hv img { max-width: 100%; height: auto; display: block; }
.hv p { margin: 0; }
.hv-ico { width: 1.25rem; height: 1.25rem; flex: none; }
.hv .section-head { display: grid; gap: .625rem; margin-bottom: clamp(1.5rem, 2vw, 3rem); max-width: 60ch; }
.hv .section-head .muted, .hv .muted { color: var(--muted); }
.hv .caption { font-size: var(--fs-xs); color: var(--subtle); line-height: 1.5; }
.hv-section { padding-block: var(--section-y); scroll-margin-top: calc(var(--header-h) + .5rem); }
.hv-section--tight { padding-block: 0 var(--section-y); }
.hv-band { background: var(--paper-2); }
.hv-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; }

/* ───────────────────────────── 1 · hero = creator step 1 ───────────────────────────── */
.hv-hero { padding-block: clamp(1.25rem, 2.4vw, 3.5rem) clamp(2.5rem, 3vw, 4.5rem); scroll-margin-top: var(--header-h); }
.hv-hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: clamp(1.75rem, 4vw, 7rem); align-items: center; }
.hv-hero-copy { display: grid; gap: clamp(1rem, 1.3vw, 1.875rem); align-content: center; min-width: 0; container-type: inline-size; }
.hv-h1 { display: grid; gap: clamp(.5rem, .6vw, 1rem); margin: 0; font-weight: 400; }
.hv-title { display: block; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.04;
  font-size: clamp(2.25rem, 1.2rem + 2.7vw, 6.4rem); color: var(--ink); text-wrap: balance; }
/* The copy column stops growing (content width cap) while the vw term does not: tie the H1 to the column so
   "Thousands of moments." stays on one line at 3400–5120 px too (hv-hero-copy is the size container). */
@supports (font-size: 1cqi) { @media (min-width: 1024px) { .hv-title:not(.hv-title--landing) { font-size: min(clamp(2.25rem, 1.2rem + 2.7vw, 6.4rem), 10.2cqi); } } }
.hv-title em { font-style: normal; color: var(--umber); }
.hv-title--landing { font-size: clamp(2rem, 1.1rem + 2.1vw, 5rem); line-height: 1.08; }
/* Same column tie as the home H1: landing H1s are longer, so 7.8cqi keeps the 1440–2560 px wrap (2 lines on
   memorial/grandparents, 1 on pet) from 1024 up to 5120 px instead of re-wrapping once the column stops growing. */
@supports (font-size: 1cqi) { @media (min-width: 1024px) { .hv-title--landing { font-size: min(clamp(2rem, 1.1rem + 2.1vw, 5rem), 7.8cqi); } } }
.hv-landing-eyebrow { margin: 0 0 -.375rem; }
.hv-sub { font-size: var(--fs-lg); color: var(--muted); max-width: 44ch; line-height: 1.45; }

.hv-start { padding: clamp(1rem, 1.3vw, 2rem); border-radius: var(--r-lg); box-shadow: var(--sh-2); display: grid; gap: clamp(.75rem, .8vw, 1.25rem);
  max-width: clamp(35rem, 36vw, 53.75rem); min-width: 0; }
.hv-steps { display: flex; gap: .375rem; list-style: none; margin: 0; padding: 0; color: var(--muted); font-weight: 500; flex-wrap: wrap;
  font-size: clamp(.8125rem, .7rem + .25vw, 1.05rem); }
.hv-steps li { display: flex; align-items: center; gap: .375rem; }
.hv-steps li + li::before { content: ""; width: .875rem; height: 1px; background: var(--line-strong); margin-right: .125rem; }
.hv-steps .n { width: 1.375rem; height: 1.375rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--paper-2); color: var(--muted); font-size: .75rem; font-weight: 700; }
.hv-steps .on { color: var(--ink); }
.hv-steps .on .n { background: var(--ink); color: var(--paper); }

.hv-drop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(.875rem, 1.2vw, 1.5rem); align-items: center;
  padding: clamp(.875rem, 1.2vw, 1.5rem); border: .09375rem dashed var(--line-strong); border-radius: var(--r-md); background: var(--paper-print);
  cursor: pointer; transition: border-color .15s, background .15s; }
.hv-drop:hover, .hv-drop.drag { border-color: var(--umber); background: var(--umber-wash); }
.hv-drop:focus-within .hv-choose { box-shadow: var(--ring); }
.hv-eq { display: flex; align-items: center; gap: .375rem; }
.hv-eq > img, .hv-stack { width: clamp(2.875rem, 2.6vw, 4.5rem); aspect-ratio: 3 / 4; }
.hv-eq > img { object-fit: cover; border-radius: var(--r-xs); box-shadow: var(--sh-1); }
.hv-eq .op { color: var(--subtle); font-weight: 600; font-size: .875rem; }
.hv-stack { position: relative; display: block; }
.hv-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: .125rem solid #fff; box-shadow: var(--sh-1); }
.hv-stack img:nth-child(1) { transform: rotate(-8deg) translate(-.25rem, .125rem); }   /* decorative thumbnails only (not the creator) */
.hv-stack img:nth-child(2) { transform: rotate(6deg) translate(.25rem, 0); }
.hv-drop-body { display: grid; gap: .625rem; justify-items: start; min-width: 0; }
.hv-drop-title { font-weight: 600; color: var(--ink); line-height: 1.35; font-size: clamp(1rem, .9rem + .3vw, 1.4rem); }
.hv-hint { font-size: clamp(.8125rem, .7rem + .25vw, 1.05rem); color: var(--subtle); line-height: 1.45; }
.hv .hv-choose { --h: clamp(3.5rem, 1.6vw + 2.125rem, 4.75rem); font-size: clamp(1.125rem, .8rem + .6vw, 1.6rem); padding-inline: clamp(1.75rem, 1.6vw, 2.75rem); }
.hv-loading { display: none; align-items: center; gap: .75rem; grid-column: 1 / -1; font-weight: 600; color: var(--ink); min-height: 3.5rem; }
.hv-spin { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: .1875rem solid var(--line); border-top-color: var(--ink); animation: hv-spin 1s linear infinite; flex: none; }
@keyframes hv-spin { to { transform: rotate(360deg); } }
.hv-start.is-uploading .hv-loading, .hv-loading[style*="block"] { display: flex !important; }
.hv-start.is-uploading .hv-eq, .hv-start.is-uploading .hv-drop-body, .hv-start.is-uploading .hv-start-alt { display: none; }
.hv-start-alt { display: flex; flex-wrap: wrap; gap: 0 1.125rem; font-size: var(--fs-sm); }
.hv-start-alt .link { min-height: var(--tap); }
@media (hover: none) and (pointer: coarse) { .hv-start-alt .hv-take.only-touch { display: inline-flex !important; } }

.hv-welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(.875rem, 1.2vw, 1.5rem); align-items: center; padding: clamp(.875rem, 1.2vw, 1.5rem);
  border-radius: var(--r-md); background: var(--paper-print); border: 1px solid var(--line); }
.hv-welcome[hidden] { display: none; }
.hv-wt { display: grid; gap: .625rem; justify-items: start; min-width: 0; }
.hv-wlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(1rem, 1.4vw, 1.75rem); }
.hv-wlinks > * { min-height: 2.75rem; display: inline-flex; align-items: center; }
.hv .hv-ok { color: var(--ok); }
.hv-start.is-back .hv-drop, .hv-start.is-back .hv-start-alt, .hv-start.is-back .hv-steps { display: none; }

.hv-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.375rem; font-size: var(--fs-sm); color: var(--text); }

.hv-visual { margin: 0; position: relative; min-width: 0; }
.hv-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); background: var(--paper-3); }
.hv-room { width: 100%; aspect-ratio: 1600 / 1567; object-fit: cover; max-height: calc(100svh - var(--header-h) - var(--season-h) - 6rem); min-height: 22.5rem; }
.hv-loupe-wrap { position: absolute; left: clamp(.75rem, 3%, 2.5rem); bottom: clamp(.75rem, 3.5%, 2.75rem); display: flex; align-items: flex-end; gap: .75rem; max-width: calc(100% - 1.5rem); }
.hv-loupe { flex: none; width: clamp(7rem, 10vw, 20rem); aspect-ratio: 1; border-radius: 50%; border: clamp(.25rem, .35vw, .5rem) solid var(--paper);
  box-shadow: var(--sh-3); overflow: hidden; background: #222; cursor: zoom-in; padding: 0; }
.hv-loupe img { width: 100%; height: 100%; object-fit: cover; }
.hv-loupe-tag { margin-bottom: 8%; background: var(--night); color: var(--on-night); font-size: var(--fs-xs); font-weight: 500; padding: .5rem .75rem;
  border-radius: var(--r-sm); max-width: 24ch; line-height: 1.35; box-shadow: var(--sh-2); }
.hv-zoom { position: absolute; right: .875rem; top: .875rem; }
.hv-only-narrow { display: none; }
.hv-ex-chip { display: none; position: absolute; left: .5rem; bottom: .5rem; background: var(--night); color: var(--on-night); font-size: .75rem; font-weight: 500;
  line-height: 1; padding: .375rem .5625rem; border-radius: var(--r-pill); max-width: calc(100% - clamp(4.75rem, 22vw, 9.375rem) - 1.75rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-cap { margin-top: .75rem; }

/* phones + tablets: H1 → small v4 peek → start card (button inside Safari's 664 px) → sub → ticks */
@media (max-width: 1023px) {
  .hv-hero { padding-top: 1rem; }
  .hv-hero-grid { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
  .hv-hero-copy { display: contents; }
  .hv-landing-eyebrow { order: 0; margin: 0; }
  .hv-h1 { order: 1; }
  .hv-visual { order: 2; }
  .hv-start { order: 3; max-width: none; }
  .hv-sub { order: 4; max-width: 60ch; }
  .hv-ticks { order: 5; }
  .hv-frame { border-radius: var(--r-md); box-shadow: var(--sh-2); }
  .hv-room { aspect-ratio: 760 / 408; max-height: 25svh; min-height: 0; }
  .hv-loupe-wrap { left: auto; right: .625rem; bottom: .625rem; }
  .hv-loupe { width: clamp(4.75rem, 22vw, 9.375rem); border-width: .1875rem; }
  .hv-loupe-tag, .hv-cap { display: none; }
  .hv .hv-zoom { top: .5rem; right: auto; left: .5rem; --h: 2.75rem; padding: 0 .75rem; font-size: .8125rem; }
  .hv-only-wide { display: none; }
  .hv-only-narrow { display: inline; }
  .hv-ex-chip { display: block; }
}
@media (max-width: 600px) {
  .hv-title { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .hv-title--landing { font-size: clamp(1.75rem, 7.4vw, 2.3rem); }
  .hv-sub { font-size: 1rem; }
  .hv-start { padding: .875rem; border-radius: var(--r-md); gap: .625rem; }
  .hv-drop { grid-template-columns: minmax(0, 1fr); padding: .875rem; gap: .625rem; border-style: solid; border-color: var(--line); }
  .hv-eq { display: none; }
  .hv .hv-choose { width: 100%; }
  .hv-drop-title { font-size: .9375rem; }
  .hv-start-alt { gap: 0 .875rem; font-size: .875rem; }
  .hv-hide-s { display: none; }
  .hv-steps .lbl { display: none; }
  .hv-steps li.on .lbl { display: inline; }
  .hv-ticks { font-size: .875rem; gap: .375rem 1rem; }
  .hv-welcome .btn { width: 100%; white-space: normal; }
}

/* ───────────────────────────── studio in place (body.mz-studio; creator-ui.js / home.js) ───────────────────────────── */
/* Before the studio opens the cards stay laid out (main.js sizes the crop stage from its container width the
   moment the photo arrives) but take no space and are invisible / unfocusable. */
.hv-studio { height: 0; overflow: hidden; visibility: hidden; }
body.mz-studio .hv-studio { height: auto; overflow: visible; visibility: visible; }
body.mz-studio .hv-hero-grid,
body.mz-studio main.hv > section:not(#create),
body.mz-studio #stickyCTA { display: none !important; }
body.mz-studio .hv-hero { padding-block: clamp(.75rem, 1.2vw, 2rem) var(--section-y); }
body.mz-studio .season-bar { display: none !important; }        /* SPEC §2.1: off inside the studio */
.hv-creator-fallback { width: min(var(--content-w), 53.75rem); margin-inline: auto; }   /* v1 cards until WP-4's studio lands */

/* ───────────────────────────── 1b · landing body ───────────────────────────── */
.hv-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(.875rem, 1.5vw, 1.75rem); }
.hv-example { margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.hv-example img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper-3); }
.hv-example figcaption { display: grid; gap: .375rem; padding: .875rem 1rem 1rem; }
.hv-example-top { display: flex; justify-content: space-between; align-items: baseline; gap: .625rem; color: var(--ink); }
.hv-examples-foot { margin-top: clamp(1.5rem, 2vw, 2.5rem); display: grid; gap: .625rem; justify-items: start; }
.hv-measure { max-width: var(--measure); display: grid; gap: .75rem; color: var(--text); }
.hv-measure .hv-h2s { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); line-height: 1.15; color: var(--ink); margin-top: 1.25rem; }
.hv-measure .hv-h2s:first-child { margin-top: 0; }
.hv-measure ul { margin: 0; padding-left: 1.375rem; display: grid; gap: .375rem; }
.hv-measure a { color: var(--umber); text-underline-offset: .1875rem; }
.hv-landing-cta { margin-top: 1rem; }
.hv-giftcard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.125rem, 1.4vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.hv-giftcard > div { flex: 1 1 20rem; display: grid; gap: .25rem; }
.hv-giftcard-t { font-weight: 700; color: var(--ink); }

/* ───────────────────────────── 2 · proof ───────────────────────────── */
.hv-proof { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.75rem, 4vw, 7rem); align-items: center; }
.hv-ba { position: relative; aspect-ratio: 3 / 4; max-height: 82svh; width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2);
  user-select: none; -webkit-user-select: none; background: #222; justify-self: start; }
@supports (max-height: 82svh) { .hv-ba { width: min(100%, calc(82svh * 3 / 4)); } }
.hv-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-ba .after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.hv-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: .125rem; margin-left: -1px; background: #fff; box-shadow: 0 0 .75rem rgb(0 0 0 / .4); pointer-events: none; }
.hv-ba-handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3rem; height: 3rem; border-radius: 50%;
  background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 1.25rem; box-shadow: var(--sh-2); }
.hv-ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.hv-ba-tag { position: absolute; top: .875rem; padding: .375rem .75rem; border-radius: var(--r-pill); background: var(--night); color: #fff; font-size: var(--fs-xs); font-weight: 600; pointer-events: none; }
.hv-ba-tag.l { left: .875rem; } .hv-ba-tag.r { right: .875rem; }
.hv-proof-copy { display: grid; gap: var(--stack); min-width: 0; }
.hv-proof-head { display: grid; gap: .625rem; }
.hv-loupes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 1.2vw, 1.5rem); }
.hv-loupes figure { margin: 0; display: grid; gap: .5rem; align-content: start; }
.hv-loupes img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: var(--sh-2); border: .25rem solid var(--surface); }
.hv-loupes b { color: var(--muted); }
.hv-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; font-size: var(--fs-sm); }
.hv-legacy { margin: 0; display: grid; grid-template-columns: clamp(6rem, 9vw, 12.5rem) minmax(0, 1fr); gap: .875rem; align-items: center; }
.hv-legacy img { border-radius: var(--r-sm); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--sh-1); }
@media (max-width: 900px) { .hv-proof { grid-template-columns: minmax(0, 1fr); } .hv-ba { max-height: none; width: 100%; } }

/* ───────────────────────────── 3 · two doors ───────────────────────────── */
.hv-doors { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1rem, 1.6vw, 2rem); }
.hv-door { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-lg); overflow: hidden;
  min-height: clamp(23.75rem, 30vw, 41.25rem); text-decoration: none; color: inherit; }
.hv-door-txt { padding: clamp(1.5rem, 2.4vw, 3.5rem); display: grid; align-content: space-between; gap: 1.5rem; min-width: 0; }
.hv-door-txt > span { display: grid; gap: .5rem; }
.hv-door-foot { display: grid; gap: .875rem; justify-items: start; }
.hv-door-h { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); line-height: 1.1; }
.hv-count { display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2.4vw, 5.5rem); line-height: 1; font-variant-numeric: lining-nums; }
.hv-price { font-size: var(--fs-sm); }
.hv-door-pic { position: relative; display: block; min-width: 0; }
.hv-door--mosaic { background: var(--night); color: var(--on-night-muted); }
.hv-door--mosaic .hv-door-h, .hv-door--mosaic .hv-count { color: var(--on-night); }
.hv-door--mosaic .eyebrow { color: var(--amber-soft); }
.hv-door--mosaic .hv-door-pic { background: var(--night-2); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: clamp(.5rem, .8vw, 1rem); padding: clamp(1rem, 1.6vw, 2.25rem) clamp(1rem, 1.6vw, 2.25rem) clamp(1.875rem, 2.4vw, 3rem); }
.hv-door--mosaic .hv-door-pic img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .45); }
.hv-door--mosaic .hv-door-pic img:first-child { grid-row: span 2; }
.hv-door-cap { position: absolute; left: clamp(1rem, 1.6vw, 2.25rem); bottom: .5rem; font-size: .75rem; color: var(--on-night-muted); }
.hv-door--collage { background: var(--surface); border: 1px solid var(--line); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.hv-door--collage .hv-door-pic { min-height: clamp(12.5rem, 15vw, 21.25rem); background: var(--paper-3); }
.hv-door--collage .hv-door-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hv-door--collage .hv-count { color: var(--ink); }
.hv-door--collage .hv-price { color: var(--muted); }
.hv-door:focus-visible { outline: none; box-shadow: var(--ring); }
.hv-chooser-note { margin-top: 1.125rem; font-size: var(--fs-sm); color: var(--muted); max-width: 80ch; scroll-margin-top: calc(var(--header-h) + .5rem); }
.hv-chooser-note .link { min-height: 0; }
@media (max-width: 1100px) { .hv-doors { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .hv-door { grid-template-columns: minmax(0, 1fr); }
  .hv-door--mosaic .hv-door-pic { min-height: 18.75rem; order: -1; }
}

/* ───────────────────────────── 4 · gifts on time ───────────────────────────── */
.hv-ontime { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.75rem, 4vw, 7rem); align-items: start; }
.hv-ontime .section-head { margin: 0; }
.hv-dates { display: grid; border-top: 1px solid var(--line); }
.hv-date-row { display: grid; grid-template-columns: minmax(8.125rem, 1.1fr) minmax(0, 2fr) auto; gap: 1rem; align-items: center;
  padding: clamp(.875rem, 1.2vw, 1.5rem) 0; border-bottom: 1px solid var(--line); }
.hv-when { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink); line-height: 1.1; font-variant-numeric: lining-nums; }
.hv-date-row.is-past .hv-when { color: var(--subtle); text-decoration: line-through; text-decoration-thickness: 1px; }
.hv-what b { color: var(--ink); display: block; }
.hv-who { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.375rem; }
.hv-who a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); background: var(--surface); }
.hv-who a:hover { border-color: var(--umber); color: var(--umber); }
@media (max-width: 900px) {
  .hv-ontime { grid-template-columns: minmax(0, 1fr); }
  .hv-date-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hv-what { grid-column: 1 / -1; grid-row: 2; }
}

/* ───────────────────────────── 5 · prints & prices ───────────────────────────── */
#products { position: relative; }
.hv-price-table { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.625rem, 1vw, 1.25rem); }
.hv-price-table > .shop-card { display: grid; gap: .375rem; align-content: start; padding: clamp(1rem, 1.4vw, 1.75rem); border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: var(--text); min-height: 100%; overflow: visible; transform: none; transition: border-color .15s, box-shadow .15s; }
.hv-price-table > .shop-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); transform: none; }
.hv-edge { height: .625rem; border-radius: .125rem; margin-bottom: .625rem; display: block; }
.shop-card:nth-child(1) .hv-edge { background: linear-gradient(90deg, #f4f1ea, #e4ddd1); }
.shop-card:nth-child(2) .hv-edge { background: linear-gradient(90deg, #d8c7ad, #bfa784); }
.shop-card:nth-child(3) .hv-edge { background: linear-gradient(90deg, #d9dcdf, #a9aeb3); }
.shop-card:nth-child(4) .hv-edge { background: linear-gradient(90deg, #e9f1f4, #bcd2db); }
.shop-card:nth-child(5) .hv-edge { background: linear-gradient(90deg, #2b2520, #4a4038); }
.hv-name { font-weight: 600; color: var(--ink); }
.hv-from { font-weight: 600; font-size: var(--fs-xl); color: var(--ink); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.hv-sq { font-size: var(--fs-xs); color: var(--subtle); }
.hv-desc { font-size: var(--fs-sm); color: var(--muted); }
.hv-digital-line { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; padding: .75rem 1.25rem;
  border-radius: var(--r-md); background: var(--paper-2); }
.hv-digital-line b { color: var(--ink); }
@media (max-width: 1100px) { .hv-price-table { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hv-price-table { grid-template-columns: 1fr 1fr; } .hv-price-table > .shop-card:last-child { grid-column: 1 / -1; } }

/* ───────────────────────────── 6 · FAQ ───────────────────────────── */
.hv-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.75rem, 4vw, 7rem); align-items: start; }
.hv-faq .section-head { margin: 0; }
.hv-faq details { border-bottom: 1px solid var(--line); }
.hv-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4rem;
  font-weight: 600; color: var(--ink); padding-block: .625rem; }
.hv-faq summary::-webkit-details-marker { display: none; }
.hv-faq summary::after { content: ""; width: .625rem; height: .625rem; border-right: .125rem solid var(--muted); border-bottom: .125rem solid var(--muted);
  transform: rotate(45deg); transition: transform .2s; flex: none; margin-right: .375rem; }
.hv-faq details[open] summary::after { transform: rotate(-135deg); }
.hv-faq details p { padding-bottom: 1.25rem; max-width: var(--measure); color: var(--muted); }
.hv-faq details a { color: var(--umber); }
@media (max-width: 900px) { .hv-faq { grid-template-columns: minmax(0, 1fr); } }

/* ───────────────────────────── phone sticky CTA + zoom lightbox ───────────────────────────── */
.hv-cta .row { justify-content: space-between; }
.hv-cta-t { font-size: .875rem; line-height: 1.3; color: var(--muted); display: grid; min-width: 0; }
.hv-cta-t b { color: var(--ink); font-size: .9375rem; }
@media (min-width: 1024px) { .hv-cta { display: none; } }
.hv-lightbox { position: fixed; inset: 0; z-index: 500; background: rgb(17 14 12 / .96); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.hv-lightbox[hidden] { display: none; }
.hv-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem var(--gutter); color: var(--on-night); font-size: var(--fs-sm); }
.hv-lightbox-view { position: relative; min-height: 0; }
.hv-lightbox-view img { max-width: 100%; max-height: 100%; margin: auto; }

@media (prefers-reduced-motion: reduce) {
  .hv-spin { animation: none; }
  .hv-faq summary::after, .hv-drop { transition: none; }
}