/* ==========================================================================
   MyCampusStartups
   --------------------------------------------------------------------------
   Palette follows the existing brand (the same tokens the app ships in
   globals.css). Type scale is deliberately large.

   Rules this stylesheet is built to, with sources:

   MEASURE      45 to 90 characters per line (Butterick, Practical Typography).
                Applied to running prose only. A one sentence lede or a card
                description gets no cap and is allowed to fill its column,
                because capping short text is what produces the ragged
                two and three line stacks that read as machine set.

   WHITESPACE   One unit of space between related elements, two units between
                groups (Nielsen Norman Group). Space between a heading and its
                own body is deliberately tighter than the space above the
                heading, so proximity does the grouping.

   SURFACE      No drop shadows. Separation is carried by hairlines and by
                changes of ground colour. Radius is 0 except on pills.
   ========================================================================== */

:root{
  /* Ground and paper */
  --parchment:#FBF8F2;
  --paper:#FFFDF8;
  --cream:#F3ECDF;
  --sand:#EADFCB;
  --sand-deep:#D9CFBE;

  /* Ink */
  --ink:#26221C;
  --ink-soft:#4A4339;
  --ink-lede:#544C40;
  --muted:#6B6359;

  /* Brand */
  --pine:#134E37;
  --pine-bright:#1C6B47;
  --pine-deep:#0E3A29;
  --clay:#C4602E;          /* brand accent, matches the app's globals.css */
  /* The eyebrow is 12px bold, which WCAG counts as normal size text, so it
     needs 4.5:1 and not the 3:1 that large text gets. Brand clay reaches only
     3.53:1 on the cream ground. This is the same hue and saturation, dropped
     in lightness until it clears: 4.52 on cream, 5.01 on parchment.
     The brand token above is left alone. */
  --clay-label:#A95328;
  /* Used for the tick icons on the pine strip. Non-text needs 3:1; brand
     clay-bright sat at 3.04, which is too close to call. This is 3.87. */
  --clay-bright:#EE8A55;
  --brass:#7A6431;

  /* On dark ground */
  --on-pine:#F4EBDA;
  --on-pine-soft:#BFCCC2;

  /* Spacing scale. Base unit 8px. Related elements take one step,
     groups take two. */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Section rhythm */
  --band:clamp(72px, 8.5vw, 122px);
  --gutter:clamp(20px, 4vw, 44px);
  --maxw:1220px;
  --maxw-narrow:960px;

  /* Measure. Prose only. */
  --measure:64ch;
  --measure-wide:76ch;

  /* Type */
  --f-display:"Newsreader", Georgia, "Times New Roman", serif;
  --f-cond:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --dur:220ms;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit}

:focus-visible{
  outline:3px solid var(--pine-bright);
  outline-offset:3px;
}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:var(--f-display);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.03;
  text-wrap:balance;
}
p{text-wrap:pretty}

.h-hero{
  font-size:clamp(2.9rem, 6.6vw, 5.4rem);
  line-height:.97;
  letter-spacing:-.033em;
}
.h-sec{
  font-size:clamp(2.05rem, 4vw, 3.35rem);
  line-height:1.02;
  letter-spacing:-.028em;
  max-width:26ch;
}
.h-sub{
  font-size:clamp(1.5rem, 2.2vw, 2rem);
  line-height:1.08;
  letter-spacing:-.022em;
}
.h-card{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.3rem;
  line-height:1.14;
  letter-spacing:-.018em;
}

/* A lede is one or two sentences of display copy. It is NOT capped at a
   prose measure: at this size a 64ch cap forces a short sentence into three
   stacked fragments. It is allowed to run to the width of its column. */
.lede{
  font-size:clamp(1.12rem, 1.45vw, 1.34rem);
  line-height:1.48;
  color:var(--ink-lede);
  max-width:var(--measure-wide);
}
/* Running prose, two or more sentences, does take the measure. */
.prose{max-width:var(--measure)}

.eyebrow{
  font-family:var(--f-cond);
  font-variation-settings:"wdth" 88;
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--clay-label);
}
.eyebrow.on-dark{color:var(--clay-bright)}
.label{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.small{font-size:.95rem}
.muted{color:var(--muted)}

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap-narrow{max-width:var(--maxw-narrow)}
.band{padding-block:var(--band)}
.band-tight{padding-block:clamp(52px, 5.5vw, 78px)}
.bg-cream{background:var(--cream)}
.bg-paper{background:var(--paper)}
.bg-pine{background:var(--pine);color:var(--on-pine)}
.bg-pine .h-sec,.bg-pine .h-sub,.bg-pine .h-card{color:var(--on-pine)}
.bg-pine .lede,.bg-pine p{color:var(--on-pine-soft)}
.rule-top{border-top:1px solid var(--sand)}

/* The 1x / 2x stack. Children are separated by one unit; anything marked
   .gap-group takes two. */
.stack{display:flex;flex-direction:column}
.stack-2{gap:var(--s2)}
.stack-3{gap:var(--s3)}
.stack-4{gap:var(--s4)}
.stack-5{gap:var(--s5)}
.stack-6{gap:var(--s6)}
.stack-7{gap:var(--s7)}

/* Heading sits close to the copy it introduces. */
.head-block{display:flex;flex-direction:column;gap:var(--s4)}
.head-block .eyebrow + *{margin-top:calc(var(--s2) * -1)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);font-weight:650;font-size:1.02rem;
  padding:15px 28px;border:1px solid transparent;border-radius:999px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary{background:var(--pine);color:var(--on-pine);border-color:var(--pine)}
.btn-primary:hover{background:var(--pine-bright);border-color:var(--pine-bright)}
.btn-secondary{background:transparent;color:var(--pine);border-color:var(--sand-deep)}
.btn-secondary:hover{border-color:var(--pine);background:var(--paper)}
.btn-onpine{background:var(--on-pine);color:var(--pine);border-color:var(--on-pine)}
.btn-onpine:hover{background:#fff;border-color:#fff}
.btn-onpine-ghost{background:transparent;color:var(--on-pine);border-color:rgba(244,235,218,.42)}
.btn-onpine-ghost:hover{border-color:var(--on-pine)}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:650;color:var(--pine);text-decoration:none;
  border-bottom:1px solid var(--sand-deep);padding-bottom:2px;
  transition:border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.tlink:hover{border-color:var(--pine);gap:12px}
.tlink .arw{transition:transform var(--dur) var(--ease)}
.tlink:hover .arw{transform:translateX(2px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,248,242,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--sand)}
.nav-in{display:flex;align-items:center;gap:var(--s5);height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{height:26px;width:auto}
.brand span{font-family:var(--f-display);font-weight:600;font-size:1.16rem;
  letter-spacing:-.02em;color:var(--ink)}
.nav-links{display:flex;gap:var(--s5);margin-left:var(--s4);flex:1}
.nav-links a{text-decoration:none;color:var(--ink-soft);font-size:1rem;font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;transition:color var(--dur) var(--ease),
  border-color var(--dur) var(--ease)}
.nav-links a:hover{color:var(--ink);border-color:var(--sand-deep)}
.nav-links a[aria-current="page"]{color:var(--pine);border-color:var(--pine)}
.nav .btn{padding:11px 22px;font-size:.96rem}
.nav-toggle{display:none;background:none;border:1px solid var(--sand-deep);border-radius:8px;
  padding:9px 12px;cursor:pointer;color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(52px,6.5vw,96px)}
.hero-head{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,44px);
  padding-bottom:clamp(40px,5vw,72px)}
/* Lede on the left, actions on the right. Both sit on the baseline of the
   same row, which uses the horizontal space instead of stacking. */
.hero-meta{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5) var(--s7);flex-wrap:wrap}
.hero-meta .lede{flex:1 1 30ch;margin:0}
.hero-shot{margin:0;height:clamp(300px,38vw,540px);background:var(--sand);overflow:hidden}
.hero-shot img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

/* Trust strip under the hero */
.strip{background:var(--pine);color:var(--on-pine)}
.strip-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s7);
  padding-block:var(--s4)}
.strip-item{display:flex;align-items:center;gap:9px;font-size:.98rem;font-weight:500}
.strip-item svg{flex:none;color:var(--clay-bright)}

/* ---------- grids ---------- */
/* Hard edged cells separated by hairlines. No shadows, no radius.
   One pixel gap over a sand ground draws the rules for free. */
.cells{display:grid;gap:1px;background:var(--sand);border:1px solid var(--sand)}
.cells-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cells-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cells-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cell{background:var(--paper);padding:var(--s6) var(--s5);display:flex;flex-direction:column;
  gap:var(--s3)}
.cells.on-cream .cell{background:var(--cream)}
.cell-num{font-family:var(--f-cond);font-variation-settings:"wdth" 76;font-weight:800;
  font-size:2.6rem;line-height:.9;color:var(--sand-deep);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cell p{color:var(--ink-soft);font-size:1.02rem;text-wrap:pretty}
.cell-link{margin-top:auto;padding-top:var(--s3)}

/* Audience split */
.aud-band{border-block:1px solid var(--sand)}
.aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-inline:calc(var(--s5) * -1)}
.aud a{padding:var(--s7) var(--s5) var(--s6);text-decoration:none;
  display:flex;flex-direction:column;gap:var(--s3);
  border-right:1px solid var(--sand);
  transition:background var(--dur) var(--ease)}
.aud a:last-child{border-right:0}
.aud a:hover{background:var(--paper)}
.aud a:hover .arw{transform:translateX(4px)}
.aud .arw{transition:transform var(--dur) var(--ease);color:var(--pine)}
/* Two of the three headings are one line and one is two, which pushed that
   cell's paragraph down. A two line floor keeps the row reading as a row. */
.aud h2{min-height:2.28em}
.aud p{color:var(--ink-soft);flex:1}
.aud .go{display:flex;align-items:center;gap:8px;color:var(--pine);font-weight:650}

/* Split section: copy beside an object */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,5vw,80px);align-items:center}
.split-wide{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}

/* Checklist */
.checks{display:flex;flex-direction:column;gap:var(--s4)}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:1.06rem;color:var(--ink-soft)}
.checks svg{flex:none;margin-top:6px;color:var(--pine-bright)}
.checks b{color:var(--ink);font-weight:650}

/* Stats */
.stats{display:grid;gap:1px;background:var(--sand);grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--sand)}
.stat{background:var(--paper);padding:var(--s6) var(--s5)}
.stat .v{font-family:var(--f-cond);font-variation-settings:"wdth" 78;font-weight:800;
  font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:.88;letter-spacing:-.035em;color:var(--pine);
  font-variant-numeric:tabular-nums}
.stat .k{margin-top:var(--s3);color:var(--ink-soft);font-size:1.01rem;text-wrap:pretty}

/* ---------- project card ---------- */
.pcard{background:var(--paper);border:1px solid var(--sand)}
.pcard-hd{padding:var(--s5);border-bottom:1px solid var(--sand);display:flex;flex-direction:column;
  gap:var(--s3)}
.pcard-top{display:flex;align-items:center;gap:12px}
.pcard-top img{width:42px;height:42px;border:1px solid var(--sand);flex:none}
.pcard-top .who{font-weight:650;display:flex;align-items:center;gap:6px}
.pcard-top .when{font-size:.9rem;color:var(--muted)}
.pcard-tags{display:flex;flex-wrap:wrap;gap:7px}
.tagpill{font-size:.86rem;padding:5px 12px;border:1px solid var(--sand-deep);border-radius:999px;
  color:var(--ink-soft)}
.pcard-pay{padding:var(--s5);background:var(--cream);border-bottom:1px solid var(--sand);
  display:flex;flex-direction:column;gap:var(--s3)}
.payrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:baseline}
.paykey{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pine);font-weight:500}
.payval{font-size:1rem;color:var(--ink-soft)}
.payval b{color:var(--ink);font-weight:650}
.pcard-ft{padding:var(--s4) var(--s5);display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap}

/* Vesting meter, the one orchestrated motion on the site */
.meter{height:8px;background:var(--sand);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;width:8%;background:var(--pine-bright);display:block;
  transition:width 1.4s cubic-bezier(.22,.7,.24,1)}
.meter.on i{width:62%}
.meter-lab{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.76rem;
  color:var(--muted);font-variant-numeric:tabular-nums}
.meter-lab b{color:var(--pine);font-weight:500}

/* ---------- components lifted from the demo ----------
   These match the running product's computed styles, so a project card here
   reads as the same object a student sees when they sign in.

   Compensation chip: --color-brass #7A6431 filled, --color-card text, fully
   rounded, 12px / 500, 2px 10px. Deadline chip: --color-clay #C4602E, same
   shape. Both are BRAND tokens, not campus-themed ones, so they are the same
   on every instance and safe to use on campus-agnostic marketing.
   -------------------------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:3px 11px;
  font-family:var(--f-body);font-size:.78rem;font-weight:500;line-height:1.5;white-space:nowrap}
.chip-pay{background:var(--brass);color:var(--paper)}
.chip-deadline{background:var(--clay);color:var(--paper)}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}

/* Company mark. The artwork is a 512px full bleed colour square, and the
   product rounds it in CSS rather than shipping circular art. */
.colog{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;display:block}
.colog-sm{width:30px;height:30px}

/* A project card, as the product draws it. */
.proj{background:var(--paper);border:1px solid var(--sand);border-radius:10px;
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);text-decoration:none;
  transition:border-color var(--dur) var(--ease)}
.proj:hover{border-color:var(--sand-deep)}
.proj h3{font-family:var(--f-display);font-weight:500;font-size:1.28rem;line-height:1.14;
  letter-spacing:-.022em;color:var(--ink)}
.proj-co{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:var(--s2)}
.proj-co .nm{font-weight:600;font-size:.97rem}
.proj-co .ln{color:var(--muted);font-size:.9rem}
.proj-meta{font-size:.9rem;color:var(--muted);font-family:var(--f-mono);letter-spacing:-.01em}
.proj-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}

/* Deliverables table, as the project page shows it. */
.dlv{width:100%;border-collapse:collapse;font-size:.95rem}
.dlv th{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:500;text-align:left;padding:0 0 10px;border-bottom:1px solid var(--sand)}
.dlv th:last-child,.dlv td:last-child{text-align:right}
.dlv td{padding:11px 0;border-bottom:1px solid var(--sand);color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.dlv tr:last-child td{border-bottom:0;font-weight:650;color:var(--ink)}
.dlv-note{margin-top:var(--s3);font-size:.88rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--sand)}
.faq details{border-bottom:1px solid var(--sand)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;cursor:pointer;list-style:none;font-family:var(--f-display);font-weight:600;
  font-size:1.24rem;letter-spacing:-.015em;color:var(--ink);
  transition:color var(--dur) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--pine)}
.faq summary .pm{flex:none;width:24px;height:24px;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--pine);
  transition:transform var(--dur) var(--ease)}
.faq summary .pm::before{inset:11px 2px auto;height:2px}
.faq summary .pm::after{inset:2px auto 2px 11px;width:2px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq .ans{padding:0 0 var(--s5);color:var(--ink-soft);max-width:var(--measure)}

/* ---------- CTA + footer ---------- */
.cta-in{display:flex;flex-direction:column;gap:var(--s5);align-items:flex-start}
.footer{background:var(--pine);color:var(--on-pine);padding-block:var(--s8) var(--s6)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
  gap:var(--s7)}
/* The logo is 800x385. It sits in a column flex container, where the
   default align-items:stretch makes width:auto resolve to the full
   container width and squashes it. flex-start keeps its real ratio. */
.footer img{height:56px;width:auto;align-self:flex-start}
.footer h4{font-family:var(--f-body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-pine-soft);font-weight:650;margin-bottom:var(--s4)}
.footer li{margin-bottom:11px}
.footer a{color:var(--on-pine);text-decoration:none;opacity:.88;
  transition:opacity var(--dur) var(--ease)}
.footer a:hover{opacity:1;text-decoration:underline}
.foot-legal{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid rgba(244,235,218,.2);
  font-size:.88rem;color:var(--on-pine-soft);max-width:var(--measure-wide);line-height:1.62}

/* Skip link. Visible only when focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--pine);color:var(--on-pine);
  padding:12px 20px;text-decoration:none;font-weight:650}
.skip:focus{left:0}

/* Verified tick beside a company name */
.vbadge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--pine);color:var(--paper);flex:none}
.vbadge svg{width:11px;height:11px}

/* The meter sits in its own band inside the card, on paper rather than cream,
   so the moving element is clearly separate from the static terms above it. */
.pcard-meter{padding:var(--s5);background:var(--paper);border-bottom:1px solid var(--sand);
  display:flex;flex-direction:column;gap:var(--s3)}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s cubic-bezier(.22,.7,.24,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .meter i{transition:none;width:62%}
  *{scroll-behavior:auto !important}
}
html{scroll-behavior:smooth}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s6)}
  .hero-art{min-height:320px;order:-1}
  .split,.split-wide{grid-template-columns:1fr;gap:var(--s6)}
  .cells-4,.proj-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .foot-grid > :first-child{grid-column:1 / -1}
}
/* Touch targets. On a phone every link gets at least 44px of height, which
   is the minimum comfortable target in both the Apple and Material guidance.
   Applied only below 760px so the desktop rhythm is untouched. */
@media (max-width:760px) and (pointer:coarse), (max-width:760px){
  .footer li a,.tlink,.aud .go{display:inline-flex;align-items:center;min-height:44px}
  .footer li{margin-bottom:2px}
  .brand{min-height:44px}
}

@media (max-width:760px){
  body{font-size:16px}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;padding:var(--s3) var(--gutter) var(--s5);
    border-bottom:1px solid var(--sand);margin:0}
  .nav-links.open a{padding:13px 0;border-bottom:1px solid var(--sand);border-top:0}
  .nav-toggle{display:block}
  .nav .btn{display:none}
  .cells-2,.cells-3,.cells-4,.aud,.stats,.proj-board{grid-template-columns:1fr}
  /* The audience grid is pulled out by its own cell padding on desktop so
     the first cell's text meets the page margin. Stacked on a phone there
     is nothing to pull out of, and the negative margin would push the
     grid past the viewport, so it goes back to zero and the dividers
     become horizontal. */
  .aud{margin-inline:0}
  .aud a{padding-inline:0;border-right:0;border-bottom:1px solid var(--sand)}
  .aud a:last-child{border-bottom:0}
  .aud h2{min-height:0}
  /* A compensation chip is nowrap by design, so a three across board at
     390px pushes it past the viewport. One column on a phone. */
  .dlv{font-size:.88rem}
  .dlv td:first-child{max-width:20ch}
  .payrow{grid-template-columns:1fr;gap:2px}
  .strip-in{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .h-hero{max-width:none}
}

/* JS off: never leave content hidden. The reveal only applies once the
   script has confirmed it can observe and un-hide. */
/* JS off: never leave content hidden. Both the scroll reveals and the hero
   showcase start hidden and are un-hidden by script, so both need the
   same escape hatch. .no-js is stripped from <html> by an inline script
   in the head, so it only survives when scripting is off. */
.no-js .rv{opacity:1;transform:none}
.no-js .showcase-rail > *{opacity:1;transform:none}

/* ==========================================================================
   Profiles, as the product draws them
   --------------------------------------------------------------------------
   A cover, a round mark or avatar breaking the cover's bottom edge, the name
   in Newsreader, a meta line, then pills. Same anatomy the app uses on
   /s/[slug] and /u/[handle], so what is on the marketing site is recognisably
   the thing you sign in to.
   ========================================================================== */
.pfile{background:var(--paper);border:1px solid var(--sand);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column}
.pfile-cover{height:116px;position:relative;background:var(--sand)}
/* Anchor low in the artwork: the covers put their subject on the horizon, and
   a centre crop slices the sun in half at the top edge. */
.pfile-cover img{width:100%;height:100%;object-fit:cover;object-position:center 72%}
/* Student covers have no artwork in the product; the app paints a wash from
   the campus accent. This is the same idea in the default palette. */
.pfile-cover.wash{background:linear-gradient(105deg,var(--pine) 0%,var(--pine-bright) 58%,#2C8259 100%)}
.pfile-body{padding:0 var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.pfile-mark{width:78px;height:78px;border-radius:50%;border:4px solid var(--paper);
  margin-top:-39px;object-fit:cover;background:var(--paper);display:block;
  position:relative;z-index:1}
.pfile-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pfile-name h3{font-family:var(--f-display);font-weight:500;font-size:1.62rem;line-height:1.1;
  letter-spacing:-.025em}
.pill{font-size:.8rem;padding:3px 11px;border-radius:999px;line-height:1.5;white-space:nowrap}
.pill-stage{background:var(--cream);color:var(--ink-soft);border:1px solid var(--sand-deep)}
.pill-open{background:transparent;color:var(--pine);border:1px solid var(--pine)}
.pill-skill{background:var(--cream);color:var(--ink-soft)}
.pill-club{background:transparent;color:var(--muted);border:1px solid var(--sand-deep)}
.pill-verified{background:var(--cream);color:var(--pine);font-weight:650;font-size:.76rem}
.pfile-line{color:var(--ink-soft)}
.pfile-meta{font-size:.92rem;color:var(--muted)}
.pfile-pills{display:flex;flex-wrap:wrap;gap:7px}
.pfile-foot{margin-top:auto;border-top:1px solid var(--sand);padding:var(--s4) var(--s5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  background:var(--cream)}
.pfile-avail{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em;color:var(--muted)}
.pfile-avail b{color:var(--ink);font-weight:500}
.pfile-work{display:flex;align-items:center;gap:10px;font-size:.93rem;color:var(--ink-soft)}
.pfile-work img{width:24px;height:24px;border-radius:50%;flex:none}
.pfile-tabs{display:flex;gap:var(--s5);padding:0 var(--s5);border-top:1px solid var(--sand);
  font-size:.93rem}
.pfile-tabs span{padding:12px 0;color:var(--muted)}
.pfile-tabs span:first-child{color:var(--pine);font-weight:650;box-shadow:inset 0 -2px 0 var(--pine)}
.pfile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}

/* ---------- hero showcase ----------
   Real product surfaces instead of a stock photograph. They arrive in a
   single staggered sequence on load, which is the one orchestrated moment on
   the page; everything else is a hover or a scroll reveal. */
.showcase{background:var(--cream);border-top:1px solid var(--sand);padding-block:var(--s8)}
.showcase-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
/* Equal height, so the shortest card does not leave a hole. Each card already
   pushes its own footer down with margin-top:auto. */
.showcase-rail > *{height:100%}
.showcase-rail > *{opacity:0;transform:translateY(22px)}
.js-in .showcase-rail > *{opacity:1;transform:none;
  transition:opacity .7s var(--ease), transform .7s cubic-bezier(.22,.7,.24,1)}
.js-in .showcase-rail > :nth-child(1){transition-delay:.05s}
.js-in .showcase-rail > :nth-child(2){transition-delay:.17s}
.js-in .showcase-rail > :nth-child(3){transition-delay:.29s}
/* No vertical offset on the middle card: it is the shortest of the three, so
   raising it opened a hole underneath. The stagger carries the motion. */
.showcase-cap{margin-top:var(--s6);font-size:.95rem;color:var(--muted)}

.lift{transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.lift:hover{transform:translateY(-3px);border-color:var(--sand-deep)}

@media (prefers-reduced-motion: reduce){
  .showcase-rail > *,.js-in .showcase-rail > *{opacity:1;transform:none;transition:none}
  .lift:hover{transform:none}
}
@media (max-width:1000px){
  .showcase-rail{grid-template-columns:1fr;gap:var(--s5)}
  .pfile-grid{grid-template-columns:1fr}
}