/* T-SQUARE polish (2026-11): heading spacing, hero highlight, kit metals, drafting-style section motion.
   Loaded last. All motion is switched off by the reduced-motion rule in motion.css. */

/* ---------- 1. heavy Alexandria headings: room for dots above and below each line ---------- */
.h-xl{line-height:1.5}
.h-l{line-height:1.55}
.h-m,.kit h3,.pp h1{line-height:1.5}
.hero h1.h-xl{line-height:1.5}
@media(max-width:899px){.hero h1.h-xl{line-height:1.5}}
mark{padding-block:0;line-height:inherit}

/* ---------- 2. hero key phrase: a drafting-pen underline under each line, instead of a black box ---------- */
.hero mark,html[data-theme=light] .hero mark{
  background-color:transparent!important;
  --pen:var(--ink,#161616);color:var(--pen)!important;padding:0 0 .08em;border-radius:0;display:inline;
  background-image:linear-gradient(var(--pen),var(--pen))!important;background-repeat:no-repeat!important;background-position:right bottom!important;background-size:0% .12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:pen 1.1s .6s cubic-bezier(.7,0,.2,1) forwards!important}
[dir=ltr] .hero mark{background-position:left bottom!important}
@keyframes pen{to{background-size:100% .12em}}
html:not([data-theme=light]) .hero mark{--pen:var(--yellow)}
@media (prefers-reduced-motion:reduce){.hero mark{background-size:100% .12em!important}}

/* ---------- 3. kits: silver, gold, diamond ---------- */
.kit{position:relative;overflow:hidden}
.kit:after{content:"";position:absolute;inset-inline:0;top:0;height:6px;background:var(--metal);pointer-events:none}
.kit .tier{background:var(--metal-ink,var(--metal));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;letter-spacing:.16em}
.kit.kit-basic{--metal:linear-gradient(100deg,#8d949b 0%,#e9edf0 28%,#a9b0b6 50%,#f4f6f7 70%,#868d94 100%)}
.kit.kit-complete{--metal:linear-gradient(100deg,#a8761c 0%,#f6d77a 28%,#c8962e 50%,#fff0b3 70%,#9c6b14 100%)}
.kit.kit-premium{--metal:linear-gradient(100deg,#7fb6d6 0%,#eaf7ff 22%,#b9a6f0 42%,#ffffff 55%,#8fd8e8 75%,#c9b8ff 100%)}
.kit.kit-basic{--metal-ink:linear-gradient(100deg,#4f565c,#9aa3aa 50%,#5d646a)}
.kit.kit-premium{--metal-ink:linear-gradient(100deg,#3c7fa8,#8a6be0 50%,#2f9bb5)}
.kit.kit-complete .tier{-webkit-text-fill-color:transparent}
.kit .hd h3{white-space:nowrap}
/* one slow shine across the band */
.kit:before{content:"";position:absolute;top:0;height:5px;width:40%;inset-inline-start:-40%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);animation:shine 3.6s 1s ease-in-out infinite}
@keyframes shine{0%{inset-inline-start:-40%}55%,100%{inset-inline-start:110%}}
.kit.kit-premium .hd h3:after{content:"✦";margin-inline-start:.3em;font-size:.7em;vertical-align:middle;background:var(--metal-ink);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;animation:spark 2.4s ease-in-out infinite}
@keyframes spark{0%,100%{transform:scale(.85) rotate(0);opacity:.75}50%{transform:scale(1.15) rotate(20deg);opacity:1}}

/* kits page: the difference, in short */
.kitdiff{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;max-width:780px}
.kitdiff li{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid rgba(22,22,22,.12)}
.kitdiff b{display:inline-flex;justify-content:center;padding:6px 12px;border-radius:999px;font-weight:900;color:#161616;background:var(--metal)}
.kitdiff span{line-height:1.8}
.kitdiff .silver{--metal:linear-gradient(100deg,#8d949b,#eef1f3 35%,#a9b0b6 60%,#f4f6f7)}
.kitdiff .gold{--metal:linear-gradient(100deg,#b8862a,#f6d77a 35%,#c8962e 60%,#fff0b3)}
.kitdiff .diamond{--metal:linear-gradient(100deg,#9cc8e0,#eaf7ff 30%,#c9b8ff 60%,#ffffff)}
@media(max-width:560px){.kitdiff li{grid-template-columns:1fr;gap:8px}.kitdiff b{justify-self:start}}

/* ---------- 4. drafting-style motion for every section (plays as it scrolls in) ---------- */
/* eyebrow rule draws itself like a ruled line, with tick marks */
.eyebrow:after{background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px) bottom/100% 6px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 1px no-repeat!important;height:6px}
.sechead.in .eyebrow:after,.rv.in>.eyebrow:after,.dl.in .eyebrow:after{animation:rule .9s .15s cubic-bezier(.6,0,.2,1) both}
@keyframes rule{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
[dir=ltr] .sechead.in .eyebrow:after,[dir=ltr] .dl.in .eyebrow:after{animation-name:rulel}
@keyframes rulel{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* cards land like a sheet pinned to the board */
.pcard.rv,.kit.rv{transform:translateY(26px) rotate(-1.6deg);transform-origin:50% 0}
[dir=ltr] .pcard.rv,[dir=ltr] .kit.rv{transform:translateY(26px) rotate(1.6deg)}
.pcard.rv.in,.kit.rv.in{transform:none;transition-timing-function:cubic-bezier(.3,1.35,.5,1)}
/* product image prints in from top to bottom */
.pcard.in .img{animation:print .8s calc(var(--d,0ms) + 120ms) cubic-bezier(.6,0,.2,1) both}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
/* kit cards: an outline is traced around them as they arrive */
.kit.in{animation:trace 1s calc(var(--d,0ms) + 100ms) ease-out both}
@keyframes trace{from{box-shadow:inset 0 0 0 2px rgba(22,22,22,.0)}40%{box-shadow:inset 0 0 0 2px rgba(22,22,22,.45)}to{box-shadow:inset 0 0 0 2px rgba(22,22,22,0)}}

/* trust icons are drawn with a pen */
.trust>div.in svg *{stroke-dasharray:120;stroke-dashoffset:120;animation:ink 1.3s calc(var(--d,0ms) + 150ms) ease-out forwards}
@keyframes ink{to{stroke-dashoffset:0}}

/* professor-list steps: numbers are stamped one after another */
.dl.in .stepbox b{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) both}
.dl.in .stepbox:nth-of-type(1) b{animation-delay:.25s}
.dl.in .stepbox:nth-of-type(2) b{animation-delay:.45s}
@keyframes stamp{from{transform:scale(1.9) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}

/* video gets crop marks at its corners */
.vid{position:relative}
.vid:before,.vid:after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--yellow);pointer-events:none;z-index:2;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.vid:before{top:-10px;inset-inline-start:-10px;border-bottom:0;border-inline-end:0}
.vid:after{bottom:-10px;inset-inline-end:-10px;border-top:0;border-inline-start:0}
.vid.rv:before{transform:translate(14px,14px)}.vid.rv:after{transform:translate(-14px,-14px)}
.vid.rv.in:before,.vid.rv.in:after{transform:none}


/* ---------- 5. vertical 4:3 story video ---------- */
.vid.v43 video{aspect-ratio:3/4;width:100%;max-width:420px;height:auto;object-fit:cover;display:block;margin-inline:auto;border-radius:16px;background:#000}