/* ============================================================================
   HIP homepage visual refinement — PILOT (local only, not deployed)
   Visual-only. No copy, no CTA wording, no section order, no destinations.
   Scoped to a stylesheet that would be linked ONLY from the HIP homepage, so
   no other brand inherits it.
   Every rule below traces to a measured finding in the P5 audit.
   ========================================================================= */

/* --- 1. ONE BLUE ------------------------------------------------------------
   Audit: #0071e3 carried SEVEN alias names, one of them `--violet-deep`.
   We cannot rename shared tokens without touching other brands, so instead we
   collapse the ALIASES onto the canonical brand blue at the page level. Any
   component still reading an alias now resolves to the same value.            */
:root{
  --hip-blue:#0071e3;
  --hip-blue-press:#0058b8;
  --hip-ink:#1d1d1f;
  --hip-ink-soft:#5b5b60;   /* was #6e6e73 — lifted for contrast on #f5f5f7 */
  --hip-ink-faint:#6e6e73;  /* was #86868b — 3.5:1 was failing at small sizes */
  --hip-line:rgba(0,0,0,.12);
  --hip-focus:#0a84ff;

  --violet:var(--hip-blue); --violet-deep:var(--hip-blue); --violet-2:var(--hip-blue);
  --c-indigo:var(--hip-blue); --c-violet:var(--hip-blue); --c-bright:var(--hip-blue);
  --accent:var(--hip-blue); --brand:var(--hip-blue); --link:var(--hip-blue);
  --color-primary:var(--hip-blue); --primary:var(--hip-blue);
  --ink-soft:var(--hip-ink-soft); --ink-faint:var(--hip-ink-faint);
}

/* --- 2. HERO HEADLINE -------------------------------------------------------
   Audit: the H1 used --grad-text (blue -> indigo -> violet) clipped to text.
   Two problems: it is the single most recognisable "AI-generated SaaS" signal,
   and the violet end lost contrast against the dark hero photograph.
   Replace with near-white on the dark hero. Confident, and legible end-to-end. */
.hero h1, .hip-uphero h1, h1.grad-text, .grad-text{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:#fff !important;
  letter-spacing:-.022em;
  text-wrap:balance;
  text-shadow:0 1px 24px rgba(0,0,0,.34);   /* holds legibility over the photo */
}
/* the eyebrow above it: was 12.8px at 1.79:1 over the photo */
.hero .eyebrow, .hip-uphero .eyebrow{
  color:rgba(255,255,255,.92) !important;
  letter-spacing:.10em;
  font-size:.8125rem;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
/* hero lead paragraph sat over busy envelope artwork at ~1:1 in places */
.hero .lead, .hip-uphero .lead, .hip-uphero__copy p{
  color:rgba(255,255,255,.94) !important;
  text-shadow:0 1px 16px rgba(0,0,0,.45);
  max-width:34ch;
}
/* darken the photo just enough to guarantee text contrast, keep the image */
.hip-uphero::before, .hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,32,.62) 0%,rgba(8,12,32,.42) 46%,rgba(8,12,32,.72) 100%);
}
.hip-uphero, .hero{ position:relative; }
.hip-uphero > *, .hero > *{ position:relative; z-index:1; }


/* --- 2b. REMAINING GRADIENT TEXT -------------------------------------------
   Audit follow-up: three elements still clipped a gradient to their text after
   the first pass — SPAN.upcard__price, H2.grad-text-dark and an unclassed H2.
   The price is the worst offender: the single number the customer is looking
   for was rendered in a blue->violet ramp. Solid brand blue is stronger and
   keeps the value legible at a glance.                                        */
.grad-text-dark{
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:currentColor !important;
  color:#fff !important;
}
/* section headings on light ground */
section:not(.section--dark) h2.grad-text,
section:not(.section--dark) h2.grad-text-dark{
  color:var(--hip-ink) !important; text-shadow:none !important;
}
/* the price */
.upcard__price, [class*="__price"]{
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:currentColor !important;
  color:var(--hip-blue) !important;
  letter-spacing:-.02em; font-weight:700;
}
/* belt-and-braces: nothing on this page should clip a gradient to text */
[style*="background-clip:text"], [style*="-webkit-background-clip:text"]{
  -webkit-text-fill-color:currentColor !important;
}

/* --- 3. TYPE SCALE ----------------------------------------------------------
   Audit: a 7-step scale was DECLARED but 21 sizes RENDERED, from em-compounding
   (15.2 / 17.92 / 13.12 / 18.88 / 21.12 / 16.32 / 9.92). Re-anchor the common
   offenders in rem so they stop inheriting a scaled parent.                    */
body{ font-size:17px; }
h2{ font-size:clamp(1.75rem,3.4vw,2.5rem); letter-spacing:-.018em; text-wrap:balance; }
h3{ font-size:1.25rem; letter-spacing:-.01em; }
p, li{ font-size:1.0625rem; line-height:1.55; }
.small, small, .caption, figcaption{ font-size:.8125rem; }

/* 9.92px was the smallest text on the page — and it was the UNIT on the price. */
.price sup, .price small, .price .unit, [class*="price"] small, [class*="price"] sup{
  font-size:.8125rem !important;   /* 13px */
  letter-spacing:.04em;
  color:var(--hip-ink-soft) !important;
}

/* --- 4. SPACING RHYTHM ------------------------------------------------------
   Two earlier readings of this were wrong and the rendered page corrected both.

   (a) The base CSS is NOT arbitrary — it already uses a fluid system:
         .section { padding-block: clamp(72px, 11vw, 150px) }  (+ two smaller variants)
       My first pass flattened that to a fixed 52px, replacing a responsive
       system with a static one. That was a downgrade, not a fix.

   (b) Uniform symmetric padding is not automatically right. Sections sit flush,
       so symmetric padding DOUBLES at every boundary:
         390px  ->  72 + 72  = 144px between sections
         1440px -> 150 + 150 = 300px  (about a third of the viewport, nine times)
       Three sections avoided this with an asymmetric 0/150, so the page was
       actually running two different spacing models at once.

   The fix keeps the fluid approach and lowers the CEILING so the doubled value
   is the one that reads well, then applies one consistent model everywhere:
         clamp(40px, 5vw, 72px)  ->   80px gaps at 390,  144px at 1440+
   Sections that change ground (dark blocks, photographic panels) keep more,
   because there the padding IS the colour band and is doing visible work.     */
main > section,
section.section, section.hip-sizzle, section.hip-trust, section.location-use-cases,
main section:not(.hip-uphero):not(.upload-enterprise-2026){
  padding-block:clamp(40px,5vw,72px) !important;
}
/* Dark/photographic bands were specified at clamp(52px,6vw,88px). Removed after
   looking at the rendered composition: the extra 16px did nothing visible, the
   rule never won specificity anyway, and one uniform rhythm reads better than a
   near-imperceptible exception. Spacing chosen from the render, not the spec.   */
/* The upload card deliberately overlaps the hero; it needs no bottom pad, and
   the section after it should not inherit an extra gap.                       */
section.upload-enterprise-2026{ padding-bottom:0 !important; }

/* --- 5. FOCUS ---------------------------------------------------------------
   Audit: the file input computed `outline-style:none` — the single most
   important control on the site had NO visible keyboard focus.
   WCAG 2.4.7 Focus Visible (AA).                                              */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, label:focus-visible{
  outline:3px solid var(--hip-focus) !important;
  outline-offset:2px !important;
  border-radius:6px;
}
/* the real input is a 1x1 visually-hidden element; surface focus on its label */
input[type=file]:focus-visible + *,
input[type=file]:focus-visible ~ label,
label:has(input[type=file]:focus-visible){
  outline:3px solid var(--hip-focus) !important;
  outline-offset:3px !important;
}

/* --- 6. CONTROLS ------------------------------------------------------------
   Audit: two primary-CTA size variants (17px/12-23 vs 17.92px/14-28) for the
   same action. Unify. Pill radius (980px) is the existing brand signature and
   is kept deliberately.                                                       */
.btn, button, [class*="btn-"], a[class*="button"]{
  font-size:1.0625rem; font-weight:500; letter-spacing:-.004em;
  border-radius:980px; transition:transform .15s var(--ease,ease), box-shadow .15s ease, background-color .15s ease;
}
.btn:active, button:active{ transform:translateY(1px); }
.btn:hover, button:hover{ box-shadow:0 6px 18px rgba(0,113,227,.22); }

/* Non-inline controls under the 24px AA minimum (WCAG 2.5.8). Inline links
   inside a sentence are exempt and deliberately left alone.                   */
.announcement-bar a, .hip-announcement a{
  display:inline-block; padding:6px 4px; min-height:24px;
}
footer a{ display:inline-block; padding:4px 0; min-height:24px; }

/* --- 7. SURFACES ------------------------------------------------------------
   Audit: radii declared 12/18/22/28 but 22px rendered 34x and 18px once;
   shadows were already disciplined (only 3) so they are preserved as-is.      */
.card, [class*="__card"], .uc, .tcard{
  border-radius:18px;
  border:1px solid var(--hip-line);
}
hr, .divider{ border-color:var(--hip-line); }

/* --- 8. UPLOAD ZONE — the product ------------------------------------------
   Keep the dashed affordance (it reads correctly). Strengthen the resting
   state and give hover/drag real feedback. No copy or behaviour change.       */
.upload-enterprise-2026__dropzone{
  border-width:2px !important;
  border-color:rgba(0,113,227,.38) !important;
  background:linear-gradient(180deg,#fbfcfe 0%,#f6f8fb 100%) !important;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.upload-enterprise-2026__dropzone:hover{
  border-color:var(--hip-blue) !important;
  box-shadow:0 8px 26px rgba(0,113,227,.12) !important;
}

/* --- 9. MOTION -------------------------------------------------------------
   Audit: the hero reveal left the headline near-invisible for ~2-3s on load.
   Shorten it and honour reduced-motion.                                       */
.reveal{ transition-duration:.42s !important; transition-delay:0s !important; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
                        transition-duration:.01ms !important; scroll-behavior:auto !important; }
  /* .reveal must be named explicitly: the rule above uses the universal selector
     (0,0,0,0) and loses to the .reveal rule earlier in this file (0,0,1,0) even
     though both are !important. Verified with prefers-reduced-motion emulation —
     the transition stayed at 0.42s until this was added.                        */
  .reveal{ opacity:1 !important; transform:none !important;
           transition-duration:.01ms !important; transition-delay:0s !important; }
}

/* --- 10. NAV ---------------------------------------------------------------- */
.hip-nav a, header nav a{ font-weight:500; letter-spacing:-.003em; }
.hip-nav a:hover, header nav a:hover{ color:var(--hip-blue); }

/* --- 11. THE LAST GRADIENTS -------------------------------------------------
   A full-page render (not a viewport crop) found four more that the first pass
   missed, because I had only targeted text-CLIPPED gradients:

     H2 (no class)          "Built for professional results."  — still a ramp
     A.btn.btn-primary x4   the primary CTA, on every instance
     DIV.bento__feature     the "No printer? No problem." panel

   The CTA is the important one: it is the single most prominent control on the
   page and it was the last thing still reading as a generic AI-SaaS gradient.
   Solid brand blue is more confident and matches the price and links.
   Section-level background gradients (.hip-sizzle, .hip-trust) are LEFT alone —
   they are broad, low-contrast page washes doing real compositional work, not
   decoration on a control.                                                     */
.location-use-cases h2{
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:currentColor !important;
  color:var(--hip-ink) !important;
}
.btn-primary, a.btn.btn-primary, button.btn-primary{
  background:var(--hip-blue) !important;
  color:#fff !important;
  border:1px solid transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.btn-primary:hover, a.btn.btn-primary:hover{
  background:var(--hip-blue-press) !important;
  box-shadow:0 8px 22px rgba(0,113,227,.26) !important;
}
.btn-primary:active, a.btn.btn-primary:active{ transform:translateY(1px); }
.bento__feature{
  background:var(--hip-blue) !important;
}

/* --- 12. FOCUS ON THE *VISIBLE* UPLOAD CONTROL ------------------------------
   Verified rather than assumed, and the first attempt was wrong.

   Actual structure:
     DIV.upload-enterprise-2026__upload-zone
       └ DIV.upload-enterprise-2026__dropzone     <- the control the user sees
            └ INPUT#heroFileInput  (1x1, absolute) <- the element that takes focus

   The dropzone is a DIV, not a <label>, and the input does not wrap it — so the
   earlier `input:focus-visible + *` and `label:has(...)` rules matched nothing
   and the visible control still showed no focus at all. The input IS reachable
   by keyboard (1x1 but focusable, opacity 1), so this was purely a feedback
   gap: a keyboard user could land on the upload and see nothing happen.

   :has() puts the ring on the element the user is actually looking at;
   :focus-within is the broader-support fallback.                              */
.upload-enterprise-2026__dropzone:has(input[type="file"]:focus-visible),
.upload-enterprise-2026__dropzone:focus-within{
  outline:3px solid var(--hip-focus) !important;
  outline-offset:3px !important;
  border-color:var(--hip-blue) !important;
  background:#f2f7ff !important;
}

/* --- 13. FOOTER -------------------------------------------------------------
   It was carrying default treatment while the hero got attention. Measured:
     padding 56px top / 28px bottom      — visibly bottom-cropped
     column headings 12.8px, #6e6e73     — too faint to group anything
     grid 253.9/169.3/169.3/186.2/169.3  — one column an unexplained outlier
   Content and destinations unchanged; this is typography, grouping and spacing. */
.hip-footer{
  padding-top:clamp(48px,5vw,72px) !important;
  padding-bottom:clamp(32px,3.4vw,44px) !important;
  border-top:1px solid var(--hip-line) !important;
  background:#fbfbfd !important;          /* lifts it off the white page above */
}
/* even columns: brand block keeps more room, the four link groups share equally */
.hip-footer__top{
  grid-template-columns:minmax(230px,1.6fr) repeat(4,minmax(140px,1fr)) !important;
  gap:40px 32px !important;
  align-items:start;
}
/* group labels: these are signposts, so give them real presence */
.hip-footer h3, .hip-footer h4{
  font-size:.75rem !important;
  font-weight:700 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase;
  color:var(--hip-ink) !important;
  margin-bottom:14px !important;
}
.hip-footer__links{ gap:2px !important; }
.hip-footer__links a{
  font-size:.9375rem !important;
  color:var(--hip-ink-soft) !important;
  padding:6px 0 !important;            /* comfortable target without visual bulk */
  min-height:28px;
  transition:color .13s ease;
}
.hip-footer__links a:hover{ color:var(--hip-blue) !important; }
.hip-footer__brand .lead{
  font-size:.9375rem !important; line-height:1.55; color:var(--hip-ink-soft) !important;
}
/* separate the legal bar from the link columns instead of letting it float */
.hip-footer__bar{
  margin-top:clamp(28px,3vw,40px) !important;
  padding-top:20px !important;
  border-top:1px solid var(--hip-line);
  font-size:.8125rem;
  color:var(--hip-ink-faint);
  align-items:center;
}
@media (max-width:768px){
  .hip-footer__top{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:28px 20px !important;
  }
  .hip-footer__brand{ grid-column:1 / -1; }   /* brand spans, groups pair up */
  .hip-footer__bar{ flex-direction:column; align-items:flex-start; gap:8px !important; }
}
@media (max-width:380px){
  .hip-footer__top{ grid-template-columns:1fr !important; }
}