/* ============================================================================
   HAVE IT PRINTED — HOMEPAGE COMPOSITION
   Implements the supplied specification. Values are the spec's; where the
   rendered page required a correction it is noted inline.

   The uploader, its config, the checkout modal and upload-enterprise-2026.js are
   untouched. This file only composes around them.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&family=Inter:wght@400;500;600&display=swap');

.hip2{
  --ink:#172125; --sub:#526068; --blue:#0064D9; --blue-soft:#EDF3FA;
  --ground:#FAF9F6; --white:#FFFFFF; --line:#DCE1E4;
  --max:1240px; --gut:48px; --gap:24px;
  --panel-shadow:0 12px 40px rgba(20,30,40,.08);
  --display:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
}
@media (max-width:1023px){ .hip2{ --gut:24px; } }
@media (max-width:599px){  .hip2{ --gut:20px; } }

/* --- section rhythm: applied ONCE, at the section boundary ---------------- */
main > .hip2{
  /* half the boundary value on each side, so two adjacent sections total 96px
     -- the spec's "apply spacing once at a section boundary". */
  padding: 48px var(--gut);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
}
@media (max-width:1023px){ main > .hip2{ padding: 32px var(--gut); } }
@media (max-width:599px){  main > .hip2{ padding: 24px var(--gut); } }
main > .hip2 > *{ max-width: var(--max); margin-inline: auto; }

/* --- type ---------------------------------------------------------------- */
.hip2 h1,.hip2 h2,.hip2 h3{ font-family: var(--display); color: var(--ink);
  margin:0; text-wrap:balance; letter-spacing:-.018em; }
.hip2 h1{ font-size: clamp(38px, 4.4vw, 64px); line-height:1.04; font-weight:700; }
.hip2 h2{ font-size: clamp(30px, 2.9vw, 40px); line-height:1.12; font-weight:700; }
.hip2 h3{ font-size: clamp(22px, 1.5vw, 24px); line-height:1.25; font-weight:600; }
.hip2 p{ margin:0; font-size:16px; line-height:1.6; color:var(--sub); max-width:660px; }
.hip2 .lead{ font-size: clamp(17px, 1.25vw, 19px); line-height:1.55; }
.hip2 h2 + .lead, .hip2 h2 + p{ margin-top:16px; }
.hip2 h1 + p{ margin-top:16px; }
@media (max-width:899px){ .hip2 h1 + p{ margin-top:12px; } .hip2--hero{ padding-top:36px; } }

/* --- hero: 7 / 5 --------------------------------------------------------- */
.hip2--hero{ padding-top:56px; padding-bottom:56px; }
.h-wrap{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap) 48px; align-items:center; }
.h-copy{ grid-column: span 7; }
.h-panel{ grid-column: span 5; }
.h-title{ max-width:620px; }
.h-lead{ max-width:560px; }
.h-lead strong{ color:var(--ink); font-weight:600; }
.h-price{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:17px; color:var(--sub); max-width:44ch; }
.h-price strong{ color:var(--ink); font-weight:700; font-family:var(--display); font-size:20px; }
.wa-fig figcaption{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--sub); }

/* THE WIDGET IS THE PANEL. It already renders a white card; adding another
   around it produced a nested bordered box, which the spec forbids. Only its
   outer padding is neutralised so the card sits flush in the grid column. */
.h-panel > section{ background:transparent; border:0; box-shadow:none;
  padding:0 !important; margin:0; }
.h-panel .upload-enterprise-2026__upload-zone{
  margin:0; box-shadow:var(--panel-shadow); border-radius:20px; padding:24px; background:var(--white); }
/* one compact header; the promotional layers are gone from the markup */
.h-panel .upload-enterprise-2026__heading{
  font-family:var(--display); font-size:20px; font-weight:600; color:var(--ink);
  margin:0 0 16px; text-align:left; letter-spacing:-.01em; }
.h-panel .upload-enterprise-2026__header{ margin:0; }
/* the drop area is the action: give it a real boundary and a clear label */
.h-panel .upload-enterprise-2026__dropzone{
  border:1.5px dashed #B9C6D4; border-radius:12px; background:#F7FAFD;
  padding:26px 20px; transition:border-color .2s, background .2s; }
.h-panel .upload-enterprise-2026__dropzone:hover{ border-color:var(--blue); background:#EFF5FC; }
.h-panel .upload-enterprise-2026__label{ cursor:pointer; display:block; text-align:center; }
.h-panel .upload-enterprise-2026__upload-hint{ font-family:var(--display); font-weight:600;
  font-size:17px; color:var(--ink); }
/* the widget shows ONE hint per viewport via .upload-hint-desktop / -mobile;
   forcing display:block on both made them render together. */
.h-panel .upload-hint-desktop{ display:block; }
.h-panel .upload-hint-mobile{ display:none; }
@media (max-width:767px){
  .h-panel .upload-hint-desktop{ display:none; }
  .h-panel .upload-hint-mobile{ display:block; }
}
.h-panel .upload-enterprise-2026__upload-icon{ margin-bottom:6px; color:var(--blue); }
.h-panel label:has(input[type="file"]:focus-visible),
.h-panel .upload-enterprise-2026__dropzone:has(input:focus-visible){
  outline:3px solid var(--blue); outline-offset:3px; }
/* Take Photo stays secondary */
.h-panel .upload-enterprise-2026__camera-btn{
  width:100%; margin-top:12px; min-height:48px; border-radius:12px;
  background:var(--white); border:1px solid var(--line); color:var(--ink); font-weight:600; }
.h-panel .upload-enterprise-2026__camera-btn:hover{ border-color:var(--blue); color:var(--blue); }
/* guidance and price sit BELOW the control */
.upload-enterprise-2026__foot{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.55; color:var(--sub); font-family:var(--body); }
.upload-enterprise-2026__foot strong{ color:var(--ink); font-weight:600; }
.h-panel .upload-enterprise-2026__upload-zone,
.h-panel .upload-enterprise-2026{ max-width:none; width:100%; }
.h-panel [class*="__price"]{ font-family:var(--display); font-weight:700; color:var(--blue); }

@media (max-width:899px){
  .h-wrap{ grid-template-columns:1fr; }
  .h-copy,.h-panel{ grid-column:1 / -1; }
  /* spec: heading -> paragraph -> UPLOADER -> image. The figure moves after the
     panel so the action is never pushed off the first screen. */
  .h-copy{ display:contents; }
  .h-title{ order:1; } .h-lead{ order:2; } .h-price{ order:3; } .h-panel{ order:4; }
}

/* --- transformation: file -> printed pages -> mailed --------------------
   Three connected states, one narrative. The third is a photograph; the first
   two are illustrations because no photograph of those stages exists. */
.tr-head{ max-width:20ch; }
.tr-head h2{ font-size:clamp(32px,3.6vw,50px); line-height:1.06; }
.tr-states{ list-style:none; margin:40px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:0; align-items:start; position:relative; }
/* the connecting line */
.tr-states::before{ content:""; position:absolute; left:16%; right:16%; top:96px; height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent); }
.tr-state{ position:relative; padding:0 18px; }
.tr-art{ position:relative; z-index:1; background:var(--ground); border-radius:12px;
  overflow:hidden; aspect-ratio:1/1; display:grid; place-items:center; }
.tr-art img{ display:block; width:100%; height:100%; object-fit:cover; }
.tr-art--photo{ background:#EDEDEA; }
.tr-lab{ margin-top:18px; font-size:15px; color:var(--ink); display:flex; gap:10px;
  align-items:center; font-family:var(--display); font-weight:600; }
.tr-lab span{ width:26px; height:26px; border-radius:50%; background:var(--blue-soft);
  color:var(--blue); font-size:13px; display:grid; place-items:center; flex:none; }
.tr-spec{ list-style:none; margin:44px 0 0; padding:20px 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tr-spec li{ font-size:15px; color:var(--sub); line-height:1.5; }
.tr-spec strong{ display:block; color:var(--ink); font-family:var(--display);
  font-weight:600; font-size:14px; margin-bottom:4px; }
@media (max-width:899px){
  .tr-states{ grid-template-columns:1fr; gap:0; }
  .tr-states::before{ left:50%; right:auto; top:8%; bottom:14%; width:1px; height:auto;
    background:linear-gradient(180deg,transparent,var(--line) 10%,var(--line) 90%,transparent); }
  .tr-state{ padding:0 0 26px; display:grid; grid-template-columns:132px 1fr; gap:18px;
    align-items:center; }
  .tr-art{ aspect-ratio:1/1; }
  .tr-lab{ margin:0; }
  .tr-spec{ grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
}
@media (prefers-reduced-motion:no-preference){
  .tr-state{ opacity:0; transform:translateY(10px); animation:trIn .5s var(--ease) forwards; }
  .tr-state:nth-child(2){ animation-delay:.12s; }
  .tr-state:nth-child(3){ animation-delay:.24s; }
  @keyframes trIn{ to{ opacity:1; transform:none; } }
}

/* --- three steps: white band, ruled ------------------------------------- */
.hip2--steps{ background:var(--white); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding-top:56px; padding-bottom:56px; }
.st-list{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:40px; }
.st-list li{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:start; }
.st-n{ grid-row:span 2; width:32px; height:32px; border-radius:50%; background:var(--blue-soft);
  color:var(--blue); font-family:var(--display); font-weight:700; font-size:15px;
  display:grid; place-items:center; }
.st-list h3{ font-size:18px; align-self:center; }
.st-list p{ font-size:15px; grid-column:2; }
.st-re{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--sub); }
.st-re a{ color:var(--blue); }
@media (max-width:899px){ .st-list{ grid-template-columns:1fr; gap:24px; } }

/* --- price: the complete service first, then what varies ------------------ */
.hip2--price{ background:transparent; }
.hip2--price > *{ background:var(--blue-soft); border:1px solid #D4E2F2; border-radius:16px;
  padding:clamp(30px,3.4vw,52px); }
.pr-wrap{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap) 56px; align-items:start; }
.pr-intro{ grid-column: span 6; }
.pr-detail{ grid-column: span 6; }
.hip2 .pr-intro h2{ font-size:clamp(27px,2.5vw,34px); line-height:1.14; max-width:16ch; }
.hip2 .pr-intro .pr-from{ margin-top:26px; font-size:14px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sub); }
.hip2 .pr-intro .pr-fig{ font-family:var(--display); font-size:clamp(60px,6.4vw,92px);
  line-height:.95; font-weight:700; color:var(--ink); letter-spacing:-.035em; margin-top:2px; }
.hip2 .pr-intro .pr-base{ margin-top:16px; font-size:17px; line-height:1.55; max-width:32ch; }
.hip2 .pr-intro .pr-total{ margin-top:14px; font-size:15px; color:var(--blue); font-weight:600; }
.pr-detail h3{ font-size:16px; padding-bottom:12px; border-bottom:1px solid #C9D8E8; }
.pr-list{ list-style:none; margin:0; padding:0; }
.pr-list li{ font-size:15px; line-height:1.55; color:var(--sub); padding:13px 0;
  border-bottom:1px solid #DCE7F2; }
.pr-list strong{ color:var(--ink); font-weight:600; }
.pr-links{ margin-top:20px; font-size:15px; font-weight:600; }
.pr-links a{ color:var(--blue); text-decoration:none; }
.pr-links a:hover{ text-decoration:underline; }
@media (max-width:899px){
  .pr-wrap{ grid-template-columns:1fr; }
  .pr-intro,.pr-detail{ grid-column:1 / -1; }
  .pr-detail{ margin-top:28px; }
}

/* --- use cases: 2x2 editorial ------------------------------------------- */
.uc-head{ max-width:660px; }
.uc-grid{ list-style:none; margin:28px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.uc-grid li{ padding:22px 0; border-top:1px solid var(--line); }
.uc-grid h3{ font-size:19px; }
.uc-grid p{ margin-top:8px; font-size:15px; }
.uc-go{ display:inline-block; margin-top:12px; font-size:15px; font-weight:600;
  color:var(--blue); text-decoration:none; }
.uc-go:hover{ text-decoration:underline; }
.uc-more{ margin-top:32px; font-size:14px; }
.uc-more a{ color:var(--blue); }
@media (max-width:899px){ .uc-grid{ grid-template-columns:1fr; gap:0; } }

/* --- practical: 4 / 8 ---------------------------------------------------- */
.pq-wrap{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); }
.pq-intro{ grid-column: span 4; }
.pq-body{ grid-column: span 8; }
.pq-intro p{ margin-top:16px; }
.pq-help{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.pq-help__t{ font-family:var(--display); font-weight:600; color:var(--ink); font-size:16px; }
.pq-help p{ margin-top:8px; font-size:15px; }
.pq-body details{ border-top:1px solid var(--line); }
.pq-body details:last-child{ border-bottom:1px solid var(--line); }
.pq-body summary{ cursor:pointer; list-style:none; padding:18px 0; font-family:var(--display);
  font-weight:600; font-size:17px; color:var(--ink); display:flex; justify-content:space-between;
  align-items:center; gap:16px; }
.pq-body summary::-webkit-details-marker{ display:none; }
.pq-body summary::after{ content:"+"; font-weight:600; color:var(--sub); font-size:20px; line-height:1; }
.pq-body details[open] summary::after{ content:"\2212"; }
.pq-body details p{ padding:0 0 18px; font-size:16px; }
.pq-body a{ color:var(--blue); }
@media (max-width:899px){
  .pq-wrap{ grid-template-columns:1fr; }
  .pq-intro,.pq-body{ grid-column:1 / -1; }
  .pq-body{ margin-top:24px; }
}

/* --- final action -------------------------------------------------------- */
.hip2--final{ padding-top:72px; padding-bottom:72px; border-top:1px solid var(--line); }
.fa-wrap{ text-align:center; }
.fa-wrap p{ margin:16px auto 0; }
.fa-btn{ display:inline-flex; align-items:center; justify-content:center; margin-top:32px;
  min-height:48px; padding:0 28px; border-radius:12px; background:var(--blue); color:#fff;
  font-family:var(--display); font-weight:600; font-size:17px; text-decoration:none; }
.fa-btn:hover{ background:#0056BC; }
.fa-id{ list-style:none; margin:44px auto 0; padding:22px 0 0; max-width:820px;
  border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; text-align:left; }
.fa-id li{ font-size:15px; color:var(--ink); }
.fa-id span{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sub); margin-bottom:5px; }
.fa-id a{ color:var(--blue); }
@media (max-width:767px){ .fa-id{ grid-template-columns:1fr 1fr; gap:18px; } }

/* --- focus, motion ------------------------------------------------------- */
.hip2 a:focus-visible,.hip2 summary:focus-visible,.hip2 .fa-btn:focus-visible{
  outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){ .hip2 *{ transition:none !important; animation:none !important; } }


/* ============================ PRINT OPTIONS (/advanced.html) ============== */
.hip2--pohead{ padding-top:44px; padding-bottom:36px; }
.po-crumb{ font-size:14px; }
.po-crumb a{ color:var(--blue); text-decoration:none; }
.hip2--pohead h1{ margin-top:12px; font-size:clamp(34px,3.6vw,50px); line-height:1.06; }
.po-lead{ margin-top:14px; font-size:17px; max-width:56ch; }
.po-btn{ display:inline-flex; align-items:center; min-height:48px; padding:0 24px; margin-top:24px;
  border-radius:12px; background:var(--blue); color:#fff; font-family:var(--display);
  font-weight:600; font-size:16px; text-decoration:none; }
.po-btn:hover{ background:#0056BC; }
.hip2--po{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.po-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:28px; }
.po-group h3{ font-size:16px; padding-bottom:10px; border-bottom:2px solid var(--ink); }
.po-rows{ margin:0; }
.po-rows > div{ display:flex; justify-content:space-between; gap:14px; padding:11px 0;
  border-bottom:1px solid var(--line); }
.po-rows dt{ font-size:15px; color:var(--ink); }
.po-rows dd{ margin:0; font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; }
.po-rows .po-inc{ color:var(--blue); }
.po-note{ margin-top:12px; font-size:14px; }
.hip2--posoon > *{ background:var(--ground); border:1px solid var(--line); border-radius:14px;
  padding:clamp(24px,2.6vw,36px); }
.po-soon h2{ font-size:22px; }
.po-soonlist{ list-style:none; margin:20px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:10px 20px; }
.po-soonlist li{ font-size:15px; color:var(--sub); padding:9px 0; border-top:1px solid var(--line); }
.po-files{ text-align:center; }
.po-files p{ margin:14px auto 0; }
@media (max-width:1023px){ .po-grid{ grid-template-columns:1fr 1fr; } .po-soonlist{ grid-template-columns:1fr 1fr; } }
@media (max-width:599px){ .po-grid{ grid-template-columns:1fr; gap:28px; } .po-soonlist{ grid-template-columns:1fr; } }

/* return banner shown only when Print Options was opened from a task page */
.po-return{
  margin:0; padding:12px clamp(20px,4vw,48px);
  background:#eff3f8; border-bottom:1px solid #e2e7ee;
  font-size:.9375rem; color:#414a58;
}
.po-return a{ color:#0a58c2; font-weight:650; }