/* pages/landing/drill.css — theme/lang controls, landing buttons, the hero drill card.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
.lbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  font:700 14px/1 var(--sans);
  padding:11px 18px;
  border-radius:999px;
  border:1px solid var(--line2);
  color:var(--ink);
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  text-decoration:none;
}
.lbtn:hover{
  transform:translateY(-1px);
  border-color:var(--line);
  background:var(--panel);
}
.lbtn.solid{
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent2) 32%, var(--accent)));
  border-color:transparent;
  color:var(--panel);
  box-shadow:0 18px 34px color-mix(in srgb, var(--accent) 28%, transparent);
}
.lbtn.solid:hover{
  box-shadow:0 24px 44px color-mix(in srgb, var(--accent) 36%, transparent);
}
.lbtn.big{padding:14px 24px;font-size:15px}

.hero{
  padding:clamp(68px,8vw,118px) 24px 84px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  gap:clamp(30px,4.6vw,64px);
  align-items:start;
  position:relative;
}
.hero > :first-child,
.hero > :last-child{position:relative;z-index:1}
.hero > :first-child{
  max-width:640px;
  padding-top:18px;
}
.hero::before{
  content:"";
  position:absolute;
  left:2%;
  top:18%;
  width:16rem;
  height:16rem;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 68%);
  filter:blur(12px);
  opacity:.7;
  pointer-events:none;
}

.kana-row{
  font:500 14px/1 var(--jp);
  letter-spacing:.38em;
  color:var(--accent);
  margin:0 0 16px;
  opacity:.95;
}

.landing h1{font:700 clamp(38px,5.8vw,74px)/.96 var(--display);
  margin:0;
  letter-spacing:-.05em;
  text-wrap:balance;
}
.landing h1 em{
  font-style:normal;
  color:var(--accent);
}

:root[lang="hi"] .hero h1 .h1br{display:none}
/* Devanagari is matched to English by PAINTED INK, not by point size: matras
   hang above and below the base band, so the script paints taller per point.
   It therefore sits just under the Latin clamp (70px against 74px) rather
   than at it — close enough that the two headlines carry equal weight, far
   enough that Hindi does not tower over its English twin. Neutral tracking,
   because -.05em pulls matras into the shirorekha. */
:root[lang="hi"] .landing h1{
  font-family:var(--devanagari);
  font-size:clamp(34px,5.5vw,70px);
  line-height:1.26;
  letter-spacing:0;
}
:root[lang="hi"] .landing h1 [data-i18n="landing.hero.l1b"],
:root[lang="hi"] .landing h1 [data-i18n="landing.hero.l3b"]{
  display:block;
  font-size:1em;
  font-weight:700;
  color:var(--ink);
  line-height:1.26;
}
/* Line two carries the accent at the +20% cap — the ceiling the headline
   review settled on. Anything above it and the accent line stops reading as
   emphasis and starts reading as a different headline. */
:root[lang="hi"] .landing h1 [data-i18n="landing.hero.l2em"],
:root[lang="hi"] .landing h1 [data-i18n="landing.hero.l2b"]{
  font-size:1.2em;
  line-height:1.18;
}
:root[lang="hi"] .landing h1 [data-i18n="landing.hero.l2em"]{
  font-weight:700;
  color:var(--accent);
}
:root[lang="hi"] .landing h1 [data-i18n="landing.hero.l2b"]{
  font-weight:600;
  color:var(--ink);
}
:root[lang="hi"] .hero .sub{font-size:18px;line-height:1.72}

.sub{
  max-width:34em;
  margin:22px 0 30px;
  color:var(--dim);
  font-size:17px;
}
.sub b{font-weight:700;color:var(--ink)}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.proof{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:36px;
}
/* These are columns of digits, so they keep --mono rather than --display.
   --display resolves to the Devanagari face under [lang="hi"], which would
   set 1,012 and 105 in a script that has no monospace tradition and no
   tabular figures — the numbers stop aligning and stop reading as data. */
.proof div{font:600 15px var(--mono);
  background:color-mix(in srgb, var(--panel) 82%, transparent);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 18px;
  box-shadow:0 18px 50px var(--shadow1);
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}
/* The registration line under the proof row (#286): quiet, one sentence,
   and it must actually hide — `.hero-reg` sets display, so the [hidden]
   rule is load-bearing (the lint checks this pairing). */
.hero-reg{display:block;margin:12px 0 0;max-width:56ch;font-size:14px;line-height:1.5;color:var(--mute)}
.hero-reg[hidden]{display:none}
.proof span[data-i18n]{
  display:block;
  margin-top:6px;
  color:var(--mute);
  font:500 12px/1.45 var(--sans);
}

.drill{
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), var(--panel));
  border:1px solid var(--line2);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 34px 100px color-mix(in srgb, var(--shadow1) 92%, transparent);
  position:relative;
}
.drill::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(500px circle at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
    radial-gradient(500px circle at 100% 0%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 54%);
  pointer-events:none;
}