/* ============================================================================
   HIP FLAGSHIP HOMEPAGE — the live composition, elevated.
   Loaded LAST. Builds on:
     hip-home-refine.css  focus rings, reduced motion, solid white headline,
                          section rhythm, dropzone states  (all retained)
     foundation.css       portfolio-wide contrast + focus layer
     haveitprinted.css    brand chrome
   Nothing here re-states those. This file owns the flagship page composition.

   RHYTHM (deliberate, §12): dark photo hero -> white benefit band -> tinted
   editorial split -> white process -> deep navy price -> tinted task list ->
   white FAQ+support -> dark close. No two adjacent sections share a ground,
   a text width, or a heading alignment.
   ========================================================================= */

:root{
  --hipf-blue:#0071e3;
  --hipf-blue-deep:#0a58c2;
  --hipf-navy:#0b1533;        /* dark bands + hero scrim base */
  --hipf-ink:#141b26;
  --hipf-ink-soft:#525c6b;    /* 7.0:1 on #fff — body copy, never lighter */
  --hipf-paper:#eff3f8;       /* the one tinted ground */
  --hipf-line:#e2e7ee;
  --hipf-shell:1240px;
}

/* ---- shared shell ------------------------------------------------------- */
.hipf{ position:relative; }
.hipf__in{ max-width:var(--hipf-shell); margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }
.hipf h2{
  font-family:var(--display,"Plus Jakarta Sans",sans-serif);
  font-weight:800; letter-spacing:-.028em; line-height:1.06;
  text-wrap:balance; margin:0;
  /* solid ink — no gradient-clipped headings anywhere on this page */
  background:none; -webkit-text-fill-color:currentColor; color:var(--hipf-ink);
}
.hipf p{ margin:0; color:var(--hipf-ink-soft); }
/* .hipf p is (0,1,1); component paragraph classes below are written as
   `.hipf .x` (0,2,0) so they win without stacking repeats or !important. */

/* ============================ 1. HERO ====================================
   SPECIFICITY NOTE. This markup is hand-authored and carries NO
   `data-astro-cid-j7pv25f6`, so every Astro .hip-uphero rule misses it and the
   layout must be declared here. haveitprinted.css then re-states several hero
   rules with a DOUBLED class ((0,2,0)) and two with !important. Every rule
   below is prefixed with `main ` to outrank it. Do not "simplify" them.

   COMPOSITION. Two functional regions on one photographic stage: the promise
   on the left, the actual tool on the right, roughly 55/45. The photograph
   spans both and is not merely a backdrop behind centred content. */
main .hip-uphero{
  position:relative; overflow:hidden; isolation:isolate; text-align:left;
}
main .hip-uphero.hip-uphero{
  padding-block:clamp(40px,5vw,64px) clamp(44px,5.5vw,72px);
  min-height:clamp(480px,60vh,624px);
  display:flex; align-items:center;
}
main .hip-uphero__bg{ position:absolute; inset:0; z-index:0; }
main .hip-uphero__bg picture{ position:absolute; inset:0; display:block; }
main .hip-uphero__bg.hip-uphero__bg img{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:70% 46%;   /* keeps hands + mailer in the open right-of-copy area */
}
/* DIRECTIONAL overlay, not a uniform veil: heavy where the words are, light
   across the photograph so the mailer keeps its detail. */
main .hip-uphero::before{ background:none !important; }
main .hip-uphero__bg::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(97deg, rgba(8,15,38,.90) 0%, rgba(8,15,38,.80) 30%,
                            rgba(8,15,38,.50) 52%, rgba(8,15,38,.24) 72%,
                            rgba(8,15,38,.30) 100%),
    linear-gradient(180deg, rgba(8,15,38,.30) 0%, rgba(8,15,38,0) 26%,
                            rgba(8,15,38,0) 70%, rgba(8,15,38,.34) 100%);
}
main .hip-uphero__inner{
  position:relative; z-index:1; width:100%;
  max-width:var(--hipf-shell); margin-inline:auto;
  padding-inline:clamp(20px,4vw,48px);
  display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:clamp(28px,4vw,72px);
  /* START, not centre. Centring looked right for the empty card, but the card
     grows to ~1790px once two files are selected and the promise slid off the
     first screen with it. The copy now holds its position while the tool
     extends downward; the padding optically centres it in the empty state. */
  align-items:start;
}
main .hip-uphero__copy{ padding-top:clamp(0px,7vw,86px); }
main .hip-uphero__copy{ max-width:none; margin:0; }
main .hip-uphero__copy.hip-uphero__copy .display{
  font-size:clamp(2.375rem,4.6vw,4.5rem) !important;
  line-height:1.02; letter-spacing:-.035em; margin:0; color:#fff;
}
main .hip-uphero__copy.hip-uphero__copy .lead{
  font-size:clamp(1.0625rem,1.35vw,1.25rem) !important;
  line-height:1.5; max-width:26ch; margin:18px 0 0; color:#e9eef9;
}
main .hip-uphero .hip-float{ display:none !important; }
main .hip-stage{ max-width:none; margin:0; justify-self:end; width:100%; }

/* ---- the uploader: the only white card in the hero ----------------------
   ~470px on desktop. The dropzone has NO surface of its own -- a filled box
   inside a white card read as a second card. */
main .hip-uphero__card.hip-uphero__card{
  max-width:470px; margin:0 0 0 auto; padding:22px 22px 18px;
  background:#fff; border-radius:16px; text-align:left; border:0;
  box-shadow:0 24px 58px rgba(6,12,32,.38);
}
main .upcard__head{
  display:flex; align-items:flex-start; gap:16px;
  padding:0 0 14px; border-bottom:1px solid var(--hipf-line);
}
main .upcard__step{ display:none; }
main .upcard__headtext{ flex:1; min-width:0; }
main .upcard__title{
  font-family:var(--display,inherit); font-weight:700;
  font-size:1.1875rem; line-height:1.25; color:var(--hipf-ink); letter-spacing:-.015em;
}
main .upcard__sub{ font-size:.8125rem; line-height:1.4; color:var(--hipf-ink-soft); margin-top:5px; }
main .upcard__price.upcard__price{
  flex:none; display:flex; align-items:baseline; gap:6px; white-space:nowrap;
  background:none; -webkit-text-fill-color:currentColor;
}
main .upcard__from{
  font-family:var(--display,inherit); font-weight:600; font-size:.8125rem;
  letter-spacing:0; color:var(--hipf-ink-soft);
}
main .upcard__amt{
  font-weight:800; font-size:1.625rem; line-height:1; letter-spacing:-.03em;
  color:var(--hipf-blue);
}
main .upload-enterprise-2026__dropzone{
  background:transparent !important; border:2px dashed rgba(0,113,227,.42) !important;
  border-radius:12px !important; margin-top:14px;
}
main .upload-enterprise-2026__dropzone:hover{
  border-color:var(--hipf-blue) !important; background:rgba(0,113,227,.035) !important;
  box-shadow:none !important;
}
main .upload-enterprise-2026__label{ cursor:pointer; padding-block:20px; }
main .upload-enterprise-2026__upload-icon svg{ width:40px; height:40px; }
main .upload-enterprise-2026__upload-text strong{
  font-family:var(--display,inherit); font-weight:650; font-size:1.0625rem;
  color:var(--hipf-ink);
}
main .upload-enterprise-2026__upload-hint{ font-size:.875rem; color:var(--hipf-ink-soft); }
main .upload-enterprise-2026__upload-formats{ font-size:.75rem; color:var(--hipf-ink-soft); }
main .upload-enterprise-2026__camera-btn{
  min-height:46px; margin-top:10px;
  background:transparent !important; border:1px solid var(--hipf-line) !important;
  color:var(--hipf-ink-soft) !important; font-weight:600 !important;
  box-shadow:none !important; border-radius:11px !important;
}
main .upload-enterprise-2026__camera-btn:hover{
  border-color:var(--hipf-blue) !important; color:var(--hipf-blue) !important;
}
main .upcard__note{
  margin:11px 0 0; font-size:.8125rem; line-height:1.4;
  color:var(--hipf-ink-soft); text-align:center;
}
main section.upload-enterprise-2026{ padding:0 !important; }
main .upload-enterprise-2026__container{ padding-inline:0 !important; max-width:none !important; }
main .upload-enterprise-2026__upload-zone{ margin:0 !important; }

@media (max-width:940px){
  main .hip-uphero__inner{ grid-template-columns:1fr; gap:24px; }
  main .hip-uphero.hip-uphero{ min-height:0; padding-block:clamp(28px,5vw,44px) clamp(30px,5vw,48px); }
  main .hip-stage{ justify-self:stretch; }
  main .hip-uphero__card.hip-uphero__card{ max-width:none; margin-inline:0; }
  main .hip-uphero__copy.hip-uphero__copy .lead{ max-width:34ch; }
}
@media (max-width:640px){
  main .hip-uphero__card.hip-uphero__card{ padding:16px 16px 14px; border-radius:14px; }
  /* the drag-and-drop hint is desktop guidance; on touch it repeated the
     supported-files line verbatim directly below it */
  main .upload-hint-mobile{ display:none !important; }
  main .upcard__head{ gap:12px; padding-bottom:12px; }
  main .upcard__title{ font-size:1.0625rem; }
  main .upcard__amt{ font-size:1.5rem; }
  main .upload-enterprise-2026__label{ padding-block:16px; }
  main .upload-enterprise-2026__upload-icon svg{ width:34px; height:34px; }
  main .hip-uphero__bg.hip-uphero__bg img{ object-position:56% 46%; }
  /* let the photograph stay recognizable around the card */
  main .hip-uphero__bg::after{
    background:linear-gradient(180deg, rgba(8,15,38,.80) 0%, rgba(8,15,38,.70) 38%,
                                        rgba(8,15,38,.34) 66%, rgba(8,15,38,.44) 100%);
  }
}

/* anchor destinations must clear the sticky header (offset measured in JS) */
:root{ --hip-anchor-offset:96px; }
main [id]{ scroll-margin-top:var(--hip-anchor-offset); }

/* ---- populated uploader: compact per-file summary -----------------------
   Options collapse behind this row by default. Two selected files previously
   opened ~1,690px of identical panels. The controls themselves are unchanged;
   this is the summary + edit affordance that sits above them. */
main .upload-enterprise-file-card__summary{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 14px; padding:10px 16px 12px;
  border-top:1px solid var(--hipf-line);
}
main .upload-enterprise-file-card__settings{
  font-size:.875rem; line-height:1.4; color:var(--hipf-ink-soft);
  font-variant-numeric:tabular-nums;
}
main .upload-enterprise-file-card__edit{
  flex:none; min-height:36px; padding:6px 14px; border-radius:980px;
  background:#fff; color:var(--hipf-blue-deep); border:1px solid var(--hipf-line);
  font-family:var(--display,inherit); font-weight:650; font-size:.8125rem; cursor:pointer;
}
main .upload-enterprise-file-card__edit:hover{
  border-color:var(--hipf-blue); color:var(--hipf-blue);
}
/* the file the customer must act on before checkout */
main .upload-enterprise-file-card--needs-attention{
  box-shadow:0 0 0 2px #a4262c inset;
}
/* blocked-checkout guidance, beside the action rather than in an alert() */
main .upload-enterprise-2026__blocked{
  margin:0; padding:11px 14px; border-radius:10px;
  background:#fdecec; color:#7d1d22; border:1px solid #f2c9c9;
  font-size:.875rem; line-height:1.45; font-weight:600;
}
/* the total while a selected file is still incomplete */
main [data-hip-pending="true"]{
  font-size:1rem !important; font-weight:650 !important; color:#414a58 !important;
  -webkit-text-fill-color:#414a58 !important;
}

/* long filenames must WRAP, not ellipsize -- the shipped rule is
   white-space:nowrap + text-overflow:ellipsis, which hides which file failed */
main .upload-enterprise-file-card__name{
  white-space:normal !important; overflow:visible !important;
  text-overflow:clip !important; overflow-wrap:anywhere; line-height:1.35;
}
/* the meta row adds a bullet between spans; the error block is the only child
   and was picking up a trailing separator */
/* the shipped rule is `.__meta span:not(:last-child):after{content:"\2022"}` --
   a DESCENDANT selector, so the error text span inside the recovery block
   picked up a trailing bullet before the retry button */
main .upload-enterprise-file-card__error-text::after{ content:none !important; }
main .upload-enterprise-file-card__error::after{ content:none !important; }
main .upload-enterprise-file-card__meta{ flex-wrap:wrap; }
/* keep the label and value apart when the value is the short pending word */
main .upload-enterprise-2026__total{ gap:16px; }

/* ---- upload failure recovery --------------------------------------------
   Paired with classifyUploadError() in upload-enterprise-2026.js: a request
   that never completed gets recovery copy and a manual retry; a server response
   that rejected the file keeps its own specific message. */
main .upload-enterprise-file-card__error{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
}
main .upload-enterprise-file-card__error-text{
  color:#a4262c;               /* 5.1:1 on the white card */
  font-size:.875rem; line-height:1.45;
}
main .upload-enterprise-file-card__retry{
  flex:none; min-height:36px; padding:7px 16px; border-radius:980px;
  background:#fff; color:var(--hipf-blue-deep); border:1px solid var(--hipf-blue);
  font-family:var(--display,inherit); font-weight:650; font-size:.875rem;
  cursor:pointer;
}
main .upload-enterprise-file-card__retry:hover{
  background:var(--hipf-blue); color:#fff;
}

/* ====================== 2. BENEFIT BAND (white) ==========================
   Three labels, no paragraphs. The whole point is that it reads in one glance,
   so anything that makes the eye stop and parse a sentence works against it. */
main section.hipf.hipf-relief{ background:#fff; padding-block:clamp(48px,5.5vw,80px); }
.hipf-relief h2{ font-size:clamp(1.875rem,3.6vw,3rem); max-width:18ch; }
.hipf-relief__row{
  list-style:none; margin:clamp(28px,3.2vw,40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px);
}
.hipf-relief__item{ display:flex; align-items:center; gap:14px; }
.hipf-relief__mark{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--hipf-blue); position:relative;
}
.hipf-relief__mark::after{      /* a check, drawn -- not an emoji or icon font */
  content:""; position:absolute; left:10px; top:8px; width:7px; height:12px;
  border-right:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(42deg);
}
.hipf-relief .hipf-relief__label{
  font-family:var(--display,inherit); font-weight:700;
  font-size:clamp(1.0625rem,1.5vw,1.25rem); line-height:1.25;
  color:var(--hipf-ink); letter-spacing:-.012em;
}
@media (max-width:760px){
  .hipf-relief__row{ grid-template-columns:1fr; gap:0; }
  .hipf-relief__item{ padding:15px 0; border-top:1px solid var(--hipf-line); }
  .hipf-relief__item:first-child{ border-top:0; }
}

/* ============ 3. PRODUCT COMPOSITION (tinted, image-led) ================
   One composition, not two cards: the large document photograph carries the
   "printed" half and a smaller mailing detail overlaps its lower edge to carry
   the "sent" half. Both are existing approved assets -- the inset is a crop of
   the hero frame, so it is literally the same mailer the hero shows.
   This is also the only band released from the 1240px shell, so its measure and
   alignment differ from every other section. That is the rhythm change. */
main section.hipf.hipf-result{
  background:var(--hipf-paper); padding-block:clamp(52px,6vw,88px); overflow:hidden;
}
.hipf-result__grid{ display:grid; grid-template-columns:1fr; gap:26px; align-items:center; }
.hipf-result__media{ position:relative; }
/* the inset is positioned against the IMAGE, not the figure -- anchoring it to
   the figure put it on top of the caption at mobile widths (4.31:1). */
.hipf-result__frame{ position:relative; }
.hipf-result__fig{ margin:0; }
.hipf-result__fig img{
  width:100%; height:auto; display:block; border-radius:16px;
  box-shadow:0 22px 50px rgba(12,20,40,.18);
}
.hipf-result .hipf-result__cap{
  margin-top:14px; font-size:.8125rem; color:#414a58; letter-spacing:.01em;
}
.hipf-result__inset{
  display:block; height:auto; border-radius:12px;
  box-shadow:0 14px 34px rgba(12,20,40,.26);
}
.hipf-result h2{ font-size:clamp(1.75rem,3.2vw,2.875rem); max-width:13ch; }
.hipf-result .hipf-result__body{
  margin-top:16px; margin-bottom:20px; font-size:1.0625rem; line-height:1.6; max-width:40ch;
}
@media (min-width:900px){
  main section.hipf.hipf-result > .hipf__in{ max-width:none; padding-left:0; padding-right:0; }
  .hipf-result__grid{
    grid-template-columns:minmax(0,1fr) minmax(320px,440px);
    gap:clamp(48px,5vw,88px);
    padding-right:max(calc((100vw - var(--hipf-shell))/2 + 24px), clamp(20px,4vw,48px));
  }
  .hipf-result__fig img{ border-radius:0 20px 20px 0; }
  .hipf-result .hipf-result__cap{ padding-left:clamp(20px,4vw,48px); max-width:60ch; }
  /* the inset overlaps the large photograph's lower-right edge */
  .hipf-result__inset{
    position:absolute; right:-34px; bottom:16%; width:44%; max-width:310px;
    border:5px solid var(--hipf-paper); border-radius:14px;
  }
}
@media (max-width:899px){
  main section.hipf.hipf-result > .hipf__in{ padding-inline:clamp(20px,4vw,48px); }
  /* heading first, then the image composition, then the explanation */
  .hipf-result__grid{ display:flex; flex-direction:column; gap:20px;
    align-items:stretch; }
  .hipf-result__txt{ display:contents; }
  .hipf-result h2{ order:1; }
  .hipf-result__media{ order:2; }
  .hipf-result .hipf-result__body{ order:3; margin-top:0; margin-bottom:0; }
  .hipf-result a.hipf-link{ order:4; align-self:flex-start; }
  /* on mobile the two images sit side by side rather than stacking two giants */
  .hipf-result__inset{
    position:absolute; right:10px; bottom:10px; width:31%; max-width:150px;
    border:4px solid var(--hipf-paper);
  }
}

/* ======================= 4. HOW IT WORKS (white) =========================
   Stage LABELS are the reading layer; descriptions are subordinate. The rule
   connects the three markers so it reads as one sequence, not three boxes. */
main section.hipf.hipf-how{ background:#fff; padding-block:clamp(52px,6vw,88px); }
.hipf-how h2{ font-size:clamp(1.75rem,3.2vw,2.75rem); text-align:center; margin-inline:auto; }
.hipf-how__steps{
  list-style:none; margin:clamp(34px,4vw,52px) 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,48px);
}
.hipf-how__steps::before{
  content:""; position:absolute; left:16.6%; right:16.6%; top:17px; height:2px;
  background:linear-gradient(90deg,var(--hipf-line),rgba(0,113,227,.55),var(--hipf-line));
}
.hipf-how__step{ position:relative; display:flex; flex-direction:column; align-items:flex-start; }
.hipf-how__n{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--hipf-blue); color:#fff; font-weight:700; font-size:.9375rem;
  font-family:var(--display,inherit); position:relative; z-index:1;
  box-shadow:0 0 0 8px #fff;
}
.hipf-how .hipf-how__t{
  font-family:var(--display,inherit); font-weight:700;
  font-size:clamp(1.125rem,1.6vw,1.3125rem); line-height:1.25;
  color:var(--hipf-ink); margin-top:18px; letter-spacing:-.012em;
}
.hipf-how .hipf-how__d{
  margin-top:7px; font-size:.9375rem; line-height:1.55; color:var(--hipf-ink-soft);
  max-width:30ch;
}
.hipf-how .hipf-how__note{
  margin:clamp(30px,3.4vw,44px) auto 0; text-align:center; max-width:64ch;
  font-size:.9375rem; line-height:1.6; color:var(--hipf-ink-soft);
}
@media (max-width:760px){
  .hipf-how h2{ text-align:left; }
  .hipf-how__steps{ grid-template-columns:1fr; gap:0; margin-top:28px; }
  .hipf-how__steps::before{
    left:16px; right:auto; top:10px; bottom:46px; height:auto; width:2px;
    background:linear-gradient(180deg,rgba(0,113,227,.55),var(--hipf-line));
  }
  .hipf-how__step{ padding:0 0 24px 52px; }
  .hipf-how__n{ position:absolute; left:0; top:0; box-shadow:0 0 0 6px #fff; }
  .hipf-how .hipf-how__t{ margin-top:2px; }
  .hipf-how .hipf-how__note{ text-align:left; margin-top:4px; }
}

/* ========================= 5. PRICE (deep navy) ==========================
   Two balanced regions: the number on the left, the explanation and the action
   on the right. The primary action is a solid white pill so it separates from
   the dark ground rather than reading as another link. */
main section.hipf.hipf-price{
  background:var(--hipf-navy); color:#fff; padding-block:clamp(52px,6vw,88px);
}
.hipf-price h2{ color:#fff; font-size:clamp(1.75rem,2.7vw,2.375rem); max-width:24ch; }
.hipf-price__grid{
  display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,80px); align-items:center;
}
.hipf-price__fig{ display:flex; flex-direction:column; align-items:flex-start; }
.hipf-price__from{
  font-size:.875rem; font-weight:700; letter-spacing:.10em;
  text-transform:uppercase; color:#9fc4f5;
}
.hipf-price__amt{
  font-family:var(--display,inherit); font-weight:800; line-height:.92;
  font-size:clamp(4rem,8vw,6.5rem); letter-spacing:-.045em; color:#fff; margin-top:8px;
}
.hipf-price .hipf-price__inc{
  margin-top:16px; color:#cfdcf0; font-size:1rem; line-height:1.5; max-width:24ch;
}
.hipf-price .hipf-price__conf{
  color:#fff; font-weight:650; font-size:1.125rem; margin-top:14px; max-width:48ch;
}
.hipf-price .hipf-price__qual{
  color:#b7c8e2; font-size:.9375rem; line-height:1.6; margin-top:10px; max-width:52ch;
}
.hipf-price__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:26px;
}
.hipf-price__link{
  display:inline-flex; align-items:center; gap:8px;
  color:#9fc9ff; font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(159,201,255,.45); padding-bottom:2px;
}
.hipf-price__link:hover{ color:#fff; border-bottom-color:#fff; }
@media (max-width:860px){
  /* One offer, three groups -- not five separately floating statements.
     `display:contents` lets the right-hand block's children take part in the
     same flex column as the price, so the gaps below are the ONLY vertical
     rhythm in the panel. */
  .hipf-price__grid{ display:flex; flex-direction:column; gap:0; }
  .hipf-price__txt{ display:contents; }

  /* group 1 — heading and price */
  .hipf-price h2{ order:1; }
  .hipf-price__fig{ order:2; margin-top:18px; }
  .hipf-price__amt{ margin-top:4px; }

  /* group 2 — inclusions, reassurance, qualification, read as one paragraph block */
  .hipf-price .hipf-price__inc{ order:3; margin-top:12px; max-width:34ch; }
  .hipf-price .hipf-price__conf{ order:4; margin-top:10px; }
  .hipf-price .hipf-price__qual{ order:5; margin-top:6px; }

  /* group 3 — actions */
  .hipf-price__actions{ order:6; margin-top:22px; gap:14px 20px; }
}

/* shared primary action ---------------------------------------------------- */
.hipf .hipf-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#0a58c2; font-family:var(--display,inherit);
  font-weight:700; font-size:1.0625rem; text-decoration:none;
  padding:15px 28px; border-radius:980px; min-height:52px; border:0;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.hipf .hipf-btn:hover{
  background:#eaf2ff; transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.34);
}
.hipf .hipf-btn--lg{ font-size:1.125rem; padding:17px 34px; min-height:58px; }
@media (prefers-reduced-motion:reduce){
  .hipf .hipf-btn{ transition:none; }
  .hipf .hipf-btn:hover{ transform:none; }
}

/* Inline link on a LIGHT ground. Distinct from .hipf-price__link, which is
   pale blue for the navy band and fails on the tinted ground. */
.hipf a.hipf-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--hipf-blue-deep); font-weight:650; text-decoration:none;
  border-bottom:1px solid rgba(10,88,194,.38); padding-bottom:2px;
}
.hipf a.hipf-link:hover{ color:#083f8c; border-bottom-color:#083f8c; }
.hipf a.hipf-link--quiet{ border-bottom-color:rgba(10,88,194,.22); font-weight:600; }

/* ================= 6. TASK CHOICES (tinted, real entry points) ===========
   Full-height rows with a directional affordance and a hover surface, so each
   one is a target rather than a small blue link with small grey text. */
main section.hipf.hipf-tasks{
  background:var(--hipf-paper); padding-block:clamp(52px,6vw,88px);
}
.hipf-tasks h2{ font-size:clamp(1.625rem,3vw,2.375rem); }
.hipf-tasks__list{
  margin-top:clamp(26px,3vw,38px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.hipf-tasks__item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:22px 22px 20px; min-height:118px;
  background:#fff; border:1px solid var(--hipf-line); border-radius:14px;
  text-decoration:none; transition:border-color .16s ease, box-shadow .16s ease,
  transform .16s ease;
}
.hipf-tasks__item:hover{
  border-color:rgba(0,113,227,.55); box-shadow:0 10px 26px rgba(12,20,40,.10);
  transform:translateY(-2px);
}
.hipf-tasks__body{ min-width:0; }
.hipf-tasks .hipf-tasks__t{
  display:block; font-family:var(--display,inherit); font-weight:700;
  font-size:1.0625rem; line-height:1.3; color:var(--hipf-ink); letter-spacing:-.01em;
}
.hipf-tasks .hipf-tasks__d{
  display:block; margin-top:6px; font-size:.9375rem; line-height:1.5;
  color:var(--hipf-ink-soft);
}
.hipf-tasks__go{
  flex:none; color:var(--hipf-blue-deep); font-size:1.125rem; line-height:1;
  margin-top:2px; transition:transform .16s ease;
}
.hipf-tasks__item:hover .hipf-tasks__go{ transform:translateX(3px); }
.hipf-tasks .hipf-tasks__coverage{
  margin-top:clamp(22px,2.6vw,32px); font-size:.9375rem; color:var(--hipf-ink-soft);
}
@media (max-width:680px){
  .hipf-tasks__list{ grid-template-columns:1fr; gap:10px; }
  .hipf-tasks__item{ min-height:0; padding:16px 16px 15px; align-items:center; }
}
@media (prefers-reduced-motion:reduce){
  .hipf-tasks__item{ transition:none; }
  .hipf-tasks__item:hover{ transform:none; }
  .hipf-tasks__item:hover .hipf-tasks__go{ transform:none; }
}

/* ======================= 7. FAQ + SUPPORT (white) ======================== */
main section.hipf.hipf-faq{ background:#fff; padding-block:clamp(52px,6vw,88px); }
.hipf-faq__grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(28px,4vw,64px); align-items:start; }
.hipf-faq h2{ font-size:clamp(1.625rem,3vw,2.375rem); }
.hipf-faq details{
  border-bottom:1px solid var(--hipf-line); padding:0; margin:0;
}
.hipf-faq details:first-of-type{ border-top:1px solid var(--hipf-line); }
.hipf-faq summary{
  cursor:pointer; list-style:none; padding:16px 30px 16px 0; position:relative;
  font-family:var(--display,inherit); font-weight:650; font-size:1rem;
  color:var(--hipf-ink);
}
.hipf-faq summary::-webkit-details-marker{ display:none; }
.hipf-faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--hipf-blue); border-bottom:2px solid var(--hipf-blue);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s ease;
}
.hipf-faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.hipf-faq details p{ padding:0 0 18px; font-size:.9375rem; line-height:1.62; max-width:64ch; }
.hipf-faq__list{ margin-top:22px; }
.hipf-support{
  background:var(--hipf-paper); border:1px solid var(--hipf-line);
  border-radius:16px; padding:22px 22px 20px; position:sticky; top:88px;
}
.hipf-support h3{
  font-family:var(--display,inherit); font-weight:700; font-size:1.125rem;
  margin:0; color:var(--hipf-ink);
}
.hipf-support p{ margin-top:8px; font-size:.9375rem; line-height:1.55; }
.hipf-support dl{ margin:16px 0 0; display:grid; gap:12px; }
.hipf-support dt{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--hipf-ink-soft); font-weight:700; }
.hipf-support dd{ margin:2px 0 0; font-size:.9375rem; color:var(--hipf-ink); }
.hipf-support a{ color:var(--hipf-blue-deep); font-weight:600; }
@media (max-width:900px){
  .hipf-faq__grid{ grid-template-columns:1fr; }
  .hipf-support{ position:static; }
}

/* ========================== 8. FINAL (dark) ============================== */
main section.hipf.hipf-final{
  background:linear-gradient(155deg,#0b1533 0%,#12224d 58%,#0b1533 100%);
  color:#fff; padding-block:clamp(56px,6.5vw,96px); text-align:center;
}
.hipf-final h2{ color:#fff; font-size:clamp(1.875rem,4.2vw,3.25rem); margin-inline:auto; max-width:14ch; }
.hipf-final .hipf-btn{ margin-top:28px; }