/* =========================================================================
   INFO / COMPANY PAGES — shared toolkit
   Used by the standalone page templates (Help & Information, Track Order,
   Delivery & Returns, DWC for Students, Data Protection, How DWC Works,
   About DWC, Working at DWC, Black Friday). Keeps every one of them
   visually consistent without duplicating markup patterns per template.
   Loaded only on those templates — see enqueue.php.
   ========================================================================= */

/* ---- Hero band ---- */
.page-hero{border-bottom:1px solid var(--line); padding:56px 0 44px; background:var(--surface);}
.page-hero.is-dark{background:var(--navy); color:#fff; border-bottom-color:var(--navy);}
.page-hero.is-accent{background:var(--red); color:#fff; border-bottom-color:var(--red);}
.page-hero-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; color:var(--red);
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.page-hero.is-dark .page-hero-eyebrow,.page-hero.is-accent .page-hero-eyebrow{color:var(--accent-light);}
.page-hero h1{font-family:var(--font-body); font-weight:700; font-size:clamp(28px,4.2vw,46px); line-height:1.05; letter-spacing:-0.01em; max-width:780px;}
.page-hero-sub{font-size:15.5px; color:var(--ink-soft); max-width:600px; margin-top:16px; line-height:1.6;}
.page-hero.is-dark .page-hero-sub{color:#C3C9E2;}
.page-hero.is-accent .page-hero-sub{color:#FDE1E6;}

/* ---- Prose body ---- */
.page-body{padding:48px 0;}
.page-prose{max-width:720px; font-size:15px; line-height:1.75; color:var(--ink);}
.page-updated{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); margin-bottom:28px;}
.page-prose h2{font-family:var(--font-body); font-weight:700; font-size:22px; margin:36px 0 12px; letter-spacing:-0.01em;}
.page-prose h2:first-child{margin-top:0;}
.page-prose h3{font-family:var(--font-body); font-weight:600; font-size:16px; margin:22px 0 8px; letter-spacing:-0.01em;}
.page-prose p{margin-bottom:14px; color:var(--ink-soft);}
.page-prose ul{margin:0 0 14px 0;}
.page-prose ul li{position:relative; padding-left:18px; margin-bottom:8px; color:var(--ink-soft); font-size:14.5px;}
.page-prose ul li::before{content:''; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--red); border-radius:50%;}
.page-prose strong{color:var(--ink);}
.page-prose a{text-decoration:underline;}
.page-prose a:hover{color:var(--red);}

/* ---- Info / link cards (grid of bordered tiles) ---- */
.info-cards{display:flex; flex-wrap:wrap; gap:20px; margin-top:8px;}
.info-card{
  flex:1 1 260px; width:calc(33.333% - 13.4px);
  background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:22px; display:flex; flex-direction:column;
  /* transform is shared with .js-reveal's fade-in slide-up (main.css) —
     one duration has to serve both the hover lift and the scroll
     entrance, so this splits the difference (was 0.2s) rather than the
     two rules silently overwriting one another. */
  transition:box-shadow 0.2s ease, transform 0.3s ease, opacity 0.5s ease;
}
.info-card:hover{box-shadow:var(--shadow); transform:translateY(-2px);}
.info-card .idx{font-family:var(--font-mono); font-size:10px; color:var(--red); font-weight:700; letter-spacing:0.08em; margin-bottom:8px;}
.info-card h3{font-family:var(--font-body); font-weight:600; font-size:16px; margin-bottom:8px; letter-spacing:-0.01em;}
.info-card p{font-size:13px; color:var(--ink-soft); line-height:1.6; flex:1;}
.info-card .info-card-link{
  margin-top:14px; font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--ink);
  display:inline-flex; align-items:center; gap:4px; width:fit-content;
}
.info-card:hover .info-card-link{color:var(--red);}
@media (max-width:900px){ .info-card{width:calc(50% - 10px);} }
@media (max-width:560px){ .info-card{width:100%;} }

/* ---- Two-up content columns (e.g. Delivery / Returns) ---- */
.page-columns{display:flex; flex-wrap:wrap; gap:32px;}
.page-columns > *{flex:1 1 300px; width:calc(50% - 16px);}
@media (max-width:700px){ .page-columns > *{width:100%;} }

/* ---- Stat strip (reuses value-strip spirit, scoped to page templates) ---- */
.page-stats{border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap;}
.page-stat{padding:26px 24px; border-right:1px solid var(--line); flex:1 1 auto; width:25%;}
.page-stat:last-child{border-right:none;}
.page-stat .stat-num{font-family:var(--font-body); font-weight:700; font-size:30px; color:var(--red); line-height:1;}
.page-stat .stat-label{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin-top:8px; letter-spacing:0.04em;}
@media (max-width:800px){ .page-stat{width:50%; border-bottom:1px solid var(--line);} }
@media (max-width:480px){ .page-stat{width:100%;} }

/* ---- Simple FAQ (native <details>, zero JS) ---- */
.page-faq{max-width:720px; border-top:1px solid var(--line);}
.page-faq details{border-bottom:1px solid var(--line); padding:16px 0;}
.page-faq summary{
  font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.page-faq summary::-webkit-details-marker{display:none;}
.page-faq summary::after{content:'+'; font-family:var(--font-mono); font-size:18px; color:var(--red); flex-shrink:0;}
.page-faq details[open] summary::after{content:'–';}
.page-faq .faq-answer{font-size:14px; color:var(--ink-soft); line-height:1.65; margin-top:12px; max-width:640px;}

/* ---------- Student discount page — a dedicated visual treatment,
   not the shared info-card/photo-grid pieces used on other info pages.
   ---------------------------------------------------------------- */

/* Full-bleed photo hero, oversized "10%" as the actual visual weight. */
.stat-hero{
  position:relative; min-height:min(560px, 82vh); display:flex; align-items:flex-end;
  color:#fff; overflow:hidden;
}
.stat-hero-media{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.stat-hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,10,12,.82) 0%, rgba(10,10,12,.45) 42%, rgba(10,10,12,.08) 75%);
}
.stat-hero-content{position:relative; padding:48px 0 44px; width:100%;}
.stat-hero-stat{
  display:flex; align-items:flex-end; gap:18px; margin-bottom:6px; flex-wrap:wrap;
}
.stat-hero-num{
  font-family:var(--font-body); font-weight:700; letter-spacing:-0.03em;
  font-size:clamp(72px, 13vw, 156px); line-height:0.82;
}
.stat-hero-num-label{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.04em;
  color:#E7E9EE; max-width:220px; padding-bottom:14px; line-height:1.5;
}
.stat-hero h1{
  font-family:var(--font-body); font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(22px,3vw,32px); max-width:640px; margin-top:4px;
}
.stat-hero-sub{color:#D9DCE3; font-size:15px; max-width:520px; margin-top:10px; line-height:1.6;}
.stat-hero-actions{margin-top:22px;}

/* Asymmetric editorial pairing — one photo, not a row of equal tiles. */
.page-editorial{display:flex; gap:44px; align-items:center; flex-wrap:wrap;}
.page-editorial-media{flex:1 1 380px; min-width:280px;}
.page-editorial-media img{width:100%; display:block; border:var(--border-w) solid var(--line);}
.page-editorial-copy{flex:1 1 380px; min-width:280px;}
.page-editorial-copy h2{font-size:clamp(20px,2.4vw,28px); max-width:420px; margin-bottom:14px;}
.page-editorial-copy p{color:var(--ink-soft); font-size:15px; line-height:1.7; max-width:420px; margin-bottom:14px;}
.page-editorial-copy p:last-child{margin-bottom:0;}

/* Steps as a connected sequence, not bordered cards. */
.student-steps{position:relative; display:flex; gap:0; flex-wrap:wrap; margin-top:8px;}
.student-steps::before{
  content:''; position:absolute; left:0; right:0; top:19px; height:1px; background:var(--line);
}
.student-step{flex:1 1 200px; min-width:200px; position:relative; padding-right:24px;}
.student-step-num{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:var(--border-w) solid var(--ink); background:var(--surface); position:relative; z-index:1;
  font-family:var(--font-mono); font-size:13px; margin-bottom:16px;
}
.student-step h3{font-size:15.5px; margin-bottom:6px;}
.student-step p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}

/* Final "act now" block — the live verification form gets a real photo
   alongside it, rather than sitting alone in a plain grey strip. */
.page-act{
  display:flex; gap:0; flex-wrap:wrap; border:var(--border-w) solid var(--line); overflow:hidden;
}
.page-act-media{flex:1 1 320px; min-width:260px; background-size:cover; background-position:center; min-height:280px;}
.page-act-content{flex:1.3 1 380px; min-width:280px; padding:40px; background:var(--surface);}
.page-act-content h2{font-size:clamp(20px,2.4vw,26px); margin-bottom:10px;}
.page-act-content p{color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin-bottom:18px;}
@media (max-width:640px){ .page-act-content{padding:28px 22px;} }

/* ---------- Contact page ---------- */
.contact-layout{display:flex; gap:48px; flex-wrap:wrap;}
.contact-details{flex:1 1 280px; min-width:260px;}
.contact-details h2{font-size:19px; margin-bottom:16px;}
.contact-details-row{margin-bottom:20px;}
.contact-details-row h4{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.03em; color:var(--ink-soft);
  text-transform:uppercase; margin-bottom:6px;
}
.contact-details-row p{font-size:14.5px; line-height:1.6;}
.contact-details-row a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
.contact-form{flex:1.4 1 380px; min-width:280px;}
.contact-form .form-row{margin-bottom:16px;}
.contact-form label{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.03em; color:var(--ink-soft); margin-bottom:6px;}
.contact-form textarea{resize:vertical; min-height:140px;}
.contact-form-error{
  font-size:13px; color:var(--red); border:var(--border-w) solid var(--red); padding:10px 12px; margin-bottom:16px;
}
.contact-form-sent{
  font-size:14.5px; line-height:1.6; border:var(--border-w) solid var(--line); padding:20px; background:var(--surface);
}
/* Honeypot: a real field (not display:none/type=hidden, which basic bots
   already know to skip) pulled off-screen with CSS instead. Genuine
   visitors never see or need it. */
.dwc-hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------- "Without / With" comparison — used on template-join-club.php.
   A genuine two-state comparison, not another card grid: what changes
   for a customer once they join, laid out side by side so the contrast
   does the persuading rather than another paragraph. ---------------- */
.compare{display:flex; border:var(--border-w) solid var(--line); flex-wrap:wrap;}
.compare-col{flex:1 1 280px; min-width:260px; padding:32px;}
.compare-col + .compare-col{border-left:var(--border-w) solid var(--line);}
.compare-col.is-club{background:var(--ink); color:#fff;}
.compare-col h3{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:20px;
}
.compare-col.is-club h3{color:#B9BEC9;}
.compare-row{display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-top:1px solid var(--line);}
.compare-col.is-club .compare-row{border-top-color:#33353C;}
.compare-row:first-of-type{border-top:none; padding-top:0;}
.compare-mark{font-family:var(--font-mono); font-size:13px; flex-shrink:0; width:16px; color:var(--ink-soft);}
.compare-col.is-club .compare-mark{color:var(--red);}
.compare-row p{font-size:14px; line-height:1.5;}
@media (max-width:700px){ .compare-col + .compare-col{border-left:none; border-top:var(--border-w) solid var(--line);} }

/* ---- CTA band ---- */
.page-cta{background:var(--navy); color:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0; text-align:center;}
.page-cta h2{font-family:var(--font-body); font-weight:700; font-size:26px; margin-bottom:10px;}
.page-cta p{font-size:14.5px; color:#C3C9E2; max-width:480px; margin:0 auto 22px;}
.page-cta .add-btn{display:inline-block; width:fit-content; padding:13px 26px; margin:0 auto; border-radius:var(--radius-pill);}

/* Two CTAs side by side — a primary action plus a visually lighter
   secondary one (e.g. Start a return + See common questions). Falls
   back to stacked/centered on narrow screens since .add-btn is
   naturally block-level. */
.page-cta-actions{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:0 auto;}
.page-cta-actions .add-btn{margin:0;}
.page-cta .btn-ghost{
	display:inline-block; width:fit-content; padding:13px 26px; margin:0; border-radius:var(--radius-pill);
	border:var(--border-w) solid rgba(255,255,255,0.35); background:transparent; color:#fff;
	font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:0.02em;
	transition:background 0.15s ease, border-color 0.15s ease;
}
.page-cta .btn-ghost:hover{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.6);}

/* ---- Order tracking form wrapper (WooCommerce shortcode lives inside) ---- */
.order-tracking-card{
  max-width:520px; background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:32px;
}
.order-tracking-card form.track_order p{margin-bottom:14px;}
.order-tracking-card form.track_order label{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); display:block; margin-bottom:6px; letter-spacing:0.04em;}
.order-tracking-card form.track_order input{
  width:100%; border:var(--border-w) solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; font-family:var(--font-body); font-size:14px; background:var(--bg);
}
.order-tracking-card form.track_order button{
  border:var(--border-w) solid var(--ink); border-radius:var(--radius-sm); background:var(--ink); color:#fff; font-family:var(--font-mono);
  font-size:12px; font-weight:700; letter-spacing:0.05em; padding:12px 22px; margin-top:6px;
}
.order-tracking-card form.track_order button:hover{background:var(--red); border-color:var(--red);}
.track-order-note{font-size:13px; color:var(--ink-soft); margin-top:20px; max-width:520px;}
.track-order-note a{text-decoration:underline;}
.track-order-note a:hover{color:var(--red);}

/* ---- Student verification form (template-parts/student-verify-form.php,
   used from template-students.php) ---- */
.student-verify-form{max-width:420px; margin:20px auto 0;}
.student-verify-row{display:flex; gap:10px;}
.student-verify-row input{
  flex:1; border:var(--border-w) solid rgba(255,255,255,0.6); border-radius:var(--radius-sm);
  padding:12px 14px; font-family:var(--font-body); font-size:14px; background:rgba(255,255,255,0.95); color:var(--ink);
}
.student-verify-error{
  background:#fff; border:var(--border-w) solid var(--red); border-radius:var(--radius-sm); color:var(--red);
  font-size:12.5px; padding:10px 12px; margin-bottom:12px; text-align:left;
}
.student-verify-sent{
  max-width:420px; margin:20px auto 0; font-size:14px; color:#fff; line-height:1.6;
}
.page-cta-resend{font-size:13px; color:#C3C9E2; margin-top:-8px; margin-bottom:4px;}
@media (max-width:480px){
  .student-verify-row{flex-direction:column;}
}

/* ---------- Warehouse Picks ---------- */

/* Photo hero — true edge-to-edge 50/50 split (no .wrap cap), matching
   the original inline-styled version exactly rather than the site's
   standard 1240px content container, which read as "shrunk" on wide
   screens compared to the original. The "how this page works"
   explanation lives in the strip just below (.picks-explainer). */
.picks-hero{border-bottom:1px solid var(--line);}
.picks-hero-grid{display:flex; flex-wrap:wrap; min-height:360px;}
.picks-hero-statement{
  flex:1 1 50%; padding:50px 40px; display:flex; flex-direction:column;
  justify-content:center; background:var(--bg);
}
.picks-hero-statement-inner{max-width:520px; margin:0 auto; width:100%;}
.picks-hero-eyebrow{
  display:block; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.1em;
  color:var(--red); margin-bottom:8px;
}
.picks-hero-statement h1{
  font-family:var(--font-body); font-weight:700; font-size:clamp(32px,4.5vw,48px); line-height:1.05; letter-spacing:-0.02em;
  margin:0 0 12px;
}
.picks-hero-statement .text-accent{color:var(--red);}
.picks-hero-statement p{font-size:16px; color:var(--ink-soft); max-width:400px; line-height:1.6; margin:0;}
.picks-hero-media{
  flex:1 1 50%; min-height:240px; position:relative; overflow:hidden; background:var(--navy);
}
.picks-hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* "How this page works" explainer strip — kept separate from the hero
   so the photo isn't crowded out, but reuses the same numbered-row
   language the rest of the site uses for step explanations. */
.picks-explainer{padding:32px 0; border-bottom:1px solid var(--line); background:var(--bg);}
.picks-explainer-grid{display:flex; gap:0; flex-wrap:wrap;}
.picks-explainer-row{flex:1 1 280px; display:flex; gap:16px; align-items:flex-start; padding:4px 28px;}
.picks-explainer-row + .picks-explainer-row{border-left:1px solid var(--line);}
.picks-explainer-num{font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--line); flex-shrink:0; line-height:1;}
.picks-explainer-row a{font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--ink); text-decoration:underline; text-underline-offset:3px;}
.picks-explainer-row a:hover{color:var(--red);}
.picks-explainer-row p{font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.5;}
.picks-explainer-note{font-size:12px; color:var(--ink-soft); line-height:1.55; text-align:center; max-width:640px; margin:18px auto 0; padding:0 28px;}
@media (max-width:720px){
  .picks-explainer-row + .picks-explainer-row{border-left:none; border-top:1px solid var(--line); padding-top:18px; margin-top:14px;}
}

.picks-empty-state{
  border:var(--border-w) dashed var(--line); border-radius:var(--radius); padding:32px; text-align:center;
}
.picks-empty-state p{font-size:14px; color:var(--ink-soft); max-width:460px; margin:0 auto; line-height:1.6;}

/* Bulk lots — auction-style numbering + alternating image side per row,
   so a stack of several reads as a considered sequence rather than
   identical repeated cards. */
.lot-card-stack{display:flex; flex-direction:column; gap:24px;}
.lot-card{
  display:flex; border:var(--border-w) solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-sm);
}
.lot-card.is-reversed{flex-direction:row-reverse;}
.lot-card-media{
  position:relative; flex:0 0 300px; display:block; min-height:240px; overflow:hidden;
}
.lot-card-media-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.lot-card-number{
  position:absolute; z-index:1; bottom:14px; left:14px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.05em; color:#fff;
  background:rgba(20,23,28,0.72); backdrop-filter:blur(4px); padding:6px 12px; border-radius:var(--radius-pill);
}
.lot-card-body{flex:1; padding:26px 30px; display:flex; flex-direction:column; gap:10px; min-width:0; justify-content:center;}
.lot-card-eyebrow{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.08em; color:var(--accent);
}
.lot-card-title{font-family:var(--font-body); font-weight:700; font-size:20px; line-height:1.25; color:var(--ink);}
.lot-card-title:hover{color:var(--red);}
.lot-card-contents{font-size:14px; color:var(--ink-soft); line-height:1.6; max-width:480px;}
.lot-card-actions{margin-top:6px;}
@media (max-width:680px){
  .lot-card, .lot-card.is-reversed{flex-direction:column;}
  .lot-card-media{flex:0 0 auto; aspect-ratio:4/3; min-height:0;}
}

/* One of a kind — CSS-column masonry instead of the uniform .grid used
   on every category/search page, so this reads as a gallery rather than
   another product listing. */
.picks-masonry{column-count:3; column-gap:22px;}
.picks-masonry-item{break-inside:avoid; margin-bottom:22px;}
@media (max-width:900px){ .picks-masonry{column-count:2;} }
@media (max-width:560px){ .picks-masonry{column-count:1;} }

/* ---- Tabs ---- */
.picks-tab-nav{
  display:flex; gap:0; border-bottom:2px solid var(--line);
  margin:40px 0 30px;
}
.picks-tab-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px; margin-bottom:-2px;
  font-family:var(--font-body); font-size:16px; font-weight:500;
  color:var(--ink-soft); border:none; background:none; cursor:pointer;
  border-bottom:3px solid transparent; transition:color 0.2s ease, border-color 0.2s ease;
}
.picks-tab-btn:hover{color:var(--ink);}
.picks-tab-btn.is-active{color:var(--ink); font-weight:700; border-bottom-color:var(--red);}
.picks-tab-count{
  display:inline-block; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:1px 10px; font-size:12px; font-weight:600; color:var(--ink-soft);
}
.picks-tab-btn.is-active .picks-tab-count{color:var(--ink); border-color:var(--ink);}
.picks-tab-panels{padding-bottom:60px;}
.picks-tab-panel[hidden]{display:none;}

/* ---- Load more ---- */
.picks-load-more{text-align:center; margin-top:40px;}
.picks-loading{
  display:none; font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); margin-left:12px;
}
.picks-loading.is-visible{display:inline;}

/* ---- Closing CTA ---- */
.picks-final-cta{background:var(--bg); border-top:1px solid var(--line); padding:50px 0; text-align:center;}
.picks-final-cta h2{font-size:24px; margin:0 0 10px;}
.picks-final-cta p{color:var(--ink-soft); max-width:450px; margin:0 auto 24px;}
.picks-final-cta-btn-wrap{display:flex; justify-content:center;}

/* ---- FAQ ---- */
.picks-faq-section{padding:64px 0; background:#fff; border-top:var(--border-w) solid var(--line);}
.picks-faq-head{max-width:640px; margin:0 auto 32px; text-align:center;}
.picks-faq-eyebrow{
  display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--red); margin-bottom:8px;
}
.picks-faq-title{
  font-family:var(--font-body); font-weight:700; font-size:clamp(22px,2.6vw,30px);
  line-height:1.15; letter-spacing:-0.01em; margin:0;
}
.picks-faq{
  max-width:760px; margin:0 auto; background:#fff; border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
}
.picks-faq-item{border-bottom:1px solid var(--line); padding:4px 28px;}
.picks-faq-item:last-child{border-bottom:none;}
.picks-faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0;
  font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--ink);
  cursor:pointer; list-style:none;
}
.picks-faq-item summary::-webkit-details-marker{display:none;}
.picks-faq-toggle{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:26px; height:26px; border-radius:50%; background:var(--bg); color:var(--red);
  font-family:var(--font-mono); font-size:16px; line-height:1; transition:background 0.15s ease, color 0.15s ease;
}
.picks-faq-toggle::before{content:'+';}
.picks-faq-item[open] .picks-faq-toggle{background:var(--red); color:#fff;}
.picks-faq-item[open] .picks-faq-toggle::before{content:'\2013';}
.picks-faq-answer{font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:0 0 22px; max-width:660px;}

/* ============================================================
   STUDENT PAGE — Redesigned
   ============================================================ */

/* ---- Hero: Contained Width ---- */
.student-hero {
    position: relative;
    min-height: min(560px, 72vh);
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
}

.student-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.student-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(10, 12, 16, 0.80) 0%, rgba(10, 12, 16, 0.35) 60%, rgba(10, 12, 16, 0.10) 100%);
}

.student-hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 40px 0;
}

.student-hero-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 18px;
}

.student-hero-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.student-hero-sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 28px;
    max-width: 520px;
}

.student-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.student-hero-cta {
    display: inline-block;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.student-hero-cta.primary {
    background: var(--red);
    color: #fff;
    border: 2px solid var(--red);
}

.student-hero-cta.primary:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
    transform: translateY(-2px);
}

.student-hero-cta.secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.student-hero-cta.secondary:hover {
    border-color: #fff;
    transform: translateY(-2px);
}

.student-hero-verified,
.student-hero-pending {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
}

.student-hero-verified {
    background: var(--green);
    color: #fff;
}

.student-hero-pending {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ---- How It Works ---- */
.student-how {
    padding: 72px 0;
    background: var(--bg);
}

.student-how-grid {
    display: flex;
    gap: 56px;
    align-items: center;
}

.student-how-content {
    flex: 1.2 1 400px;
}

.student-how-image {
    flex: 1 1 320px;
}

.student-how-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: var(--border-w) solid var(--line);
    box-shadow: var(--shadow);
}

.student-how-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px;
}

.student-how-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
}

.student-how-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0 0 14px;
}

.student-how-benefits {
    list-style: none;
    margin: 20px 0 28px;
    padding: 0;
}

.student-how-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 10px;
}

.student-how-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 11px;
}

.student-how-check i {
    font-size: 10px;
}

.student-how-cta {
    display: inline-block;
    padding: 12px 28px;
    border: var(--border-w) solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.student-how-cta:hover {
    background: var(--red);
    border-color: var(--red);
    transform: translateY(-2px);
}

@media (max-width: 820px) {
    .student-how-grid {
        flex-direction: column;
    }
    .student-how-content {
        order: 2;
    }
    .student-how-image {
        order: 1;
    }
}

/* ---- Eligibility / "small print" ---- */
.student-terms {
    padding: 72px 0;
    background: #fff;
    border-top: var(--border-w) solid var(--line);
}

.student-terms-head {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}

.student-terms-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px;
}

.student-terms-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}

.student-terms-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 920px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 40px;
}

.student-terms-grid li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
}

.student-terms-grid li:last-child {
    grid-column: 1 / -1;
}

.student-terms-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 11px;
}

.student-terms-link {
    text-align: center;
    max-width: 640px;
    margin: 28px auto 0;
    font-size: 14px;
    color: var(--ink-soft);
}

.student-terms-link a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.student-terms-link a:hover {
    color: var(--red);
}

@media (max-width: 720px) {
    .student-terms-grid {
        grid-template-columns: 1fr;
    }
    .student-terms-grid li:last-child {
        grid-column: auto;
    }
}

/* ---- FAQ ---- */
.student-faq-section {
    padding: 72px 0;
    background: var(--bg);
    border-top: var(--border-w) solid var(--line);
}

.student-faq {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.student-faq-item {
    border-bottom: 1px solid var(--line);
    padding: 4px 28px;
}

.student-faq-item:last-child {
    border-bottom: none;
}

.student-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.student-faq-item summary::-webkit-details-marker {
    display: none;
}

.student-faq-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--red);
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.student-faq-toggle::before {
    content: '+';
}

.student-faq-item[open] .student-faq-toggle {
    background: var(--red);
    color: #fff;
}

.student-faq-item[open] .student-faq-toggle::before {
    content: '\2013';
}

.student-faq-answer {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 0 22px;
    max-width: 660px;
}

/* ---- Modal ---- */

.student-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, 0.6);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.student-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.student-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.96);
    z-index: 101;
    width: min(480px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.student-modal.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.student-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--ink-soft);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.student-modal-close:hover {
    background: var(--red);
    color: #fff;
}

.student-modal-body {
    padding: 32px 32px 32px;
    margin-top: 0;
    position: relative;
}

.student-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 24px;
    margin-bottom: 14px;
    flex-shrink: 0;
    overflow: visible;
}

.student-modal-icon i {
    line-height: 1;
}

.student-modal-icon.success {
    background: var(--green);
}

.student-modal-body h2 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 10px;
}

.student-modal-body p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 16px;
}

.student-modal-resend {
    font-size: 13px !important;
    color: var(--ink-soft) !important;
    margin: 8px 0 14px !important;
}

.student-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.student-modal-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.student-modal-btn.primary {
    background: var(--ink);
    color: #fff;
    border: var(--border-w) solid var(--ink);
}

.student-modal-btn.primary:hover {
    background: var(--red);
    border-color: var(--red);
}

.student-modal-btn.secondary {
    background: transparent;
    color: var(--ink-soft);
    border: var(--border-w) solid var(--line);
}

.student-modal-btn.secondary:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.student-modal-body .student-verify-form {
    margin-top: 8px;
}

.student-modal-body .student-verify-row {
    display: flex;
    gap: 10px;
}

.student-modal-body .student-verify-row input {
    flex: 1;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    background: var(--bg);
}

.student-modal-body .student-verify-row button {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    background: var(--red);
    color: #fff;
    border: none;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.student-modal-body .student-verify-row button:hover {
    background: var(--ink);
}

@media (max-width: 560px) {
    .student-modal-body {
        padding: 24px 20px 28px;
    }

    .student-modal-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .student-modal-body .student-verify-row {
        flex-direction: column;
    }

    .student-modal-body .student-verify-row button {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Final CTA ---- */
.student-final-cta {
    padding: 56px 0 64px;
    background: var(--navy);
    color: #fff;
    text-align: center;
    border-top: 1px solid var(--line);
}

.student-final-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}

.student-final-body {
    font-size: 16px;
    line-height: 1.6;
    color: #C3C9E2;
    max-width: 480px;
    margin: 0 auto 24px;
}

.student-final-cta-btn {
    display: inline-block;
    padding: 14px 34px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    border: none;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.student-final-cta-btn:hover {
    background: #fff;
    color: var(--ink);
    transform: translateY(-2px);
}

/* ============================================================
   CLUB PAGE — Redesigned
   ============================================================ */

/* ---- Hero ---- */
.club-hero {
    position: relative;
    min-height: min(560px, 72vh);
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
}

.club-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.club-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(10, 12, 16, 0.80) 0%, rgba(10, 12, 16, 0.35) 60%, rgba(10, 12, 16, 0.10) 100%);
}

.club-hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 40px 0;
}

.club-hero-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 18px;
}

.club-hero-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.club-hero-sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 28px;
    max-width: 520px;
}

.club-hero-cta {
    display: inline-block;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    background: var(--red);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, transform 0.15s ease;
}

.club-hero-cta:hover {
    background: #fff;
    color: var(--ink);
    transform: translateY(-2px);
}

/* ---- Comparison ---- */
.club-compare {
    padding: 64px 0 72px;
    background: var(--bg);
}

.club-compare-head {
    text-align: center;
    margin-bottom: 40px;
}

.club-compare-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 6px;
}

.club-compare-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -0.01em;
    margin: 0;
}

.club-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.club-compare-card {
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
}

.club-compare-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.club-compare-card-icon {
    font-size: 18px;
    color: var(--red);
    width: 28px;
    text-align: center;
}

.club-compare-card-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
}

.club-compare-card-before,
.club-compare-card-after {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.club-compare-card-before {
    background: #f5f5f7;
    border-left: 3px solid var(--ink-soft);
}

.club-compare-card-after {
    background: #EAF4EE;
    border-left: 3px solid var(--green);
}

.club-compare-card-status {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 4px;
}

.club-compare-card-after .club-compare-card-status {
    color: var(--green);
}

.club-compare-card-before p,
.club-compare-card-after p {
    font-size: 13.5px;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 900px) {
    .club-compare-grid {
        grid-template-columns: 1fr 1fr;
    }
    .club-compare-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .club-compare-grid {
        grid-template-columns: 1fr;
    }
    .club-compare-card:last-child {
        grid-column: auto;
    }
}

/* ---- Pricing ---- */
.club-pricing {
    padding: 64px 0 72px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.club-pricing-content {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.club-pricing-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.club-pricing-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 48px);
    letter-spacing: -0.02em;
    color: var(--red);
    margin: 0 0 18px;
}

.club-pricing-body {
    margin-bottom: 24px;
}

.club-pricing-body p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0 0 6px;
}

.club-pricing-body .club-pricing-strong {
    font-weight: 600;
    color: var(--ink);
    margin-top: 10px;
}

.club-pricing-benefits {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    text-align: left;
    display: inline-block;
}

.club-pricing-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 10px;
}

.club-pricing-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 11px;
}

.club-pricing-check i {
    font-size: 10px;
}

.club-pricing-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.club-pricing-cta {
    display: inline-block;
    padding: 14px 36px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: background 0.2s ease, transform 0.15s ease;
}

.club-pricing-cta.primary {
    background: var(--red);
    color: #fff;
    border: var(--border-w) solid var(--red);
}

.club-pricing-cta.primary:hover {
    background: var(--ink);
    border-color: var(--ink);
    transform: translateY(-2px);
}

.club-pricing-cta.secondary {
    background: transparent;
    color: var(--ink);
    border: var(--border-w) solid var(--line);
}

.club-pricing-cta.secondary:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}

.club-pricing-member-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--green);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.club-pricing-member-badge i {
    margin-right: 6px;
}

.club-pricing-note {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0;
}

/* ---- Final CTA ---- */
.club-final-cta {
    padding: 56px 0 64px;
    background: var(--ink);
    color: #fff;
    text-align: center;
}

.club-final-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}

.club-final-body {
    font-size: 16px;
    line-height: 1.6;
    color: #C3C9E2;
    max-width: 480px;
    margin: 0 auto 24px;
}

.club-final-cta-btn {
    display: inline-block;
    padding: 14px 34px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, transform 0.15s ease;
}

.club-final-cta-btn.primary {
    background: var(--red);
    color: #fff;
    border: var(--border-w) solid var(--red);
}

.club-final-cta-btn.primary:hover {
    background: #fff;
    color: var(--ink);
    transform: translateY(-2px);
}

.club-final-cta-btn.secondary {
    background: transparent;
    color: #fff;
    border: var(--border-w) solid rgba(255, 255, 255, 0.3);
}

.club-final-cta-btn.secondary:hover {
    border-color: #fff;
    transform: translateY(-2px);
}
/* =========================================================================
   CONTACT PAGE — elevated card treatment
   Added as an append-only block. Namespaced to .contact-* classes so it
   can't collide with existing rules. The form itself is an elevated card
   (soft shadow, hairline border) — a deliberate exception to the site's
   otherwise-flat treatment, since a contact form is a considered "stop and
   write" moment rather than a browse moment. Corners stay square, matching
   the site's --radius*:0px design language — the card reads as elevated
   through shadow and border only, not through rounding.
   ========================================================================= */

/* ---- Form card ---- */
.contact-form-card {
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	box-shadow: 0 18px 40px -22px rgba(20, 23, 28, 0.30), 0 2px 6px rgba(20, 23, 28, 0.04);
	overflow: hidden;
}

.contact-form-card-head {
	padding: 22px 26px 18px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, rgba(45, 108, 223, 0.05) 0%, rgba(45, 108, 223, 0) 100%);
}

.contact-form-card-head h2 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
}

.contact-form-card-sub {
	font-size: 13.5px;
	color: var(--ink-soft);
	line-height: 1.5;
	margin: 0;
}

.contact-form-card .dwc-contact-form {
	padding: 22px 26px 26px;
}

/* Field rhythm inside the card — a touch more air than the sitewide default
   so the form reads as a considered block rather than a stack of inputs. */
.contact-form-card .form-row {
	margin-bottom: 18px;
}

.contact-form-card .form-row:last-of-type {
	margin-bottom: 20px;
}

.contact-form-card textarea {
	resize: vertical;
	min-height: 140px;
}

.contact-form-card .add-btn {
	width: 100%;
	padding: 14px 20px;
	font-size: 12px;
}

/* Turnstile row sits in the field rhythm like any other row — keeps it
   visually part of the form rather than a bolted-on widget. */
.contact-form-card .turnstile-row {
	margin: 0 0 18px;
}

/* ---- FAQ card (matches the form card's elevated treatment) ---- */
.contact-faq-card {
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	box-shadow: 0 18px 40px -22px rgba(20, 23, 28, 0.22), 0 2px 6px rgba(20, 23, 28, 0.04);
	padding: 26px 28px;
}

.contact-faq-card .section-head {
	margin-bottom: 18px;
}

.contact-faq-card .page-faq {
	max-width: none;
	border-top: none;
}

/* ---- Details column: tighten the pairing with the card ---- */
.contact-details {
	padding-top: 4px;
}

.contact-details h2 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}

.contact-details-row {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.contact-details-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* ---- Small-screen adjustments ---- */
@media (max-width: 640px) {
	.contact-form-card-head {
		padding: 20px 20px 16px;
	}

	.contact-form-card .dwc-contact-form {
		padding: 20px 20px 24px;
	}

	.contact-faq-card {
		padding: 22px 20px;
	}
}

/* =========================================================================
   PRODUCT-ENQUIRY MODAL — card treatment inside the reused modal shell
   The product-enquiry modal and the size-guide modal share one CSS shell
   (.size-guide-modal / .size-guide-modal-body). That shell was tuned for
   the size guide's plain heading + tables stack, and has padding/margin
   that would sit awkwardly around the .contact-form-card now placed
   inside it, plus a close button that would overlap the card's header.
   These rules reset both, scoped only to the case where the shell
   actually contains a contact card — the size guide modal is unaffected.
   ========================================================================= */

.size-guide-modal-body:has(> .contact-form-card) {
	padding: 0;
	margin-top: 0;
}

.size-guide-modal:has(.contact-form-card) .modal-close {
	top: 14px;
	right: 14px;
}

/* =========================================================================
   ABOUT DWC — photo/story split + three-point row
   A 50/50 photo-and-copy band (like .picks-hero-* on Warehouse Picks, but
   its own classes since this sits mid-page under the real page-hero <h1>
   rather than being the hero itself) plus a lightweight bordered 3-up row
   for short "what this means" points. Both scoped to template-about.php
   but generic enough to reuse on other info pages later.
   ========================================================================= */

.about-split{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.about-split-grid{display:flex; flex-wrap:wrap; min-height:380px;}
.about-split-media{flex:1 1 50%; min-height:280px; position:relative; overflow:hidden; background:var(--navy);}
.about-split-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.about-split-copy{flex:1 1 50%; padding:56px 48px; display:flex; flex-direction:column; justify-content:center; background:var(--bg);}
.about-split-copy-inner{max-width:480px; margin:0 auto; width:100%;}
.about-split-eyebrow{
	display:block; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.1em;
	color:var(--red); margin-bottom:10px;
}
.about-split-copy h2{font-family:var(--font-body); font-weight:700; font-size:clamp(24px,3vw,32px); line-height:1.15; margin:0 0 14px; letter-spacing:-0.01em;}
.about-split-copy p{font-size:15px; color:var(--ink-soft); line-height:1.65; margin:0 0 12px;}
.about-split-copy p:last-child{margin-bottom:0;}
@media (max-width:820px){
	.about-split-media{order:-1; min-height:220px;}
	.about-split-copy{padding:36px 24px;}
}

.about-points{display:flex; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:20px;}
.about-point{flex:1 1 220px; padding:22px 26px 4px; border-left:1px solid var(--line);}
.about-point:first-child{border-left:none;}
.about-point-num{font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--line); line-height:1; margin-bottom:10px;}
.about-point h3{font-family:var(--font-body); font-weight:700; font-size:15px; margin:0 0 6px;}
.about-point p{font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0;}
@media (max-width:700px){
	.about-point{border-left:none; border-top:1px solid var(--line); padding-top:20px;}
	.about-point:first-child{border-top:none;}
}

/* =========================================================================
   HOW DWC WORKS — "Understanding our prices", live worked example
   Renders dwc_render_price_ladder() on a real catalogue product (same
   markup/CSS as a real product card) next to a plain-language legend, so
   the RRP / Our Price / Club / Student explanation isn't just abstract
   bullet text. .price-example-card intentionally matches .card-body's
   padding (14px 14px 16px) since .price-tier.club's negative margins in
   main.css are calibrated against that exact padding.
   ========================================================================= */
.price-explain{display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; border-top:1px solid var(--line); padding-top:32px; margin-top:20px;}
.price-explain-example{flex:0 0 auto;}
.price-explain-card{
	width:230px; background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius);
	box-shadow:var(--shadow-sm); overflow:hidden;
}
.price-explain-swatch{display:block; position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg);}
.price-explain-swatch img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.price-explain-body{padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px;}
.price-explain-cat{font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; color:var(--ink-soft); text-transform:uppercase;}
.price-explain-name{font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink); text-decoration:none;}
.price-explain-name:hover{color:var(--red);}
.price-explain-tag{
	display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.06em;
	color:var(--ink-soft); margin-bottom:2px;
}
.price-explain-copy{flex:1 1 340px; min-width:0;}
.price-explain-copy > p:first-child{margin-top:0;}
@media (max-width:640px){
	.price-explain{gap:24px;}
	.price-explain-card{width:100%; max-width:230px;}
}