/* Calenizo site. Token-only: every colour, size, radius and duration comes from tokens.css. */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--f-body);line-height:var(--lh-body);color:var(--c-ink);background:var(--c-canvas);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:var(--ring) solid var(--c-focus);outline-offset:var(--ring-offset);border-radius:var(--r-3)}
.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--s-4)}
.skip{position:absolute;left:var(--s-4);top:-100px;background:var(--c-surface);padding:var(--s-3) var(--s-4);border-radius:var(--r-3);z-index:10}
.skip:focus{top:var(--s-3)}

/* header */
.top{position:sticky;top:0;z-index:5;background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.top .wrap{display:flex;align-items:center;gap:var(--s-4);min-height:calc(var(--touch) + var(--s-6))}
.brand{display:flex;align-items:center;gap:var(--s-2);text-decoration:none;font-weight:var(--w-heavy);font-size:var(--f-title);letter-spacing:-.01em}
.brand svg,.brand img{width:var(--size-mark);height:var(--size-mark)}
.nav{display:none;gap:var(--s-6);margin-left:var(--s-8)}
.nav a{text-decoration:none;color:var(--c-muted);font-weight:var(--w-medium);font-size:var(--f-dense);min-height:var(--touch);display:inline-flex;align-items:center}
.nav a:hover{color:var(--c-ink)}
.top .grow{flex:1}
.top .wrap{gap:var(--s-2)}
.top .btn{padding-inline:var(--s-4)}
.lang{display:inline-flex;align-items:center;min-height:var(--touch);padding-inline:var(--s-3);text-decoration:none;color:var(--c-muted);font-weight:var(--w-medium);font-size:var(--f-dense);border-radius:var(--r-3)}
.lang:hover{color:var(--c-ink);background:var(--c-mist)}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--touch);padding-inline:var(--s-5);border-radius:var(--r-5);font:inherit;font-weight:var(--w-strong);font-size:var(--f-body);text-decoration:none;border:1px solid var(--c-primary);background:var(--c-primary);color:var(--c-on-primary);box-shadow:var(--shadow-btn);transition:background var(--dur-fast) var(--ease)}
.btn:hover{background:var(--c-logo-sky);border-color:var(--c-logo-sky)}
.btn.big{min-height:var(--touch-primary);padding-inline:var(--s-8)}
.btn.ghost{background:var(--c-surface);color:var(--c-ink);border-color:var(--c-control);box-shadow:none}
.btn.ghost:hover{background:var(--c-mist)}
.btn svg{width:var(--size-icon);height:var(--size-icon)}

/* hero */
.hero{padding-block:var(--s-12) var(--s-16);overflow:hidden}
.hero .wrap{display:grid;gap:var(--s-12);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-3);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-pill);font-size:var(--f-dense);font-weight:var(--w-medium);color:var(--c-muted)}
.eyebrow i{width:var(--size-dot);height:var(--size-dot);border-radius:var(--r-pill);background:var(--c-yellow)}
h1{font-size:var(--f-display-m);line-height:var(--lh-tight);font-weight:var(--w-heavy);letter-spacing:-.025em;margin-top:var(--s-5)}
.lead{font-size:var(--f-lead);color:var(--c-muted);margin-top:var(--s-5);max-width:var(--read-max)}
.cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
.note{margin-top:var(--s-4);font-size:var(--f-dense);color:var(--c-muted)}

/* hero visual: iridescent aura + product card, slow drift, no motion under reduced-motion */
.stage{position:relative;display:grid;place-items:center;min-height:calc(var(--size-mock) + var(--s-12))}
.aura{position:absolute;width:var(--size-aura);max-width:120%;aspect-ratio:1;border-radius:var(--r-pill);background:var(--g-iris);filter:blur(var(--s-12));opacity:.55;animation:spin var(--dur-drift) linear infinite}
.aura.two{width:var(--size-blob);background:var(--g-iris);opacity:.5;transform:translate(35%,25%);animation-direction:reverse;animation-duration:calc(var(--dur-drift) * .7)}
.mock{position:relative;width:100%;max-width:var(--size-mock);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:var(--s-5);overflow:hidden;animation:float var(--dur-loop) var(--ease) infinite}
.mock::after{content:"";position:absolute;inset:0;background:var(--g-sheen);transform:translateX(-120%);animation:sheen var(--dur-sheen) var(--ease) infinite;pointer-events:none}
.mock-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.mock-head b{font-size:var(--f-title)}
.mock-head span{font-size:var(--f-dense);color:var(--c-muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);margin-top:var(--s-4)}
.stat{background:var(--c-canvas);border-radius:var(--r-4);padding:var(--s-3)}
.stat small{display:block;font-size:var(--f-dense);color:var(--c-muted)}
.stat strong{font-size:var(--f-head);font-weight:var(--w-heavy);line-height:var(--lh-tight)}
.rows{list-style:none;padding:0;margin-top:var(--s-4)}
.rows li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-2);border-top:1px solid var(--c-line);font-size:var(--f-dense)}
.rows time{font-weight:var(--w-strong);min-width:var(--s-12);font-variant-numeric:tabular-nums}
.rows em{font-style:normal;color:var(--c-muted);margin-left:auto}
.rows li.next{background:var(--c-ok-bg);border-radius:var(--r-4);border-top-color:transparent}
.rows li.add{animation:arrive var(--dur-loop) var(--ease) infinite}
.ava{width:var(--size-ava);height:var(--size-ava);flex:none;border-radius:var(--r-pill);background:var(--c-mist);display:grid;place-items:center;font-weight:var(--w-strong);font-size:var(--f-dense)}
.toast{position:absolute;right:0;bottom:var(--s-4);display:flex;align-items:center;gap:var(--s-3);background:var(--c-side);color:var(--c-on-side);padding:var(--s-3) var(--s-4);border-radius:var(--r-5);box-shadow:var(--shadow-pop);font-size:var(--f-dense);font-weight:var(--w-medium);animation:toast var(--dur-loop) var(--ease) infinite}
.toast svg{width:var(--size-icon);height:var(--size-icon);flex:none;color:var(--c-logo-lime)}
.slots{position:absolute;left:0;top:var(--s-6);display:flex;gap:var(--s-2);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-5);box-shadow:var(--shadow-pop);padding:var(--s-2);animation:float var(--dur-loop) var(--ease) infinite reverse}
.slots span{min-height:var(--size-cell);min-width:var(--size-cell);padding-inline:var(--s-2);display:grid;place-items:center;border-radius:var(--r-3);font-size:var(--f-dense);font-weight:var(--w-strong);font-variant-numeric:tabular-nums;background:var(--c-canvas)}
.slots span.on{background:var(--c-primary);color:var(--c-on-primary);animation:pick var(--dur-loop) var(--ease) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--s-2) * -1))}}
@keyframes sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes toast{0%,35%{opacity:0;transform:translateY(var(--s-4))}45%,85%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(var(--s-4))}}
@keyframes arrive{0%,40%{opacity:0;max-height:0;padding-block:0}55%,100%{opacity:1;max-height:var(--s-16);padding-block:var(--s-3)}}
@keyframes pick{0%,25%{background:var(--c-canvas);color:var(--c-ink)}35%,100%{background:var(--c-primary);color:var(--c-on-primary)}}

/* sections */
section{padding-block:var(--s-16)}
.head{max-width:var(--read-max)}
h2{font-size:var(--f-head);line-height:var(--lh-tight);font-weight:var(--w-heavy);letter-spacing:-.02em}
.head p{margin-top:var(--s-3);color:var(--c-muted);font-size:var(--f-lead)}
.steps{list-style:none;padding:0;margin-top:var(--s-10);display:grid;gap:var(--s-4);counter-reset:s}
.steps li{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-card);padding:var(--s-6);box-shadow:var(--shadow-card);counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:var(--size-chip);height:var(--size-chip);border-radius:var(--r-pill);background:var(--c-primary);color:var(--c-on-primary);font-weight:var(--w-strong);font-size:var(--f-dense)}
.steps h3,.feat h3{font-size:var(--f-title);margin-top:var(--s-4)}
.steps p,.feat p{margin-top:var(--s-2);color:var(--c-muted)}
.alt{background:var(--c-surface);border-block:1px solid var(--c-line)}
.feats{display:grid;gap:var(--s-6);margin-top:var(--s-10)}
.feat{padding-top:var(--s-5);border-top:1px solid var(--c-line)}
.feat h3{margin-top:0}
.faq{margin-top:var(--s-8);max-width:var(--read-max)}
.faq details{border-top:1px solid var(--c-line)}
.faq details:last-child{border-bottom:1px solid var(--c-line)}
.faq summary{cursor:pointer;min-height:var(--touch-primary);display:flex;align-items:center;font-weight:var(--w-strong);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:var(--f-title);color:var(--c-muted)}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding-bottom:var(--s-5);color:var(--c-muted)}
.final{background:var(--c-side);color:var(--c-on-side);text-align:center;padding-block:var(--s-20)}
.final p{color:var(--c-side-muted);margin-top:var(--s-3);font-size:var(--f-lead)}
.final .cta{justify-content:center}
.final .btn{background:var(--c-yellow);color:var(--c-ink);border-color:var(--c-yellow);box-shadow:none}
.final .btn:hover{background:var(--c-logo-yellow);border-color:var(--c-logo-yellow)}
footer{padding-block:var(--s-8);font-size:var(--f-dense);color:var(--c-muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between}

@media (min-width:768px){
  h1{font-size:var(--f-display)}
  .nav{display:flex}
  .steps,.feats{grid-template-columns:repeat(3,1fr)}
  .wrap{padding-inline:var(--s-8)}
}
@media (min-width:1024px){
  .hero .wrap{grid-template-columns:1.05fr 1fr}
  .hero{padding-block:var(--s-20) var(--s-24)}
}
@media (prefers-reduced-motion:reduce){
  .aura,.mock,.mock::after,.toast,.slots,.slots span.on,.rows li.add{animation:none}
  .toast{opacity:1}
  .mock::after{display:none}
}