/* ============================================================================
   HIP use-case (P2C) pages — /print-and-mail/<intent>.html
   Source of truth: geo/build_usecase.py + geo/templates/location.html

   These pages now render inside <main>, so they inherit the homepage's design
   system (foundation.css, haveitprinted.css, hip-home-refine.css and
   hip-flagship.css). This file only adds what is specific to them: the hero
   grid that pairs the task with the real uploader, and the guidance cards.
   It does not restyle the homepage.
   ========================================================================= */

:root{
  --uc-ink:#141b26;
  --uc-ink-soft:#525c6b;
  --uc-line:#e2e7ee;
  --uc-shell:1180px;
}

/* ---- hero: task on the left, the real uploader on the right ------------- */
main section.uc-hero{
  background:#fff !important;
  padding-block:clamp(34px,4.5vw,68px) clamp(30px,4vw,56px) !important;
}
.uc-hero__in{
  max-width:var(--uc-shell); margin-inline:auto;
  padding-inline:clamp(20px,4vw,48px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px);
  gap:clamp(28px,4vw,64px); align-items:start;
}
.uc-hero__copy{ padding-top:clamp(0px,2.5vw,34px); }
.uc-hero h1{
  font-size:clamp(2rem,3.8vw,3.25rem) !important; line-height:1.06;
  letter-spacing:-.032em; color:var(--uc-ink) !important; margin:0;
  max-width:16ch; text-wrap:balance; text-align:left;
  background:none !important; -webkit-text-fill-color:currentColor !important;
  text-shadow:none !important;
}
/* the shipped rule painted this rgba(255,255,255,.9) — white on a light ground */
.uc-hero .hero-sub, main .uc-hero p.hero-sub{
  color:var(--uc-ink-soft) !important; font-size:1.0625rem !important;
  line-height:1.6; max-width:46ch; margin:16px 0 0 !important;
  text-align:left !important; text-shadow:none !important;
}
/* the uploader keeps its own card treatment from hip-flagship.css */
.uc-hero__tool{ scroll-margin-top:var(--hip-anchor-offset,96px); }
main .uc-hero__tool .upload-enterprise-2026__container{
  padding-inline:0 !important; max-width:none !important;
}
main .uc-hero__tool section.upload-enterprise-2026{ padding:0 !important; }
main .uc-hero__tool .upcard__head{
  display:flex; align-items:flex-start; gap:16px;
  padding:0 0 14px; border-bottom:1px solid var(--uc-line);
}
/* The single uploader surface. hip-flagship.css sets
   `padding-inline:0 !important` on this container for the homepage hero, where
   the card itself supplies the padding. Here the container IS the card, so the
   padding has to be restated at matching specificity with !important -- without
   it the title, price and controls sit flush against the edge. */
main .uc-hero__tool .upload-enterprise-2026__container{
  background:#fff; border:1px solid var(--uc-line); border-radius:16px;
  box-shadow:0 16px 40px rgba(6,12,32,.13);
  padding:22px !important; padding-inline:22px !important;
}
main .uc-hero__tool .upload-enterprise-2026__upload-zone{ margin-top:16px !important; }
main .uc-hero__tool .upload-enterprise-2026__camera-btn{ margin-top:12px !important; }
main .uc-hero__tool .upcard__head{ gap:20px; }
/* The uploader brings its own card. Wrapping it in a second bordered, padded,
   shadowed container produced a card inside a card, which reads as a mistake on
   mobile. The wrapper keeps only its grid position and width. */
main .uc-hero__tool{
  background:none; border:0; border-radius:0; padding:0; box-shadow:none;
}

/* ---- guidance: cards, not a run of widely spaced headings --------------- */
main section.uc-prep{ background:var(--hipf-paper,#eff3f8) !important; }
.uc-prep > .container{
  max-width:var(--uc-shell); margin-inline:auto; padding-inline:clamp(20px,4vw,48px);
}
.uc-prep h2{
  text-align:left; font-size:clamp(1.5rem,2.6vw,2.125rem); line-height:1.2;
  letter-spacing:-.02em; color:var(--uc-ink); margin:0 0 clamp(20px,2.6vw,30px);
}
.uc-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px; align-items:start;
}
.uc-card{
  background:#fff; border:1px solid var(--uc-line); border-radius:14px;
  padding:20px 20px 18px;
}
.uc-card h3{
  margin:0 0 8px; font-family:var(--display,inherit); font-weight:700;
  font-size:1.0625rem; line-height:1.3; color:var(--uc-ink); text-align:left;
}
.uc-card p{
  margin:0; font-size:.9375rem; line-height:1.6; color:var(--uc-ink-soft);
  text-align:left; max-width:none;
}
.uc-card__more{ margin-top:10px; border-top:1px solid var(--uc-line); padding-top:10px; }
.uc-card__more > summary{
  cursor:pointer; list-style:none; font-size:.875rem; font-weight:650;
  color:var(--hipf-blue-deep,#0a58c2);
}
.uc-card__more > summary::-webkit-details-marker{ display:none; }
.uc-card__more > summary::after{ content:" \203a"; }
.uc-card__more p{ margin-top:10px; }

/* ---- the shared facts strip, as a quiet card row ------------------------ */
main section.location-benefits{ background:#fff !important; }
.location-benefits > .container,
.location-faq > .container,
.location-nearby > .container{
  max-width:var(--uc-shell); margin-inline:auto; padding-inline:clamp(20px,4vw,48px);
}
main section.location-benefits h2, main section.location-faq h2,
main section.location-nearby h2, main section.uc-prep h2{
  text-align:left; font-size:clamp(1.5rem,2.6vw,2.125rem); letter-spacing:-.02em;
  color:var(--uc-ink); margin:0 0 22px;
}
.benefits-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;
}
.benefits-grid .benefit{
  background:#fff; border:1px solid var(--uc-line); border-radius:14px; padding:18px;
}
.benefits-grid .benefit h3{
  margin:0 0 6px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--uc-ink-soft); text-align:left;
}
.benefits-grid .benefit p{
  margin:0; font-size:.9375rem; line-height:1.55; color:var(--uc-ink); text-align:left;
}

/* ---- FAQ uses the homepage disclosure treatment ------------------------- */
main section.location-faq{ background:#fff !important; }
.location-faq details.hip-faq{ border-bottom:1px solid var(--uc-line); }
.location-faq details.hip-faq:first-of-type{ border-top:1px solid var(--uc-line); }
.location-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(--uc-ink);
}
.location-faq summary::-webkit-details-marker{ display:none; }
.location-faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--hipf-blue,#0071e3); border-bottom:2px solid var(--hipf-blue,#0071e3);
  transform:translateY(-70%) rotate(45deg);
}
.location-faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.location-faq details p{ padding:0 0 18px; font-size:.9375rem; line-height:1.62; max-width:68ch; }

/* ---- related pages: subordinate to the current task --------------------- */
main section.location-nearby{ background:var(--hipf-paper,#eff3f8) !important; }
ul.nearby-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px;
}
ul.nearby-list li{ margin:0; }
ul.nearby-list a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; background:#fff; border:1px solid var(--uc-line);
  border-radius:12px; text-decoration:none; color:var(--hipf-blue-deep,#0a58c2);
  font-weight:650; font-size:.9375rem; line-height:1.35; min-height:52px;
}
ul.nearby-list a:hover{ border-color:var(--hipf-blue,#0071e3); }
ul.nearby-list a::after{ content:"\2192"; flex:none; }

/* ---- close ------------------------------------------------------------- */
main section.uc-final{ text-align:center; }

@media (max-width:900px){
  .uc-hero__in{ grid-template-columns:1fr; gap:22px; }
  .uc-hero__copy{ padding-top:0; }
  .uc-hero h1{ max-width:none; }
}
@media (max-width:640px){
  main .uc-hero__tool .upload-enterprise-2026__container{
    padding:16px !important; padding-inline:16px !important; border-radius:14px;
  }
  .uc-hero h1{ font-size:1.875rem !important; }
}
/* the drag-and-drop line is desktop guidance; on touch the shipped mobile hint
   repeated the supported-files line verbatim directly beneath it */
@media (hover:none) and (pointer:coarse){
  .upload-hint-mobile{ display:none !important; }
}

.uc-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:360px){
  main .uc-hero__tool .upload-enterprise-2026__container{
    padding:13px !important; padding-inline:13px !important;
  }
  main .uc-hero__tool .upcard__head{ gap:10px; }
}