/* Kumasi Home Appliances — launch page.
   Ivory and brass, matching the main storefront design system. */

:root{
  --paper:#FBF8F3; --surface:#FFFFFF; --surface-alt:#F3EEE4;
  --ink:#1C1A17; --ink-soft:#4A453D; --muted-ink:#6E6657;
  --brass:#B08A3E; --brass-bright:#D6AE64; --brass-deep:#8A6A2D;
  --brass-10:rgba(176,138,62,.10); --brass-18:rgba(176,138,62,.18);
  --sage-ink:#4E6950; --sage-bg:rgba(92,122,94,.12);
  --brick-ink:#8E4E35; --brick-bg:rgba(161,90,63,.12);
  --line:rgba(28,26,23,.10);
  --ink-dark:#14181C; --ivory:#FAF7F1;
  --on-brass:#8A6A2D;
  /* Brass is a 3.2:1 colour at text size, so anything small that carries
     it uses a darker companion. --brass-deep on the 10% tint is 4.3:1;
     this clears AA at 5.1:1 and keeps the same hue. */
  --brass-text:#7D5F27;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
svg{display:block}
h1,h2,h3{font-family:var(--display); margin:0; font-weight:600; line-height:1.1; letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60rem 40rem at 85% -10%, var(--brass-10), transparent 60%),
    radial-gradient(50rem 35rem at -10% 110%, rgba(92,122,94,.08), transparent 60%);
}
.page{position:relative; z-index:1; flex:1; display:flex; flex-direction:column}
.wrap{width:100%; max-width:980px; margin:0 auto; padding:0 24px}

/* masthead */
.mast{padding:2.2rem 0 1rem}
.mast .wrap{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.markname{display:flex; align-items:center; gap:.65rem;
  font-family:var(--display); font-size:1.18rem; font-weight:600; letter-spacing:-.025em}
.markname .chip{width:30px; height:30px; color:var(--brass)}
.mast .where{margin-left:auto; font-size:.84rem; color:var(--muted-ink)}

/* lede */
.lede{padding:1.6rem 0 .5rem}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem;
  background:var(--brass-10); color:var(--brass-text);
  border-radius:99px; padding:.3rem .8rem; font-size:.8rem; font-weight:600; letter-spacing:.02em}
.eyebrow .pip{width:7px; height:7px; border-radius:50%; background:var(--brass)}
.lede h1{font-size:clamp(2.3rem,6.4vw,4rem); margin:1.1rem 0 0;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 48}
.lede h1 em{font-style:normal; color:var(--brass-deep)}
.lede p{color:var(--ink-soft); font-size:clamp(1rem,2.2vw,1.12rem); max-width:52ch; margin-top:1rem}

/* countdown */
.count{margin:2.2rem 0 .4rem}
.count-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; max-width:620px}
.unit{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem .5rem .8rem; text-align:center; position:relative; overflow:hidden}
.unit::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--brass-18)}
.unit[data-unit="seconds"]::after{background:var(--brass)}
.unit b{display:block; font-family:var(--mono); font-weight:500;
  font-size:clamp(2rem,7vw,3.1rem); line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.unit span{display:block; margin-top:.5rem; font-size:.74rem; color:var(--muted-ink); letter-spacing:.06em}
.count-when{margin-top:1rem; font-size:.9rem; color:var(--muted-ink)}
.count-when strong{color:var(--ink); font-weight:600}
.live{background:var(--sage-bg); color:var(--sage-ink); border-radius:99px;
  padding:.35rem .85rem; font-size:.85rem; font-weight:600; display:none}
.is-open .count-grid{display:none}
.is-open .live{display:inline-block}

/* signup */
.signup{margin-top:2.4rem; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:1.5rem 1.6rem; max-width:620px}
.signup h2{font-size:1.18rem}
.signup > p{color:var(--muted-ink); font-size:.9rem; margin-top:.35rem}
.signup form{display:flex; gap:.6rem; margin-top:1.1rem; flex-wrap:wrap}
.signup input{flex:1; min-width:200px; border:1px solid var(--line); border-radius:10px;
  padding:.78rem .9rem; background:var(--paper); font:inherit; color:inherit}
.signup input:focus{outline:none; border-color:var(--brass); background:var(--surface)}
.signup input[aria-invalid="true"]{border-color:#A15A3F; background:var(--brick-bg)}
.btn{border:0; border-radius:10px; padding:.78rem 1.3rem; cursor:pointer;
  background:var(--on-brass); color:#fff; font:inherit; font-weight:600;
  transition:background .15s}
.btn:hover{background:#6F5424}
.formnote{margin-top:.9rem; font-size:.88rem; border-radius:10px; padding:.6rem .85rem}
.formnote[data-state="ok"]{color:var(--sage-ink); background:var(--sage-bg)}
.formnote[data-state="bad"]{color:var(--brick-ink); background:var(--brick-bg)}

/* honeypot: off-screen, not display:none, so bots still find it */
.trap{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* categories */
.cats{margin:2.6rem 0 0}
.cats h2{font-size:1rem; color:var(--muted-ink); font-family:var(--sans);
  font-weight:600; letter-spacing:.04em; margin-bottom:.9rem}
.cats ul{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(6,1fr); gap:.7rem}
.cats li{background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:.95rem .6rem; text-align:center}
.cats .ic{width:34px; height:34px; margin:0 auto .5rem; border-radius:50%;
  background:var(--brass-10); color:var(--brass-text); display:grid; place-items:center}
.cats small{font-size:.76rem; color:var(--ink-soft); line-height:1.3; display:block}

/* promises */
.notes{margin:2.4rem 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
  border-top:1px solid var(--line); padding-top:1.6rem}
.notes b{display:block; font-family:var(--display); font-size:1rem; margin-bottom:.2rem}
.notes p{font-size:.86rem; color:var(--muted-ink)}

/* footer */
footer{background:var(--ink-dark); color:#A39C90; margin-top:3rem; font-size:.86rem}
footer .wrap{display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center;
  padding-top:1.6rem; padding-bottom:1.6rem}
footer b{color:var(--ivory); font-weight:600}
footer .spacer{margin-left:auto}
footer a:hover{color:var(--brass-bright)}

@media (max-width:760px){
  .cats ul{grid-template-columns:repeat(3,1fr)}
  .notes{grid-template-columns:1fr; gap:1rem}
  .count-grid{gap:.5rem}
  .unit{border-radius:12px; padding:.9rem .3rem .7rem}
  .mast .where{margin-left:0; flex-basis:100%}
}
@media (max-width:420px){
  .cats ul{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important; animation-duration:.001ms !important}
}