/* ============================================================
   SECTION SITES — /delivery/, /live-shop/ and /pickme/
   ------------------------------------------------------------
   These three sections are their own sites living under a path.
   They deliberately do NOT wear the main site nav: own header,
   own dropdown menu, own footer, own contents index. The model
   is flex.amazon.com and sell.amazon.com, which do not carry
   amazon.com's chrome either. Spec: CYCA-SECTIONS-SPEC.md.

   Loaded ON TOP OF styles.css, which still supplies the brand
   tokens, .sec surfaces, .btn, .ticks and type. Everything here
   is prefixed .shead / .smenu / .s- / .sfoot so it can never
   collide with the main site's chrome.

   RULE 1 LIVES HERE TOO. The dropdowns open on :hover and
   :focus-within — CSS only, no script. Every top-level item is
   itself a real link, so a menu that never opens is still a
   working navigation. The phone drawer is the same CSS-checkbox
   trick as .nav__toggle in styles.css. Do not "simplify" any of
   this into a click handler.
   ============================================================ */

/* ---------------------------------------------------------- header shell */
.shead {
  position: sticky; top: 0; z-index: 200;
  background: rgba(0, 44, 28, 0.94);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid rgba(244, 240, 212, 0.14);
}
.shead__bar {
  display: flex; align-items: center; gap: clamp(11px, 1.5vw, 20px);
  /* 1560, not 1400. The row is brand + wordmark + section name + seven nav
     groups + two buttons and it measures ~1340px of content; a 1400px cap made
     that impossible to fit AT ANY VIEWPORT — the menu slid under the buttons on
     a 1600px screen. The cap and the button breakpoint below are a pair. */
  height: 64px; max-width: 1560px; margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}
.shead__brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.shead__brand .mark { height: 28px; width: auto; }
/* The wordmark is not decoration. Without it the header said "Delivery" and
   never said Cyca — a visitor landing from a share link had no idea whose site
   they were on. It is the first thing to hold when space gets tight, and the
   last thing to drop. */
.shead__brand .word { height: 18px; width: auto; }
.shead__rule { width: 1px; height: 20px; background: rgba(244, 240, 212, 0.3); flex: none; }
.shead__name {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--on-green); white-space: nowrap;
}
.shead__end { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
/* margin-left:auto is what pins the burger to the right edge on a phone, where
   .shead__nav is display:none and there is no flexible child left to fill the
   bar. On desktop the centred nav already eats the free space, so the auto
   margin has nothing to consume and the centring is untouched. Both cases need
   this line; removing it puts the burger back in the middle of the bar. */

/* The outline button. .btn--glass exists in styles.css but is tuned for
   inside .sec--* surfaces; the header is neither, so it gets its own. */
.btn--line {
  background: transparent; color: var(--on-green);
  border: 1px solid rgba(244, 240, 212, 0.34); box-shadow: none;
}
.btn--line:hover { background: rgba(244, 240, 212, 0.12); filter: none; }

/* ---------------------------------------------------------- desktop menu */
.shead__nav { min-width: 0; flex: 1 1 auto; display: flex; justify-content: center; }
.shead__nav .smenu { flex-wrap: nowrap; }
/* the brand block keeps the nav honestly centred rather than centred in
   whatever space the buttons left over */
.shead__brand, .shead__rule, .shead__name { flex: none; }
.smenu { display: none; list-style: none; padding: 0; margin: 0; align-items: center; gap: clamp(2px, 0.5vw, 10px); }
.smenu__item { position: relative; }
.smenu__top {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 9px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; white-space: nowrap;
  color: var(--on-green); opacity: 0.86;
  transition: opacity 180ms, background 180ms;
}
.smenu__top:hover, .smenu__item:focus-within > .smenu__top { opacity: 1; background: rgba(244, 240, 212, 0.10); }
.smenu__caret { width: 11px; height: 11px; flex: none; opacity: 0.7; transition: transform 200ms var(--ease); }
.smenu__item:hover .smenu__caret, .smenu__item:focus-within .smenu__caret { transform: rotate(180deg); }

/* The panel is never display:none — it stays in the accessibility tree so a
   keyboard Tab can land inside it, which fires :focus-within on the parent
   and brings it into view. That is what makes the menu work with no script
   and no mouse. pointer-events:none keeps the invisible panel from eating
   clicks meant for the page behind it. */
.smenu__panel {
  position: absolute; top: calc(100% + 10px); left: -8px;
  min-width: 310px; padding: 10px;
  border-radius: 20px;
  background: linear-gradient(168deg, #f8f5e2 0%, var(--cream) 60%, var(--beige) 100%);
  border: 1px solid rgba(0, 60, 38, 0.14);
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.smenu__item:hover > .smenu__panel,
.smenu__item:focus-within > .smenu__panel { opacity: 1; pointer-events: auto; transform: none; }
/* a hover bridge, so the pointer can cross the 10px gap without the panel
   snapping shut halfway down */
.smenu__panel::before { content: ""; position: absolute; inset: -12px 0 auto 0; height: 14px; }
.smenu__panel ul { list-style: none; padding: 0; margin: 0; }
.smenu__panel a {
  display: block; padding: 10px 12px; border-radius: 13px;
  color: var(--on-cream); transition: background 160ms;
}
.smenu__panel a:hover { background: rgba(0, 60, 38, 0.08); }
.smenu__panel b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.smenu__panel span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--on-cream-soft); margin-top: 2px; }

/* ---------------------------------------------------------- phone drawer */
.sburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 11px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(244, 240, 212, 0.22);
}
.sburger span { display: block; height: 2px; border-radius: 2px; background: var(--on-green); transition: transform 260ms var(--ease), opacity 200ms; }
.shead__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.shead__toggle:checked ~ .shead__bar .sburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.shead__toggle:checked ~ .shead__bar .sburger span:nth-child(2) { opacity: 0; }
.shead__toggle:checked ~ .shead__bar .sburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.shead__toggle:focus-visible ~ .shead__bar .sburger { outline: 3px solid var(--bright); outline-offset: 2px; }

/* Both sections now carry FIVE nav groups, which is what these two numbers are
   sized for: the row plus the solid button wants ~1210px, so the menu collapses
   below 1240, and the outline button joins it at 1340. The outline button goes
   first because it points at exactly the same page as the solid one — dropping
   the duplicate costs a visitor nothing. Below the breakpoint the whole menu is
   the drawer, where nothing is behind a hover at all: every group is a heading
   with its children listed under it. Add a sixth group or a longer label and
   these two numbers have to be re-measured. */
@media (max-width: 1339px) { .shead__end .btn--line { display: none; } }
@media (min-width: 1240px) {
  .smenu { display: flex; }
  .sburger { display: none; }
  .shead__drawer { display: none !important; }
}
@media (max-width: 1239px) {
  .shead__nav { display: none; }
  .shead__drawer {
    max-height: 0; overflow: hidden;
    background: linear-gradient(168deg, #f8f5e2 0%, var(--cream) 70%, var(--beige) 100%);
    border-top: 1px solid rgba(0, 60, 38, 0.12);
    transition: max-height 320ms var(--ease);
  }
  .shead__toggle:checked ~ .shead__drawer { max-height: 82vh; overflow-y: auto; }
  .shead__drawer .inner { padding: 8px clamp(16px, 4vw, 32px) 26px; }
  .sdrawer__grp { border-bottom: 1px solid rgba(0, 60, 38, 0.10); padding: 14px 0; }
  .sdrawer__grp:last-child { border-bottom: 0; }
  .sdrawer__grp > a {
    display: block; color: var(--on-cream);
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .sdrawer__grp ul { list-style: none; padding: 0; margin: 8px 0 0; }
  .sdrawer__grp li a { display: block; padding: 8px 0 8px 14px; color: var(--on-cream); font-size: 16px; border-left: 2px solid rgba(0, 60, 38, 0.14); }
  .sdrawer__grp li a:hover { color: var(--forest); border-left-color: var(--bright); }
  .sdrawer__cta { display: flex; gap: 10px; padding-top: 20px; }
  .sdrawer__cta .btn { flex: 1; }
  .sdrawer__cta .btn--line { color: var(--on-cream); border-color: rgba(0, 60, 38, 0.28); }
}
@media (max-width: 560px) { .shead__end .btn { display: none; } .shead__end .sburger { display: inline-flex; } }

/* ---------------------------------------------------------- hero */
.s-hero { padding-block: clamp(58px, 7vw, 104px) clamp(48px, 6vw, 88px); }
.s-hero .head { max-width: 17ch; }
.s-hero .lede { max-width: 62ch; margin-top: 18px; }
.s-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.s-crumb { font-size: 13.5px; letter-spacing: 0.02em; margin-bottom: 16px; color: var(--on-green-soft); }
.sec--cream .s-crumb, .sec--cream2 .s-crumb { color: var(--on-cream-soft); }
.s-crumb a:hover { color: var(--bright); }
.s-crumb i { font-style: normal; opacity: 0.5; padding-inline: 7px; }

/* ---------------------------------------------------------- blocks */
.s-block + .s-block { margin-top: 0; }
.s-h2 { font-size: var(--head-sec); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; max-width: 20ch; }
.s-body { max-width: 68ch; margin-top: 18px; display: grid; gap: 15px; font-size: 17.5px; }
.sec--green .s-body, .sec--green2 .s-body { color: var(--on-green-soft); }
.sec--cream .s-body, .sec--cream2 .s-body { color: var(--on-cream-soft); }
.s-body strong { color: inherit; font-weight: 700; }
.sec--green .s-body strong, .sec--green2 .s-body strong { color: var(--on-green); }
.sec--cream .s-body strong, .sec--cream2 .s-body strong { color: var(--on-cream); }
.s-block .ticks { margin-top: 26px; }

/* THE WIDTH GETS USED. A step card holding four words was running the whole
   1200px container with two thirds of itself empty; capping it at 880px just
   moved the void. Lists go two-up on a wide screen, and a block that is only
   prose splits heading-left / words-right. Nothing is left staring at nothing. */
@media (min-width: 900px) {
  .s-steps { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .s-block .ticks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; row-gap: 4px; align-items: start; }
  .s-prose { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; column-gap: clamp(36px, 5vw, 84px); align-items: start; }
  .s-prose .s-h2 { max-width: none; }
  .s-prose .s-body { margin-top: 0; max-width: 62ch; }
}

/* cards — the three doors, and the contents index */
.s-cards { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 800px) { .s-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 800px) { .s-cards--2 { grid-template-columns: repeat(2, 1fr); } }
.s-card {
  display: block; padding: 26px 24px 24px; border-radius: var(--r-card);
  border: 1px solid var(--glass-on-green-brd); background: var(--glass-on-green);
  transition: transform 240ms var(--ease-out), border-color 240ms;
}
.sec--cream .s-card, .sec--cream2 .s-card { border-color: var(--glass-on-cream-brd); background: var(--glass-on-cream); }
@media (hover: hover) { .s-card:hover { transform: translateY(-5px); border-color: var(--bright); } }
.s-card b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.s-card p { margin-top: 9px; font-size: 15.5px; line-height: 1.55; }
.sec--green .s-card p, .sec--green2 .s-card p { color: var(--on-green-soft); }
.sec--cream .s-card p, .sec--cream2 .s-card p { color: var(--on-cream-soft); }
.s-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 15px; font-size: 14.5px; font-weight: 600; color: var(--bright); }
.sec--cream .s-card .go, .sec--cream2 .s-card .go { color: var(--forest); }

/* numbered steps */
.s-steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px; counter-reset: s; }
.s-step {
  display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start;
  padding: 20px 22px; border-radius: 20px;
  border: 1px solid var(--glass-on-green-brd); background: var(--glass-on-green);
}
.sec--cream .s-step, .sec--cream2 .s-step { border-color: var(--glass-on-cream-brd); background: var(--glass-on-cream); }
.s-step::before {
  counter-increment: s; content: counter(s);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(244, 240, 212, 0.07);
  border: 1px solid rgba(168, 224, 106, 0.34);
  color: var(--bright-soft);
}
.sec--cream .s-step::before, .sec--cream2 .s-step::before {
  background: rgba(0, 60, 38, 0.06); border-color: rgba(0, 60, 38, 0.22); color: var(--forest);
}
.s-step b { display: block; font-size: 17.5px; font-weight: 700; }
.s-step p { margin-top: 5px; font-size: 15.5px; line-height: 1.55; }
.sec--green .s-step p, .sec--green2 .s-step p { color: var(--on-green-soft); }
.sec--cream .s-step p, .sec--cream2 .s-step p { color: var(--on-cream-soft); }

/* the section contents index — the "huge index" the whole thing hangs on */
.s-index { display: grid; gap: 10px; margin-top: 30px; }
@media (min-width: 760px) { .s-index { grid-template-columns: 1fr 1fr; } }
.s-index a {
  display: block; padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--glass-on-cream-brd); background: var(--glass-on-cream);
  transition: transform 200ms var(--ease-out), border-color 200ms;
}
.sec--green .s-index a, .sec--green2 .s-index a { border-color: var(--glass-on-green-brd); background: var(--glass-on-green); }
@media (hover: hover) { .s-index a:hover { transform: translateX(4px); border-color: var(--bright); } }
.s-index b { display: block; font-size: 16.5px; font-weight: 650; }
.s-index span { display: block; font-size: 14px; line-height: 1.45; margin-top: 3px; }
.sec--cream .s-index span, .sec--cream2 .s-index span { color: var(--on-cream-soft); }
.sec--green .s-index span, .sec--green2 .s-index span { color: var(--on-green-soft); }

/* small print — the Free* asterisk lands here */
.s-note { margin-top: 26px; font-size: 13.5px; line-height: 1.6; max-width: 60ch; opacity: 0.72; }

/* vehicle / plain chip row */
.s-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; list-style: none; padding: 0; }
.s-pills li {
  padding: 10px 17px; border-radius: 999px; font-size: 15px; font-weight: 500;
  border: 1px solid var(--glass-on-green-brd); background: var(--glass-on-green);
}
.sec--cream .s-pills li, .sec--cream2 .s-pills li { border-color: var(--glass-on-cream-brd); background: var(--glass-on-cream); }

/* coming-soon chip rows — a vehicle that is not carrying anyone yet must not
   look pickable, so these are dimmed and dashed, never solid like .s-pills */
.s-pills--soon li {
  opacity: 0.55; border-style: dashed; font-weight: 400;
}

/* ---------------------------------------------------------- announced, not open
   PickMe is published before it opens. The state is stated in the header on
   every page AND again in every hero, because a visitor arriving from a share
   link reads one page, not the section. Do not quietly delete these when the
   product opens — remove "soon": True in gen_section.py instead, which takes
   both of them out at once. */
.shead__soon {
  display: inline-block; margin-left: 9px; flex: none;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--bright);
  border: 1px solid rgba(44, 191, 109, 0.45); background: rgba(44, 191, 109, 0.12);
  white-space: nowrap;
}
/* Under 1180px the nav row is already fighting for width (see .shead__bar) —
   the hero chip is still on the page, so dropping this one costs nothing. */
@media (max-width: 1180px) { .shead__soon { display: none; } }

.s-soon {
  display: inline-block; margin-left: 10px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--bright);
  border: 1px solid rgba(44, 191, 109, 0.45); background: rgba(44, 191, 109, 0.12);
  vertical-align: middle; white-space: nowrap;
}

/* the small line under the store badges on a coming-soon section */
.s-note--mid { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------------------------------- the CTA foot */
.s-get { text-align: center; }
.s-get .head { margin-inline: auto; max-width: 18ch; }
.s-get .lede { margin: 16px auto 0; max-width: 54ch; }
.s-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
/* The hand-drawn store buttons that used to live here are gone: these rows now
   carry Apple's and Google's official badge artwork (see .storebadge in
   styles.css). Only the row's own centring stays. */
.s-stores .storebadge img { height: 48px; }
.s-stores .storebadge--play img { height: 62px; }

/* ---------------------------------------------------------- section footer */
.sfoot { background: linear-gradient(196deg, #0d2a1e 0%, var(--deep-2) 55%, #061510 100%); color: var(--on-green); }
.sfoot .inner { max-width: 1200px; margin-inline: auto; padding: clamp(48px, 6vw, 78px) clamp(20px, 4vw, 44px) 32px; }

.sfoot__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.sfoot__lockup { display: inline-flex; align-items: center; gap: 9px; }
.sfoot__lockup .mark { height: 28px; width: auto; }
.sfoot__lockup .word { height: 19px; width: auto; }
.sfoot__rule { width: 1px; height: 20px; background: rgba(244, 240, 212, 0.3); flex: none; }
.sfoot__name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--on-green); }
.sfoot__name:hover { color: var(--bright); }
.sfoot__tag { flex-basis: 100%; margin-top: 12px; font-size: 15px; color: var(--on-green-soft); }

/* One column per nav heading, so the footer reads like the menu. This replaced
   a single flat run of ten links that wrapped and stranded "Support" alone on
   a second line. Five columns collapse to three, then two, then one. */
.sfoot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-top: 38px; }
@media (min-width: 620px)  { .sfoot__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .sfoot__cols { grid-template-columns: repeat(5, 1fr); gap: 30px; } }
.sfoot__col h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-green-soft); margin-bottom: 13px;
}
.sfoot__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.sfoot__col a { font-size: 15px; color: var(--on-green); opacity: 0.82; }
.sfoot__col a:hover { opacity: 1; color: var(--bright); }

.sfoot__bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(244, 240, 212, 0.13);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center;
  font-size: 13.5px; color: var(--on-green-soft);
}
.sfoot__bottom a:hover { color: var(--bright); }
.sfoot__back { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--bright); }

/* The section sites' own bars need the display inset too — their content
   already runs through .container, which styles.css handles. (The class names
   here are the real ones: .shead__bar and .sfoot__in, not a guess.) */
.shead__bar, .sfoot .inner {
  padding-left:  max(clamp(16px, 3vw, 40px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 3vw, 40px), env(safe-area-inset-right));
}