/* ============================================================
   EduSquare — edusquare.in
   D&R Technologies, Kolkata, West Bengal
   Black board. White chalk. Nothing else.
   ============================================================ */

:root{
  /* dark — the blackboard. The brand default. */
  --ink:#000;
  --ink-rgb:0,0,0;
  --chalk:#fff;
  --chalk-70:rgba(255,255,255,.70);
  --chalk-55:rgba(255,255,255,.55);
  --chalk-52:rgba(255,255,255,.52);
  --chalk-38:rgba(255,255,255,.38);
  --rule:rgba(255,255,255,.13);
  --rule-soft:rgba(255,255,255,.07);
  --surface:rgba(255,255,255,.028);
  --placeholder:rgba(255,255,255,.2);

  /* the hero panel stays a blackboard in BOTH modes */
  --board:#000;
  --board-chalk:#fff;
  --board-chalk-38:rgba(255,255,255,.38);

  /* colour-agnostic alpha noise, clipped onto display headings */
  --chalk-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' seed='11' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0.42'/></filter><rect width='260' height='260' filter='url(%23m)'/></svg>");

  --shell:1240px;
  --gut:clamp(20px,5vw,64px);

  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
}

/* light — deep grey chalk on warm paper */
html[data-theme="light"]{
  --ink:#f4f3ef;
  --ink-rgb:244,243,239;
  --chalk:#2b2b2b;
  --chalk-70:rgba(43,43,43,.8);
  --chalk-55:rgba(43,43,43,.58);
  --chalk-52:rgba(43,43,43,.64);
  --chalk-38:rgba(43,43,43,.48);
  --rule:rgba(43,43,43,.2);
  --rule-soft:rgba(43,43,43,.1);
  --surface:rgba(43,43,43,.045);
  --placeholder:rgba(43,43,43,.32);
  color-scheme:light;
}

/* dark-on-light needs a touch more weight to read as well as light-on-dark */
html[data-theme="light"] body{font-weight:400}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  transition:background-color .4s var(--ease),color .4s var(--ease);
  font-family:'Urbanist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:300;
  font-size:clamp(15.5px,.42vw + 14.4px,17.5px);
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* the faint grain that lives in the logo, spread across the whole board */
body::after{
  content:"";
  position:fixed;
  inset:-50%;
  z-index:9999;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

img,svg,video{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

h1,h2,h3{
  font-weight:200;
  letter-spacing:-.022em;
  line-height:1.1;
  margin:0;
  text-wrap:balance;
}
p{margin:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--chalk);color:var(--ink);padding:12px 20px;
  font-weight:500;text-decoration:none;
}
.skip-link:focus{left:16px;top:16px}

:where(a,button,input,select,textarea,summary,details):focus-visible{
  outline:2px solid var(--chalk);
  outline-offset:3px;
  border-radius:2px;
}

/* ── shell ──────────────────────────────────────────────── */
.view{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gut) 40px;
}
.view[hidden]{display:none}

/* ── header ─────────────────────────────────────────────── */
.site-head{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
  flex-wrap:wrap;
  max-width:var(--shell);
  margin:0 auto;
  padding:20px var(--gut) 18px;
  background:linear-gradient(var(--ink) 62%,rgba(var(--ink-rgb),.86) 88%,transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  flex-shrink:0;
}
.brand__mark{
  width:44px;height:44px;
  border-radius:50%;
  transition:transform .55s var(--ease);
}
.brand:hover .brand__mark{transform:rotate(-9deg) scale(1.05)}
.brand__name{
  font-size:1.32rem;
  font-weight:300;
  letter-spacing:.055em;
}

/* ── the chalk tabs ─────────────────────────────────────── */
.tabs{
  display:flex;
  align-items:center;
  gap:clamp(6px,2.2vw,30px);
  margin-left:auto;
}

.tab{
  position:relative;
  padding:14px clamp(12px,1.6vw,20px);
  font-size:1.02rem;
  font-weight:300;
  letter-spacing:.04em;
  color:var(--chalk-52);
  transition:color .35s var(--ease);
  isolation:isolate;
}
.tab:hover{color:var(--chalk-70)}
.tab.is-active{color:var(--chalk)}
.tab__label{position:relative;z-index:2}

/* the circle itself — drawn, not faded in */
.chalk{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:calc(100% + 34px);
  height:calc(100% + 12px);
  transform:translate(-50%,-50%) rotate(-2.2deg);
  overflow:visible;
  pointer-events:none;
}
.chalk--b{transform:translate(-50%,-50%) rotate(1.6deg)}
.chalk--c{transform:translate(-50%,-50%) rotate(-1deg)}

.chalk__line,.chalk__dust{
  fill:none;
  stroke:var(--chalk);
  stroke-linecap:round;
  stroke-dasharray:1.06;
  stroke-dashoffset:1.06;      /* undrawn until the tab is chosen */
  vector-effect:non-scaling-stroke;
}
.chalk__line{
  stroke-width:2.1;
  opacity:0;
  filter:url(#chalkTexture);
}
.chalk__dust{
  stroke-width:5.5;
  opacity:0;
  filter:url(#chalkDust);
}

/* .is-drawing is set by JS on activation, which restarts the stroke */
.tab.is-drawing .chalk__line{
  opacity:.96;
  animation:chalk-draw .62s var(--ease) forwards;
}
.tab.is-drawing .chalk__dust{
  opacity:.2;
  animation:chalk-draw .62s var(--ease) .04s forwards;
}
/* once drawn, it simply stays on the board */
.tab.is-active:not(.is-drawing) .chalk__line{stroke-dashoffset:0;opacity:.96}
.tab.is-active:not(.is-drawing) .chalk__dust{stroke-dashoffset:0;opacity:.2}

@keyframes chalk-draw{
  from{stroke-dashoffset:1.06}
  to  {stroke-dashoffset:0}
}

@media (prefers-reduced-motion:reduce){
  .tab.is-drawing .chalk__line,
  .tab.is-drawing .chalk__dust{animation:none;stroke-dashoffset:0}
}

/* ── hero ───────────────────────────────────────────────── */
.eyebrow{
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--chalk-38);
  margin-bottom:26px;
}

.hero{
  padding:clamp(48px,9vw,110px) 0 clamp(38px,5vw,58px);
  max-width:920px;
}
.hero__title{
  font-size:clamp(2.3rem,7.4vw,5.3rem);
  line-height:1.04;
  overflow-wrap:break-word;
  letter-spacing:-.03em;
}
.hero__title em{
  font-style:normal;
  font-weight:inherit;
  color:var(--chalk-52);
}
.hero__lede{
  margin-top:clamp(24px,3vw,34px);
  max-width:56ch;
  font-size:clamp(1.06rem,1.5vw,1.28rem);
  color:var(--chalk-70);
  line-height:1.65;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:clamp(30px,4vw,42px);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 30px;
  border-radius:999px;
  font-size:.97rem;
  font-weight:500;
  letter-spacing:.03em;
  text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--chalk);color:var(--ink);border:1px solid var(--chalk)}
.btn--solid:hover{background:transparent;color:var(--chalk)}
.btn--ghost{border:1px solid var(--rule);color:var(--chalk-70)}
.btn--ghost:hover{border-color:var(--chalk);color:var(--chalk)}

/* ── hero visual (hover to run) ─────────────────────────── */
.visual{margin:0 0 clamp(60px,9vw,110px)}
.visual__frame{
  position:relative;
  overflow:hidden;
  border:1px solid var(--rule);
  border-radius:3px;
  background:var(--board);
  aspect-ratio:16/9;
  cursor:crosshair;
}
.visual__still,.visual__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.visual__video{opacity:0;transition:opacity .7s var(--ease)}
.visual__still{opacity:1;transition:opacity .7s var(--ease)}

/* film present + hovered → cross-fade to motion */
.visual.has-film.is-running .visual__video{opacity:1}
.visual.has-film.is-running .visual__still{opacity:0}

/* the CSS motion layer: an enhancement over the still, and the whole
   show if the film never loads */
.visual__motion{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .6s var(--ease);
  pointer-events:none;
  mix-blend-mode:screen;
}
.visual.is-running .visual__motion{opacity:1}
.visual.has-film.is-running .visual__motion{opacity:.35}

.motion__lines path{
  fill:none;
  stroke:var(--board-chalk);
  stroke-width:1.4;
  stroke-dasharray:9 340;
  stroke-linecap:round;
  opacity:0;
}
.visual.is-running .motion__lines path{
  opacity:.95;
  animation:pulse-run 2.6s linear infinite;
}
.motion__lines path:nth-child(2){animation-delay:.18s}
.motion__lines path:nth-child(3){animation-delay:.36s}
.motion__lines path:nth-child(4){animation-delay:.54s}
.motion__lines path:nth-child(5){animation-delay:.72s}
.motion__lines path:nth-child(6){animation-delay:.9s}
.motion__lines path:nth-child(7){animation-delay:1.08s}
.motion__lines path:nth-child(8){animation-delay:1.26s}

@keyframes pulse-run{
  from{stroke-dashoffset:349}
  to  {stroke-dashoffset:0}
}

.motion__ring circle{
  fill:none;
  stroke:var(--board-chalk);
  stroke-width:.9;
  stroke-dasharray:2 13;
  opacity:0;
  transform-origin:600px 338px;
}
.visual.is-running .motion__ring circle{
  opacity:.3;
  animation:ring-spin 26s linear infinite;
}
.visual.is-running .motion__ring circle:nth-child(2){animation-duration:38s;animation-direction:reverse}
.visual.is-running .motion__ring circle:nth-child(3){animation-duration:52s}

@keyframes ring-spin{to{transform:rotate(360deg)}}

.visual__hint{
  position:absolute;
  left:18px;
  bottom:16px;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--board-chalk-38);
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
.visual.is-running .visual__hint{opacity:0}

.visual__caption{
  margin-top:16px;
  font-size:.88rem;
  color:var(--chalk-38);
  letter-spacing:.04em;
}

@media (prefers-reduced-motion:reduce){
  .visual.is-running .motion__lines path,
  .visual.is-running .motion__ring circle{animation:none}
}

/* ── bands ──────────────────────────────────────────────── */
.band{
  padding:clamp(50px,7vw,84px) 0;
  border-top:1px solid var(--rule);
}
.band--quiet{border-top-color:var(--rule-soft)}
.band__title{
  font-size:clamp(1.85rem,3.6vw,2.85rem);
  max-width:20ch;
}
.band__lede{
  margin-top:20px;
  max-width:62ch;
  color:var(--chalk-70);
  font-size:clamp(1rem,1.2vw,1.13rem);
}
.band__foot{margin-top:30px}

.link-arrow{
  font-size:1rem;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--chalk-70);
  border-bottom:1px solid var(--rule);
  padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.link-arrow::after{content:" →";transition:transform .3s var(--ease)}
.link-arrow:hover{color:var(--chalk);border-color:var(--chalk)}

.grid{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule-soft)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));margin-top:clamp(34px,4vw,50px)}

.pillar,.also{background:var(--ink);padding:clamp(26px,2.6vw,34px)}
.pillar h3,.also h3{
  font-size:1.16rem;
  font-weight:400;
  letter-spacing:-.005em;
  margin-bottom:12px;
}
.pillar p,.also p{color:var(--chalk-52);font-size:.96rem;line-height:1.66}

.chips{
  list-style:none;
  margin:clamp(30px,4vw,42px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.chips li{
  padding:8px 17px;
  border:1px solid var(--rule);
  border-radius:999px;
  font-size:.88rem;
  font-weight:300;
  letter-spacing:.02em;
  color:var(--chalk-70);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.chips li:hover{border-color:var(--chalk-52);color:var(--chalk)}
.chips--quiet li{color:var(--chalk-38);border-color:var(--rule-soft)}

/* ── comparison table ───────────────────────────────────── */
.table-wrap{
  margin-top:clamp(30px,4vw,44px);
  overflow-x:auto;
  border:1px solid var(--rule);
  border-radius:3px;
}
.compare{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:.95rem;
}
.compare th,.compare td{
  text-align:left;
  padding:16px 22px;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:top;
  font-weight:300;
}
.compare thead th{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--chalk-38);
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.compare tbody th{color:var(--chalk-70);font-weight:400;white-space:nowrap}
.compare tbody td:nth-of-type(1){color:var(--chalk)}
.compare tbody td:nth-of-type(2){color:var(--chalk-38)}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td{border-bottom:0}
.compare tbody tr:hover th,
.compare tbody tr:hover td{background:var(--surface)}

/* ── cta ────────────────────────────────────────────────── */
.cta{
  padding:clamp(60px,9vw,110px) 0 clamp(30px,5vw,60px);
  border-top:1px solid var(--rule);
  text-align:center;
}
.cta__title{font-size:clamp(1.85rem,4.2vw,3.1rem)}
.cta__lede{margin:18px auto 34px;color:var(--chalk-52);max-width:44ch}

/* ── page heads ─────────────────────────────────────────── */
.page-head{
  padding:clamp(44px,7vw,86px) 0 clamp(34px,4vw,52px);
  max-width:900px;
}
.page-head__title{font-size:clamp(2.3rem,5.6vw,4rem);letter-spacing:-.03em}
.page-head__lede{
  margin-top:22px;
  max-width:54ch;
  color:var(--chalk-70);
  font-size:clamp(1.02rem,1.3vw,1.18rem);
}

/* ── product modules ────────────────────────────────────── */
.modules{border-top:1px solid var(--rule)}

.mod{border-bottom:1px solid var(--rule-soft)}

.mod__head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:clamp(14px,2.4vw,30px);
  padding:clamp(22px,2.6vw,30px) 46px clamp(22px,2.6vw,30px) 0;
  position:relative;
  cursor:pointer;
  list-style:none;
  transition:background-color .3s var(--ease);
}
.mod__head::-webkit-details-marker{display:none}
.mod__head:hover{background:var(--surface)}

.mod__no{
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--chalk-38);
  font-variant-numeric:tabular-nums;
}
.mod__name{
  font-size:clamp(1.22rem,2.2vw,1.72rem);
  font-weight:200;
  letter-spacing:-.018em;
}
.mod__hint{
  font-size:.9rem;
  color:var(--chalk-38);
  text-align:right;
  max-width:34ch;
}

/* the +/− */
.mod__head::before,
.mod__head::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:15px;
  height:1px;
  background:var(--chalk-52);
  transition:transform .35s var(--ease),background-color .3s var(--ease);
}
.mod__head::after{transform:rotate(90deg)}
.mod[open] .mod__head::after{transform:rotate(0)}
.mod[open] .mod__head::before,
.mod[open] .mod__head::after{background:var(--chalk)}

.mod__body{
  padding:0 clamp(0px,4vw,64px) clamp(30px,3.4vw,44px) 0;
  animation:mod-open .45s var(--ease);
}
@keyframes mod-open{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:none}
}

.feats{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:15px;
  max-width:78ch;
}
.feats li{
  position:relative;
  padding-left:22px;
  color:var(--chalk-52);
  font-size:.97rem;
  line-height:1.62;
}
.feats li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:9px;
  height:1px;
  background:var(--chalk-38);
}
.feats b{color:var(--chalk);font-weight:500}

.pill{
  display:inline-block;
  margin-left:6px;
  padding:2px 9px;
  border:1px solid var(--rule);
  border-radius:999px;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--chalk-70);
  vertical-align:middle;
}

.mod__diff{
  margin-top:26px;
  padding:16px 20px;
  border-left:1px solid var(--chalk-38);
  background:var(--surface);
  max-width:72ch;
  color:var(--chalk-70);
  font-size:.95rem;
}
.tag{
  display:block;
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--chalk-38);
  margin-bottom:7px;
}

/* ── contact ────────────────────────────────────────────── */
.contact{
  display:grid;
  grid-template-columns:minmax(240px,.72fr) minmax(320px,1.28fr);
  gap:1px;
  background:var(--rule-soft);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
@media (max-width:860px){
  .contact{grid-template-columns:1fr}
}

.contact__aside{
  background:var(--ink);
  padding:clamp(30px,3.4vw,46px) clamp(24px,3vw,42px) clamp(40px,4vw,56px) 0;
  display:grid;
  gap:clamp(30px,3.4vw,42px);
  align-content:start;
}
.contact__block{}
.contact__label{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--chalk-38);
  margin-bottom:12px;
}
.contact__mail{
  font-size:clamp(1.16rem,2.2vw,1.52rem);
  font-weight:300;
  letter-spacing:-.01em;
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:4px;
  transition:border-color .3s var(--ease)
}
.contact__mail:hover{border-color:var(--chalk)}
.contact__addr{color:var(--chalk-70);line-height:1.75}
.contact__addr b{font-weight:500;color:var(--chalk)}

.contact__steps{
  margin:0;
  padding-left:1.1em;
  color:var(--chalk-52);
  font-size:.93rem;
  line-height:1.6;
}
.contact__steps li{margin-bottom:9px}

/* ── form ───────────────────────────────────────────────── */
.form{
  background:var(--ink);
  padding:clamp(30px,3.4vw,46px) 0 clamp(44px,4.4vw,60px) clamp(24px,3vw,48px);
  display:grid;
  gap:20px;
}
@media (max-width:860px){
  .contact__aside{padding-right:0;padding-bottom:34px}
  .form{padding-left:0;padding-top:34px}
}

.form__title{
  font-size:clamp(1.42rem,2.6vw,1.95rem);
  margin-bottom:4px;
}

.form__intent{
  border:0;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.radio{cursor:pointer}
.radio input{position:absolute;opacity:0;pointer-events:none}
.radio span{
  display:inline-block;
  padding:9px 18px;
  border:1px solid var(--rule);
  border-radius:999px;
  font-size:.88rem;
  color:var(--chalk-52);
  transition:all .28s var(--ease);
}
.radio:hover span{border-color:var(--chalk-52);color:var(--chalk-70)}
.radio input:checked + span{background:var(--chalk);color:var(--ink);border-color:var(--chalk);font-weight:500}
.radio input:focus-visible + span{outline:2px solid var(--chalk);outline-offset:3px}

.form__row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:20px;
}

.field{display:grid;gap:8px}
.field__label{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--chalk-38);
}
.field__label i{font-style:normal;color:var(--chalk-52)}

.field__input{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule);
  padding:11px 2px;
  color:var(--chalk);
  font:inherit;
  font-size:1rem;
  border-radius:0;
  transition:border-color .3s var(--ease);
}
.field__input::placeholder{color:var(--placeholder)}
.field__input:hover{border-bottom-color:var(--chalk-38)}
.field__input:focus{outline:0;border-bottom-color:var(--chalk)}
.field__input--area{resize:vertical;min-height:110px;line-height:1.6}

select.field__input{
  appearance:none;
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--chalk-52) 50%),
                   linear-gradient(135deg,var(--chalk-52) 50%,transparent 50%);
  background-position:calc(100% - 13px) calc(50% + 1px),calc(100% - 8px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:28px;
}
select.field__input option{background:var(--ink);color:var(--chalk)}

.field.is-bad .field__input{border-bottom-color:rgba(255,255,255,.85)}
.field__err{
  font-size:.78rem;
  color:var(--chalk-70);
  min-height:0;
  letter-spacing:.02em;
}
.field.is-bad .field__err::before{content:"↑ "}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:.9rem;
  color:var(--chalk-52);
  cursor:pointer;
  line-height:1.55;
}
.consent input{
  appearance:none;
  flex:0 0 auto;
  width:17px;height:17px;
  margin-top:2px;
  border:1px solid var(--rule);
  border-radius:2px;
  cursor:pointer;
  transition:all .25s var(--ease);
}
.consent input:checked{background:var(--chalk);border-color:var(--chalk)}
.consent input:checked::after{
  content:"";
  display:block;
  width:4px;height:8px;
  margin:2px 0 0 5px;
  border:solid var(--ink);
  border-width:0 1.6px 1.6px 0;
  transform:rotate(43deg);
}
.consent input:focus-visible{outline:2px solid var(--chalk);outline-offset:3px}
.consent.is-bad input{border-color:var(--chalk)}

.form__submit{justify-self:start;margin-top:6px}
.form__submit[disabled]{opacity:.45;cursor:progress}

.form__note{font-size:.92rem;color:var(--chalk-70);min-height:1.4em}
.form__note.is-good{color:var(--chalk)}
.form__alt{font-size:.86rem;color:var(--chalk-38)}
.form__alt a{color:var(--chalk-70)}

/* ── footer ─────────────────────────────────────────────── */
.site-foot{
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(44px,5vw,64px) var(--gut) clamp(40px,5vw,56px);
  border-top:1px solid var(--rule);
  display:grid;
  gap:28px;
}
@media (min-width:820px){
  .site-foot{
    grid-template-columns:1fr auto;
    align-items:start;
    column-gap:50px;
  }
  .site-foot__legal{grid-column:1/-1}
}

.site-foot__brand{display:flex;align-items:center;gap:13px}
.site-foot__brand b{display:block;font-weight:400;letter-spacing:.04em}
.site-foot__brand span{
  display:block;
  font-size:.82rem;
  color:var(--chalk-38);
  letter-spacing:.04em;
}

.site-foot__nav{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  align-items:center;
}
.site-foot__nav button,
.site-foot__nav a{
  font-size:.92rem;
  color:var(--chalk-52);
  text-decoration:none;
  transition:color .3s var(--ease);
}
.site-foot__nav button:hover,
.site-foot__nav a:hover{color:var(--chalk)}

.site-foot__legal{
  padding-top:24px;
  border-top:1px solid var(--rule-soft);
  font-size:.82rem;
  color:var(--chalk-38);
  line-height:1.75;
}
.site-foot__legal b{font-weight:500;color:var(--chalk-52)}
.site-foot__legal span{display:block}

/* ── small screens ──────────────────────────────────────── */
@media (max-width:700px){
  .site-head{
    padding-bottom:8px;
    gap:6px;
  }
  .tabs{
    width:100%;
    justify-content:space-between;
    gap:0;
    margin-top:2px;
  }
  .tab{
    flex:1;
    padding-inline:6px;
    font-size:.94rem;
    text-align:center;
  }
  .chalk{width:calc(100% + 4px)}
  .mod__head{
    grid-template-columns:auto 1fr;
    padding-right:40px;
  }
  .mod__hint{
    grid-column:1/-1;
    text-align:left;
    max-width:none;
    margin-top:4px;
  }
}

/* ── chalk underline under “Simplified” ─────────────────── */
.hero__title em{position:relative;display:inline-block}
.chalk-under{
  position:absolute;
  left:.02em;
  bottom:-.04em;
  width:100%;
  height:.14em;
  overflow:visible;
  pointer-events:none;
}
.chalk-under path{
  fill:none;
  stroke:var(--chalk-55);
  stroke-width:3;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:url(#chalkTexture);
  stroke-dasharray:1.06;
  stroke-dashoffset:1.06;
  animation:chalk-draw .7s var(--ease) .5s forwards;
}
@media (prefers-reduced-motion:reduce){
  .chalk-under path{animation:none;stroke-dashoffset:0}
}

/* ── FAQ ────────────────────────────────────────────────── */
.faqs{
  margin-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--rule-soft);
  max-width:860px;
}
.faq{border-bottom:1px solid var(--rule-soft)}
.faq summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:19px 44px 19px 0;
  font-size:1.06rem;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--chalk-70);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--chalk)}
.faq[open] summary{color:var(--chalk)}
.faq summary::before,
.faq summary::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  width:13px;
  height:1px;
  background:var(--chalk-52);
  transition:transform .35s var(--ease);
}
.faq summary::after{transform:rotate(90deg)}
.faq[open] summary::after{transform:rotate(0)}
.faq p{
  padding:0 0 22px;
  max-width:74ch;
  color:var(--chalk-52);
  font-size:.96rem;
  line-height:1.68;
  animation:mod-open .4s var(--ease);
}
.faq a{color:var(--chalk-70)}

/* ── bold chalk display headings ────────────────────────── */
/* Bold weight, edges roughened by the same turbulence filter as the nav
   circles, and an alpha-noise mask for the patchy chalk interior. The mask
   is colour-agnostic, so it reads as white chalk on the dark board and deep
   grey chalk on paper without any per-mode overrides. */
.hero__title,
.band__title,
.page-head__title,
.cta__title{
  font-weight:600;
  letter-spacing:-.015em;
  filter:url(#chalkTexture);
  -webkit-mask-image:var(--chalk-mask);
  mask-image:var(--chalk-mask);
}

/* secondary headings: just a touch bolder, no texture — readability first */
.mod__name{font-weight:400}
.pillar h3,.also h3{font-weight:500}
.form__title{font-weight:400}

/* ── dark / light mode toggle ───────────────────────────── */
.mode{
  flex-shrink:0;
  width:40px;
  height:40px;
  border:1px solid var(--rule);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--chalk-52);
  transition:color .3s var(--ease),border-color .3s var(--ease),
             transform .45s var(--ease);
}
.mode:hover{
  color:var(--chalk);
  border-color:var(--chalk-52);
  transform:rotate(40deg);
}
.mode .ic{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ic-moon{display:none}
html[data-theme="light"] .ic-sun{display:none}
html[data-theme="light"] .ic-moon{display:block}

@media (max-width:700px){
  .brand{order:1}
  .mode{order:2;margin-left:auto;width:36px;height:36px}
  .tabs{order:3}
}