/* ==========================================================================
   Homepage v3 (Figma "Homepage v3 · PRODUCTION (approved)", node 10509:6698)
   Only the new homepage, client/public/pages/homepage-v3.html, loads this file.
   The site navbar is unchanged: its rules stay inline in that page.
   Every class here starts with .hp3- so nothing collides with the inline CSS.
   ========================================================================== */

/* ── 1. Tokens: one custom property per Figma "Palette v2" variable ── */
.hp3{
  --orange-core:#EA6318; --orange-deep:#B54B12; --orange-tint:#FBE0D1;
  --teal-deep:#003E3E; --teal-core:#0E7C7B; --teal-soft:#9AC8C7; --teal-tint:#E6F4F2;
  --gold-core:#E9C46A; --gold-deep:#735A17; --gold-tint:#F9F3E6;
  --moss-core:#527446; --moss-deep:#253D1D; --moss-tint:#EDF3E8;
  --indigo-core:#47619C; --indigo-deep:#22335C; --indigo-tint:#EEF2FA;
  --clay-core:#965351; --clay-deep:#532625; --clay-tint:#F8ECE9;
  --plum-deep:#422A50; --plum-tint:#F4EEF6;
  --ink-950:#18160E; --ink-900:#2A281E; --ink-800:#3D3B30; --ink-700:#504D42;
  --ink-600:#666359; --ink-500:#838076; --ink-400:#A7A59C; --ink-300:#D2D1CA;
  --ink-200:#E6E5DF; --ink-100:#F3F2EE; --ink-50:#F9F8F6;
  --ground-ivory:#FAF9F3; --ground-white:#FFFFFF;

  --text-small:14px; --text-regular:16px; --text-medium:18px; --text-large:20px; --heading-6:19px;
  --radius-small:6px; --radius-section:28px;
  --pad-global:64px;

  /* Motion spec (chosen Oct 29, 2026) */
  --hp3-ease:cubic-bezier(.2,.7,.2,1);
  --hp3-hover:500ms; --hp3-open:570ms;

  background:var(--ground-ivory);
  color:var(--ink-900);
  font-family:var(--font-brand);
  font-variation-settings:"FLAR" 0,"VOLM" 0;
  padding:24px 24px 0;
  display:flex;flex-direction:column;gap:24px;
}
body:has(.hp3){background:var(--ground-ivory)}
/* Sticky navbar: in-page links must not land underneath it */
html:has(.hp3){scroll-padding-top:80px}

/* ── 2. Section shells ── */
.hp3-section{border-radius:var(--radius-section);overflow:clip;position:relative;max-width:1392px;width:100%;margin:0 auto}
.hp3-section--white{background:var(--ground-white)}
.hp3-section--ivory{background:var(--ground-ivory)}
.hp3-section--teal{background:var(--teal-deep);color:var(--ground-white)}
.hp3-inner{max-width:1232px;margin:0 auto;padding:0 80px}

/* ── 3. Type ── */
.hp3-br{display:inline}
.hp3 h1,.hp3 h2,.hp3 h3,.hp3 p{margin:0}
.hp3-h1{font-size:52px;font-weight:500;letter-spacing:-.015em;line-height:1.12;color:var(--ink-900)}
.hp3-h2{font-size:40px;font-weight:600;line-height:1.15;color:var(--ink-900)}
.hp3-h3{font-size:28px;font-weight:600;line-height:1.2;color:var(--ink-900)}
/* Second, quieter half of a two-tone headline */
.hp3-quiet{color:var(--ink-500)}
.hp3-section--teal .hp3-h1,.hp3-section--teal .hp3-h2,.hp3-section--teal .hp3-h3{color:var(--ground-white)}
.hp3-lead{font-size:var(--text-large);line-height:1.5;color:var(--ink-700)}
.hp3-body{font-size:var(--text-regular);line-height:1.6;color:var(--ink-700)}
.hp3-small{font-size:var(--text-small);line-height:1.5;color:var(--ink-600)}
.hp3-note{font-size:13px;line-height:1.4;color:var(--ink-600)}

.hp3-eyebrow{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--teal-tint);color:var(--teal-deep);font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;white-space:nowrap}
.hp3-section--teal .hp3-eyebrow{background:var(--teal-tint);color:var(--teal-deep)}

/* ── 4. Buttons ──
   Hover colour change is approved (Brand Guide v7). The text roll is pending
   brand-owner approval: it only runs while <main> has .hp3-m-btnroll, so
   removing that one class switches it off. */
.hp3-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border-radius:var(--radius-small);font-family:var(--font-brand);font-size:16px;font-weight:600;line-height:1.5;text-decoration:none;white-space:nowrap;position:relative;isolation:isolate;transition:background-color var(--hp3-hover) var(--hp3-ease),color var(--hp3-hover) var(--hp3-ease)}
.hp3-btn--primary{background:var(--orange-core);color:var(--ground-white)}
.hp3-btn--primary:hover{background:var(--orange-deep)}
.hp3-btn--ghost{border:1.5px solid var(--teal-core);color:var(--teal-deep);background:transparent}
.hp3-btn--ghost:hover{background:var(--teal-tint)}
.hp3-btn--ghost-dark{border:1.5px solid var(--ground-white);color:var(--ground-white);background:transparent}
.hp3-btn--ghost-dark:hover{background:rgba(255,255,255,.08)}
.hp3-btn__label{display:block;overflow:hidden;position:relative}
.hp3-btn__label>span{display:block;transition:transform var(--hp3-hover) var(--hp3-ease)}
.hp3-m-btnroll .hp3-btn__label>span::after{content:attr(data-label);position:absolute;left:0;top:100%;width:100%}
.hp3-m-btnroll .hp3-btn:hover .hp3-btn__label>span{transform:translateY(-100%)}
.hp3-m-btnroll .hp3-btn--primary::before,.hp3-m-btnroll .hp3-btn--ghost::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;transition:inset var(--hp3-hover) var(--hp3-ease)}
.hp3-m-btnroll .hp3-btn--primary:hover::before{inset:2.5% 2.5%}

/* Text link with arrow. Underline wipe is pending approval (.hp3-m-linkwipe). */
.hp3-link{color:var(--teal-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hp3-m-linkwipe .hp3-link{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat right bottom / 100% 1.5px;padding-bottom:2px;transition:background-size calc(var(--hp3-hover)*.6) var(--hp3-ease)}
.hp3-m-linkwipe .hp3-link:hover{background-size:0 1.5px;animation:hp3-redraw var(--hp3-hover) var(--hp3-ease) forwards}
@keyframes hp3-redraw{0%,60%{background-position:right bottom;background-size:0 1.5px}61%{background-position:left bottom;background-size:0 1.5px}100%{background-position:left bottom;background-size:100% 1.5px}}

/* ── 5. Product mockups ("Card · …" layers) ──
   These illustrate the web app; they are not live data. Each is wrapped in
   <figure role="img" aria-label="…"> with the inner markup aria-hidden. */
.hp3-mock{margin:0}
.hp3-card{background:var(--ground-white);border:1px solid var(--ink-200);border-radius:16px;padding:0 22px 22px;display:flex;flex-direction:column;gap:12px;font-size:var(--text-small);line-height:1.5;color:var(--ink-900);text-align:left}
.hp3-card--raised{border:0;box-shadow:0 2px 6px rgba(43,38,26,.08),0 24px 48px -8px rgba(43,38,26,.16)}
.hp3-card__head{display:flex;gap:14px;align-items:flex-end}
.hp3-card__title{font-size:var(--heading-6);font-weight:600;line-height:1.4;color:var(--orange-deep);white-space:nowrap}
.hp3-sticker{width:44px;height:54px;flex:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:11px;border-radius:0 0 22px 22px}
.hp3-sticker img{width:20px;height:20px}
.hp3-sticker--gold{background:var(--gold-core)}
.hp3-sticker--ink{background:var(--ink-800)}
.hp3-sticker--teal{background:var(--teal-core)}
.hp3-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.5}

.hp3-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:var(--text-small);font-weight:600;line-height:1.5;white-space:nowrap}
.hp3-chip img{width:16px;height:16px}
.hp3-chip--dark{background:var(--ink-900);color:var(--ground-white)}
.hp3-chip--muted{background:var(--ink-100);color:var(--ink-700)}
.hp3-chip--orange-tint{background:var(--orange-tint);color:var(--orange-deep)}
.hp3-chip--orange{background:var(--orange-core);color:var(--ground-white)}
.hp3-chip--outline{border:1px solid var(--ink-300);color:var(--ink-800)}
.hp3-chip--moss{background:var(--moss-tint);color:var(--moss-deep)}
.hp3-chip--white{background:var(--ground-white);border:1px solid var(--ink-200);color:var(--ink-900)}
.hp3-chip--teal-outline{background:var(--ground-white);border:1px solid var(--teal-soft);color:var(--teal-deep)}
.hp3-chip--lg{padding:10px 18px;font-size:16px;font-weight:700;line-height:1.6}
.hp3-chip--label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px}
.hp3-chips{display:flex;gap:6px;flex-wrap:nowrap}

.hp3-search{display:flex;gap:8px;align-items:center;padding:9px 14px;border-radius:999px;border:1px solid var(--ink-200);background:var(--ink-50);color:var(--ink-500)}
.hp3-search img{width:18px;height:18px}

.hp3-result{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--ink-100)}
.hp3-thumb{width:40px;height:40px;flex:none;border-radius:10px;background:var(--gold-tint);display:flex;align-items:center;justify-content:center}
.hp3-thumb img{width:22px;height:22px}
.hp3-result__name{flex:1;min-width:0}
.hp3-result__name b,.hp3-strong{font-weight:700;color:var(--ink-900)}
.hp3-meta{color:var(--indigo-core)}
.hp3-price{text-align:right;white-space:nowrap}
.hp3-price span{display:block;color:var(--ink-500)}

.hp3-drug{display:flex;flex-direction:column;gap:2px}
.hp3-drug__name{font-size:20px;font-weight:600;line-height:1.4}
.hp3-drug__form{font-weight:700;color:var(--indigo-core)}
.hp3-details{display:flex;flex-direction:column}
.hp3-details>div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--ink-100);white-space:nowrap}
.hp3-details dt{color:var(--ink-600)}
.hp3-details dd{margin:0;font-weight:700}
.hp3-details dd.is-price{color:var(--orange-deep)}
.hp3-seller{background:var(--indigo-tint);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px}
.hp3-seller .hp3-label{color:var(--indigo-core)}
.hp3-seller__name{font-size:16px;font-weight:700;line-height:1.6}
.hp3-actions{display:flex;justify-content:flex-end}

/* Fixed-size mockup compositions scale down as one picture on narrow screens.
   [data-hp3-fit] holds a stage of a known design width; the script in the page
   sets --fit so the stage zooms to the available width. */
[data-hp3-fit]{width:100%;display:flex;justify-content:center}
[data-hp3-fit]>.hp3-stage{zoom:var(--fit,1);flex:none}

/* Network pattern background used behind product views */
.hp3-pattern{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.hp3-pattern i{position:absolute;border:1.5px solid var(--ink-300);transform:rotate(-45deg)}
.hp3-pattern img{position:absolute;left:0;top:0;width:1600px;height:1100px;max-width:none}
.hp3-pattern::after{content:"";position:absolute;inset:0;background:radial-gradient(50% 50% at 50% 50%,rgba(250,249,243,0) 70%,rgba(250,249,243,.8) 90%,var(--ground-ivory) 100%)}

/* ── 6. 01 · Hero ── */
.hp3-hero{padding:88px 80px 96px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.hp3-hero__top{display:flex;flex-direction:column;align-items:center;gap:20px}
.hp3-hero .hp3-h1{max-width:1100px}
.hp3-hero .hp3-lead{max-width:780px}
.hp3-hero .hp3-small{max-width:680px}
.hp3-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hp3-hero__view{position:relative;width:100%;border-radius:24px;padding:48px 40px 56px}
.hp3-hero__stage{display:flex;align-items:flex-start;width:1000px;position:relative}
.hp3-hero__stage>.hp3-card:first-child{width:600px;margin-right:-20px;position:relative;z-index:1}
.hp3-hero__listing{padding-top:120px;position:relative;z-index:2}
.hp3-hero__listing .hp3-card{width:420px}
.hp3-hero__view>.hp3-note{position:absolute;left:40px;bottom:32px;text-align:left}
.hp3-proof{display:flex;flex-direction:column;align-items:center;gap:12px}
.hp3-proof>p{font-size:16px;font-weight:600;line-height:1.6;color:var(--ink-800)}
.hp3-trustmark{display:flex;gap:14px;align-items:center;text-align:left}
.hp3-trustmark img{width:50px;height:72px;object-fit:contain}
.hp3-trustmark p{font-size:15px;font-weight:600;line-height:1.4;color:var(--ink-700)}

/* ── 02 · Problem ── Figma 10372:8350 / 10480:7290 */
.hp3-problem{display:flex;gap:48px;align-items:flex-start;padding:96px 80px}
.hp3-problem__story{width:660px;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hp3-problem .hp3-h2{font-size:38px;line-height:1.2}
.hp3-problem__p{max-width:560px;font-size:var(--text-medium);line-height:1.5;color:var(--ink-700)}
.hp3-ladder{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px}
.hp3-ladder__step{display:flex;gap:16px;align-items:center;padding:18px 64px 18px 20px;background:var(--ground-white);border:1px solid var(--ink-200);border-radius:14px}
.hp3-ladder__step p{flex:1;min-width:0;font-size:var(--text-small);line-height:1.5;color:var(--ink-800)}
.hp3-ladder__icon{width:40px;height:40px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center}
.hp3-ladder__icon img{width:22px;height:22px}
.hp3-ladder__icon--moss{background:var(--moss-tint)}
.hp3-ladder__icon--gold{background:var(--gold-tint)}
.hp3-ladder__icon--clay{background:var(--clay-tint)}

/* Conversation panel */
.hp3-problem__chat{flex:1;min-width:0;position:relative;background:var(--ground-ivory);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:20px;overflow:clip}
.hp3-problem__chat>.hp3-mock,.hp3-problem__chat>.hp3-note{position:relative}
/* Monotone network pattern: lighter diamond lines than the hero's */
.hp3-pattern--soft i{border-color:var(--ink-200)}

/* Card · Messages */
.hp3-msgs{width:100%}
.hp3-msgs .hp3-card{gap:14px}
.hp3-msgs__thread{display:flex;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--ink-100);border-bottom:1px solid var(--ink-100);white-space:nowrap}
.hp3-msgs__thread b{display:block}
.hp3-msgs__sub{display:block;color:var(--ink-600)}
.hp3-msgs__agent{width:36px;height:36px;flex:none;border-radius:10px;background:var(--teal-tint);display:flex;align-items:center;justify-content:center}
.hp3-msgs__agent img{width:20px;height:20px}
.hp3-msgs__row{display:flex}
.hp3-msgs__row--sent{justify-content:flex-end}
.hp3-bubble{display:flex;flex-direction:column;gap:4px;padding:12px 16px;max-width:100%}
.hp3-bubble--sent{width:260px;background:var(--ink-900);border-radius:16px 16px 4px 16px}
.hp3-bubble--sent .hp3-label{color:var(--ink-300)}
.hp3-bubble--sent .hp3-bubble__text{font-size:var(--text-regular);font-weight:700;line-height:1.6;color:var(--ground-white)}
.hp3-bubble--received{width:410px;background:var(--ground-ivory);border-radius:16px 16px 16px 4px}
.hp3-bubble--received .hp3-label{color:var(--teal-core)}
.hp3-bubble--received .hp3-bubble__text{font-size:var(--text-small);line-height:1.5;color:var(--ink-800)}
.hp3-msgs__composer{display:flex;gap:8px;align-items:center;padding:6px 6px 6px 16px;border:1px solid var(--ink-300);border-radius:999px;color:var(--ink-500)}
.hp3-msgs__composer>span:first-child{flex:1;min-width:0}
.hp3-msgs__send{width:32px;height:32px;flex:none;border-radius:16px;background:var(--orange-core);display:flex;align-items:center;justify-content:center}
.hp3-msgs__send img{width:18px;height:18px}

/* Side by side, the story column is a fixed 660px, so below about 1245px the
   conversation panel is squeezed (234px at 1150) and its text runs out of the
   Messages card. So this section stacks from 1240px down, not 1100px. */
@media (max-width:1100px){
  .hp3-problem{padding:72px 40px}
}
@media (max-width:1240px){
  .hp3-problem{flex-direction:column;gap:40px}
  .hp3-problem__story{width:100%}
  .hp3-problem__chat{width:100%;align-items:center}
  .hp3-problem__chat>.hp3-mock{max-width:520px}
  .hp3-problem__chat>.hp3-note{width:100%;max-width:520px}
}
@media (max-width:760px){
  .hp3-problem{padding:48px 20px;gap:32px}
  .hp3-problem .hp3-h2{font-size:28px}
  .hp3-problem .hp3-br{display:none}
  .hp3-ladder__step{gap:14px;padding:16px}
  .hp3-problem__chat{padding:24px 12px}
  .hp3-msgs .hp3-card{white-space:normal}
  .hp3-bubble--sent{width:86%}
  .hp3-bubble--received{width:92%}
  .hp3-msgs__thread{white-space:normal}
  .hp3-problem__chat>.hp3-note{font-size:12px}
}

/* ── 04 · Solution (bento) ── Figma 10372:8435 / 10480:7345 */
.hp3-solution{padding:96px 80px;display:flex;flex-direction:column;gap:40px}
.hp3-solution__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.hp3-solution__intro{width:700px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hp3-solution .hp3-h2{font-size:38px;line-height:1.2}
.hp3-solution__head>.hp3-body{width:440px;flex:none}

/* Bento grid: 816 + 400 on the first row, 3 × 400 on the second */
.hp3-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hp3-tile{position:relative;background:var(--ground-ivory);border-radius:20px;padding:28px 28px 36px;display:flex;flex-direction:column;gap:8px;min-height:484px;overflow:clip}
.hp3-tile--wide{grid-column:span 2}
.hp3-tile--short{min-height:400px}
.hp3-tile>*:not(.hp3-pattern){position:relative}
.hp3-tile__title{font-size:20px;font-weight:600;line-height:1.4;color:var(--ink-900)}
.hp3-tile__text{font-size:var(--text-small);line-height:1.5;color:var(--ink-600)}
.hp3-tile>.hp3-note{margin-top:auto;padding-top:16px}
/* Panel-colour band behind the tile title, fading into the pattern */
.hp3-tile__mask{position:absolute;inset:0;background:linear-gradient(180deg,var(--ground-ivory) 0%,var(--ground-ivory) var(--m1,20%),rgba(250,249,243,0) var(--m2,36%))}
.hp3-pattern--soft i{border-color:var(--ink-200)}
.hp3-tile__mock{padding-top:12px}
.hp3-tile__mock--start{justify-content:flex-start}
.hp3-tile .hp3-mock{margin:0}

/* Shared mockup bits that the kit doesn't have */
.hp3-solution .hp3-sticker--clay{background:var(--clay-core)}
.hp3-solution .hp3-sticker--moss{background:var(--moss-core)}
.hp3-solution .hp3-chip--orange-outline{border:1px solid var(--orange-core);color:var(--orange-deep)}
.hp3-solution .hp3-chip--teal-deep{background:var(--teal-deep);color:var(--ground-white)}
.hp3-solution .hp3-chip--moss-core{background:var(--moss-core);color:var(--ground-white)}

/* Card · InStockRx Marketplace — drawn at 500px, shown at 92% */
.hp3-mk-market{padding-top:0}
.hp3-mk-market .hp3-card{width:500px;zoom:.9208}

/* Card · Create Draft (step 1) + Card · payment */
.hp3-mk-sell{width:308px;padding-top:2px}
.hp3-mk-sell__draft{margin-bottom:-16px}
.hp3-mk-draft{width:500px;zoom:.5917;border-width:1.4px}
.hp3-stepper{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600}
.hp3-stepper__dot{width:22px;height:22px;flex:none;border-radius:11px;background:var(--ink-200);color:var(--ink-600);font-weight:700;display:flex;align-items:center;justify-content:center}
.hp3-stepper__dot.is-on{background:var(--orange-core);color:var(--ground-white)}
.hp3-stepper__label{color:var(--ink-500)}
.hp3-stepper__label.is-on{color:var(--ink-900)}
.hp3-stepper i{width:12px;height:1px;flex:none;background:var(--ink-300)}
.hp3-mk-draft__hint{color:var(--ink-600)}
.hp3-mk-draft__ndc{display:flex;align-items:center;gap:6px;padding:5px 5px 5px 16px;border:1px solid var(--ink-300);border-radius:999px;font-size:16px;line-height:1.6;color:var(--ink-500)}
.hp3-mk-draft__ndc>span:first-child{flex:1}
.hp3-mk-sell__row{display:flex;justify-content:flex-end}
.hp3-mk-pay{width:320px;zoom:.6612}
.hp3-mk-pay__status{border:1px solid var(--gold-deep);border-radius:8px;padding:8px 12px;font-weight:600;color:var(--gold-deep)}
.hp3-solution .hp3-details dd.is-credit{color:var(--moss-deep)}

/* Card · seller details + Card · seller reply */
.hp3-mk-seller{width:344px}
.hp3-mk-seller__card{padding:16px;margin-bottom:-16px}
.hp3-mk-seller__row{display:flex;justify-content:flex-end}
.hp3-mk-reply{display:flex;gap:10px;align-items:center;padding:10px 16px 10px 14px;background:var(--ground-white);border-radius:14px;box-shadow:0 2px 3px rgba(43,38,26,.08),0 24px 24px rgba(43,38,26,.16);white-space:nowrap;font-size:var(--text-small);line-height:1.5}
.hp3-mk-reply img{width:18px;height:18px}
.hp3-mk-reply>span{display:flex;flex-direction:column;gap:2px}
.hp3-mk-reply .hp3-label{color:var(--indigo-core)}
.hp3-mk-reply__text{color:var(--ink-800)}

/* Card · DSCSA T3 Data + Card · Invoice sheet */
.hp3-mk-records{width:324px;padding-top:3px;isolation:isolate}
.hp3-mk-records__t3{position:relative;z-index:2;margin-bottom:-6px;display:flex}
.hp3-mk-t3{zoom:.694;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 18px;background:var(--teal-tint);border:1px solid var(--teal-soft);border-radius:14px;box-shadow:0 2px 4px rgba(43,38,26,.08),0 32px 32px rgba(43,38,26,.16)}
.hp3-mk-t3__title{display:flex;align-items:center;gap:8px;font-size:var(--heading-6);font-weight:600;line-height:1.4;color:var(--teal-deep)}
.hp3-mk-t3__title img{width:20px;height:20px}
.hp3-mk-records__row{position:relative;z-index:1;padding-left:53px;display:flex}
.hp3-invoice{width:280px;zoom:.7726;background:var(--ground-white);border:1.2px solid var(--ink-200);border-radius:6px;overflow:clip;padding-bottom:16px;display:flex;flex-direction:column;gap:10px;font-size:var(--text-small);line-height:1.5;color:var(--ink-900)}
.hp3-invoice__bar{background:var(--ink-950);color:var(--ground-white);text-align:center;padding:9px 13px;font-weight:700;letter-spacing:.3em}
.hp3-invoice__body{padding:0 16px;display:flex;flex-direction:column;gap:8px}
.hp3-invoice__parties{display:flex;gap:12px}
.hp3-invoice__parties>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hp3-invoice__parties .hp3-label{color:var(--ink-500)}
.hp3-invoice__parties span:last-child{color:var(--ink-600)}
.hp3-invoice .hp3-details>div{padding:5px 0}

/* Tile · What it costs */
.hp3-tile--costs{gap:12px}
.hp3-costs{display:flex;flex-direction:column;gap:20px}
.hp3-costs__price{font-size:64px;font-weight:600;line-height:72px;background:linear-gradient(137.65deg,var(--indigo-core) 0%,var(--teal-core) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.hp3-costs__list{list-style:none;margin:0;padding:20px 0 0;border-top:1px solid var(--ink-300);display:flex;flex-direction:column;gap:12px}
.hp3-costs__list li{display:flex;align-items:center;gap:10px;font-size:16px;line-height:24px;color:var(--ink-800)}
.hp3-costs__list img{width:18px;height:18px;flex:none}
.hp3-costs__list li.is-fee{font-weight:600}

@media (max-width:1100px){
  .hp3-solution{padding:72px 40px}
  .hp3-solution__head{flex-direction:column;align-items:flex-start;gap:24px}
  .hp3-solution__intro{width:auto}
  .hp3-solution__head>.hp3-body{width:auto;max-width:560px}
  .hp3-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hp3-solution{padding:48px 20px;gap:32px}
  .hp3-solution .hp3-h2{font-size:28px}
  .hp3-solution__head{gap:32px}
  .hp3-bento{grid-template-columns:minmax(0,1fr)}
  .hp3-tile--wide{grid-column:auto}
  .hp3-tile,.hp3-tile--short{min-height:0;padding:20px 20px 24px}
  .hp3-tile__title{font-size:18px}
  .hp3-tile__mock{padding-top:8px}
  .hp3-costs__price{font-size:44px;line-height:50px}
  .hp3-costs__list li{align-items:flex-start}
  .hp3-costs__list img{margin-top:3px}
}

/* ── 04 · Exchange ticker (live embed of ticker.instockrx.com) ── */
/* --hp3-ticker-bg is the ticker page's own background colour (no Palette v2 token matches it).
   It shows while the frame loads and behind the fallback. */
.hp3{--hp3-ticker-bg:#142A2F}
.hp3-ticker{background:var(--hp3-ticker-bg);color:var(--ground-white);container-type:inline-size}
.hp3-ticker__h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hp3-ticker__frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:inherit;background:var(--hp3-ticker-bg)}
.hp3-ticker__frame iframe{display:block;width:100%;height:100%;border:0;background:var(--hp3-ticker-bg)}
.hp3-ticker__fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.hp3-ticker__fallback[hidden]{display:none}
.hp3-ticker__fallback .hp3-label{color:var(--teal-soft)}
.hp3-ticker__open{color:var(--ground-white);font-size:var(--text-medium);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* At 640px and below the ticker drops its 16:9 "booth board" for a natural-height phone layout,
   so the frame gets a fixed height that fits that layout instead of a shrunken desktop view. */
@container (max-width:640px){
  .hp3-ticker__frame{aspect-ratio:auto;height:var(--hp3-ticker-phone-h,620px)}
}

/* ── 05 · Capabilities (alternating rows) ── */
.hp3-caps{padding:96px 80px;display:flex;flex-direction:column;gap:96px}
.hp3-caps>*{width:100%;max-width:1232px;margin:0 auto}
.hp3-caps__head{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hp3-caps .hp3-h2{font-size:38px;line-height:1.2}

/* One capability row: 500px text column + mockup panel, 72px apart */
.hp3-cap{display:flex;align-items:center;gap:72px}
.hp3-cap__text{flex:none;width:500px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hp3-cap--flip .hp3-cap__visual{order:-1}

/* "01 · Buying" sub-eyebrow */
.hp3-cap__tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--ground-ivory);border:1px solid var(--ink-200);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:normal;white-space:nowrap;color:var(--ink-700)}
.hp3-cap__tag span:first-child{color:var(--ink-900)}
.hp3-cap__tag i{width:3px;height:3px;border-radius:50%;background:var(--ink-200)}

.hp3-cap__title{font-size:32px}
.hp3-cap__body{font-size:var(--text-medium);line-height:1.5;color:var(--ink-700)}

/* Ruled feature list */
.hp3-cap__list{list-style:none;width:100%}
.hp3-cap__list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--ink-100);font-size:var(--text-regular);line-height:24px;color:var(--ink-800)}
.hp3-cap__list li:last-child{border-bottom:1px solid var(--ink-100)}
.hp3-cap__list img{width:18px;height:18px;flex:none}

/* Orange outline button with arrow (Figma "Button · orange outline") */
.hp3-btn--outline-orange{gap:8px;padding:12px 20px;border-radius:8px;border:1.5px solid var(--orange-core);color:var(--orange-deep);font-weight:700;line-height:24px;background:transparent}
.hp3-btn--outline-orange:hover{background:var(--orange-tint)}
.hp3-btn--outline-orange img{width:18px;height:18px;flex:none}

/* Mockup panel: ivory, network pattern, edge fade */
.hp3-cap__visual{flex:1 1 0;min-width:0;position:relative;background:var(--ground-ivory);border-radius:24px;padding:48px 40px;display:flex;flex-direction:column;align-items:center;gap:16px}
.hp3-cap__visual>[data-hp3-fit],.hp3-cap__visual>.hp3-note{position:relative}
.hp3-cap__visual>.hp3-note{width:100%}
.hp3-cap__net{position:absolute;width:1600px;height:1100px}
.hp3-cap__visual .hp3-pattern i{border-color:var(--ink-200)}
.hp3-cap__visual .hp3-pattern::after{background:radial-gradient(50% 50% at 50% 50%,transparent 60%,color-mix(in srgb,var(--ground-ivory) 75%,transparent) 85%,var(--ground-ivory) 97%)}

/* Mockup stage: two overlapping cards, each a kit card zoomed to its Figma size */
.hp3-cap__stage{width:560px;display:flex;flex-direction:column}
.hp3-cap__row{display:flex;align-items:flex-start}
.hp3-cap__row--end{justify-content:flex-end;position:relative;z-index:1}
.hp3-cap__stage--1 .hp3-cap__row--end{margin-top:-10px}
.hp3-cap__stage--2 .hp3-cap__row--end{margin-top:-6px}
.hp3-cap__stage--3 .hp3-cap__row--end{margin-top:-18px}
.hp3-cap__card{flex:none;zoom:var(--z,1)}
.hp3-cap__card--market,.hp3-cap__card--draft{width:500px;--z:.96}
.hp3-cap__card--listing-sm{width:420px;--z:.7143}
.hp3-cap__card--sold{width:320px;--z:.875}
.hp3-cap__card--listing{width:420px}
.hp3-chat{width:320px;padding:16px 18px;gap:10px}

.hp3-sticker--clay{background:var(--clay-core)}
.hp3-chip--orange-outline{border:1px solid var(--orange-core);color:var(--orange-deep)}

/* Create Draft card */
.hp3-stepper{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hp3-stepper__dot{width:22px;height:22px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--ink-200);color:var(--ink-600);font-weight:700}
.hp3-stepper__dot.is-on{background:var(--orange-core);color:var(--ground-white)}
.hp3-stepper__label{font-weight:600;color:var(--ink-500)}
.hp3-stepper__label.is-on{color:var(--ink-900)}
.hp3-stepper i{width:12px;height:1px;flex:none;background:var(--ink-300)}
.hp3-cap__prompt{color:var(--ink-600)}
.hp3-ndc{display:flex;align-items:center;gap:6px;padding:5px 5px 5px 16px;border:1px solid var(--ink-300);border-radius:999px}
.hp3-ndc>span:first-child{flex:1;font-size:var(--text-regular);line-height:1.6;color:var(--ink-500)}

/* Listing sold card */
.hp3-cap__card--sold .hp3-drug__name{font-size:var(--heading-6)}
.hp3-cap__card--sold .hp3-details>div{padding:7px 0}

/* Chat card */
.hp3-chat__head{display:flex;align-items:center;gap:8px;font-weight:700;white-space:nowrap}
.hp3-chat__head img{width:18px;height:18px}
.hp3-chat__msg{align-self:flex-start;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:14px 14px 14px 4px;background:var(--ground-ivory);color:var(--ink-800);white-space:nowrap}
.hp3-chat__msg .hp3-label{color:var(--indigo-core)}
.hp3-chat__msg--sent{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--ink-900);color:var(--ground-white)}
.hp3-chat__msg--sent .hp3-label{color:var(--ink-300)}

/* Records: Transaction Statement + Invoice sheets (PNG exports from Figma) */
.hp3-records{position:relative;width:460px;height:556px}
.hp3-records img{position:absolute;display:block;border-radius:var(--radius-small)}
.hp3-records__statement{left:0;top:0;width:290px;height:auto}
.hp3-records__invoice{left:170px;top:124px;width:290px;height:auto}

@media (max-width:1100px){
  .hp3-caps{padding:72px 40px;gap:64px}
  .hp3-cap{flex-direction:column;align-items:stretch;gap:32px}
  .hp3-cap__text{width:auto;max-width:640px}
  .hp3-cap--flip .hp3-cap__visual{order:0}
  .hp3-cap__visual{flex:none}
}
@media (max-width:760px){
  .hp3-caps{padding:48px 20px;gap:32px}
  .hp3-caps .hp3-h2{font-size:28px}
  .hp3-cap{gap:28px}
  .hp3-cap__title{font-size:24px}
  .hp3-cap__visual{padding:24px 20px}
  /* Figma mobile sizes each card separately rather than shrinking the desktop pair */
  .hp3-cap__stage{width:286px}
  .hp3-cap__card--market,.hp3-cap__card--draft{--z:.4805}
  .hp3-cap__card--listing-sm{--z:.4767}
  .hp3-cap__card--sold,.hp3-chat{--z:.6256}
  .hp3-cap__card--listing{--z:.572}
  .hp3-cap__stage--1 .hp3-cap__row--end{margin-top:-9px}
  .hp3-cap__stage--2 .hp3-cap__row--end{margin-top:-8px}
  .hp3-cap__stage--3 .hp3-cap__row--end{margin-top:-11px}
  .hp3-records{width:286px;height:auto;display:flex;flex-direction:column}
  .hp3-records img{position:relative;left:auto;top:auto}
  .hp3-records__statement{width:240px}
  .hp3-records__invoice{width:200px;margin:-12px 0 0 auto}
}

/* ── 06 · Who we serve (bento) ── Figma 10372:8995 / 10480:7969, hovers 10470:9260 */
.hp3-who{padding:96px 80px;display:flex;flex-direction:column;gap:48px}
.hp3-who__intro{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:720px}
.hp3-who .hp3-h2{font-size:38px;line-height:1.2}
.hp3-who .hp3-lead{font-size:var(--text-medium)}
.hp3-who__bento{display:flex;flex-direction:column;gap:56px}
.hp3-who__group{display:flex;flex-direction:column;gap:16px}
.hp3-who__group-label{color:var(--ink-700)}
.hp3-who__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

/* Tile. Each segment sets its Tint (hover fill), Core (hover chip) and Deep (hover title). */
.hp3-who__tile{--seg-tint:var(--ink-100);--seg-core:var(--ink-800);--seg-deep:var(--ink-900);
  position:relative;display:flex;min-height:340px;border-radius:20px;overflow:clip;background:var(--ground-ivory);
  transition:background-color var(--hp3-hover) var(--hp3-ease),border-color var(--hp3-hover) var(--hp3-ease),box-shadow var(--hp3-hover) var(--hp3-ease)}
.hp3-who__tile--clay{--seg-tint:var(--clay-tint);--seg-core:var(--clay-core);--seg-deep:var(--clay-deep)}
.hp3-who__tile--teal{--seg-tint:var(--teal-tint);--seg-core:var(--teal-core);--seg-deep:var(--teal-deep)}
.hp3-who__tile--moss{--seg-tint:var(--moss-tint);--seg-core:var(--moss-core);--seg-deep:var(--moss-deep)}
/* Figma uses Plum Core (no token in Palette v2 here); Plum Deep is the nearest. */
.hp3-who__tile--plum{--seg-tint:var(--plum-tint);--seg-core:var(--plum-deep);--seg-deep:var(--plum-deep)}
.hp3-who__tile--indigo{--seg-tint:var(--indigo-tint);--seg-core:var(--indigo-core);--seg-deep:var(--indigo-deep)}
/* Gold Core is too light for a white icon, so the chip uses Gold Deep (per the hover board). */
.hp3-who__tile--gold{--seg-tint:var(--gold-tint);--seg-core:var(--gold-deep);--seg-deep:var(--gold-deep)}
.hp3-who__tile--neutral{--seg-tint:var(--ground-white);--seg-core:var(--teal-deep);--seg-deep:var(--teal-deep);background:var(--ground-white);border:1px solid var(--ink-200)}
.hp3-who__tile--wide{grid-column:span 2}

.hp3-who__text{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;flex:1 1 auto;min-width:0}
.hp3-who__tile--wide .hp3-who__text{flex:0 0 380px}
.hp3-who__chip{position:relative;width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--seg-tint);transition:background-color var(--hp3-hover) var(--hp3-ease)}
.hp3-who__tile--neutral .hp3-who__chip{background:var(--ground-white)}
.hp3-who__chip img{width:24px;height:24px;display:block}
.hp3-who__chip .hp3-who__icon-on{position:absolute;left:10px;top:10px;opacity:0;transition:opacity var(--hp3-hover) var(--hp3-ease)}
.hp3-who__title{font-size:20px;font-weight:600;line-height:1.4;color:var(--ink-900);transition:color var(--hp3-hover) var(--hp3-ease)}
.hp3-who__text>.hp3-body{color:var(--ink-700)}

/* The tile's main link stretches over the whole tile, so the tile is one click target */
.hp3-who__link{margin-top:auto;padding-top:0;display:inline-flex;align-items:center;gap:6px;font-size:var(--text-regular);font-weight:700;line-height:1.6;color:var(--teal-deep);text-decoration:none}
.hp3-who__link img{width:18px;height:18px;flex:none}
.hp3-who__link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.hp3-who__link:focus-visible{outline:none}
.hp3-who__link--title{display:inline;margin:0;font:inherit;color:inherit}
.hp3-who__btn{margin-top:auto;position:relative;z-index:2}

.hp3-who__photo{flex:1 1 auto;min-width:0;position:relative;overflow:hidden}
.hp3-who__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--hp3-hover) var(--hp3-ease)}

/* Hover, and the same look while the tile's link has keyboard focus */
.hp3-who__tile:hover,.hp3-who__tile:focus-within{background:var(--seg-tint)}
.hp3-who__tile:hover .hp3-who__chip,.hp3-who__tile:focus-within .hp3-who__chip{background:var(--seg-core)}
.hp3-who__tile:hover .hp3-who__icon-on,.hp3-who__tile:focus-within .hp3-who__icon-on{opacity:1}
.hp3-who__tile:hover .hp3-who__title,.hp3-who__tile:focus-within .hp3-who__title{color:var(--seg-deep)}
.hp3-who__tile:hover .hp3-who__photo img,.hp3-who__tile:focus-within .hp3-who__photo img{transform:scale(1.064)}
.hp3-who__tile--neutral:hover,.hp3-who__tile--neutral:focus-within{border-color:var(--teal-deep);box-shadow:inset 0 0 0 .5px var(--teal-deep)}
/* Visible focus ring on the tile when its stretched link is focused */
.hp3-who__tile:has(.hp3-who__link:focus-visible){outline:2.5px solid var(--teal-core);outline-offset:3px}
.hp3-who__btn:focus-visible{outline:2.5px solid var(--teal-core);outline-offset:3px}

@media (max-width:1100px){
  .hp3-who{padding:72px 40px}
  .hp3-who__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp3-who__tile--wide .hp3-who__text{flex-basis:50%}
}
@media (max-width:760px){
  .hp3-who{padding:48px 20px;gap:32px}
  .hp3-who__br{display:none}
  .hp3-who .hp3-h2{font-size:28px}
  .hp3-who__grid{grid-template-columns:minmax(0,1fr)}
  .hp3-who__tile,.hp3-who__tile--wide{grid-column:auto;min-height:0}
  .hp3-who__tile--wide{flex-direction:column-reverse}
  .hp3-who__tile--wide .hp3-who__text{flex-basis:auto}
  .hp3-who__photo{flex:none;height:190px}
  .hp3-who__text{padding:20px 20px 24px}
  .hp3-who__title{font-size:18px}
  .hp3-who__link,.hp3-who__btn{margin-top:8px}
  .hp3-who__link{flex-wrap:wrap}
}

/* ── 06b · Stats banner ── Figma 10449:9156 / 10480:8048 */
.hp3-stats{padding:64px 80px;display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.hp3-stats h2.hp3-eyebrow{margin:0}
.hp3-stats__list{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hp3-stats__item{display:flex;flex-direction:column;gap:8px;padding:4px 32px}
.hp3-stats__item:first-child{padding-left:0}
.hp3-stats__item+.hp3-stats__item{border-left:1px solid var(--ink-200)}
.hp3-stats__num{font-size:56px;font-weight:600;line-height:1.1;color:var(--ink-900);white-space:nowrap}
.hp3-stats__label{font-size:var(--text-medium);line-height:1.5;color:var(--ink-700)}
.hp3-stats__note{line-height:1.5}

@media (max-width:1100px){
  .hp3-stats{padding:56px 40px}
  .hp3-stats__item{padding:4px 24px}
  .hp3-stats__num{font-size:44px}
}
@media (max-width:760px){
  .hp3-stats{padding:48px 20px}
  .hp3-stats__list{grid-template-columns:minmax(0,1fr);gap:16px}
  .hp3-stats__item{padding:0 0 4px}
  .hp3-stats__item+.hp3-stats__item{border-left:0;border-top:1px solid var(--ink-200);padding-top:16px}
  .hp3-stats__num{font-size:40px;white-space:normal}
}

/* ── 08 · FAQs ── */
.hp3-faqs{padding:96px 80px;display:flex;flex-direction:column;gap:48px}
.hp3-faqs__head{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hp3-faqs .hp3-h2,.hp3-cta .hp3-h2{font-size:38px;line-height:1.2}
.hp3-faqs__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}

/* Each question is a <details>: the answer is always in the page source. */
.hp3-faq{background:var(--ground-white);border-radius:20px;padding:18px;display:flex;flex-direction:column}
.hp3-faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 10px;border-radius:12px;font-size:var(--heading-6);font-weight:600;line-height:1.4;color:var(--ink-900);transition:background-color var(--hp3-hover) var(--hp3-ease)}
.hp3-faq__q::-webkit-details-marker{display:none}
.hp3-faq__q::marker{content:""}
.hp3-faq__q>span{flex:1;min-width:0}
.hp3-faq__q:hover{background:var(--teal-tint)}
.hp3-faq__q:focus-visible{outline:2px solid var(--teal-core);outline-offset:2px}
.hp3-faq__chev{width:24px;height:24px;flex:none;transition:transform var(--hp3-open) var(--hp3-ease)}
.hp3-faq__q:hover .hp3-faq__chev{transform:translateY(2px)}
.hp3-faq.is-open .hp3-faq__chev{transform:rotate(180deg)}
.hp3-faq.is-open .hp3-faq__q:hover .hp3-faq__chev{transform:translateY(2px) rotate(180deg)}
.hp3-faq__a{overflow:hidden;padding:0 10px 10px}

/* "Still have a question?" banner */
.hp3-faqs__contact{position:relative;overflow:clip;display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:20px;background:var(--teal-tint)}
.hp3-faqs__bg{position:absolute;top:0;bottom:0;right:0;width:616px;overflow:clip;pointer-events:none}
.hp3-faqs__net{position:absolute;left:-72px;top:-497px;width:1120px;height:770px;transform-origin:0 0}
.hp3-faqs__net i{position:absolute;border:1.05px solid var(--teal-soft);transform:rotate(-45deg)}
.hp3-faqs__net img{position:absolute;left:0;top:0;width:1120px;height:770px;max-width:none}
.hp3-faqs__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--teal-tint) 0%,color-mix(in srgb,var(--teal-tint) 55%,transparent) 45%,color-mix(in srgb,var(--teal-tint) 0%,transparent) 100%)}
.hp3-faqs__icon{position:relative;width:44px;height:44px;flex:none;border-radius:12px;background:var(--teal-deep);display:flex;align-items:center;justify-content:center}
/* The exported support_agent glyph is filled teal-deep; Figma shows it light on the teal-deep tile, so it is used as a mask. */
.hp3-faqs__icon i{width:24px;height:24px;background:var(--teal-tint);-webkit-mask:url(/images/home-v3/icons/support-agent.svg) center/24px 24px no-repeat;mask:url(/images/home-v3/icons/support-agent.svg) center/24px 24px no-repeat}
.hp3-faqs__text{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hp3-faqs__title{font-size:var(--text-regular);font-weight:700;line-height:1.6;color:var(--teal-deep)}
.hp3-faqs__tel{color:inherit;text-decoration:none;white-space:nowrap}
.hp3-faqs__tel:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){
  .hp3-faqs{padding:72px 40px}
}
@media (max-width:760px){
  .hp3-faqs{padding:48px 20px;gap:32px}
  .hp3-faqs .hp3-h2{font-size:28px}
  .hp3-faqs__grid{grid-template-columns:1fr;gap:8px}
  .hp3-faq{padding:4px 10px}
  .hp3-faq__q{font-size:var(--text-medium);min-height:64px}
  .hp3-faqs__contact{padding:20px;gap:12px 16px}
  .hp3-faqs__bg{width:104px}
  .hp3-faqs__net{left:-252px;top:-316px;transform:scale(.7143)}
}

/* ── 09 · Final CTA ── */
.hp3-cta{padding:96px 80px;display:flex;align-items:center;gap:64px}
.hp3-cta__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hp3-cta__net{position:absolute;left:0;top:0;width:1392px;height:602px;transform-origin:0 0}
.hp3-cta__net i{position:absolute;border:1px solid rgba(255,255,255,.45);transform:rotate(-45deg)}
.hp3-cta__node{position:absolute;max-width:none}
.hp3-cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--teal-deep) 0%,color-mix(in srgb,var(--teal-deep) 92%,transparent) 38%,color-mix(in srgb,var(--teal-deep) 0%,transparent) 62%)}
.hp3-cta__copy{position:relative;width:520px;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hp3-cta__lead{font-size:var(--text-medium);line-height:1.5;color:var(--teal-tint)}
.hp3-cta__btns{display:flex;gap:16px;flex-wrap:wrap}
.hp3-cta .hp3-btn--ghost-dark{border-color:var(--teal-soft)}
.hp3-cta__checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:12px 20px}
.hp3-cta__checks li{display:flex;align-items:center;gap:8px;font-size:var(--text-regular);font-weight:600;line-height:1.6;color:var(--teal-tint);white-space:nowrap}
.hp3-cta__checks img{width:18px;height:18px;flex:none}
.hp3-cta__visual{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.hp3-cta__stage{width:560px}
.hp3-cta__stage>.hp3-card{width:500px;zoom:1.12;box-shadow:0 25px 50px -7px rgba(0,0,0,.35)}
.hp3-cta__visual>.hp3-note{align-self:stretch;color:var(--teal-soft)}

@media (max-width:1100px){
  .hp3-cta{padding:72px 40px;flex-direction:column;align-items:stretch;gap:48px}
  .hp3-cta__copy{width:auto;max-width:640px}
  .hp3-cta__checks{flex-wrap:wrap}
  .hp3-cta__bg::after{background:linear-gradient(180deg,color-mix(in srgb,var(--teal-deep) 92%,transparent) 0%,color-mix(in srgb,var(--teal-deep) 85%,transparent) 30%,color-mix(in srgb,var(--teal-deep) 35%,transparent) 50%,color-mix(in srgb,var(--teal-deep) 15%,transparent) 75%,color-mix(in srgb,var(--teal-deep) 55%,transparent) 100%)}
}
@media (max-width:760px){
  .hp3-cta{padding:48px 20px;gap:32px}
  .hp3-cta .hp3-h2{font-size:26px;line-height:32px}
  .hp3-cta__checks{flex-direction:column;gap:24px}
  .hp3-cta__checks li{white-space:normal}
  .hp3-cta__net{transform:translate(-230.6px,319.3px) scale(.5164)}
  .hp3-cta__visual>.hp3-note{font-size:12px}
}

/* ── 10 · Footer (B, parchment) ──
   The footer sits outside <main class="hp3">, so it redeclares the tokens it uses. */
.hp3-footer{
  --teal-deep:#003E3E; --teal-core:#0E7C7B;
  --ink-900:#2A281E; --ink-800:#3D3B30; --ink-700:#504D42; --ink-600:#666359; --ink-200:#E6E5DF;
  --ground-ivory:#FAF9F3;
  --text-small:14px; --text-regular:16px; --text-medium:18px;
  --hp3-ease:cubic-bezier(.2,.7,.2,1); --hp3-hover:500ms;
  background:var(--ground-ivory);
  color:var(--ink-800);
  font-family:var(--font-brand);
  font-variation-settings:"FLAR" 0,"VOLM" 0;
}
.hp3-footer p{margin:0}
.hp3-footer__in{max-width:1440px;margin:0 auto;padding:72px 104px 32px;display:flex;flex-direction:column;gap:48px}
.hp3-footer__top{display:flex;gap:48px;align-items:flex-start}
.hp3-footer__brand{width:320px;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hp3-footer__logo{display:flex;align-items:center;width:154px;height:58px;padding-left:15px;line-height:0}
.hp3-footer__logo img{width:124px;height:33px}
.hp3-footer__tag{font-size:var(--text-medium);line-height:1.5;color:var(--ink-700)}
.hp3-footer__trust{display:flex;gap:14px;align-items:center}
.hp3-footer__trust img{width:39px;height:56px;flex:none;object-fit:contain}
.hp3-footer__trust p{font-size:13px;line-height:1.45;color:var(--ink-600)}
.hp3-footer__col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hp3-footer__head{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--ink-600)}
.hp3-footer__col a{font-size:var(--text-regular);line-height:1.6;color:var(--ink-800);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--hp3-hover) var(--hp3-ease),text-decoration-color var(--hp3-hover) var(--hp3-ease)}
.hp3-footer__col a{white-space:nowrap}
.hp3-footer__col a:hover{color:var(--teal-deep);text-decoration-color:currentColor}
.hp3-footer__col a.hp3-footer__phone{font-weight:700;color:var(--ink-900)}
.hp3-footer a:focus-visible{outline:2px solid var(--teal-core);outline-offset:3px;border-radius:2px}
.hp3-footer__legal{border-top:1px solid var(--ink-200);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;font-size:var(--text-small);line-height:1.5;color:var(--ink-600)}
.hp3-footer__legal a{color:inherit;text-decoration:none;transition:color var(--hp3-hover) var(--hp3-ease)}
.hp3-footer__legal a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){
  .hp3-footer__in{padding:56px 40px 32px}
  .hp3-footer__top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}
  .hp3-footer__brand{grid-column:1 / -1;width:auto;max-width:420px}
  .hp3-footer__col a{white-space:normal}
}
@media (max-width:760px){
  .hp3-footer__in{padding:40px 20px 32px;gap:36px}
  .hp3-footer__top{grid-template-columns:minmax(0,159fr) minmax(0,181fr);gap:28px 10px}
  .hp3-footer__brand{max-width:350px}
  .hp3-footer__legal{flex-direction:column;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .hp3-footer *{transition:none !important}
}


/* ── Responsive ── */
@media (max-width:1100px){
  .hp3-inner{padding:0 40px}
  .hp3-hero{padding:72px 40px 80px}
}
@media (max-width:760px){
  .hp3{padding:12px 12px 0;gap:12px;--radius-section:24px}
  .hp3-inner{padding:0 20px}
  .hp3-h1{font-size:34px}
  .hp3-br{display:none}
  .hp3-h2{font-size:30px}
  .hp3-h3{font-size:24px}
  .hp3-lead{font-size:18px}
  .hp3-eyebrow{white-space:normal;text-align:center}
  .hp3-hero{padding:24px 20px 40px;gap:24px}
  .hp3-ctas{width:100%;flex-wrap:nowrap}
  .hp3-ctas .hp3-btn{flex:1;padding:14px 12px}
  .hp3-hero__view{padding:16px 0 56px}
  .hp3-hero__view>.hp3-note{left:0;right:0;bottom:0}
}

/* ── Reduced motion: everything is a still snapshot ── */
@media (prefers-reduced-motion:reduce){
  .hp3 *,.hp3 *::before,.hp3 *::after{transition:none !important;animation:none !important}
}

/* ==========================================================================
   Mobile and tablet fixes (responsive audit, Nov 2026)
   Desktop (>1100px) is untouched: everything below sits in the existing 1100px
   and 760px breakpoints, or only takes effect when the fit script adds a class
   it adds only at 1100px and below.
   ========================================================================== */

/* B3: a mockup the fit script will not shrink further (text would go under 11px)
   is shown at that size from its left edge, and the cut-off edge fades out. */
[data-hp3-fit].is-cropped{justify-content:flex-start;overflow-x:clip;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}

/* A4: the arrow travels with the last word of the link instead of wrapping alone
   or sitting at the far end of a two-line link. On desktop the wrapper is inert. */
.hp3-who__link-end{display:contents}

@media (max-width:1100px){
  /* A1: the seller panel's chips wrap rather than spill out of the panel */
  .hp3-mk-seller .hp3-chips{flex-wrap:wrap;row-gap:6px}

  /* B, "keep everything" version: no card or row is removed. Where desktop
     overlaps two cards side by side, they stack here in one clean column at
     real size (scale 1): both full width, 12px apart, no inset or overlap. */

  /* Solution tiles (phone-width columns at these sizes) */
  .hp3-mk-sell,.hp3-mk-seller,.hp3-mk-records{width:100%;padding-top:0}
  .hp3-mk-draft,.hp3-mk-pay,.hp3-mk-t3,.hp3-invoice{zoom:1}
  .hp3-mk-draft{width:100%;border-width:1px;padding:0 16px 16px}
  .hp3-mk-sell__draft,.hp3-mk-seller__card,.hp3-mk-records__t3{margin-bottom:0}
  .hp3-mk-sell__row,.hp3-mk-seller__row,.hp3-mk-records__row{margin-top:12px;padding-left:0}
  .hp3-mk-pay,.hp3-invoice{width:100%}
  .hp3-mk-pay{padding:0 16px 16px}
  .hp3-mk-reply{white-space:normal;width:100%}
  /* Card titles wrap: "Payment Information" ran 27px past its card at 770px */
  :is(.hp3-mk-sell,.hp3-mk-seller,.hp3-mk-records) .hp3-card__title{white-space:normal}
  .hp3-mk-t3{width:100%}
  .hp3-mk-draft .hp3-chips,.hp3-mk-t3 .hp3-chips{flex-wrap:wrap;row-gap:6px}
  .hp3-mk-t3 .hp3-chips{justify-content:center}
  /* Stepper keeps all three steps and wraps onto a second line if it must */
  .hp3-mk-draft .hp3-stepper{flex-wrap:wrap;row-gap:6px}

  /* Hero at tablet width: the same stack, both cards, every row */
  .hp3-hero__stage{width:100%;flex-direction:column}
  .hp3-hero__stage>.hp3-card:first-child{width:100%;margin-right:0}
  .hp3-hero__listing{padding:0;margin-top:12px;align-self:stretch}
  .hp3-hero__listing .hp3-card{width:100%}

  /* B (Step 3): the small listing card in "Buying" rendered at 10px */
  .hp3-cap__card--listing-sm{--z:.7857}

  /* A4 */
  .hp3-who__link{display:block}
  .hp3-who__link-end{display:inline;white-space:nowrap}
  .hp3-who__link-end img{display:inline-block;vertical-align:-3px;margin-left:6px}
}

/* A3: two columns here, so the last organisation tile would sit alone at half width */
@media (min-width:761px) and (max-width:1100px){
  .hp3-who__tile--full{grid-column:1 / -1}
}

@media (max-width:760px){
  /* B: every card of every mockup, stacked at the phone's width and scale 1 */
  .hp3-mk-market,.hp3-cap__stage,.hp3-cta__stage{width:100%}
  .hp3-mk-market .hp3-card,.hp3-cap__card,.hp3-cta__stage>.hp3-card{width:100%;zoom:1}
  .hp3-cap__stage .hp3-cap__row--end{margin-top:12px}
  :is(.hp3-hero__stage,.hp3-mk-market,.hp3-cap__stage,.hp3-cta__stage) .hp3-card{padding:0 16px 16px}
  .hp3-chat{padding:16px}
  .hp3-chat__msg{white-space:normal}
  .hp3-chat__head{white-space:normal}
  :is(.hp3-hero__stage,.hp3-mk-market,.hp3-mk-sell,.hp3-mk-seller,.hp3-mk-records,.hp3-cap__stage,.hp3-cta__stage) .hp3-card__title{white-space:normal}
  :is(.hp3-hero__stage,.hp3-mk-market,.hp3-cap__stage,.hp3-cta__stage) .hp3-chips{flex-wrap:wrap;row-gap:6px}
  :is(.hp3-hero__stage,.hp3-mk-market,.hp3-cap__stage,.hp3-cta__stage) .hp3-search{align-items:flex-start;border-radius:20px}
  /* Both listing rows stay; View Listings moves under the price on each */
  :is(.hp3-hero__stage,.hp3-mk-market,.hp3-cap__stage,.hp3-cta__stage) .hp3-result{display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:12px;row-gap:8px}
  :is(.hp3-hero__stage,.hp3-mk-market,.hp3-cap__stage,.hp3-cta__stage) .hp3-result>.hp3-chip{grid-column:2 / -1;justify-self:end}
  .hp3-cap__card--draft .hp3-stepper{flex-wrap:wrap;row-gap:6px}
  /* Down to 320px phones: long chips and detail rows wrap instead of running past the card */
  :is(.hp3-hero__stage,.hp3-mk-market,.hp3-mk-sell,.hp3-mk-seller,.hp3-mk-records,.hp3-cap__stage,.hp3-cta__stage) .hp3-chip{max-width:100%;white-space:normal}
  :is(.hp3-hero__stage,.hp3-mk-market,.hp3-mk-sell,.hp3-mk-seller,.hp3-mk-records,.hp3-cap__stage,.hp3-cta__stage) .hp3-details>div{flex-wrap:wrap;column-gap:12px}
  :is(.hp3-hero__stage,.hp3-mk-market,.hp3-mk-sell,.hp3-mk-seller,.hp3-mk-records,.hp3-cap__stage,.hp3-cta__stage) .hp3-details dd{margin-left:auto}
  .hp3-mk-draft,.hp3-mk-t3{padding-left:16px;padding-right:16px}
  /* Records: both sheets, one above the other */
  .hp3-records{width:100%;align-items:center;gap:12px}
  .hp3-records__statement,.hp3-records__invoice{width:100%;max-width:320px;margin:0}

  /* A5: stacked CTA buttons share one full width */
  .hp3-cta__btns{width:100%;flex-direction:column}
  .hp3-cta__btns .hp3-btn{width:100%}
}