/* Sanko landing v2 — mobile-first
   Palette, type and structure follow BRAND_IDENTITY.md v1.0.
   Records are flat, square and inspectable: 1px rules, no shadows. */

@font-face { font-family:"Archivo"; src:url("../fonts/archivo-variable.woff2") format("woff2"); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("../fonts/ibm-plex-mono-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("../fonts/ibm-plex-mono-semibold.woff2") format("woff2"); font-weight:500 600; font-style:normal; font-display:swap; }

:root{
  /* Core palette — BRAND_IDENTITY.md §4 */
  --indigo-brand:#17134f;
  --indigo-field:#080840;
  --indigo-deep:#030326;
  --mineral:#f5f2e8;
  --chartreuse:#c8f35b;
  --copper:#d76545;
  --copper-ink:#9f3e29;
  --ink:#090a23;
  --indigo-line:#34346b;
  --mineral-muted:#c9c6d5;
  --ink-muted:#565369;

  /* Derived structure tones — tints of Ink, not new indigos (Two-Indigo Rule) */
  --rule-light:rgba(9,10,35,.18);
  --rule-hair:rgba(9,10,35,.10);
  --wash:rgba(9,10,35,.035);
  --rule-dark:var(--indigo-line);
  --lift-dark:rgba(245,242,232,.045);

  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-data:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1200px;
  --pad-x:clamp(1.25rem,5vw,3.5rem);
  --section-y:clamp(4rem,10vw,8.5rem);

  --t-display:clamp(2.375rem,8.4vw,4.75rem);
  --t-h2:clamp(1.8125rem,5.4vw,3.125rem);
  --t-h3:clamp(1.0625rem,2.2vw,1.25rem);
  --t-lead:clamp(1.0625rem,2.7vw,1.3125rem);
  --t-utterance:clamp(1.4375rem,5vw,2.25rem);
  --t-body:1.0625rem;
  --t-data:.75rem;

  --focus:3px solid var(--copper);
  --focus-offset:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--mineral);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:var(--t-body);
  font-weight:430;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:var(--focus);
  outline-offset:var(--focus-offset);
}

.skip{
  position:absolute; left:var(--pad-x); top:-4rem; z-index:60;
  background:var(--chartreuse); color:var(--indigo-deep);
  padding:.75rem 1rem; font-weight:700; font-size:.9375rem;
  transition:top .15s ease;
}
.skip:focus{top:.75rem}

/* ---------- shared primitives ---------- */

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad-x); }

.section{ padding-block:var(--section-y); }

.data{
  font-family:var(--font-data);
  font-size:var(--t-data);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.4;
}

.h2{
  font-size:var(--t-h2);
  font-weight:790;
  line-height:1.02;
  letter-spacing:-.032em;
  max-width:17ch;
}
.h3{
  font-size:var(--t-h3);
  font-weight:720;
  line-height:1.25;
  letter-spacing:-.015em;
}
.lead{
  font-size:var(--t-lead);
  font-weight:430;
  line-height:1.45;
  max-width:52ch;
  margin-top:1.125rem;
}
.prose{ max-width:62ch; }

/* Square registration mark — marks a thing that has an identity */
.reg{
  display:inline-block; width:.5rem; height:.5rem;
  background:var(--copper); flex:none;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:3rem; padding:.875rem 1.375rem;
  font-family:var(--font-display); font-size:1rem; font-weight:700;
  letter-spacing:-.005em; text-decoration:none; border:1px solid transparent;
  border-radius:0; cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn-go{ background:var(--chartreuse); color:var(--indigo-deep); }
.btn-go:hover{ background:#d6f97e; }

.btn-line-dark{ background:transparent; color:var(--mineral); border-color:var(--indigo-line); }
.btn-line-dark:hover{ border-color:var(--mineral-muted); }

.btn-line{ background:transparent; color:var(--ink); border-color:var(--rule-light); }
.btn-line:hover{ border-color:var(--ink); }

.btn-full{ width:100%; }

/* ---------- masthead ---------- */

.masthead{ background:var(--indigo-field); color:var(--mineral); }

.bar{
  display:flex; align-items:center; gap:1rem;
  padding-block:1rem;
  border-bottom:1px solid var(--indigo-line);
}

.lockup{
  display:inline-flex; align-items:center; gap:.625rem;
  color:var(--mineral); text-decoration:none; margin-right:auto;
  padding-block:.5625rem;
}
.lockup svg{ width:1.5rem; height:1.5rem; display:block; flex:none }
.lockup span{
  font-weight:850; font-size:1.0625rem; letter-spacing:.025em;
}

.nav-links{ display:none }
.bar-cta{ display:none }

.menu-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:2.75rem; padding:.5rem .75rem;
  background:transparent; border:1px solid var(--indigo-line);
  color:var(--mineral); font-family:var(--font-display);
  font-size:.9375rem; font-weight:650; cursor:pointer;
}
.menu-btn svg{ width:.875rem; height:.875rem }

.menu-panel{
  border-bottom:1px solid var(--indigo-line);
  padding-block:.5rem 1.25rem;
}
.menu-panel[hidden]{ display:none }
.menu-panel a{
  display:block; padding:.8125rem 0;
  color:var(--mineral); text-decoration:none;
  font-weight:650; font-size:1.0625rem;
  border-bottom:1px solid rgba(52,52,107,.55);
}
.menu-panel a:last-child{ border-bottom:0 }
.menu-panel .btn{ margin-top:1rem }

/* ---------- hero ---------- */

.hero{ background:var(--indigo-field); color:var(--mineral); padding-block:clamp(2.75rem,8vw,5.5rem) clamp(3.5rem,9vw,6.5rem); }

.hero-grid{ display:grid; gap:clamp(2.5rem,6vw,4rem); }

.hero-claim{
  font-size:var(--t-display);
  font-weight:820;
  line-height:.96;
  letter-spacing:-.038em;
  max-width:13ch;
  text-wrap:balance;
}
.hero-note{
  font-size:var(--t-lead); font-weight:430; line-height:1.45;
  color:var(--mineral-muted); max-width:46ch; margin-top:1.25rem;
}
.hero-note strong{ color:var(--mineral); font-weight:560 }

.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.hero-actions .btn{ flex:1 1 13rem }

/* ---------- the transformation record ---------- */

.record{
  border:1px solid var(--indigo-line);
  background:var(--lift-dark);
  padding:clamp(1.125rem,4vw,1.75rem);
}

.record-head{
  display:flex; align-items:center; gap:.625rem;
  color:var(--mineral-muted);
  padding-bottom:1rem;
  border-bottom:1px solid var(--indigo-line);
}
.record-head .dot{ width:.4375rem; height:.4375rem; background:var(--chartreuse); flex:none }
.record-head .len{ margin-left:auto; color:var(--mineral-muted) }

.utterance{
  font-size:var(--t-utterance);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.028em;
  color:var(--mineral);
  padding-block:1.375rem .25rem;
  text-wrap:pretty;
}
.utterance .gloss{
  display:block; margin-top:.625rem;
  font-family:var(--font-data); font-size:var(--t-data);
  font-weight:400; letter-spacing:.02em; line-height:1.5;
  color:var(--mineral-muted);
}

.thread{ display:block; width:1.25rem; height:3.5rem; margin:.75rem 0 .375rem; overflow:visible }
.thread .line{ fill:none; stroke:var(--chartreuse); stroke-width:1.5 }
.thread .port{ fill:var(--chartreuse) }

.fields{ display:grid; gap:0; }
.fields div{
  display:grid; grid-template-columns:8.5rem 1fr; gap:.75rem;
  align-items:baseline;
  padding-block:.6875rem;
  border-bottom:1px solid rgba(52,52,107,.5);
}
.fields div:last-child{ border-bottom:0 }
.fields dt{ color:var(--mineral-muted); font-family:var(--font-data); font-size:var(--t-data); letter-spacing:.02em }
.fields dd{ font-weight:560; font-size:.9375rem; line-height:1.35; display:flex; align-items:center; gap:.5rem }
.fields .sci{ font-style:italic }

.record-foot{
  margin-top:1.125rem; padding-top:1rem;
  border-top:1px solid var(--indigo-line);
  color:var(--mineral-muted);
}
.record-foot b{ color:var(--chartreuse); font-weight:600 }

.disclaimer{ margin-top:.875rem; color:var(--mineral-muted); }

/* ---------- sequence: how it works ---------- */

.seq{ margin-top:clamp(2.5rem,6vw,4rem); }

.seq-list{
  display:grid; gap:0;
  border-left:1px solid var(--rule-light);
  padding-left:1.5rem;
}
.seq-list li{ position:relative; padding-block:1.5rem; border-bottom:1px solid var(--rule-hair) }
.seq-list li:first-child{ padding-top:0 }
.seq-list li:last-child{ border-bottom:0; padding-bottom:0 }
.seq-list li::before{
  content:""; position:absolute; left:-1.71875rem; top:1.6875rem;
  width:.4375rem; height:.4375rem; background:var(--chartreuse);
}
.seq-list li:first-child::before{ top:.1875rem }
.seq-list p{ margin-top:.5rem; color:var(--ink-muted); max-width:44ch }

/* ---------- audiences ---------- */

.rows{ margin-top:clamp(2.5rem,6vw,3.5rem); border-top:1px solid var(--rule-light); }
.rows li{
  display:grid; gap:.375rem;
  padding-block:1.5rem;
  border-bottom:1px solid var(--rule-hair);
}
.rows p{ color:var(--ink-muted); max-width:52ch }

/* ---------- governance band ---------- */

.band{ background:var(--indigo-brand); color:var(--mineral); }
.band .lead{ color:var(--mineral-muted) }
.band .h2{ color:var(--mineral) }

.pledges{ margin-top:clamp(2.5rem,6vw,3.5rem); display:grid; gap:0; }
.pledges li{ padding-block:1.625rem; border-top:1px solid var(--indigo-line) }
.pledges li:last-child{ border-bottom:1px solid var(--indigo-line) }
.pledges p{ margin-top:.5rem; color:var(--mineral-muted); max-width:52ch }

/* ---------- whatsapp test ---------- */

.test-grid{ display:grid; gap:clamp(2rem,6vw,3.5rem); align-items:start }

.chat{ border:1px solid var(--rule-light); background:#fff; padding:1rem }
.chat-top{
  display:flex; align-items:center; gap:.625rem;
  padding-bottom:.875rem; border-bottom:1px solid var(--rule-hair);
  color:var(--ink-muted);
}
.chat-top .who{ font-family:var(--font-display); font-size:.9375rem; font-weight:700; color:var(--ink); letter-spacing:-.01em }
.chat-log{ display:grid; gap:.625rem; padding-block:1rem }
.bubble{
  padding:.6875rem .875rem; font-size:.9375rem; line-height:1.45; max-width:88%;
  border:1px solid var(--rule-hair);
}
.bubble.them{ background:var(--wash); justify-self:start }
.bubble.you{ background:var(--indigo-brand); color:var(--mineral); border-color:var(--indigo-brand); justify-self:end }
.bubble .voice{ display:flex; align-items:center; gap:.625rem }
.bubble .wave{ display:flex; align-items:center; gap:2px; height:1.125rem }
.bubble .wave i{ display:block; width:2px; background:var(--chartreuse) }

.test-cta{ margin-top:1.5rem }

/* ---------- partnership ---------- */

.form{ margin-top:clamp(2rem,5vw,3rem); display:grid; gap:1.125rem; max-width:34rem }
.field{ display:grid; gap:.5rem }
.field label{ font-size:.9375rem; font-weight:650; color:var(--mineral) }
.field input,.field textarea{
  width:100%; padding:.8125rem .875rem;
  background:rgba(3,3,38,.5); color:var(--mineral);
  border:1px solid #454582; border-radius:0;
  font-family:var(--font-display); font-size:1rem; font-weight:440;
}
.field textarea{ min-height:7rem; resize:vertical; line-height:1.5 }
.field input::placeholder,.field textarea::placeholder{ color:rgba(201,198,213,.7) }
.form-note{ color:var(--mineral-muted) }

/* ---------- footer ---------- */

.foot{
  background:var(--indigo-deep); color:var(--mineral);
  padding-block:clamp(3rem,7vw,4.5rem);
  padding-bottom:calc(clamp(3rem,7vw,4.5rem) + 4.75rem + env(safe-area-inset-bottom));
}
.foot-grid{ display:grid; gap:2.5rem }
.foot p{ color:var(--mineral-muted); max-width:34ch; margin-top:1rem }
.foot-nav{ display:grid; gap:.125rem }
.foot-nav a{
  color:var(--mineral); text-decoration:none; font-weight:600; font-size:.9375rem;
  padding-block:.6875rem;
}
.foot-nav a:hover{ color:var(--chartreuse) }
.foot-base{
  margin-top:clamp(2.5rem,6vw,3.5rem); padding-top:1.5rem;
  border-top:1px solid var(--indigo-line); color:var(--mineral-muted);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
}

/* ---------- mobile action bar ---------- */

.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--indigo-deep); border-top:1px solid var(--indigo-line);
  padding:.625rem var(--pad-x) calc(.625rem + env(safe-area-inset-bottom));
  transform:translateY(110%);
  transition:transform .22s ease;
}
.dock.is-up{ transform:translateY(0) }
@media (prefers-reduced-motion:reduce){ .dock{ transition:none } }

/* ---------- one orchestrated hero moment ---------- */

@media (prefers-reduced-motion:no-preference){
  .js .record-anim .thread .line{
    stroke-dasharray:52; stroke-dashoffset:52;
    animation:draw .5s ease .35s forwards;
  }
  .js .record-anim .thread .port{ opacity:0; animation:fade .3s ease .8s forwards }
  .js .record-anim .fields div{ opacity:0; animation:settle .42s ease forwards }
  .js .record-anim .fields div:nth-child(1){ animation-delay:.86s }
  .js .record-anim .fields div:nth-child(2){ animation-delay:.94s }
  .js .record-anim .fields div:nth-child(3){ animation-delay:1.02s }
  .js .record-anim .fields div:nth-child(4){ animation-delay:1.10s }
  .js .record-anim .fields div:nth-child(5){ animation-delay:1.18s }
  .js .record-anim .record-foot{ opacity:0; animation:fade .4s ease 1.3s forwards }
}
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes fade{ to{ opacity:1 } }
@keyframes settle{ from{ opacity:0; transform:translateY(.375rem) } to{ opacity:1; transform:none } }

/* ================= 600px+ ================= */
@media (min-width:600px){
  :root{ --t-body:1.09375rem; --t-data:.8125rem }
  .hero-actions .btn{ flex:0 0 auto }
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr }
  .fields div{ grid-template-columns:10rem 1fr }
}

/* ================= 860px+ ================= */
@media (min-width:860px){
  .menu-btn{ display:none }
  .menu-panel{ display:none !important }
  .nav-links{
    display:flex; align-items:center; gap:clamp(1.25rem,2.6vw,2.25rem);
    margin-right:clamp(1.25rem,2.6vw,2.25rem);
  }
  .nav-links a{
    color:var(--mineral-muted); text-decoration:none;
    font-size:.9375rem; font-weight:650; letter-spacing:-.005em;
  }
  .nav-links a:hover{ color:var(--mineral) }
  .bar-cta{ display:inline-flex; min-height:2.625rem; padding:.625rem 1.125rem; font-size:.9375rem }

  .dock{ display:none }
  .foot{ padding-bottom:clamp(3rem,7vw,4.5rem) }

  .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); align-items:start; gap:clamp(3rem,5vw,4.5rem) }

  .seq-list{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(1.25rem,2.6vw,2.25rem);
    border-left:0; padding-left:0;
    border-top:1px solid var(--rule-light); padding-top:1.75rem;
  }
  .seq-list li{ padding-block:0; border-bottom:0 }
  .seq-list li::before,
  .seq-list li:first-child::before{ left:0; top:-2rem }
  .seq-list li:first-child{ padding-top:0 }
  .seq-list p{ max-width:none }

  .rows li{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); align-items:start; padding-block:1.75rem }

  .pledges{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.5rem) }
  .pledges li{ border-top:1px solid var(--indigo-line); padding-block:1.5rem 0 }
  .pledges li:last-child{ border-bottom:0 }

  .test-grid{ grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:clamp(3rem,5vw,4.5rem) }

  .partner-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(3rem,5vw,4.5rem); align-items:start }
  .partner-grid .form{ margin-top:0 }
}

/* ================= 1100px+ ================= */
@media (min-width:1100px){
  .hero-claim{ letter-spacing:-.042em }
  .h2{ max-width:19ch }
}