/* ==========================================================================
   PODRONES /PODELIVER — MARKETING LANDING, SCOPED STYLES
   --------------------------------------------------------------------------
   The only stylesheet for /podeliver/index.php.

   Source of truth:
     • Podeliver Claude Design Brief v1.0 (/docs/nanohub/Podeliver_Claude_Design_Brief_v1.md)
       — appearance wins here.
     • Podeliver Claude Coding Brief v1.0 (/docs/nanohub/Podeliver_Claude_Coding_Brief.md)
       — behaviour and file layout win here (§3 names this file, §4 sets its rules).

   The page was authored as a Claude Design artifact (<x-dc>, DCLogic,
   {{ }} bindings, <image-slot>), whose runtime is NOT part of this site.
   As with /nanohub/assets/nanohub-home.css, the artifact has been
   re-expressed as plain HTML + this stylesheet so it renders inside the
   STANDARD Podrones site chrome (headerphp / headermain / headerbody +
   podronesfooter). The artifact's own <header> and <footer> are dropped —
   the shared chrome supplies both (Coding Brief §3, §6).

   RULES THIS FILE OBEYS (Coding Brief §4)
     1. No Bootstrap, no framework, no build step. Hand-written CSS only.
     2. Everything is scoped under `.po-page` so the cool-paper look never
        leaks into — nor is clobbered by — the shared site CSS
        (css/style.css, css/podrones.css, css/responsive.css).
     3. No colour literal appears below :root. If you need a new colour,
        add a token. The three non-blue brand colours (green #1B9F4A,
        red #A82828, gold #D89E1F) belong to the logo and appear NOWHERE
        in this file.
     4. Layout is CSS Grid + Flexbox, mobile-first, one breakpoint at
        768px (the artifact shipped its collapse at 860px, which is kept
        below because the nav-free page reflows there, not at 768).

   THE ONE DELIBERATE EXCEPTION to the scoping rule is the page background
   (`--po-bg` applied to <body> and to the shared site `#header`). This
   stylesheet is only ever linked from /podeliver/index.php, so those two
   global rules cannot reach any other page — the same trade-off /nanohub
   and /d2c already make with their own paper tones.
   ========================================================================== */


/* --------------------------------------------------------------------------
   PALETTE — Coding Brief §4. Every value in the design brief has exactly
   one home. Declared on :root (not .po-page) because <body> and the shared
   site header both need to read the background pair.
   -------------------------------------------------------------------------- */
:root {
  --po-bg:        #F2F6FA;  /* cool paper — the page background and the
                               product's visual signature. NOT a section
                               band, NOT an accent: the whole page. */
  --po-card:      #FFFFFF;  /* cards sit ON the tint — this inversion is
                               what makes the page read as distinct */
  --po-ink:       #0A0A0A;
  --po-ink-2:     #555555;  /* 6.4:1 on --po-bg — clears the 4.5:1 floor
                               required by Coding Brief §10 */
  --po-border:    #DFE7EE;  /* cool-native border; never reuse the warm
                               greys from /nanohub or /d2c */
  --po-accent:    #0F6BAE;  /* Podrones blue — the only accent */
  --po-accent-lt: #5BAEEA;  /* used ONLY on the dark band */
  --po-dark:      #0A0A0A;  /* the Delivery Partner band */

  /* ---- Supporting tokens (artifact values, tokenised per §4 rule 3) ---- */
  --po-ink-3:     #2B2B2B;  /* the single long problem paragraph */
  --po-ink-4:     #4A4A4A;  /* card and benefit body copy */
  --po-ink-5:     #777777;  /* image-slot caption */
  --po-accent-d:  #0A4E86;  /* link hover */

  /* ---- On the dark band ---- */
  --po-on-dark:   #FFFFFF;
  --po-on-dark-2: rgba(255, 255, 255, 0.72);  /* dark-band sub copy */
  --po-on-dark-3: #EDEDED;                    /* dark-band benefit lines */
  --po-on-dark-4: rgba(255, 255, 255, 0.14);  /* dark-band hairline */

  /* ---- Type stacks ----------------------------------------------------
     Satoshi (Indian Type Foundry) is the design brief's body face but is
     not on Google Fonts and is not self-hosted on this site; Inter loads
     as the sans and Satoshi stays FIRST in the stack as progressive
     enhancement, exactly as /nanohub does. See the note in index.php —
     this is a known deviation from Coding Brief §5.
     --------------------------------------------------------------------- */
  --po-sans:  'Satoshi', 'Inter', system-ui, sans-serif;
  --po-serif: 'Fraunces', Georgia, serif;

  /* ---- Rhythm ---- */
  --po-gutter: clamp(20px, 5vw, 32px);   /* the one horizontal page inset */
  --po-measure: 1100px;                  /* the one content column width */
}


/* --------------------------------------------------------------------------
   PAGE SURFACE
   The site theme paints EVERY <section> white (css/style.css:121
   `section { background-color: #ffffff }`), and that rule beats the <body>
   background — without the override below the cool paper would only show
   through the header strip.
   -------------------------------------------------------------------------- */
body { background: var(--po-bg); }

/* Tint the shared site header so it reads as part of the page rather than
   as a detached white strip above it. !important is required because the
   theme's sticky/scroll class swaps re-assert their own background on
   #header and .header-inner as the user scrolls. */
#header,
#header .header-inner {
  background-color: var(--po-bg) !important;
}

.po-page {
  font-family: var(--po-sans);
  color: var(--po-ink);
  overflow-x: hidden;
}

/* Cool paper is the default for every band; the two white bands and the
   one dark band opt in explicitly below. */
.po-page > section        { background-color: var(--po-bg); }
.po-page > section.po-band-white { background-color: var(--po-card); }
.po-page > section.po-band-dark  { background-color: var(--po-dark); }


/* --------------------------------------------------------------------------
   LINKS — scoped replacement for the artifact's global `a {}` rule, which
   would otherwise have repainted every link in the shared header and footer.
   -------------------------------------------------------------------------- */
.po-page a         { color: var(--po-accent); text-decoration: none; }
.po-page a:hover   { color: var(--po-accent-d); }

/* Visible focus on every interactive element (Coding Brief §10). Outlines
   are never removed — they are made deliberate. */
.po-page a:focus-visible {
  outline: 2px solid var(--po-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.po-page .po-band-dark a:focus-visible {
  outline-color: var(--po-accent-lt);
}


/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.po-page .po-wrap {
  max-width: var(--po-measure);
  margin: 0 auto;
  padding: 0 var(--po-gutter);
}
.po-page .po-wrap--narrow { max-width: 820px; }
.po-page .po-wrap--split  { max-width: 1000px; }

/* Vertical rhythm. `.po-section` is the default 56px band; the two
   modifiers carry the artifact's tighter and looser bands. */
.po-page .po-section       { padding: 56px 0; }
.po-page .po-section--hero { padding: 56px 0 44px; }
.po-page .po-section--tight{ padding: 44px 0; }
.po-page .po-section--s6   { padding: 52px 0; }
.po-page .po-section--cta  { padding: 64px 0; text-align: center; }

/* The two white bands are ruled top and bottom so they read as inset
   panels on the tint rather than as the page turning white. */
.po-page .po-band-white {
  border-top: 1px solid var(--po-border);
  border-bottom: 1px solid var(--po-border);
}


/* --------------------------------------------------------------------------
   TYPOGRAPHY
   Sizes are the artifact's clamp() pairs verbatim — they are the fluid
   scale between the 380px and 1440px reference views in the design brief.
   -------------------------------------------------------------------------- */
.po-page .po-h1 {
  font-family: var(--po-serif);
  font-weight: 400;
  font-size: clamp(29px, 5.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 780px;
  color: var(--po-ink);
}
.po-page .po-h2 {
  font-family: var(--po-serif);
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.016em;
  margin: 0 0 16px;
  color: var(--po-ink);
}
/* Section 6's H2 sits in a narrower column, so it steps down a size. */
.po-page .po-h2--s6 { font-size: clamp(23px, 3.4vw, 29px); }
/* An H2 followed by a sub-line gives up most of its bottom margin. */
.po-page .po-h2--withsub { margin-bottom: 10px; }

.po-page .po-h3 {
  font-family: var(--po-serif);
  font-weight: 500;
  font-size: clamp(17px, 2.1vw, 19px);
  margin: 0 0 8px;
  color: var(--po-ink);
}
.po-page .po-h3--dark {
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--po-on-dark);
}

/* Hero standfirst. */
.po-page .po-lead {
  font-size: clamp(14.5px, 2vw, 17px);
  color: var(--po-ink-2);
  line-height: 1.5;
  max-width: 540px;
  margin: 0 0 28px;
}
/* Section sub-line under an H2. */
.po-page .po-sub {
  font-size: clamp(14px, 1.9vw, 15.5px);
  color: var(--po-ink-2);
  line-height: 1.5;
  max-width: 600px;
  margin: 0 0 32px;
}
.po-page .po-sub--short { max-width: 560px; }
/* The one long paragraph in Section 2 — darker ink, wider measure. */
.po-page .po-body {
  font-size: clamp(14px, 1.9vw, 15.5px);
  color: var(--po-ink-3);
  line-height: 1.55;
  max-width: 740px;
  margin: 0;
}
/* Card / benefit body copy. */
.po-page .po-card-body {
  font-size: clamp(13px, 1.7vw, 13.5px);
  color: var(--po-ink-4);
  line-height: 1.5;
  margin: 0;
}
/* Section 6's three standalone lines. */
.po-page .po-note {
  font-size: clamp(13.5px, 1.8vw, 14.5px);
  color: var(--po-ink-4);
  line-height: 1.5;
  margin: 0;
}


/* --------------------------------------------------------------------------
   SECTION 3 — "Three steps. One neighborhood."
   White step-cards on the tint; numerals 01–03 in accent blue.
   -------------------------------------------------------------------------- */
.po-page .po-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}
.po-page .po-step {
  background: var(--po-card);
  border: 0.5px solid var(--po-border);
  border-radius: 8px;
  padding: 26px 24px;
}
.po-page .po-num {
  font-family: var(--po-serif);
  font-weight: 500;
  font-size: 13px;
  color: var(--po-accent);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

/* The slim horizontal flow diagram (design brief, Section 3 "optional flow
   diagram"): consolidated drop → dispatch hub → doorstep. Inline SVG so it
   costs no request and scales with the column. */
.po-page .po-flow { display: flex; justify-content: center; }
.po-page .po-flow svg { max-width: 640px; height: auto; }
.po-page .po-flow .po-flow-line   { stroke: var(--po-accent); stroke-width: 1.2; }
.po-page .po-flow .po-flow-node   { fill: var(--po-card); stroke: var(--po-accent); stroke-width: 1.6; }
.po-page .po-flow .po-flow-label  { fill: var(--po-ink-2); font-family: var(--po-sans); font-size: 12px; }


/* --------------------------------------------------------------------------
   SECTION 4 — "What brands get". 2×2 on desktop.
   These cards invert: tinted fill on the white band, so they read as
   panels rather than as holes in the page.
   -------------------------------------------------------------------------- */
.po-page .po-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.po-page .po-outcome {
  background: var(--po-bg);
  border: 0.5px solid var(--po-border);
  border-radius: 8px;
  padding: 24px 22px;
}

/* --------------------------------------------------------------------------
   SECTION 6a — "Everything you can do, in one place."
   Added 2026-08-03 (founder request). The customer directory: every
   customer-facing surface on the site as a tile, shown to signed-out
   visitors too — a locked door they can see is a reason to sign up.

   The tiles reuse the Section 4 inversion (tinted fill on the white band)
   so this reads as an existing part of the page, not a bolted-on index.
   -------------------------------------------------------------------------- */
.po-page .po-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.po-page .po-tool {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--po-bg);
  border: 0.5px solid var(--po-border);
  border-radius: 8px;
  padding: 20px 18px;
  /* The whole tile is the link, so it must not inherit the accent-blue link
     colour — the label and blurb carry their own ink, as on the other cards. */
  color: var(--po-ink);
}
.po-page .po-tool:hover {
  border-color: var(--po-accent);
  color: var(--po-ink);
}
.po-page .po-tool__label {
  font-family: var(--po-serif);
  font-weight: 500;
  font-size: clamp(16px, 2vw, 17.5px);
  line-height: 1.25;
  color: var(--po-ink);
}
/* The "Sign in" hint. A statement of fact, not a barrier: the tile is still
   clickable, and the destination's own guard returns the visitor here. */
.po-page .po-tool__lock {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 7px;
  border: 0.5px solid var(--po-border);
  border-radius: 999px;
  background: var(--po-card);
  font-family: var(--po-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--po-ink-2);
}
.po-page .po-tool__blurb {
  font-size: clamp(13px, 1.7vw, 13.5px);
  color: var(--po-ink-4);
  line-height: 1.5;
}
/* Pushed to the bottom edge so the affordance lines up across a ragged row. */
.po-page .po-tool__go {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--po-accent);
}
.po-page .po-tool:hover .po-tool__go { color: var(--po-accent-d); }

.po-page .po-tools-foot { margin-top: 22px; }


/* The brand routing link — a LINK, not a button (Coding Brief §6, §7). */
.po-page .po-textlink {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--po-accent);
}
.po-page .po-textlink--dark {
  font-size: 14px;
  color: var(--po-accent-lt);
}
.po-page .po-textlink--dark:hover { color: var(--po-on-dark); }


/* --------------------------------------------------------------------------
   SECTION 6 — "What customers notice". Copy left, small image right.
   -------------------------------------------------------------------------- */
.po-page .po-s6-row {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}
.po-page .po-s6-copy { max-width: 500px; }
.po-page .po-s6-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* --------------------------------------------------------------------------
   SECTION 7 — the dark band. Two equal columns, one primary button each.
   The equality of the two buttons is a DECISION, not an oversight
   (design brief "What NOT to include" #10) — do not make either larger,
   darker, or louder during maintenance.
   -------------------------------------------------------------------------- */
.po-page .po-cta-head { margin: 0 auto 44px; }
.po-page .po-cta-head .po-h2  { color: var(--po-on-dark); margin-bottom: 12px; }
.po-page .po-cta-head .po-sub { color: var(--po-on-dark-2); max-width: none; margin: 0; }

.po-page .po-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  text-align: left;
  margin: 0 auto;
}
.po-page .po-split__col { padding: 36px 40px; }
.po-page .po-split__col + .po-split__col { border-left: 1px solid var(--po-on-dark-4); }

.po-page .po-split__intro {
  font-size: 14px;
  color: var(--po-on-dark-2);
  line-height: 1.5;
  margin: 0 0 18px;
}
.po-page .po-benefits {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.po-page .po-benefit {
  border-left: 2px solid var(--po-accent-lt);
  padding-left: 14px;
  font-size: 14px;
  color: var(--po-on-dark-3);
  line-height: 1.5;
}

/* The two primary buttons — identical size, weight, padding and colour. */
.po-page .po-btn {
  display: inline-block;
  background: var(--po-accent-lt);
  color: var(--po-dark);
  border-radius: 6px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.po-page .po-btn:hover { background: var(--po-on-dark); color: var(--po-dark); }

/* Light-band variant. The button above is painted for the dark CTA band —
   pale blue on near-black — and inverts to unreadable on the cool paper.
   This variant swaps to solid Podrones blue with white text (7.0:1 on
   --po-accent, clearing the 4.5:1 floor of Coding Brief §10) for the
   Section 6 Address Page call-to-action. */
.po-page .po-btn--light {
  background: var(--po-accent);
  color: var(--po-on-dark);
}
.po-page .po-btn--light:hover {
  background: var(--po-accent-d);
  color: var(--po-on-dark);
}
/* Section 6's CTA follows the three standalone lines, which are a flex
   column with no trailing margin of their own. */
.po-page .po-s6-cta { margin-top: 20px; }

/* Holds the column's button(s). A column carries one button for a signed-out
   visitor and can carry two once a customer is signed in (booking CTA plus
   their dashboard), so the row wraps rather than overflowing the column, and
   the gap survives the mobile rule below that turns .po-btn into a block. */
.po-page .po-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.po-page .po-cta-foot { margin: 32px auto 0; }


/* --------------------------------------------------------------------------
   IMAGERY (Coding Brief §8)
   Real photography lives in <site root>/images/podeliver/ and is served as
   WebP with a JPEG fallback. Until those files are dropped in, index.php
   renders `.po-slot` instead — a captioned tile at the SAME dimensions, so
   swapping in the photograph shifts nothing.
   -------------------------------------------------------------------------- */
.po-page .po-media {
  display: block;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}
/* Hero box carries the artwork's own 1600×620 (2.58:1) shape: width:100%
   from .po-media, height derived by aspect-ratio, so the photograph renders
   at its natural proportions with no cover-crop and no layout shift. The
   content column caps at ~1036px, so the box tops out around 401px tall. */
.po-page .po-media--hero { aspect-ratio: 1600 / 620; height: auto; }
/* Section-6 supporting image: fixed 280px wide on desktop, height derived
   from the artwork's 1200×520 (2.31:1) shape; goes full-width on mobile
   (see the 860px block below) where aspect-ratio keeps it uncropped. */
.po-page .po-media--s6 {
  width: 280px;
  aspect-ratio: 1200 / 520;
  height: auto;
  flex-shrink: 0;
}

/* The slot takes the SAME size class as the image it stands in for, so the
   two occupy identical space at every breakpoint. border-box keeps the
   padding inside that height instead of adding to it. */
.po-page .po-slot {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  border: 1px solid var(--po-border);
  border-radius: 10px;
  background: repeating-linear-gradient(
      -45deg,
      var(--po-card), var(--po-card) 12px,
      var(--po-bg),   var(--po-bg)   24px);
  color: var(--po-ink-5);
  font-size: 12.5px;
  line-height: 1.5;
}
.po-page .po-slot span { max-width: 80%; font-weight: 500; }


/* ==========================================================================
   RESPONSIVE — one collapse point. The artifact reflows at 860px because
   the 3-up step grid and the split CTA both run out of room there, well
   before the 768px tablet line.
   ========================================================================== */
@media (max-width: 860px) {
  .po-page .po-grid-3,
  .po-page .po-grid-2 { grid-template-columns: 1fr; }

  /* The flow diagram restates the three step-cards, which are now stacked
     directly above it — it adds nothing on a phone and costs vertical room. */
  .po-page .po-flow { display: none; }

  /* The directory drops to two tiles across here, and to one below 560px
     (the second step is further down) — nine tiles in a single column is a
     lot of scrolling on a tablet-width screen. */
  .po-page .po-tools { grid-template-columns: repeat(2, 1fr); }

  .po-page .po-s6-row { flex-direction: column; }
  .po-page .po-s6-copy { max-width: none; }
  .po-page .po-media--s6,
  .po-page .po-slot.po-media--s6 { width: 100%; }

  /* The split becomes two stacked panels; the vertical hairline between
     the columns becomes a horizontal one between the rows. */
  .po-page .po-split { grid-template-columns: 1fr; }
  .po-page .po-split__col { padding: 28px var(--po-gutter); }
  .po-page .po-split__col + .po-split__col {
    border-left: none;
    border-top: 1px solid var(--po-on-dark-4);
  }

  /* Buttons go full-width and stacked, in the design-brief order
     (Send a parcel first — it is the first column above). Flex items are
     blockified, so .po-btn-row must switch to a column for the stacking to
     actually happen when a column holds two buttons. */
  .po-page .po-btn { display: block; text-align: center; }
  .po-page .po-btn-row { flex-direction: column; }

  .po-page .po-section,
  .po-page .po-section--hero,
  .po-page .po-section--tight,
  .po-page .po-section--s6,
  .po-page .po-section--cta { padding-top: 40px; padding-bottom: 40px; }
}

/* Phone width — the directory's second step. Two tiles across leaves the
   label wrapping after two words, so it goes to a single column here. */
@media (max-width: 560px) {
  .po-page .po-tools { grid-template-columns: 1fr; }
}


/* Respect a reduced-motion preference: nothing on this page animates, but
   the shared chrome's smooth-scroll is worth suppressing for the anchors. */
@media (prefers-reduced-motion: reduce) {
  .po-page * { scroll-behavior: auto !important; }
}
