/* drippa / LLY · medicine cabinet landing
   Committed to a single light look, matching the approved reference.
   Every colour is painted explicitly so the page holds on any host ground.

   Type: the "Label" direction. Azeret Mono sets everything machine-printed
   (headline, figures, micro-labels) and Schibsted Grotesk carries reading copy,
   so the mono never has to do a job it is bad at. The previous system crammed
   13 sizes between 9.5 and 19px and then leapt to 47, which is why nothing led
   the eye. The ramp below has ten steps with real gaps, and weight and tracking
   carry hierarchy that used to rest on size alone. */

:root{
  --bg:#F4F4F4;
  --bg-top:#FAFAFA;
  --card:#FFFFFF;
  --inner:#FCFCFC;
  --line:#E8E8E8;
  --line-soft:#EFEFEF;
  --ink:#131313;
  --ink-2:#3A3A3A;
  --muted:#8C8C8C;
  --faint:#ABABAB;
  --green:#23A455;
  --green-soft:#EAF6EE;

  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* The ramp. Ten steps, and the gaps between them are the point. */
  --t-display:clamp(24px,3.5vw,34px);   /* headline            mono 500 */
  --t-figure:clamp(30px,4.2vw,40px);    /* the countdown       mono 500 */
  --t-amount:17px;                      /* the payout callout  mono 500 */
  --t-lede:clamp(16px,1.8vw,19px);      /* hero sub-lines      sans 400 */
  --t-value:13.5px;                     /* data figures        mono 400 */
  --t-body:14.5px;                      /* reading copy        sans 400 */
  --t-aside:12.5px;                     /* secondary copy      sans 400 */
  --t-heading:11px;                      /* card titles         mono 500 caps */
  --t-eyebrow:10px;                     /* live epoch          mono 500 caps */
  --t-micro:9px;                        /* field labels        mono 400 caps */

  --r-lg:16px;
  --r-md:12px;
  --r-sm:9px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ink)}
a:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}

.wrap{max-width:960px;margin:0 auto;padding:0 32px}

/* ---------------------------------------------------------------- shared */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.green{color:var(--green)}

.label{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.10em;text-transform:uppercase;
  color:var(--faint);line-height:1.4;white-space:nowrap;
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
}
.card-title{
  font-family:var(--mono);font-size:var(--t-heading);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);padding:16px 18px 0;
}

/* ------------------------------------------------------------------- nav */
.nav{padding:22px 0 6px}
.nav .wrap{display:flex;align-items:center;gap:20px}
.brand{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:-.07em;color:var(--ink)}
.nav nav{margin-left:auto;display:flex;gap:clamp(18px,3.4vw,44px)}
.nav nav a{font-size:13px;color:var(--muted)}

/* ----------------------------------------------------------------- hero */
.hero{
  padding:34px 0 44px;
  background:linear-gradient(to bottom,var(--bg-top) 0,var(--bg) 78%);
}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,56px);align-items:center;
}
.hero-shot{padding:8px 12px;display:flex;justify-content:center}
/* The three hero renders are 1.17, 1.36 and 0.80 to one, so the slot is sized
   by height rather than width. Each one then keeps its own proportions and
   still reads at the same visual weight beside the headline. */
.hero-shot img{
  display:block;width:auto;height:auto;
  max-width:100%;max-height:430px;
}


.live{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.live .dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(35,164,85,.16);flex:none;
}
.live span{
  font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
}

h1{
  margin:0;font-family:var(--mono);font-size:var(--t-display);line-height:1.16;
  letter-spacing:-.055em;font-weight:500;color:var(--ink);
}
.hero-sub{
  margin:24px 0 0;font-size:var(--t-lede);line-height:1.6;color:var(--muted);
}
.hero-sub span{display:block}

.countdown{
  margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 20px 16px;text-align:center;width:max-content;min-width:250px;
}
.countdown .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px;
}
.countdown .v{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--t-figure);
  font-weight:500;letter-spacing:-.05em;color:var(--ink);line-height:1.05;
}

/* ---------------------------------------------------------------- steps */
.steps{margin-top:8px;display:grid;grid-template-columns:repeat(4,1fr)}
.step{padding:22px 20px 26px;text-align:center;border-left:1px solid var(--line-soft)}
.step:first-child{border-left:0}
.step .n{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.16em}
.step h3{
  margin:6px 0 0;font-family:var(--mono);font-size:var(--t-heading);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
}
.step figure{margin:14px 0 14px;height:82px;display:flex;align-items:center;justify-content:center}
.step figure img{height:100%;width:auto}
.step p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}

/* ----------------------------------------------------------------- trio */
.trio{
  margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  align-items:start;
}
.trio .card{display:flex;flex-direction:column;height:100%}
.trio .body{padding:14px 18px 16px;display:flex;flex-direction:column;gap:14px;flex:1}
.foot-note{
  margin:0;padding:12px 18px 16px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:-.02em;color:var(--faint);border-top:1px solid var(--line-soft);
}

/* receipt grid */
.rgrid{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
.rgrid.two{grid-template-columns:1fr auto}
.rgrid .k{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px;
}
.rgrid .v{
  font-family:var(--mono);font-size:var(--t-value);color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rgrid .v.green{color:var(--green);font-weight:500}
.rgrid .v.small{font-size:11px;color:var(--muted);letter-spacing:-.03em}
.rgrid div:nth-child(3) .k,.rgrid div:nth-child(3) .v{text-align:right}
.rgrid.two div:nth-child(2) .k,.rgrid.two div:nth-child(2) .v{text-align:right}

.callout{
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inner);
  padding:13px 14px;text-align:center;
}
.callout .big{
  font-family:var(--mono);font-size:var(--t-amount);font-weight:500;letter-spacing:-.04em;
  color:var(--green);font-variant-numeric:tabular-nums;
}
.callout .sub{font-size:var(--t-aside);color:var(--muted);margin-top:7px}

/* comparison */
.compare{
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inner);
  display:grid;grid-template-columns:1fr 1fr;
}
.compare > div{padding:14px 9px 16px;text-align:center}
.compare > div + div{border-left:1px solid var(--line)}
.compare .h{font-size:13px;color:var(--ink);margin-bottom:4px}
.compare figure{margin:12px 0 10px;height:64px;display:flex;align-items:flex-end;justify-content:center}
.compare figure img{width:auto}
.compare .amt{
  font-family:var(--mono);font-size:var(--t-value);font-weight:500;letter-spacing:-.03em;
  color:var(--green);font-variant-numeric:tabular-nums;
}
.compare .cap{font-size:11.5px;color:var(--muted);margin-top:4px}
.formula{
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  padding:11px 12px;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:-.03em;color:var(--ink-2);
}

/* calculator */
.calc-row{display:grid;grid-template-columns:1fr 18px 1fr;gap:8px;align-items:center}
.calc-box{
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inner);
  padding:10px 8px;text-align:center;
}
.calc-box .k{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px;
}
.calc-box input{
  width:100%;border:0;background:transparent;text-align:center;padding:0;color:var(--ink);
  font-family:var(--mono);font-size:12.5px;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.calc-box input::-webkit-outer-spin-button,
.calc-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-box input[type=number]{-moz-appearance:textfield}
.calc-box .u{font-size:11px;color:var(--muted);margin-top:5px}
.calc-op{
  font-family:var(--mono);font-size:14px;color:var(--faint);text-align:center;
}
.calc-eq{font-family:var(--mono);font-size:14px;color:var(--faint);text-align:center;margin:-4px 0}

/* --------------------------------------------------------------- safety */
.safety{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr)}
.safe{
  padding:20px 18px;display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;
  border-left:1px solid var(--line-soft);
}
.safe:first-child{border-left:0}
/* Same four objects as the steps above, deliberately: the steps say what the
   machine does, this row says what it will not do. The slot is fixed and each
   object is fitted inside it, because their proportions differ and an
   unconstrained row reads as accidental. */
.safe img{width:56px;height:56px;object-fit:contain}
.safe p{margin:0;font-size:var(--t-body);line-height:1.5;color:var(--ink-2)}

/* ------------------------------------------------------------- receipts */
.receipts{margin-top:16px}
.rtable{width:100%;border-collapse:collapse;font-size:12.5px}
.rtable th,.rtable td{padding:11px 18px;text-align:left;white-space:nowrap}
.rtable thead th{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:400;border-bottom:1px solid var(--line-soft);
  border-top:1px solid var(--line-soft);
}
.rtable tbody td{
  border-bottom:1px solid var(--line-soft);font-family:var(--mono);letter-spacing:-.03em;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.rtable td.green{color:var(--green);font-weight:500}
.rtable th:nth-child(4),.rtable td:nth-child(4){text-align:right}
.rtable th:nth-child(5),.rtable td:nth-child(5){text-align:right}
.viewall{display:block;padding:15px;text-align:center;font-size:var(--t-aside);color:var(--muted)}
.viewall:hover{color:var(--ink)}
.scroll-x{overflow-x:auto}

/* --------------------------------------------------------------- footer */
footer{margin-top:34px;padding:26px 0 46px}
footer .wrap{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:24px;align-items:start;
}
footer .brand{display:block;margin-bottom:8px}
footer .tag{font-size:12px;line-height:1.7;color:var(--muted)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
footer li a{font-size:12px;color:var(--muted)}
footer .legal{
  text-align:right;font-family:var(--mono);font-size:10.5px;letter-spacing:-.02em;
  line-height:1.8;color:var(--faint);
}

/* ---------------------------------------------------------- responsive */
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(3){border-left:0}
  .step:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .trio{grid-template-columns:1fr}
  .safety{grid-template-columns:repeat(2,1fr)}
  .safe:nth-child(3){border-left:0}
  .safe:nth-child(n+3){border-top:1px solid var(--line-soft)}
  footer .wrap{grid-template-columns:1fr 1fr}
  footer .legal{text-align:left;grid-column:1 / -1}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  .hero .wrap{grid-template-columns:1fr}
  .hero-shot{order:-1;max-width:420px;margin:0 auto}
  .countdown{width:100%}
}
@media (max-width:520px){
  .steps,.safety{grid-template-columns:1fr}
  .step,.safe{border-left:0;border-top:1px solid var(--line-soft)}
  .step:first-child,.safe:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------------------------------------------------- document pages */
.doc{padding:40px 0 12px}
.doc .eyebrow{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin:0 0 16px;
}
.doc h1{
  font-family:var(--mono);font-size:clamp(23px,3.1vw,30px);font-weight:500;
  letter-spacing:-.055em;line-height:1.2;max-width:22ch;margin:0 0 6px;
}
.doc h2{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin:36px 0 10px;
}
.doc h2:first-of-type{margin-top:28px}
.doc p{margin:0 0 13px;max-width:66ch;font-size:15px;line-height:1.72;color:var(--ink-2)}
.doc ul{margin:0 0 14px;padding-left:19px;max-width:66ch}
.doc li{font-size:15px;line-height:1.72;color:var(--ink-2);margin-bottom:7px}
.doc a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-soft)}
.doc a:hover{text-decoration-color:var(--green)}