/* =====================================================================
   NXTED SITE DESIGN SYSTEM — shared across every page.
   ---------------------------------------------------------------------
   This is the reusable subset of the local design system originally
   built inline in Home.dc.html. Home.dc.html keeps its own <style>
   block for page-specific components (hero, stat strip, subject cards,
   tutors carousel, steps, closing CTA) — this file holds only the
   primitives every page shares: type, layout, buttons, eyebrows, chips,
   the head/more pattern, and the FAQ disclosure component.

   Three rules hold the look together. Break one and it starts to look
   generic again:

   1. TYPE   Serif (Source Serif 4, via --font-body) sets every headline
             and every number. Montserrat (--font-ui) is UI only —
             buttons, labels, eyebrows, nav, chips.

   2. RHYTHM Sections alternate white / cream / white / cream via
             .nx-band. The colour belongs to the whole band, never to a
             card inside it.

   3. BOXES  Cards are the exception, not the rule. Everything else is
             separated by hairlines and whitespace.

   Requires _ds/nxted-design-system-.../tokens/{colors,typography,
   spacing,fonts}.css to be linked first for the CSS custom properties
   used below (--font-body, --accent-primary, --surface-page, etc.).
   ===================================================================== */

/* Stops a touch drag that isn't fully captured by a component (e.g. the
   tutors carousel) from rubber-banding the whole PAGE horizontally on
   mobile Safari and revealing blank space past the page's real edge.
   overscroll-behavior (not overflow:hidden) so it doesn't disturb how
   `scroll` events fire, which the fixed nav's fade-on-scroll relies on. */
html{overscroll-behavior-x:none;}
body{margin:0;background:var(--surface-page);font-family:var(--font-body);color:var(--text-primary);
  -webkit-font-smoothing:antialiased;overscroll-behavior-x:none;}
a{color:var(--accent-text);text-decoration:underline;text-decoration-color:var(--accent-underline);
  text-decoration-thickness:2px;text-underline-offset:3px;}
a:hover{text-decoration-color:var(--accent-underline-hover);}
:focus-visible{outline:2px solid var(--accent-primary);outline-offset:3px;border-radius:4px;}

/* ---- layout grid: nav, every section and the footer share this ---- */
.nx-wrap{max-width:1640px;margin:0 auto;width:100%;box-sizing:border-box;
  padding-left:clamp(20px,3.2vw,44px);padding-right:clamp(20px,3.2vw,44px);}
.nx-wrap--narrow{max-width:900px;}
.nx-sect{padding-top:clamp(42px,4.6vw,68px);padding-bottom:clamp(42px,4.6vw,68px);}
.nx-band{background:var(--surface-warm);border-top:1px solid var(--border-hairline);
  border-bottom:1px solid var(--border-hairline);}

/* Every page except Home floats the nav with no bar of its own over a plain
   first section, so it needs this clearance or the content starts out
   hidden underneath it. Home's hero handles its own clearance separately
   because it also carries the warm gradient background. */
.nx-nav-clear{padding-top:86px;}
@media (max-width:820px){.nx-nav-clear{padding-top:72px;}}

/* ---- type ---- */
.nx-h1{margin:0;font-family:var(--font-body);font-weight:700;
  font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-1.4px;text-wrap:balance;}
.nx-h2{margin:0;font-family:var(--font-body);font-weight:700;
  font-size:clamp(25px,2.7vw,36px);line-height:1.12;letter-spacing:-0.7px;text-wrap:balance;}
.nx-h3{margin:0;font-family:var(--font-body);font-weight:700;font-size:19px;
  line-height:1.25;letter-spacing:-0.3px;}
.nx-lead{margin:0;font-family:var(--font-body);font-size:16.5px;line-height:1.6;
  color:var(--text-secondary);max-width:62ch;text-wrap:pretty;}
.nx-body{margin:0;font-family:var(--font-body);font-size:15.5px;line-height:1.6;
  color:var(--text-secondary);text-wrap:pretty;}
.nx-ui{font-family:var(--font-ui);font-weight:600;}

/* Eyebrow with a short marigold rule — the small repeated detail that makes
   every page feel like one family. */
.nx-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);
  font-weight:700;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--text-secondary);}
.nx-eyebrow::before{content:'';flex:none;width:24px;height:2px;border-radius:2px;
  background:var(--accent-primary);}
.nx-eyebrow-inv{color:var(--text-inverse-muted);}

/* Page CTAs are plain anchors rather than the design-system <x-import>
   Button, which ships a fixed inline style and no hover or focus state.
   These need a lift on hover, a filled-in ghost variant, and per-placement
   sizing, so they're styled here. The nav keeps the DS Button. */
.nx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ui);font-weight:700;font-size:15px;line-height:1;
  padding:15px 27px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background-color:var(--accent-primary);color:var(--color-espresso);
  transition:background-color .16s ease,transform .16s ease,box-shadow .16s ease;}
.nx-btn:hover{background-color:var(--accent-primary-hover);transform:translateY(-1px);
  box-shadow:0 12px 22px -12px rgba(36,28,21,.55);text-decoration:none;}
.nx-btn-ghost{background-color:transparent;color:var(--text-primary);
  box-shadow:inset 0 0 0 1.6px var(--text-primary);}
.nx-btn-ghost:hover{background-color:var(--text-primary);color:var(--color-white);
  box-shadow:inset 0 0 0 1.6px var(--text-primary);}

.nx-head{display:flex;flex-direction:column;gap:11px;margin-bottom:clamp(24px,2.6vw,36px);}
.nx-head-row{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;}
.nx-more{font-family:var(--font-ui);font-weight:700;font-size:14px;white-space:nowrap;
  color:var(--text-primary);text-decoration:none;border-bottom:2px solid var(--accent-underline);
  padding-bottom:2px;transition:border-color .15s ease;}
.nx-more:hover{border-bottom-color:var(--accent-underline-hover);}

.nx-chip{display:inline-block;font-family:var(--font-ui);font-weight:600;font-size:12.5px;
  color:var(--text-primary);background:var(--surface-quiet);border:1px solid transparent;
  border-radius:999px;padding:5px 12px;text-decoration:none;transition:all .15s ease;}
a.nx-chip:hover{background:var(--surface-marigold-wash);border-color:var(--accent-primary);}

/* ---- tutor card: circular avatar overlapping the top edge, centered
       content, Teaches/Where meta row. Used both loose in a grid (Tutors
       page) and as a flex child inside Home's carousel track — the
       `flex:0 0 …` only takes effect in the flex context, a grid parent
       ignores it and sizes the card from its own column tracks instead. ---- */
.nx-tutor{flex:0 0 clamp(260px,30vw,340px);background:var(--surface-card);
  border:1px solid var(--border-hairline);border-radius:18px;
  padding:56px 22px 22px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:10px;position:relative;min-height:300px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.nx-tutor:hover{transform:translateY(-3px);border-color:var(--accent-primary);
  box-shadow:0 18px 34px -24px rgba(36,28,21,.55);}
.nx-tutor-av{flex:none;width:96px;height:96px;border-radius:50%;background:var(--surface-quiet);
  color:var(--text-secondary);font-family:var(--font-ui);font-weight:700;font-size:26px;
  display:flex;align-items:center;justify-content:center;position:absolute;
  top:-48px;left:50%;transform:translateX(-50%);
  border:3px solid var(--accent-primary);box-shadow:0 0 0 4px var(--surface-card);}
.nx-tutor-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.nx-meta{padding-top:12px;width:100%;border-top:1px solid var(--border-hairline);
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px;line-height:1.45;
  color:var(--text-secondary);font-family:var(--font-body);text-align:left;}
.nx-meta dt{font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-secondary);padding-top:2px;}
.nx-meta dd{margin:0;color:var(--text-primary);}

/* Static grid of tutor cards, for a page that isn't a carousel — needs
   extra top padding on the row so the ".nx-tutor-av" avatars (which
   overlap above the card) don't get clipped/crowded against whatever
   sits above the grid. */
.nx-tutor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  align-items:start;column-gap:20px;row-gap:64px;padding-top:48px;}

/* ---- generic card, for pages that need one without a bespoke variant ---- */
.nx-card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:18px;
  padding:22px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.nx-card:hover{transform:translateY(-3px);border-color:var(--accent-primary);
  box-shadow:0 18px 34px -24px rgba(36,28,21,.55);}

/* ---- faq: a details/summary disclosure, reusable on any page ---- */
.nx-faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,4vw,64px);
  align-items:start;}
.nx-faq{border-bottom:1px solid var(--border-hairline);}
.nx-faq:first-child{border-top:1px solid var(--border-hairline);}
.nx-faq summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--font-body);
  font-weight:700;font-size:16.5px;line-height:1.35;display:flex;justify-content:space-between;
  gap:18px;align-items:center;transition:color .15s ease;}
.nx-faq summary:hover{color:var(--text-secondary);}
.nx-faq summary::-webkit-details-marker{display:none;}
.nx-faq summary::after{content:'';flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--surface-quiet);
  background-image:linear-gradient(var(--color-espresso),var(--color-espresso)),
                   linear-gradient(var(--color-espresso),var(--color-espresso));
  background-size:10px 2px,2px 10px;background-position:center,center;
  background-repeat:no-repeat;transition:transform .2s ease;}
.nx-faq[open] summary::after{background-size:10px 2px,0 0;transform:rotate(180deg);}
.nx-faq p{margin:0 0 18px;font-family:var(--font-body);font-size:15.5px;line-height:1.65;
  color:var(--text-secondary);max-width:70ch;}

/* ---- closing cta: an inset dark card, so a page can end on a shape
       rather than another full-bleed band butting into the footer ---- */
.nx-endcta{position:relative;overflow:hidden;background:var(--color-espresso);border-radius:26px;
  padding:clamp(32px,3.6vw,52px) clamp(24px,3vw,52px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.nx-endcta::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 88% 110%, rgba(255,161,41,.30), rgba(255,161,41,0) 65%);}
.nx-endcta > *{position:relative;}

@media (max-width:900px){
  .nx-faq-grid{grid-template-columns:1fr;gap:22px;}
}
@media (max-width:560px){
  .nx-endcta{padding:28px 22px;}
}