/* index-design.css - home page (index.php) only.
   Loaded as its own <link> after style.css; every rule is scoped under
   .home-design / .hd-* so it cannot reach any other page. (faqs.php reuses
   the .hd-faq-* class NAMES but has its own standalone rules inside
   style.css under .faq-page-list, so it is unaffected by anything here.)

   ---------------------------------------------------------------------
   GEOMETRY SYSTEM - read this first before changing any number.

   The Figma source (moby-posters-2024, node 3159:145) is a single 1440px
   desktop frame with a 1180px content column (128px gutters). Rather than
   hardcode those pixel values, every size/offset here is expressed as a
   fraction of --hd-w, which IS the live width of that content column:

       --hd-w: min(1180px, 100vw - 32px)

   So a value measured as N px in Figma becomes calc(var(--hd-w) * N/1180)
   and the whole page scales proportionally instead of breaking apart at
   1280 / 1366 / 1600. Every ratio below carries its own Figma px value in
   a trailing comment, so you can always go straight back to the design
   file: 0.040678 is annotated as 48px, 0.457627 as 540px, and so on.

   Percentages are deliberately NOT used for this: they resolve against a
   parent's content box (which changes with padding), --hd-w never does.

   The @media block at the bottom is the mobile design (Figma node
   3178:191, a 390px frame) and takes over at 767px and below. It runs on
   the same system with its own column - see the header comment there.

   Two things must stay in step with that breakpoint if it ever moves
   again: the <source media="..."> on both <picture> elements in index.php
   (hero art and FAQ tube), and the note at the upload row about style.css
   swapping its own mobile copy at 640px.
   --------------------------------------------------------------------- */

.home-design {
  --hd-w: min(1180px, calc(100vw - 32px));

  /* Sampled straight out of the Figma render, not the nearest sitewide
     token - the hero coral (#FF5243) and lime (#C8F30D) are both a shade
     off style.css's --red / --lime on purpose. */
  --hd-coral: #FF5243;
  --hd-amber: #F7C20E;
  --hd-purple: #BA8AF8;
  --hd-lime: #C8F30D;
  --hd-ink: #201F1F;   /* the speech bubble / badge dark, not pure black */
  --hd-sky: #A0CFF2;   /* the "UK's favourite" line under the upload row */

  background: #000;
  /* 33px = the gap between the promo banner (Figma y 127) and the top of
     the hero band (y 160.4). */
  padding: calc(var(--hd-w) * 0.027966) 16px 0;
  /* Lets the FAQ tube and the hero art bleed sideways out of the content
     column without ever producing a horizontal page scrollbar. `clip`,
     not `hidden` - hidden would force overflow-y into a scroll container
     and kill the vertical bleeds. */
  overflow-x: clip;
}

.home-design .hd-container { max-width: 1180px; margin: 0 auto; }

/* Band-to-band gaps are NOT uniform in the design - each one is set on the
   band itself below (80 / 74.5 / 57 / 53 / 81 / 97 going down the page).
   This is only the fallback for anything that doesn't override it.
   NOTE: every one of those overrides MUST be written `.home-design .hd-x`,
   not `.hd-x` - this selector is class+type (0,1,1) and beats a bare single
   class (0,1,0) regardless of source order. */
.home-design section {
  position: relative;
  border-radius: calc(var(--hd-w) * 0.033898);   /* 40px */
  margin-bottom: calc(var(--hd-w) * 0.057627);   /* 68px */
}

/* style.css gives .site-footer a 60px top margin, sized for the white
   pages. This page ends on a black block with nothing to blend into, so
   that margin reads as a white gap. Scoped to a class that only exists
   here, so style.css stays untouched. General sibling (~) not adjacent
   (+): index.php's script tags sit between the two in the DOM. */
.home-design ~ .site-footer { margin-top: 0; }

/* Breakpoint-only content. The two frames do not carry identical copy:
   mobile adds "images" to the h1, drops "or computer" from the sub-copy,
   and adds a three-step process row that the desktop frame has no
   counterpart for. Rather than diverge the markup per device (which needs
   PHP, and would ship the wrong one to anything that guesses wrong), both
   variants are in the DOM and CSS picks. See the @media block at the
   bottom, which flips all three. */
.hd-mobile-only { display: none; }
.hd-steps { display: none; }

/* Sticky mobile CTA - mobile-only, so it starts hidden and the @media
   block at the bottom turns it on. */
.hd-sticky-cta { display: none; }

/* Generates no box at all above the breakpoint, so the desktop hero is
   laid out exactly as if this wrapper were not in the markup - including
   .hd-free-delivery / .hd-hero-visual, whose containing block stays
   .hd-hero (a display:contents element can never be one). */
.hd-hero-bg { display: contents; }

/* <picture> is inline by default, which would leave a line-box gap under
   the art inside these two fixed-height boxes. */
.hd-hero-visual picture { display: block; }
.hd-faq-visual picture { display: block; width: 100%; height: 100%; }


/* ==================================================================
   HERO
   Not a flex row - the Figma hero is an overlay composition: copy in
   normal flow bottom-left, the photo composite absolutely positioned
   bottom-right and 87px taller than the band it sits in.
   ================================================================== */
.home-design .hd-hero {
  background: var(--hd-coral);
  padding: calc(var(--hd-w) * 0.035932)   /* 42.4px */
           0
           calc(var(--hd-w) * 0.044746)   /* 52.8px */
           0;
  margin-bottom: calc(var(--hd-w) * 0.067966);  /* 80.2px */
  /* The poster's hanging strings run 87px above the band. Only 33px of
     that is free space before the promo banner, so the rest is clipped:
     in Figma the same overhang is hidden behind the nav. Negative inset
     EXPANDS the clip region upward; the other three edges stay on the
     border box, and the coral background keeps its own border-radius
     because clip-path never cuts into it. */
  clip-path: inset(calc(var(--hd-w) * -0.027966) 0 0 0);
}

/* The exact Figma bubble vector (assets/images/home-design/
   home_copy_bkg_new.svg) - two paths, the main speech bubble plus the
   small detached blob off its top-right corner. aspect-ratio locks the
   box to the SVG's own proportions, so the default preserveAspectRatio
   scales it perfectly and nothing distorts. */
.hd-hero-bubble {
  margin-left: calc(var(--hd-w) * 0.026695);     /* 31.5px */
  width: calc(var(--hd-w) * 0.701186);           /* 827.4px */
  aspect-ratio: 827.4 / 317.7;
  background: url('../images/home-design/home_copy_bkg_new.svg') no-repeat center / 100% 100%;
  /* Vertically centred, not offset from the top: in Figma the three lines
     of type sit with an equal ~38px of clearance above and below them
     inside the shape, and centring reproduces that at any width without a
     magic padding number that only holds at one font size. 50px left
     inset is the design's own. */
  display: flex;
  align-items: center;
  padding: 0 0 0 calc(var(--hd-w) * 0.042373);   /* 50px */
}
.hd-hero-bubble h1 {
  font-family: var(--font-display);
  font-weight: 400;
  color: #fff;
  font-size: calc(var(--hd-w) * 0.072034);       /* 84.83px */
  /* 86px baseline-to-baseline, measured off the Figma render. (The text
     node reports a 201.7px box for three lines, which works out at 67px -
     that is the node's own auto-height, not the leading it renders with.
     The render is the source of truth here.) */
  line-height: 1.012;                            /* 86px leading */
  text-transform: capitalize;
  margin: 0;
  /* Art-directed line breaks (the <br>s in index.php), never left to
     wrap: "Posters Printed / From Your / Mobile Phone" at every width. */
  white-space: nowrap;
}

.hd-hero-sub {
  margin: calc(var(--hd-w) * 0.040246) 0 0 calc(var(--hd-w) * 0.037034); /* 47.5px / 43.7px */
  width: calc(var(--hd-w) * 0.566949);           /* 669px */
  font-family: var(--font-body);
  font-weight: 600;
  color: #fff;
  font-size: calc(var(--hd-w) * 0.016381);       /* 19.33px */
  line-height: 1.38;                             /* 26.67px */
}
/* One <p> per design line, nowrap - the webfont sets this copy ~3% wider
   than Figma's own text engine does, so the longest line would otherwise
   wrap and push the whole band taller than the design. */
.hd-hero-sub p { margin: 0; white-space: nowrap; }

.hd-hero-visual {
  position: absolute;
  right: calc(var(--hd-w) * 0.022797);           /* 26.9px */
  bottom: 0;
  width: calc(var(--hd-w) * 0.411864);           /* 486px */
}
/* home_hero.png is the already-composed art (poster + strings + phone in
   hand + tube) at 972x1256 - the same 0.774 ratio as the Figma group, so
   it drops in at natural height with no cropping. */
.hd-hero-visual img { width: 100%; height: auto; display: block; }

/* Sized off the rendered pill, not off the Figma group's bounding box:
   the badge vector is a tapered pill sitting at a slight angle, so its
   248x66 bbox is much larger than the ~207x34 shape actually drawn inside
   it. Measuring the bbox is what previously made this twice as tall as it
   should be. */
.hd-free-delivery {
  position: absolute;
  left: calc(var(--hd-w) * 0.435169);            /* 513.5px */
  top: calc(var(--hd-w) * 0.300085);             /* 354.1px */
  height: calc(var(--hd-w) * 0.028814);          /* 34px */
  line-height: calc(var(--hd-w) * 0.028814);
  /* Asymmetric: the rocket emoji carries its own trailing whitespace, so an
     equal 24px on the right pushes the pill ~15px past where the design
     ends it. */
  padding: 0 calc(var(--hd-w) * 0.008475) 0 calc(var(--hd-w) * 0.020339); /* 10px / 24px */
  background: var(--hd-ink);
  color: var(--hd-lime);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--hd-w) * 0.018644);       /* 22px */
  border-radius: 999px;
  white-space: nowrap;
  transform: rotate(-2deg);
}


/* ==================================================================
   GET STARTED / UPLOAD
   Transparent band. Reuses the real upload-page.js widgets verbatim
   (#dropzone / #file-input / #qr-frame / #mobile-upload-card / #qr-status)
   - only their size and arrangement change here, never their ids.
   ================================================================== */
.home-design .hd-get-started {
  background: transparent;
  border-radius: 0;
  /* 20px of tail - in the design file that is trailing space inside the QR
     column's own frame; the effect is the same. */
  padding: 0 0 calc(var(--hd-w) * 0.016949);
  margin-bottom: calc(var(--hd-w) * 0.060593);   /* 71.5px, down to .hd-usp-line */
}
.hd-get-started h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: #fff;
  font-size: calc(var(--hd-w) * 0.050847);       /* 60px */
  line-height: 1;
  text-transform: capitalize;
  text-align: center;
  margin: 0 0 calc(var(--hd-w) * 0.033051);      /* 39px */
}

/* Standalone tagline between the upload row and the amber band - not part
   of either, so it is a sibling of the two <section>s rather than living
   inside one. */
.hd-usp-line {
  margin: 0 0 calc(var(--hd-w) * 0.048729);      /* 57.5px, down to the amber band */
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  /* Sized to the design's rendered line LENGTH (580px), not to a nominal
     20px: style.css only ships a 600 cut of Bricolage, so a 700 here is a
     synthesised bold that sets narrower than Figma's real one. */
  font-size: calc(var(--hd-w) * 0.019492);       /* 23px */
  line-height: 1.4;
  color: var(--hd-sky);
}

/* Figma row: 440 col | 62 gap | 72 OR | 62 gap | 443 col = 1079 total.
   flex-start, not center - the lime OR badge sits level with the two
   purple column labels, not with the middle of the cards. */
/* This row is index.php's <main id="upload-state">, so style.css's bare
   `main` rule (max-width 1180 / margin auto / padding 32px 24px 80px /
   display:grid) lands on it and has to be undone here - that padding alone
   was adding 112px of dead height to this band. */
.hd-upload-row {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--hd-w) * 0.052542);             /* 62px */
}
.hd-upload-col { min-width: 0; }
.hd-upload-col--mobile   { width: calc(var(--hd-w) * 0.372881); }  /* 440px */
.hd-upload-col--computer { width: calc(var(--hd-w) * 0.375424); }  /* 443px */

.hd-upload-col-label {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--hd-purple);
  font-size: calc(var(--hd-w) * 0.025424);       /* 30px */
  line-height: 1;
  text-transform: capitalize;
  margin: 0 0 calc(var(--hd-w) * 0.022034);      /* 26px */
}

.hd-upload-divider { flex: 0 0 auto; }
.hd-or-badge {
  width: calc(var(--hd-w) * 0.061017);           /* 72px */
  height: calc(var(--hd-w) * 0.061017);
  border-radius: 50%;
  background: var(--hd-lime);
  color: #000;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--hd-w) * 0.025424);       /* 30px */
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* Overrides style.css's default .upload-card (420px wide / 500px tall) for
   this page only - two classes beat one, so load order is irrelevant. */
.home-design .upload-card {
  width: 100%;
  min-height: 0;
  padding: 0;
  background: #fff;
}

/* Figma shows the QR as its own small white square with the caption beside
   it, not both inside one shared card - so the wrapper flattens to a
   transparent row and #qr-frame supplies the only visible white box. */
.home-design .upload-mobile-card {
  background: transparent;
  border: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--hd-w) * 0.024576);             /* 29px */
  text-align: left;
}
.home-design .upload-mobile-card .upload-title { display: none; }
.home-design .qr-box {
  width: calc(var(--hd-w) * 0.198305);           /* 234px */
  height: calc(var(--hd-w) * 0.198305);
  padding: calc(var(--hd-w) * 0.014407);         /* 17px */
  margin-bottom: 0;
  border: none;
  border-radius: calc(var(--hd-w) * 0.013559);   /* 16px */
  flex-shrink: 0;
}
/* style.css pins the generated QR canvas at a fixed 200x200; that is exactly
   right at the full 1180 column but would burst the box once it scales
   down, so it follows the box instead. */
.home-design .qr-box canvas,
.home-design .qr-box img { width: 100%; height: 100%; }

.home-design #qr-status {
  /* Figma's caption column is 156px; 160 here because the webfont sets
     "your camera roll" 2px wider than Figma does and that one line is what
     decides whether this reads as five lines or six. */
  width: calc(var(--hd-w) * 0.135593);           /* 160px */
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  /* Floored for the same reason as the dropzone interior next door - the
     bare ratio puts this at 12.5px once the column is down to breakpoint
     width. The width is deliberately NOT floored: widening the caption
     would push the QR box + caption past the column they share. */
  font-size: max(13px, calc(var(--hd-w) * 0.016949));   /* 20px */
  line-height: 1.4;                              /* 28px */
}

.home-design .upload-card-slot { width: 100%; }
.home-design .upload-dropzone {
  height: calc(var(--hd-w) * 0.198305);          /* 234px, matching the QR box */
  min-height: 0;
  background: #fff;
  border: 2px dashed var(--line);
  border-radius: calc(var(--hd-w) * 0.013559);   /* 16px */
}
/* The dropzone's BOX scales with --hd-w, but everything style.css puts
   inside it is fixed px, so the two come apart as the column narrows. At
   the full 1180 column the box is 234 tall around 143 of content - the
   45px of air the design draws. At the 767px breakpoint the box is down to
   146 and the content is still 143, which is what crushed this block
   anywhere under ~1000px.

   So the interior scales too, but with a floor on every value: a straight
   ratio would set this caption at 8.7px. Each max() is written
   `floor, design-ratio` - the ratio is what renders at 1180 (and carries
   the Figma px in the comment), the floor is what holds at the breakpoint.
   Both branches are hit in the range this page actually gets used at.

   Applies to .upload-sub but NOT to #qr-status, which shares that class:
   the `.home-design #qr-status` rule above is (1,1,0) and an id outranks
   any number of classes. */
.home-design .upload-icon-circle {
  width: max(44px, calc(var(--hd-w) * 0.047458));          /* 56px */
  height: max(44px, calc(var(--hd-w) * 0.047458));
  margin-bottom: max(12px, calc(var(--hd-w) * 0.016949));  /* 20px */
}
.home-design .upload-icon-circle svg {
  width: max(18px, calc(var(--hd-w) * 0.018644));          /* 22px */
  height: max(18px, calc(var(--hd-w) * 0.018644));
}
.home-design .upload-title {
  font-size: max(15px, calc(var(--hd-w) * 0.015254));      /* 18px */
  margin-bottom: max(6px, calc(var(--hd-w) * 0.006780));   /* 8px */
}
.home-design .upload-sub {
  font-size: max(12.5px, calc(var(--hd-w) * 0.011864));    /* 14px */
}
.home-design .upload-formats {
  font-size: max(11px, calc(var(--hd-w) * 0.010169));      /* 12px */
  margin-top: max(4px, calc(var(--hd-w) * 0.005085));      /* 6px */
}

.home-design .upload-layout { display: block; }


/* ==================================================================
   SUPER HIGH QUALITY (amber)
   The printer is NOT contained: it runs ~20px above and ~32px below the
   band, exactly as node 3159:274 does over its section.
   ================================================================== */
.home-design .hd-quality {
  background: var(--hd-amber);
  color: #000;
  min-height: calc(var(--hd-w) * 0.407373);      /* 480.7px */
  padding: calc(var(--hd-w) * 0.082203) 0 0 calc(var(--hd-w) * 0.039831); /* 97px / 47px */
  margin-bottom: calc(var(--hd-w) * 0.048305);   /* 57px */
  overflow: visible;
}
.hd-quality-copy {
  position: relative;
  z-index: 1;
  width: calc(var(--hd-w) * 0.243220);           /* 287px */
}
/* The four-line break is hard-coded with <br> in index.php, exactly as the
   designer set it - it is not a width-driven wrap, so there is no max-width
   here that could quietly re-flow it at a different viewport. */
.hd-quality-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--hd-w) * 0.040678);       /* 48px */
  line-height: 0.865;                            /* 41.5px */
  text-transform: capitalize;
  margin: 0 0 calc(var(--hd-w) * 0.025424);      /* 30px */
}
.hd-quality-copy p {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(var(--hd-w) * 0.016381);       /* 19.33px */
  line-height: 1.371;                            /* 26.5px */
  margin: 0;
}
.hd-quality-visual {
  position: absolute;
  left: calc(var(--hd-w) * 0.363559);            /* 429px */
  top: calc(var(--hd-w) * -0.016525);            /* -19.5px */
  width: calc(var(--hd-w) * 0.617966);           /* 729.2px */
}
.hd-quality-visual img { width: 100%; height: auto; display: block; }


/* ==================================================================
   INTELLIGENT DETECTION (purple)
   ================================================================== */
.home-design .hd-detect {
  background: var(--hd-purple);
  color: #000;
  min-height: calc(var(--hd-w) * 0.407373);      /* 480.7px */
  margin-bottom: calc(var(--hd-w) * 0.044915);   /* 53px */
  overflow: hidden;                              /* nothing bleeds here */
}
.hd-detect-images {
  position: absolute;
  left: calc(var(--hd-w) * 0.038458);            /* 45.4px */
  top: calc(var(--hd-w) * 0.014246);             /* 16.8px - the tag row */
  display: flex;
  gap: calc(var(--hd-w) * 0.021373);             /* 25.2px */
}
.hd-detect-image-wrap {
  position: relative;
  width: calc(var(--hd-w) * 0.268517);           /* 316.85px */
  /* 16.8px of clear space above the photo, which is the half of each tag
     that overhangs the frame's top edge. */
  padding-top: calc(var(--hd-w) * 0.014246);
}
.hd-detect-image-wrap img {
  width: 100%;
  height: calc(var(--hd-w) * 0.361110);          /* 426.1px */
  /* Source art is 600x900 (0.667); the Figma frame is 0.744 - cover
     reproduces the design's own crop instead of letterboxing it. */
  object-fit: cover;
  display: block;
  border: calc(var(--hd-w) * 0.007627) solid #000;  /* 9px */
  box-sizing: border-box;
}
.hd-detect-tag {
  position: absolute;
  top: 0;
  left: calc(var(--hd-w) * 0.017102);            /* 20.2px in from the frame */
  height: calc(var(--hd-w) * 0.028492);          /* 33.6px */
  display: flex;
  align-items: center;
  background: var(--hd-amber);
  color: #000;
  border: calc(var(--hd-w) * 0.002542) solid #000;  /* 3px */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--hd-w) * 0.017797);       /* 21px */
  text-transform: uppercase;
  padding: 0 calc(var(--hd-w) * 0.008475);       /* 10px */
  box-sizing: border-box;
  white-space: nowrap;
}
.hd-detect-copy {
  position: absolute;
  left: calc(var(--hd-w) * 0.636754);            /* 751.4px */
  top: calc(var(--hd-w) * 0.054839);             /* 64.7px */
  width: calc(var(--hd-w) * 0.314814);           /* 371.5px */
}
/* Same as the amber band: the "Intelligent / Detection / Of Your Image /
   Quality" break is hard-coded with <br> in index.php. */
.hd-detect-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--hd-w) * 0.040678);       /* 48px */
  line-height: 0.865;                            /* 41.5px */
  text-transform: capitalize;
  margin: 0 0 calc(var(--hd-w) * 0.025424);      /* 30px */
}
.hd-detect-copy p {
  font-family: var(--font-body);
  font-weight: 600;
  color: #fff;
  font-size: calc(var(--hd-w) * 0.016381);       /* 19.33px */
  line-height: 1.366;                            /* 26.4px */
  margin: 0;
}


/* ==================================================================
   WE'VE GOT YOU COVERED (coral FAQ)
   Questions/answers are admin-managed (admin/faq.php); the markup is
   generated in index.php and driven by assets/js/faq-accordion.js.
   ================================================================== */
.home-design .hd-faq {
  background: var(--hd-coral);
  min-height: calc(var(--hd-w) * 0.455085);      /* 537px */
  /* 44px top / 48px left / 14px bottom. The bottom padding only bites once
     the admin adds more FAQs than the six the design was drawn with and the
     band outgrows its min-height - at six it stays inside the 537px and the
     "View all FAQ's" link sits in the design's own trailing space. */
  padding: calc(var(--hd-w) * 0.037288) 0 calc(var(--hd-w) * 0.011864) calc(var(--hd-w) * 0.040678);
  margin-bottom: calc(var(--hd-w) * 0.068644);   /* 81px */
  /* The tube overhangs the band's right edge by ~125px but its dark top
     end would otherwise also punch up into the purple band above, so the
     clip opens the right side only. .home-design's overflow-x:clip catches
     the tube again at the viewport edge on narrower screens, so this can
     never cause a horizontal scrollbar. */
  clip-path: inset(0 calc(var(--hd-w) * -0.105932) 0 0);
}
.hd-faq-copy { position: relative; z-index: 1; width: calc(var(--hd-w) * 0.457627); padding-bottom: 30px;} /* 540px */
/* Sentence case, unlike every other heading on the page - "We've got you
   covered" is drawn that way in Figma, so no text-transform here. It also
   runs ~17px wider than the 540px accordion column below it, which the
   design allows, hence nowrap. */
.hd-faq-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: #000;
  font-size: calc(var(--hd-w) * 0.040678);       /* 48px */
  line-height: 1;
  white-space: nowrap;
  margin: 0 0 calc(var(--hd-w) * 0.022034);      /* 26px */
}

.hd-faq-list { border-top: 1px solid #000; }
.hd-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--hd-w) * 0.016949);
  width: 100%;
  height: calc(var(--hd-w) * 0.041525);          /* 49px */
  background: none;
  border: none;
  border-bottom: 1px solid #000;
  /* Flush to the list edges - the Figma rows have no horizontal inset, the
     text starts exactly where the divider does. */
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--hd-w) * 0.016949);       /* 20px */
  color: #fff;
  text-align: left;
  cursor: pointer;
}
/* An open question loses its own bottom rule - the line under its answer
   is supplied by the "next question gets a top border" rule below, so this
   only removes the duplicate. No background tint: the Figma open state is
   flat, unlike the earlier build. */
.hd-faq-question[aria-expanded="true"] { border-bottom-color: transparent; }

/* Pure-CSS plus/minus driven off aria-expanded - faq-accordion.js only ever
   toggles that attribute and the answer's [hidden]. */
.hd-faq-icon {
  position: relative;
  width: calc(var(--hd-w) * 0.018644);           /* 22px */
  height: calc(var(--hd-w) * 0.018644);
  flex-shrink: 0;
}
.hd-faq-icon::before,
.hd-faq-icon::after {
  content: "";
  position: absolute;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hd-faq-icon::before { width: 100%; height: 2px; }
.hd-faq-icon::after  { width: 2px; height: 100%; transition: transform 0.15s ease; }
.hd-faq-question[aria-expanded="true"] .hd-faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.hd-faq-answer:not([hidden]) + .hd-faq-question { border-top: 1px solid #000; }

/* 20 + 28 + 20 = the 68px Figma leaves between an open question's rule and
   the next one's. */
.hd-faq-answer { padding: calc(var(--hd-w) * 0.016949) 0; }
.hd-faq-answer p {
  font-family: var(--font-body);
  font-weight: 400;
  color: #fff;
  font-size: calc(var(--hd-w) * 0.013559);       /* 16px */
  line-height: 1.75;                             /* 28px */
  margin: 0;
}

/* Not in the Figma frame, kept deliberately: the home accordion only ever
   shows the FAQs an admin ticked "Show on home page", so without this
   there is no route from here to the full list on faqs.php. Black, like
   the section heading, so it reads as its own action rather than as
   another accordion row. */
.hd-faq-view-all {
  display: inline-block;
  margin-top: calc(var(--hd-w) * 0.016949);      /* 20px */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--hd-w) * 0.013559);       /* 16px */
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hd-faq-view-all:hover { opacity: 0.7; }

.hd-faq-visual {
  position: absolute;
  left: calc(var(--hd-w) * 0.517797);            /* 611px */
  top: calc(var(--hd-w) * -0.065593);            /* -101px */
  width: calc(var(--hd-w) * 0.588136);           /* 694px */
  height: calc(var(--hd-w) * 0.444068);          /* 524px */
}
.hd-faq-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ==================================================================
   CLOSING CTA
   ================================================================== */
/* The 97px down to the footer is PADDING, not margin. This is the last
   thing inside .home-design, and margin sits outside the black background
   box - so as a margin it rendered as a 97px strip of the body's own white
   showing between the CTA and the footer. As padding it is inside the
   black, which is what the design shows. */
.home-design .hd-closing-cta {
  background: transparent;
  border-radius: 0;
  padding: 0 0 calc(var(--hd-w) * 0.082203);     /* 97px to the footer */
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--hd-w) * 0.031356);             /* 37px */
  flex-wrap: wrap;
}
.hd-closing-cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: #fff;
  font-size: calc(var(--hd-w) * 0.050847);       /* 60px */
  /* 45px box, so the heading never makes this band taller than its own
     48px button - matches Figma's Frame 35. */
  line-height: 0.75;
  text-transform: capitalize;
  margin: 0;
}
.hd-closing-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--hd-w) * 0.181356);           /* 214px */
  height: calc(var(--hd-w) * 0.040678);          /* 48px */
  background: var(--hd-purple);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(var(--hd-w) * 0.016949);       /* 20px */
  border-radius: 999px;
  text-decoration: none;
}
.hd-closing-cta-btn:hover { filter: brightness(1.05); }


/* ==================================================================
   BELOW 767px - THE MOBILE DESIGN
   Source: moby-posters-2024, node 3178:191, a 390px frame.

   Same geometry system as desktop, different column. Here --hd-w is the
   358px content column the mobile frame is built on (390 minus its 16px
   gutters), and every size is written as

       calc(var(--hd-w) * N / 358)

   where N is the number measured in Figma. Left as an unreduced fraction
   rather than a decimal so the design value stays readable in the rule
   itself, which is why these carry no trailing px comments.

   --hd-w tops out at 398px (a 430px viewport) instead of running all the
   way to the breakpoint. Past that the phone layout simply centres in the
   viewport rather than stretching a 390px composition across a tablet,
   which is the one width nobody has drawn.

   Three things about this design worth knowing before changing numbers:

   1. The hero is FULL BLEED. Every other band is inset - 12px for the
      coloured bands (334 wide), 15px for the upload column (328), 16px
      for the tagline and the closing CTA (358).
   2. Band gaps are not uniform - 26/40/58/20/62/30/29/25/30 down the
      page, each set on the element above it.
   3. The specificity trap from the desktop half is still live in here:
      `.home-design section` is (0,1,1) and beats a bare `.hd-x` (0,1,0),
      so every band override below is written `.home-design .hd-x`.
   ================================================================== */
@media (max-width: 767px) {

  .home-design {
    --hd-w: min(398px, calc(100vw - 32px));
    /* No top padding: the coral starts immediately under the promo banner.
       The bottom padding is the 26px down to the footer, and it has to be
       padding - as margin it would sit outside the black background and
       render as a strip of the body's white. */
    padding: 0 0 calc(var(--hd-w) * 26 / 358);
  }
  /* The container is the full-bleed width: --hd-w plus the two 16px
     gutters the inset bands sit inside. */
  .home-design .hd-container { max-width: calc(var(--hd-w) + 32px); margin: 0 auto; }

  .hd-mobile-only { display: inline; }
  .hd-desktop-only { display: none; }

  /* Neutral base - each band re-states what it actually needs below. */
  .home-design section {
    border-radius: 0;
    margin: 0;
    padding: 0;
    min-height: 0;
    overflow: visible;
    clip-path: none;
  }


  /* ---------------- HERO ---------------- */
  /* The section itself becomes a plain wrapper; the coral moves to
     .hd-hero-bg so that .hd-hero-sub, which follows it, lands on the page
     black instead of inside the coral. */
  .home-design .hd-hero {
    background: none;
    padding: 0;
    border-radius: 0;
    clip-path: none;
    margin: 0 0 calc(var(--hd-w) * 40 / 358);
  }
  /* The coral is the one thing on this page that ignores the content
     column: it runs edge to edge of the viewport at every width, while the
     composition inside it stays capped at --hd-w and centred. Stretching a
     390px-drawn hero across an 800px tablet would look worse than not.

     Hence the background lives on a pseudo-element rather than on the box.
     The box itself keeps the capped width, so the absolutely positioned
     bubble / badge / art go on resolving against it and stay exactly where
     the design puts them; only the paint escapes.

     -1000px instead of 100vw: vw includes the scrollbar gutter, which would
     drag the whole band a few px left in a desktop browser. .home-design
     already sets overflow-x: clip, so the overshoot can never reach a
     scrollbar - the same mechanism the desktop FAQ tube bleeds through.
     No overflow:hidden here any more, for the obvious reason that it would
     clip the bleed straight back off again. */
  .hd-hero-bg {
    display: block;
    position: relative;
    width: 100%;
    height: calc(var(--hd-w) * 369 / 358);
  }
  .hd-hero-bg::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1000px;
    right: -1000px;
    background: var(--hd-coral);
  }

  /* A plain rounded rectangle here, not the desktop speech-bubble vector -
     the mobile frame draws it without the tail or the detached blob. */
  .hd-hero-bubble {
    position: absolute;
    left: calc(var(--hd-w) * 16 / 358);
    top: calc(var(--hd-w) * 17 / 358);
    width: calc(var(--hd-w) * 179.7 / 358);
    height: calc(var(--hd-w) * 292 / 358);
    margin: 0;
    padding: 0 0 0 calc(var(--hd-w) * 23 / 358);
    background: var(--hd-ink);
    border-radius: calc(var(--hd-w) * 22 / 358);
    aspect-ratio: auto;
    display: flex;
    align-items: center;
  }
  /* Seven lines, one word each. Not forced with <br>s: at 35px in a 142px
     box every one of these words is wider than half the box, so normal
     wrapping puts each on its own line and keeps doing so as the column
     scales. The desktop <br>s are released for exactly that reason. */
  .hd-hero-bubble h1 {
    width: calc(var(--hd-w) * 142 / 358);
    font-size: calc(var(--hd-w) * 35 / 358);
    line-height: 1.016;                            /* 35.5px at 35px */
    white-space: normal;
  }
  .hd-hero-bubble h1 br { display: none; }

  /* Straight, not rotated, and left-aligned under the bubble. */
  .hd-free-delivery {
    left: calc(var(--hd-w) * 16 / 358);
    top: calc(var(--hd-w) * 316 / 358);
    height: calc(var(--hd-w) * 34 / 358);
    line-height: calc(var(--hd-w) * 34 / 358);
    /* 3px, not the design's 10: Chrome sets the rocket wider than Figma
       does and it carries its own trailing sidebearing, so an honest 10
       here runs the pill 8px past where the design ends it. */
    padding: 0 calc(var(--hd-w) * 3 / 358) 0 calc(var(--hd-w) * 17 / 358);
    font-size: calc(var(--hd-w) * 16 / 358);
    transform: none;
    padding-right: 10px;
  }

  /* home_hero_mobile.png is the mobile group exported flat (432x738 for a
     216x369 slot). It runs the full height of the band, top to bottom. */
  .hd-hero-visual {
    left: calc(var(--hd-w) * 165 / 358);
    top: 0;
    right: auto;
    bottom: auto;
    width: calc(var(--hd-w) * 216 / 358);
  }

  /* Out of the coral, centred, and sky blue rather than white. */
  .hd-hero-sub {
    position: static;
    width: calc(var(--hd-w) * 328 / 358);
    margin: calc(var(--hd-w) * 26 / 358) auto 0;
    text-align: center;
    color: var(--hd-sky);
    font-size: 16px;
    line-height: 1.375;                            /* 22px */
  }
  /* Figma has this as one text node with paragraph spacing, which is what
     the 5px is; the three <p>s reproduce it. */
  .hd-hero-sub p { white-space: normal; margin: 0 0 5px; }
  .hd-hero-sub p:last-child { margin-bottom: 0; }


  /* ---------------- THREE-STEP ROW (mobile only) ---------------- */
  .hd-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: calc(var(--hd-w) * 327 / 358);
    margin: 0 auto calc(var(--hd-w) * 58 / 358);
  }
  /* Fixed 84px columns rather than equal thirds: the design spaces the three
     circle centres 121px apart, which only falls out if the columns keep
     their own width and space-between hands the slack to the two chevrons. */
  .hd-step { flex: 0 0 calc(var(--hd-w) * 84 / 358); min-width: 0; text-align: center; }
  .hd-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--hd-w) * 28 / 358);
    height: calc(var(--hd-w) * 28 / 358);
    margin: 0 auto calc(var(--hd-w) * 10 / 358);
    border-radius: 50%;
    background: var(--hd-amber);
    color: #000;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: calc(var(--hd-w) * 15 / 358);
    line-height: 1;
  }
  /* Two lines by design ("Upload your / files"), left to wrap into the
     column rather than broken by hand. */
  .hd-step-label {
    display: block;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.214;                            /* 17px */
  }
  .hd-step-arrow {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: calc(var(--hd-w) * 10 / 358);
    width: calc(var(--hd-w) * 7 / 358);
    height: calc(var(--hd-w) * 7 / 358);
    border-top: 2px solid #8DB7D5;
    border-right: 2px solid #8DB7D5;
    transform: rotate(45deg);
  }


  /* ---------------- GET STARTED / UPLOAD ---------------- */
  .home-design .hd-get-started {
    padding: 0;
    margin: 0 0 calc(var(--hd-w) * 62 / 358);
  }
  .hd-get-started h2 {
    font-size: calc(var(--hd-w) * 34 / 358);
    line-height: 1.206;                            /* 41px */
    margin: 0 0 calc(var(--hd-w) * 20 / 358);
  }
  /* "Get Started" over "Upload Your Image", no dash. The separator has to
     be hidden at MORE specificity than the rule above it, not less: a bare
     `.hd-h2-sep` is (0,1,0) and loses to `.hd-get-started h2 > span`
     (0,1,2), which would leave the dash as a third line of its own. */
  .hd-get-started h2 > span { display: block; }
  .hd-get-started h2 > .hd-h2-sep { display: none; }

  /* Mobile has no QR column, no OR badge and no column labels - just the
     dropzone, full width. The QR widgets stay in the DOM (upload-page.js
     writes into #qr-frame / #qr-status unconditionally), they are only
     hidden. */
  .hd-upload-col--mobile,
  .hd-upload-divider,
  .hd-upload-col-label { display: none; }
  .home-design .hd-upload-row { display: block; }
  .hd-upload-col--computer {
    width: calc(var(--hd-w) * 328 / 358);
    margin: 0 auto;
  }
  /* style.css already swaps these two, but only below 640px - this page's
     breakpoint is 767, so the 640-767 band needs them swapped here too.
     Two classes beat style.css's one, in both directions. */
  .home-design .upload-desktop-only { display: none; }
  .home-design .upload-mobile-only { display: block; }

  .home-design .upload-dropzone {
    height: calc(var(--hd-w) * 234 / 358);
    min-height: 0;
    padding: 0;
    border-radius: calc(var(--hd-w) * 24 / 358);
  }
  .home-design .upload-icon-circle {
    width: calc(var(--hd-w) * 56 / 358);
    height: calc(var(--hd-w) * 56 / 358);
    margin-bottom: calc(var(--hd-w) * 20 / 358);
  }
  /* The one place the mobile frame departs from style.css's dropzone: this
     line is set in the body face here, not the display one. */
  .home-design .upload-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 19px;
  }
  /* Capped to the design's own 250px measure, not left to fill the 328px
     card - that is what puts "your gallery" alone on the second line. */
  .home-design .upload-sub {
    font-size: 14.5px;
    line-height: 1.38;
    /* style.css pads this 12px each side below 640, which would eat into
       the 250px measure and wrap it a word early. */
    padding: 0;
    max-width: calc(var(--hd-w) * 250 / 358);
    margin-left: auto;
    margin-right: auto;
  }


  /* ---------------- TAGLINE ---------------- */
  .hd-usp-line {
    width: var(--hd-w);
    margin: 0 auto calc(var(--hd-w) * 30 / 358);
    padding: 0;
    font-size: calc(var(--hd-w) * 17.7 / 358);
    line-height: 1.243;                            /* 22px */
  }


  /* ---------------- COLOURED BANDS ---------------- */
  .home-design .hd-quality,
  .home-design .hd-detect,
  .home-design .hd-faq {
    width: calc(var(--hd-w) * 334 / 358);
    margin-left: auto;
    margin-right: auto;
    border-radius: calc(var(--hd-w) * 20 / 358);
  }
  /* All three headings centre and stack, so the desktop <br>s go. The
     space after each one in index.php is what stops the words joining. */
  .hd-quality-copy h2 br,
  .hd-detect-copy h2 br { display: none; }
  .hd-quality-copy h2,
  .hd-detect-copy h2,
  .hd-faq-copy h2 {
    font-size: calc(var(--hd-w) * 28 / 358);
    line-height: 1.071;                            /* 30px */
  }

  /* SUPER HIGH QUALITY (amber)
     No min-height on any of the three bands down here, unlike desktop: the
     art is in normal flow on mobile (see .hd-quality-visual), so each band
     is exactly as tall as its own content. That is what stops a 320px
     screen - where this copy takes a fourth line - from running the text
     underneath the printer. */
  .home-design .hd-quality {
    padding: calc(var(--hd-w) * 30 / 358) 0 calc(var(--hd-w) * 22 / 358);
    margin-bottom: calc(var(--hd-w) * 29 / 358);
    overflow: visible;
  }
  /* 300, not the design's 293: the webfont sets the longest line at 294 and
     would wrap "printing," down a line, changing all three breaks. Centred
     either way, so the extra 7px is invisible. */
  .hd-quality-copy {
    position: static;
    width: calc(var(--hd-w) * 300 / 358);
    margin: 0 auto;
    text-align: center;
  }
  .hd-quality-copy h2 { margin: 0 0 calc(var(--hd-w) * 19 / 358); }
  .hd-quality-copy p { font-size: 16px; line-height: 1.417; }
  /* Still overhangs, but sideways only now: 18px past the band's right
     edge, and clear of its bottom. */
  /* In flow, directly under the copy, rather than pinned at a fixed offset
     from the band's top - so it can never end up on top of the paragraph
     when that reflows to an extra line. It is 340 wide inside a 334 band
     and sits 12 in from the left, which is what produces the design's 18px
     overhang past the right edge. The negative bottom margin is the
     transparent tail the source PNG carries under the printer's feet; the
     design does not count it as part of the band. */
  .hd-quality-visual {
    position: static;
    left: auto;
    top: auto;
    width: calc(var(--hd-w) * 340 / 358);
    margin: 0 0 calc(var(--hd-w) * -28 / 358) calc(var(--hd-w) * 12 / 358);
  }

  /* INTELLIGENT DETECTION (purple) */
  /* index.php has the two photos BEFORE the copy, because on desktop both
     are absolutely positioned and DOM order is irrelevant. Here they are
     both in flow, so the order has to be stated - copy on top, photos
     under it. */
  .home-design .hd-detect {
    display: flex;
    flex-direction: column;
    padding: calc(var(--hd-w) * 30 / 358) 0;
    margin-bottom: calc(var(--hd-w) * 25 / 358);
    overflow: hidden;
  }
  .hd-detect-copy { order: 1; }
  .hd-detect-images { order: 2; }
  .hd-detect-copy {
    position: static;
    left: auto;
    top: auto;
    width: calc(var(--hd-w) * 310 / 358);
    margin: 0 auto;
    text-align: center;
  }
  .hd-detect-copy h2 { margin: 0 0 calc(var(--hd-w) * 15 / 358); }
  .hd-detect-copy p { font-size: 16px; line-height: 1.408; }

  /* The two photos sit side by side sharing one 3px rule, and the tags are
     now full-width bars inside each frame rather than small overhanging
     pills - top of the left one, bottom of the right one. */
  .hd-detect-images {
    position: static;
    left: auto;
    top: auto;
    display: flex;
    justify-content: center;
    gap: 0;
    width: calc(var(--hd-w) * 283 / 358);
    margin: calc(var(--hd-w) * 19 / 358) auto 0;
  }
  .hd-detect-image-wrap {
    position: relative;
    width: calc(var(--hd-w) * 143 / 358);
    padding-top: 0;
    border: calc(var(--hd-w) * 3 / 358) solid #000;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  /* Reversed so the tag renders below the photo, and pulled left by the
     border width so the two frames share one rule instead of showing a
     6px double line. */
  .hd-detect-image-wrap:last-child {
    flex-direction: column-reverse;
    margin-left: calc(var(--hd-w) * -3 / 358);
  }
  .hd-detect-tag {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: calc(var(--hd-w) * 26 / 358);
    border: none;
    border-bottom: calc(var(--hd-w) * 3 / 358) solid #000;
    justify-content: center;
    padding: 0;
    font-size: calc(var(--hd-w) * 22 / 358);
    line-height: 1;
  }
  .hd-detect-image-wrap:last-child .hd-detect-tag {
    border-bottom: none;
    border-top: calc(var(--hd-w) * 3 / 358) solid #000;
  }
  .hd-detect-image-wrap img {
    height: calc(var(--hd-w) * 196 / 358);
    border: none;
  }

  /* WE'VE GOT YOU COVERED (coral FAQ) */
  /* No min-height here either, and for a second reason on top of reflow:
     the accordion is admin-managed, so the number of rows is not fixed.
     Height follows the content and the tube follows the height. */
  .home-design .hd-faq {
    padding: calc(var(--hd-w) * 30 / 358);
    margin-bottom: calc(var(--hd-w) * 30 / 358);
    /* The tube hangs ~89px below the band now instead of off its right
       edge, so the desktop right-only clip is released entirely. */
    overflow: visible;
    clip-path: none;
  }
  .hd-faq-copy { position: static; width: 100%; padding-bottom: 0;}
  /* Title case on mobile, unlike the desktop frame's sentence case. */
  .hd-faq-copy h2 {
    text-align: center;
    text-transform: capitalize;
    white-space: normal;
    margin: 0 0 calc(var(--hd-w) * 20 / 358);
  }
  .hd-faq-question {
    height: auto;
    /* The desktop gap is a ratio of 1180 and collapses to ~6px here, which
       leaves the question 212px wide instead of the design's 195 and wraps
       it a word late. */
    gap: calc(var(--hd-w) * 24 / 358);
    padding: calc(var(--hd-w) * 14 / 358) calc(var(--hd-w) * 16 / 358);
    font-size: 16px;
    line-height: 1.188;                            /* 19px */
  }
  /* Mobile tints the open row; the desktop frame leaves it flat. */
  .home-design .hd-faq-question[aria-expanded="true"] { background: rgba(0, 0, 0, 0.07); }
  .hd-faq-icon {
    width: calc(var(--hd-w) * 24 / 358);
    height: calc(var(--hd-w) * 24 / 358);
  }
  .hd-faq-answer {
    padding: calc(var(--hd-w) * 14 / 358) calc(var(--hd-w) * 16 / 358) calc(var(--hd-w) * 20 / 358);
  }
  .hd-faq-answer p { font-size: 16px; line-height: 1.5; }
  .hd-faq-view-all {
    margin-top: calc(var(--hd-w) * 21 / 358);
    font-size: 14px;
  }
  /* In flow after the accordion, like the printer above - so however many
     FAQs the admin publishes, the tube stays pinned to the end of the list
     instead of landing in the middle of it. The two negative margins are
     the two overlaps the design draws: 17px back up over the "View all"
     link, and 119px of tube hanging below the band's bottom edge. The side
     margins cancel the band's own 30px padding so it spans the full width. */
  .hd-faq-visual {
    position: static;
    left: auto;
    top: auto;
    width: calc(var(--hd-w) * 334 / 358);
    height: auto;
    margin: calc(var(--hd-w) * -17 / 358)
            calc(var(--hd-w) * -30 / 358)
            calc(var(--hd-w) * -119 / 358);
  }
  .hd-faq-visual picture { height: auto; }
  .hd-faq-visual img { height: auto; object-fit: fill; }


  /* ---------------- CLOSING CTA ---------------- */
  /* Stacked here, not a row: heading over button, both centred. */
  .home-design .hd-closing-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--hd-w) * 10 / 358);
    width: var(--hd-w);
    margin: 0 auto;
    padding: calc(var(--hd-w) * 40 / 358) 0;
  }
  .hd-closing-cta h2 {
    font-size: calc(var(--hd-w) * 32 / 358);
    line-height: 1.188;                            /* 38px */
  }
  .hd-closing-cta-btn {
    width: calc(var(--hd-w) * 170 / 358);
    height: calc(var(--hd-w) * 43 / 358);
    font-size: 16px;
  }


  /* ---------------- STICKY CTA ---------------- */
  /* Figma node 3215:764. Fixed px rather than the --hd-w system the rest of
     this block uses: it is chrome pinned to the viewport, not part of the
     390px composition, so it should not grow with the content column.

     right:93px rather than width:277px. The mock draws it 277 wide at 390,
     which is the same thing there (390-20-277 = 93) - but stated as a right
     offset it keeps that gap on every screen size instead of running under
     the chat bubble at 320. */
  .hd-sticky-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 20px;
    right: 93px;
    bottom: 19px;
    height: 56px;
    /* Above the page, below .modal-overlay (z-index 100 in style.css). */
    z-index: 90;
    background: #2563EB;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border-radius: 999px;
    /* visibility is transitioned at 0s so it flips instantly when showing;
       the .is-hidden rule below delays it instead, so the button stays
       visible for the length of the fade on the way out. */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }
  .hd-sticky-cta:hover { filter: brightness(1.05); }

  /* Toggled by home-sticky-cta.js while the upload block is on screen -
     the button has nothing to offer at that point and would just sit on
     top of the dropzone it was there to reach.
     visibility, not opacity alone: a 0-opacity link is still in the tab
     order, so a keyboard user would otherwise focus a button they cannot
     see. pointer-events guards the same thing for touch. */
  .hd-sticky-cta.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  /* The scroll itself. scroll-behavior only does anything on the scrolling
     element, so this is the one rule in this file that is not scoped under
     .home-design - it cannot be. It stays homepage-only because this
     stylesheet is only ever loaded by index.php.
     scroll-margin-top is the "little gap above the 1>2>3 row" - the anchor
     stops 20px short of the element rather than jamming it against the top
     edge. */
  html { scroll-behavior: smooth; }
  #hd-upload-start { scroll-margin-top: 20px; }
}

/* Anyone who has asked their OS not to animate gets the same jump without
   the travel. Kept outside the width media query on purpose: the
   preference applies whatever the viewport is doing. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The sticky CTA still hides and shows, it just stops sliding to do it. */
  .hd-sticky-cta { transition: none; }
  .hd-sticky-cta.is-hidden { transform: none; transition: none; }
}