/* ============================================================================
   wyy.css — Weedyy Delivers theme (sample v1, 2026-10-10)
   "The express line": lilac-white paper, deep plum ink, Weedyy magenta for the
   OC Line, violet for the IE Line. Unbounded for display, Manrope for the rest.
   The memorable element is the network diagram in the hero; its lines drawing
   in once on load is the only motion that isn't an answer to a tap.
   Loaded after css/engine.css.
   ============================================================================ */
:root {
  --cw-bg: #FBF7FF; --cw-bg-2: #FFFFFF; --cw-bg-3: #F2EAFB; --cw-line: #DDCFEC;
  --cw-brand: #D61F80; --cw-brand-2: #B0156A; --cw-brand-soft: #FBE1EF; --cw-on-brand: #FFFFFF;
  --cw-accent: #6D3FD1; --cw-accent-soft: #EAE1FB; --cw-on-accent: #FFFFFF;
  --cw-ink: #23122F; --cw-ink-2: #4A3A57; --cw-ink-3: #6E6079;
  --cw-focus: #6D3FD1;
  --cw-font-display: 'Unbounded', 'Manrope', system-ui, sans-serif; --cw-font-body: 'Manrope', system-ui, sans-serif;
  --cw-display-weight: 700; --cw-display-tracking: -.02em; --cw-display-lh: 1.04;
  --cw-r-pill: 999px; --cw-r-btn: 999px; --cw-r-input: 999px; --cw-r-card: 22px; --cw-r-tile: 16px;
  --cw-shadow: 0 14px 34px rgba(35, 18, 47, .12);
  --wyy-oc: #D61F80; --wyy-ie: #6D3FD1; --wyy-plum: #2A0F3D;
}
body { font-size: 17px; }
h1 { font-size: clamp(34px, 5.4vw, 62px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-family: var(--cw-font-body); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.lede { font-size: 18px; max-width: 56ch; }
.eyebrow { color: var(--wyy-ie); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
a { color: var(--cw-ink); text-decoration-color: var(--cw-line); text-underline-offset: 3px; }
a:hover { color: var(--cw-brand); text-decoration-color: var(--cw-brand); }
.btn, .nav-brand, .nav-links a, .chip, .brand-chip, .cw-card a, .footer-col a, .footer-phones a, .kwc-card, .cw-actionbar a, .nav-phone { text-decoration: none; }
.btn--ghost { color: var(--cw-ink); box-shadow: inset 0 0 0 2px var(--cw-ink); }
.btn--ghost:hover { background: var(--cw-ink); color: #fff; }
.input { border-color: var(--cw-line); }
.input:focus { border-color: var(--wyy-ie); }

/* nav: a two-colour rule along the top, the OC Line and the IE Line */
.site-nav { border-top: 5px solid transparent; border-image: linear-gradient(90deg, var(--wyy-oc) 0 50%, var(--wyy-ie) 50% 100%) 1; background: var(--cw-bg); }
.nav-brand { color: var(--cw-brand); display: inline-flex; align-items: center; gap: 10px; }
.nav-brand svg { height: 34px; width: 34px; }
.nav-word { display: flex; flex-direction: column; line-height: 1; }
.nav-word strong { font-family: var(--cw-font-display); font-weight: 800; font-size: 21px; letter-spacing: -.03em; color: var(--cw-ink); }
.nav-word span { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cw-ink-3); margin-top: 4px; white-space: nowrap; }
@media (max-width: 419px) { .nav-word span { display: none; } }
.nav-links a { font-weight: 700; }
.nav-phone { background: var(--wyy-plum); color: #fff; }
.nav-phone:hover { background: var(--cw-brand); color: #fff; }
.footer-mark { display: flex; align-items: center; gap: 10px; color: var(--cw-brand); }
.footer-mark svg { height: 34px; width: 34px; }
.footer-mark .nav-word strong { color: #fff; }
.footer-mark .nav-word span { color: rgba(255, 255, 255, .7); }
.site-footer { background: var(--wyy-plum); color: #fff; }
.site-footer a { text-decoration: none; }

/* hero: copy left, the network right */
.hero { padding: 36px 0 28px; background: radial-gradient(120% 90% at 100% 0%, #F4E6FF 0%, rgba(244, 230, 255, 0) 60%), var(--cw-bg); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 980px) { .hero { padding: 64px 0 48px; } .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; } }
.hero-copy h1 { margin: 16px 0 18px; }
.hero-copy h1 em { font-style: normal; color: var(--cw-brand); }
.hero .zip-form { margin-top: 22px; }
.hero .zip-form .input { max-width: 200px; }
.hero-tags { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--cw-bg-2); border: 1px solid var(--cw-line); border-radius: 999px; font-size: 14px; color: var(--cw-ink-2); }
.hero-tags li b { color: var(--cw-ink); }
.hero-fine { font-size: 13px; color: var(--cw-ink-3); margin-top: 16px; }
.pill--outline { box-shadow: inset 0 0 0 2px var(--cw-ink); color: var(--cw-ink); }
.dot { background: var(--cw-brand); }

/* the network diagram */
.net-card { margin: 0; padding: 18px 18px 14px; background: var(--cw-bg-2); border: 1px solid var(--cw-line); border-radius: 26px; box-shadow: var(--cw-shadow); }
.net-card figcaption { font-size: 14px; color: var(--cw-ink-3); padding: 6px 4px 0; }
.net-card figcaption a { color: var(--cw-ink); font-weight: 700; }
.net-card--page { margin-bottom: 28px; }
.net { display: block; width: 100%; height: auto; }
.net-line { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.net-line--oc { stroke: var(--wyy-oc); }
.net-line--ie { stroke: var(--wyy-ie); }
.net-stop circle { fill: #fff; stroke: var(--wyy-plum); stroke-width: 4.5; }
.net-stop--x circle { stroke-width: 6; }
.net-name { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 15px; fill: var(--cw-ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.net-win { font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-size: 13px; fill: var(--cw-ink-3); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.net-key text { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 13px; fill: var(--cw-ink-2); }
.k-oc { fill: var(--wyy-oc); } .k-ie { fill: var(--wyy-ie); }
@media (max-width: 559px) { .net-win { display: none; } .net-name { font-size: 18px; } }
/* the one load moment: the lines draw in, then the stops appear */
.motion .net-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wyy-draw 1100ms var(--cw-ease) 150ms forwards; }
.motion .net-line--b { animation-delay: 450ms; }
.motion .net-stop { opacity: 0; animation: wyy-pop 360ms var(--cw-ease) 900ms forwards; }
@keyframes wyy-draw { to { stroke-dashoffset: 0; } }
@keyframes wyy-pop { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .net-line, .net-stop { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } }

/* the stop list: two lines, each a coloured spine with stops that open */
.lines { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 860px) { .lines { grid-template-columns: 1fr 1.6fr; gap: 28px; } }
.line { background: var(--cw-bg-2); border: 1px solid var(--cw-line); border-radius: 22px; padding: 20px 20px 10px; }
.line-name { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; }
.line-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; color: #fff; font-family: var(--cw-font-display); font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.line--oc .line-chip { background: var(--wyy-oc); }
.line--ie .line-chip { background: var(--wyy-ie); }
.line-sub { font-size: 13px; color: var(--cw-ink-3); font-weight: 600; }
.stops { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.stops::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 6px; border-radius: 6px; background: var(--wyy-oc); }
.line--ie .stops::before { background: var(--wyy-ie); }
.stop details { margin: 0; }
.stop summary { list-style: none; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; min-height: 48px; padding: 8px 6px 8px 0; cursor: pointer; border-radius: 12px; }
.stop summary::-webkit-details-marker { display: none; }
.stop summary:hover .stop-name { color: var(--cw-brand); }
.stop-dot { position: relative; z-index: 1; width: 20px; height: 20px; margin-left: 2px; border-radius: 50%; background: #fff; border: 4px solid var(--wyy-plum); }
.stop-name { font-weight: 800; font-size: 17px; }
.stop-win { font-size: 14px; font-weight: 700; color: var(--cw-ink-2); background: var(--cw-bg-3); padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.stop details[open] summary .stop-dot { background: var(--cw-brand); border-color: var(--cw-brand); }
.line--ie .stop details[open] summary .stop-dot { background: var(--wyy-ie); border-color: var(--wyy-ie); }
.stop-cities { margin: 0 0 6px 36px; font-size: 15px; color: var(--cw-ink-2); line-height: 1.6; }
.stop-cities a { color: var(--cw-ink); font-weight: 700; }
.stop-cta { margin: 0 0 12px 36px; font-size: 14px; }
.stop-cta a { color: var(--cw-brand); font-weight: 700; }

/* how it works: three tickets */
.tickets { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .tickets { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.ticket { position: relative; padding: 24px 22px 22px; background: var(--cw-bg-2); border: 1px solid var(--cw-line); border-radius: 22px; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--cw-bg); border: 1px solid var(--cw-line); }
.ticket::before { left: -10px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -10px; clip-path: inset(0 50% 0 0); }
.section--alt .ticket::before, .section--alt .ticket::after { background: var(--cw-bg-3); }
.ticket-no { display: inline-block; font-family: var(--cw-font-display); font-weight: 800; font-size: 28px; color: var(--cw-brand); letter-spacing: -.03em; }
.ticket h3 { margin: 10px 0 8px; }
.ticket p { color: var(--cw-ink-2); font-size: 15px; margin: 0; }
.ticket--card::before, .ticket--card::after { display: none; }

/* city pages */
.stop-chip { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--cw-bg-2); border: 1px solid var(--cw-line); font-weight: 800; font-size: 14px; }
.stop-chip .stop-dot { width: 16px; height: 16px; border-width: 3px; margin: 0; }
.stop-chip--oc .stop-dot { border-color: var(--wyy-oc); }
.stop-chip--ie .stop-dot { border-color: var(--wyy-ie); }
.city-hero { background: radial-gradient(90% 80% at 100% 0%, #F4E6FF 0%, rgba(244, 230, 255, 0) 70%), var(--cw-bg); }
.city-hero h1 { font-size: clamp(30px, 4.6vw, 52px); }
.stop-list { list-style: none; margin: 10px 0 0; padding: 0 0 0 4px; position: relative; color: var(--cw-ink); font-weight: 700; }
.stop-list::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 5px; border-radius: 5px; background: var(--wyy-oc); }
.stop-list--ie::before { background: var(--wyy-ie); }
.stop-list li { position: relative; padding: 6px 0 6px 30px; }
.stop-list li::before { content: ""; position: absolute; left: 3px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--wyy-plum); }
@media (min-width: 900px) { .city-copy { grid-template-columns: 1.2fr 1fr; gap: 28px; } }
.city-fact b { color: var(--cw-brand); font-family: var(--cw-font-display); font-weight: 700; }

/* cards, deals, menu */
.cw-card .cw-price { font-family: var(--cw-font-display); font-weight: 700; letter-spacing: -.02em; color: var(--cw-ink); }
.cw-card .cw-add { background: var(--cw-brand); }
.cw-card .cw-add:hover { background: var(--wyy-plum); }
.chip.active, .chip[aria-pressed="true"] { background: var(--wyy-plum); border-color: var(--wyy-plum); color: #fff; }
.chip:hover { border-color: var(--wyy-plum); color: var(--cw-ink); }
.deal { border-radius: 22px; }
.deal--today { border: 2px solid var(--cw-brand); }
.deal-val { color: var(--cw-brand); }
.pill--accent { background: var(--wyy-ie); color: #fff; }
.step-num { background: var(--cw-brand); }
.faq summary::after { color: var(--cw-brand); }
.kc-minbar-fill { background: var(--cw-brand) !important; }
.cw-actionbar [data-cart-open] { background: var(--cw-brand); }

/* the call band */
.section--plum { background: var(--wyy-plum); color: #fff; }
.section--plum h2 { color: #fff; }
.section--plum .lede { color: rgba(255, 255, 255, .86); }
.section--plum .eyebrow { color: #F7A6D0; }
.section--plum .btn { background: var(--cw-brand); color: #fff; }
.section--plum .btn:hover { background: #fff; color: var(--wyy-plum); }
.section--plum .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.section--plum .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.call-wrap { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
@media (min-width: 900px) { .call-wrap { grid-template-columns: 1.4fr 1fr; } .call-btns { justify-self: end; } }
.call-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* nav: labels on one line; the phone menu button and cart never shrink */
.nav-links { gap: 18px; }
.nav-links a { white-space: nowrap; }
.nav-burger, .kc-fab.kc-innav, .nav-phone { flex-shrink: 0; }
.nav-brand { min-width: 0; }