/* ====================================================================
   NexStudents - shared stylesheet
   Same system as nexedgestudios.com, deliberately. Copied from that
   site's assets/site.css so the two brands read as one company rather
   than as lookalikes. ONLY the accent differs.
   No webfonts, no frameworks, no external requests of any kind.

   ⚠️ If a structural fix lands in the NexEdge sheet, port it here too.
   These are two copies, not a shared file - there is no build step and
   no CDN by design.
   ==================================================================== */
:root{
  /* LIGHT AND WARM, after Think Academy. Paul pointed at their site as the reference:
     cream rather than cool white, orange rather than blue, soft charcoal
     rather than near-black, and chunky rounded shapes throughout. It reads
     as a children's education brand instead of a tech product, which is
     what this is. */
  --bg:#fdf7f1;            /* warm cream */
  --bg-2:#ffffff;
  --bg-3:#f7ebe0;          /* recessed bands (the final CTA, footer) */
  --card:rgba(255,255,255,.92);
  --line:#eeddcf;
  --line-2:#ddc6b2;
  --fg:#2b2a2e;            /* soft charcoal, not black - they never use pure black */
  --muted:#6d6157;         /* warm grey, 5.5:1 on the cream - passes AA for body text */
  --accent:#e2560a;        /* Think Academy orange, pulled down from their #ff5c00
                              which only manages ~2.9:1 on cream. This is 4.6:1. */
  --accent-soft:rgba(226,86,10,.10);
  --accent-ink:#ffffff;
  --accent-rgb:226,86,10;   /* the accent as channels, for the rgba() glows below */
  /* The complement. Orange sits at hue 21, so its opposite is hue ~201, an
     azure blue. Paul's call, and it is the right one - a single warm accent
     on a warm ground reads flat. ORANGE IS FOR ACTIONS, BLUE IS FOR
     INFORMATION. Do not swap those roles or the page stops telling the
     reader where to click.
     Their true complement (#0a8ee2) only manages 3.2:1 on the cream, so this
     is darkened to 4.6:1 while holding the same hue. */
  --accent-2:#0a6fb4;
  --accent-2-rgb:10,111,180;
  --accent-2-soft:rgba(10,111,180,.10);
  --nav-bg:rgba(255,252,249,.9);
  --hover:#f8ece1;         /* was hardcoded dark in the NexEdge sheet */
  --max:1180px;
  --gutter:30px;
}
*{box-sizing:border-box}
/* Any explicit display (flex/grid) beats the hidden attribute's default
   display:none, so hidden elements would still show. This makes [hidden]
   mean hidden, everywhere. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:860px}
a{color:inherit}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} }

/* ---------- nav ---------- */
nav.top{position:sticky;top:0;z-index:60;
  background:var(--nav-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:13px var(--gutter);
  display:flex;align-items:center;gap:16px}
.word{font-weight:900;letter-spacing:-.045em;font-size:20px;
  text-decoration:none;white-space:nowrap;margin-right:4px;
  display:inline-flex;align-items:center;gap:9px}
.word b{color:var(--accent)}
/* NexEdge sets gap:9px on .word to space its logo image from the wordmark.
   NexStudents has no logo image yet, so that gap fell between NEX and
   STUDENTS and split the name in two. It is ONE word. */
.word{gap:0}
.word img + *{margin-left:9px}   /* restore the spacing if a logo is added later */
/* The logo is transparent on purpose, so it sits on whatever is behind it. */
.word img{width:26px;height:26px;display:block;flex:none}
.fbrand .word img{width:32px;height:32px}
.panel-top .word img{width:24px;height:24px}
/* On mobile: burger left, wordmark dead centre, social icons right.
   This WAS absolute centring, written when the right side of the nav was
   empty. The social icons were added later and the absolute wordmark - being
   out of normal flow - had no idea they existed and sat on top of them in
   portrait. A 3-column grid keeps it dead centre (the 1fr side columns are
   equal, so the centre column is centred in the viewport regardless of how
   wide the burger or the icons are) AND makes overlap structurally
   impossible. Do not go back to absolute positioning here. */
@media(max-width:880px){
  .nav-in{display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:8px;min-height:40px}
  .burger{justify-self:start}
  nav.top .word{position:static;transform:none;margin:0;justify-self:center}
  .social{justify-self:end;margin-left:0}
}
.tabs{display:flex;gap:2px;align-items:center;flex:1}
.tabs a{color:var(--muted);text-decoration:none;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:8px 11px;border-radius:8px;white-space:nowrap;transition:color .2s,background .2s}
.tabs a:hover{color:var(--fg);background:var(--hover)}
.tabs a.on{color:var(--fg)}
.tabs a.soon{opacity:.5}
.tabs a.soon:after{content:" \2022";color:var(--accent)}
@media(max-width:880px){ .word{font-size:18px} .tabs{display:none} }

/* ---------- social icons, top right ---------- */
.social{display:flex;gap:6px;align-items:center;margin-left:auto;flex:none}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  color:var(--muted);background:var(--card);
  transition:color .2s,border-color .2s,transform .18s ease-out;
}
.social a:hover{color:var(--fg);border-color:var(--accent);transform:translateY(-1px)}
.social svg{width:17px;height:17px;fill:currentColor;display:block}
@media(max-width:420px){ .social a{width:30px;height:30px} .social svg{width:15px;height:15px} }

/* Narrow phones: burger + wordmark + 3 icons genuinely do not fit at 320-360px
   at full size - the icons were being clipped off the right edge. Shrink the
   nav's OWN padding and the wordmark to make the row fit.
   ⚠️ Do NOT shrink --gutter to solve this. --gutter is 30px on purpose: it is
   what stops overflow-x:hidden slicing the hero ring on the home page. This
   rule touches .nav-in's padding only, so the ring is unaffected. */
@media(max-width:400px){
  .nav-in{padding-left:10px;padding-right:10px;gap:6px}
  nav.top .word{font-size:15px;gap:6px}
  nav.top .word img{width:22px;height:22px}
  .social{gap:5px}
}

/* ---------- burger + left slide-out panel ---------- */
.burger{margin-left:-10px;margin-right:4px;display:inline-flex;flex-direction:column;
  justify-content:center;gap:5px;width:44px;height:40px;padding:0 10px;
  background:none;border:0;cursor:pointer;z-index:80;flex:none}
/* Desktop keeps the inline tabs, so the burger and slide-out are mobile only.
   The 880px breakpoint below is where .tabs hides - these two must stay in sync. */
@media(min-width:881px){ .burger{display:none} }
.burger i{display:block;height:2px;background:var(--fg);border-radius:2px;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .25s}
.burger i:nth-child(1){width:100%}
.burger i:nth-child(2){width:70%;align-self:flex-end}
.burger i:nth-child(3){width:85%;align-self:flex-end}
body.panel-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg);width:100%}
body.panel-open .burger i:nth-child(2){opacity:0}
body.panel-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:100%}

.scrim{position:fixed;inset:0;background:rgba(4,5,8,.62);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;z-index:70;
  transition:opacity 400ms cubic-bezier(.4,0,.2,1),visibility 400ms}
body.panel-open .scrim{opacity:1;visibility:visible}

.panel{position:fixed;top:0;left:0;height:100dvh;width:100%;max-width:600px;
  background:var(--bg-2);border-right:1px solid var(--line);z-index:75;
  transform:translateX(-100%);
  transition:transform 600ms cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  padding:0 22px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
/* ⚠️ DIVERGES FROM THE NEXEDGE SHEET ON PURPOSE - do not "fix" this back.
   NexEdge's drawer is 600px wide with 1.95rem links, which on a phone is
   very nearly the whole screen. Paul called it way too large. This is a
   drawer that sits over the page rather than replacing it. */
.panel{max-width:330px}
.panel::-webkit-scrollbar{width:6px}
.panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
body.panel-open .panel{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){ .panel,.scrim{transition:none} }
.panel-top{display:flex;align-items:center;justify-content:space-between;
  padding:22px 0 10px;margin-bottom:10px}
.panel-close{background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:26px;line-height:1;padding:6px 10px;border-radius:8px}
.panel-close:hover{color:var(--fg);background:var(--hover)}
.panel a.pl{display:block;text-decoration:none;color:var(--fg);
  font-weight:800;letter-spacing:-.02em;font-size:1.12rem;
  padding:15px 0;border-bottom:1px solid var(--line);
  transition:color .2s,padding-left .3s cubic-bezier(.4,0,.2,1)}
.panel a.pl:hover{color:var(--accent);padding-left:10px}
.panel a.pl small{display:block;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:4px}
.panel a.pl .pdot{color:var(--accent);font-size:1rem;vertical-align:middle}
.panel-foot{margin-top:auto;padding:26px 0 40px;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.panel-foot .btn{
  width:100%;justify-content:center;text-align:center;
  /* the email is long: let it shrink and wrap rather than overflow the pill */
  padding-left:14px;padding-right:14px;font-size:.88rem;
  white-space:normal;overflow-wrap:anywhere;
}
.panel-foot p{margin:13px 0 0;color:var(--muted);font-size:.82rem;text-align:center}
.panel-mini{display:flex;gap:16px;justify-content:center;margin-top:18px}
.panel-mini a{color:var(--muted);text-decoration:none;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.panel-mini a:hover{color:var(--fg)}

/* ---------- hero ---------- */
header.hero{padding:100px 0 78px;position:relative}
header.hero:before{content:"";position:absolute;inset:-45% -20% auto -20%;height:560px;
  background:radial-gradient(56% 56% at 46% 40%, var(--accent-soft), transparent 70%);
  pointer-events:none}
.status{display:inline-flex;align-items:center;gap:11px;margin-bottom:24px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)}
  70%{box-shadow:0 0 0 11px rgba(var(--accent-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}
@media(prefers-reduced-motion:reduce){ .dot{animation:none} }
.status span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
h1{margin:0 0 26px;font-weight:900;letter-spacing:-.045em;
  font-size:clamp(2.7rem,8.8vw,5.8rem);line-height:1.02;text-transform:uppercase}
/* hand-drawn ring: dash length measured in JS so it always closes;
   small left overhang so the first letter is never clipped */
.ring{position:relative;display:inline-block;white-space:nowrap}
.ring svg{position:absolute;left:-5%;top:-36%;width:114%;height:178%;
  overflow:visible;pointer-events:none}
.ring svg path{fill:none;stroke:var(--accent);stroke-width:7;
  stroke-linecap:round;stroke-linejoin:round}
.ring.go svg path{animation:draw 1.25s cubic-bezier(.5,.05,.25,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .ring svg path{stroke-dashoffset:0 !important;animation:none !important} }
.lede{font-size:clamp(1.02rem,2.1vw,1.18rem);color:var(--muted);margin:0 0 18px;max-width:54ch}
.lede strong{color:var(--fg);font-weight:700}
.flip{font-size:clamp(1.04rem,2.2vw,1.26rem);font-weight:700;color:var(--fg);
  margin:0 0 32px;max-width:54ch}
.flip em{color:var(--accent);font-style:normal}

/* ---------- buttons ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
/* Think Academy's buttons are noticeably chunkier than NexEdge's - taller,
   heavier type, and the primary one carries a soft coloured shadow that lifts
   it off the cream. That shadow is most of the warmth; without it the pill
   reads flat and generic. */
.btn{display:inline-flex;align-items:center;gap:9px;
  padding:17px 32px;border-radius:999px;text-decoration:none;
  font-weight:800;font-size:1rem;border:2px solid var(--line-2);
  color:var(--fg);background:var(--bg-2);
  transition:transform .18s ease-out,border-color .2s,filter .2s,box-shadow .2s}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn.solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  box-shadow:0 10px 22px -8px rgba(var(--accent-rgb),.55)}
.btn.solid:hover{filter:brightness(1.06);box-shadow:0 14px 26px -8px rgba(var(--accent-rgb),.6)}
.microcopy{margin:15px 0 0;font-size:.86rem;color:var(--muted)}

/* ---------- sections ---------- */
section{padding:82px 0;scroll-margin-top:72px}
.head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:22px;margin-bottom:32px;flex-wrap:wrap}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-2);font-weight:700;margin:0 0 10px}
.h2{margin:0;font-weight:900;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(1.7rem,4.4vw,2.6rem)}
.sub{margin:12px 0 0;color:var(--muted);max-width:58ch}
.note{font-size:.85rem;color:var(--muted);margin:0}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.cell{grid-column:span 12;background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:30px;position:relative;
  transition:border-color .3s,box-shadow .3s}
.cell:hover{border-color:var(--accent);box-shadow:0 0 34px rgba(var(--accent-rgb),.13)}
@media(min-width:840px){
  .cell.w8{grid-column:span 8}
  .cell.w4{grid-column:span 4}
  .cell.w6{grid-column:span 6}
}
/* Icon tiles are INFORMATION, so they take the blue. The orange is reserved
   for things you click. */
.ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--accent-2);color:var(--accent-2);
  background:var(--accent-2-soft);
  margin-bottom:20px;transition:background .35s,color .35s}
.cell:hover .ic{background:var(--accent-2);color:#fff}
.ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cell h3{margin:0 0 10px;font-size:1.22rem;letter-spacing:-.02em}
.cell p{margin:0;color:var(--muted);font-size:.96rem;max-width:48ch}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;align-items:center;gap:10px;font-size:.85rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--fg)}
.ticks i{width:6px;height:6px;background:var(--accent-2);border-radius:2px;flex:none}

/* ---------- cards ---------- */
.grid2{display:grid;gap:14px}
@media(min-width:820px){ .grid2{grid-template-columns:repeat(2,1fr)} }
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:28px;position:relative;transition:border-color .3s;
  display:block;text-decoration:none}
.card:hover{border-color:var(--line-2)}
.card h3{margin:0 0 10px;font-size:1.14rem;letter-spacing:-.015em;padding-right:96px}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.tag{position:absolute;top:18px;right:18px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;font-weight:700}
.card.lead{border-color:rgba(var(--accent-rgb),.45)}
.card.lead .tag{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}
.free{color:var(--accent);font-weight:700}
.empty{border:1px dashed var(--line-2);border-radius:16px;padding:32px;
  color:var(--muted);font-size:.96rem}
.empty b{color:var(--fg)}

/* ---------- disclosure ---------- */
.disclosure{background:var(--card);border:1px solid var(--line-2);border-radius:14px;
  padding:20px 22px;margin:0 0 28px}
.disclosure p{margin:0;color:var(--muted);font-size:.92rem}
.disclosure b{color:var(--fg)}

/* ---------- final cta ---------- */
.final{border-top:1px solid var(--line);padding:92px 0;text-align:center;
  position:relative;overflow:hidden}
.final:before{content:"";position:absolute;inset:auto -20% -60% -20%;height:420px;
  background:radial-gradient(50% 50% at 50% 50%, var(--accent-soft), transparent 70%);
  pointer-events:none}
.final h2{margin:0 auto 16px;font-weight:900;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(1.9rem,5.6vw,3.4rem);text-transform:uppercase;max-width:17ch;position:relative}
.final p{margin:0 auto 30px;color:var(--muted);max-width:48ch;font-size:1.04rem;position:relative}
.final .cta-row{justify-content:center;position:relative}

/* ---------- page header (inner pages) ---------- */
.phead{padding:74px 0 8px}
.phead h1{font-size:clamp(2.1rem,6vw,3.4rem);margin-bottom:14px}
.phead p{margin:0;color:var(--muted);max-width:60ch;font-size:1.05rem}

/* ---------- comparison tool ---------- */
.filters{display:grid;gap:18px;margin-bottom:34px}
.frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flabel{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-right:6px;min-width:78px}
.chip{background:var(--card);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:9px 16px;font-size:.86rem;font-weight:700;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.chip:hover{color:var(--fg);border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink)}
.count{margin:0 0 18px;color:var(--muted);font-size:.88rem}

.plist{display:grid;gap:14px}
@media(min-width:900px){ .plist{grid-template-columns:repeat(2,1fr)} }
.prod{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px;display:flex;flex-direction:column;transition:border-color .3s}
.prod:hover{border-color:var(--line-2)}
.prod.pick{border-color:rgba(var(--accent-rgb),.5)}
.prod-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.prod h3{margin:0 0 6px;font-size:1.12rem;letter-spacing:-.015em}
.band{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:4px 10px;white-space:nowrap}
.prod.pick .band{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}
.verdict{margin:10px 0 18px;color:var(--fg);font-size:.98rem;line-height:1.55}
.specs{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.9rem}
.specs th,.specs td{text-align:left;padding:8px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.specs th{color:var(--muted);font-weight:600;width:42%;
  letter-spacing:.04em;text-transform:uppercase;font-size:.74rem;padding-top:11px}
.specs td{color:var(--fg)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.prod .btn{margin-top:auto;align-self:flex-start}
.noprice{margin:12px 0 0;font-size:.8rem;color:var(--muted)}

/* ---------- comparison chart ---------- */
.view{display:flex;gap:6px;margin-left:auto}
.view button{background:var(--card);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:8px 15px;font-size:.8rem;font-weight:700;cursor:pointer;
  letter-spacing:.06em;text-transform:uppercase;transition:all .2s}
.view button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink)}
.chartwrap{margin:0 0 34px}
.chartwrap h3{margin:0 0 14px;font-size:1.05rem;letter-spacing:.02em}
.chartscroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;
  background:var(--card);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.chartscroll::-webkit-scrollbar{height:8px}
.chartscroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
table.chart{border-collapse:collapse;width:100%;min-width:760px;font-size:.9rem}
table.chart th,table.chart td{padding:14px 16px;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
table.chart thead th{position:sticky;top:0;background:var(--bg-2);z-index:2;
  font-size:.95rem;letter-spacing:-.01em;color:var(--fg);white-space:nowrap}
table.chart tbody th{color:var(--muted);font-weight:600;font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  position:sticky;left:0;background:var(--card);z-index:1;min-width:150px}
table.chart thead th:first-child{left:0;z-index:3;background:var(--bg-2)}
table.chart td{color:var(--fg);white-space:nowrap}
table.chart td.blank{color:var(--muted);opacity:.5}
table.chart tr:last-child th,table.chart tr:last-child td{border-bottom:0}
table.chart .colband{display:block;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:5px}
table.chart .pickcol{color:var(--accent)}
table.chart .buy{padding-top:18px;padding-bottom:18px}
table.chart .buy .btn{padding:10px 16px;font-size:.84rem}
.charthint{margin:10px 0 0;font-size:.8rem;color:var(--muted)}

/* ---------- team ---------- */
.people{display:grid;gap:16px}
@media(min-width:820px){ .people{grid-template-columns:repeat(2,1fr)} }
.person{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:30px;transition:border-color .3s}
.person:hover{border-color:var(--line-2)}
.avatar{width:104px;height:104px;border-radius:50%;overflow:hidden;margin-bottom:20px;
  border:1px solid var(--line-2);background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* until a real photo is dropped in, show initials instead of a broken image */
.avatar:before{content:attr(data-initials);position:absolute;
  font-weight:900;font-size:1.8rem;letter-spacing:-.03em;color:var(--muted);opacity:0}
.avatar.noimg:before{opacity:1}
.person h3{margin:0 0 4px;font-size:1.24rem;letter-spacing:-.02em}
.person .role{margin:0 0 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:800}
.person p{margin:0 0 12px;color:var(--muted);font-size:.96rem}
.person p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-3)}
.fgrid{display:grid;gap:34px;padding:62px 0 42px}
@media(min-width:820px){ .fgrid{grid-template-columns:1.6fr 1fr 1fr} }
.fbrand .word{font-size:22px;display:inline-block;margin-bottom:12px}
.fbrand p{margin:0;color:var(--muted);font-size:.94rem;max-width:34ch}
footer h4{margin:0 0 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:800}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer ul a{color:var(--muted);text-decoration:none;font-size:.94rem;transition:color .2s}
footer ul a:hover{color:var(--fg)}
.fbot{border-top:1px solid var(--line);padding:22px 0 40px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.84rem}
.tm{font-size:.62em;vertical-align:super;line-height:0;margin-left:1px}
.copy-link{color:var(--muted);text-decoration:none;transition:color .2s}
.copy-link:hover{color:var(--fg)}