/* Hallmark · redesign · Apple / liquid-glass · references tokens.css by name only */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--color-bg);color:var(--color-fg);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* soft, low-chroma gradient field — gives the glass something to blur */
body::before{
  content:"";position:fixed;inset:-10% -10% auto -10%;height:120vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 32% at 15% 8%, var(--blob-1), transparent 70%),
    radial-gradient(34% 30% at 85% 4%, var(--blob-2), transparent 70%),
    radial-gradient(40% 34% at 78% 62%, var(--blob-3), transparent 72%),
    radial-gradient(34% 30% at 12% 68%, var(--blob-4), transparent 72%);
  opacity:.55;filter:blur(30px);
}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:24px}
h1,h2,h3{font-family:var(--font-display);font-weight:700;font-style:normal;line-height:1.06;letter-spacing:-.021em;overflow-wrap:anywhere;min-width:0}
p{margin:0}

/* ---------- glass primitive ---------- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow),var(--glass-inset);
}

/* ---------- top bar (glass, floating) ---------- */
.top{position:sticky;top:12px;z-index:30;margin-top:12px}
.top .row{
  display:flex;align-items:center;justify-content:space-between;height:56px;padding-inline:10px 10px;
  background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-pill);box-shadow:var(--glass-shadow),var(--glass-inset);
}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:9px;padding-inline-start:12px}
.brand .dot{width:20px;height:20px;border-radius:22%;background:url(/favicon.svg) center/cover no-repeat;flex:0 0 auto}
.nav-right{display:flex;align-items:center;gap:6px}
.lang{display:inline-flex;gap:2px}
.lang a{font-size:var(--text-sm);color:var(--color-muted);padding:6px 10px;border-radius:var(--radius-pill);transition:color var(--dur-fast),background var(--dur-fast)}
.lang a:hover{color:var(--color-fg)}
.lang a[aria-current="page"]{background:rgba(0,0,0,.06);color:var(--color-fg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--text-base);
  padding:13px 24px;border-radius:var(--radius-pill);cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),box-shadow var(--dur-fast)}
.btn-primary{background:var(--color-accent);color:#fff;box-shadow:0 6px 20px rgba(0,113,227,.28)}
.btn-primary:hover{background:var(--color-accent-press);transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,113,227,.34)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.btn-ghost{background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);color:var(--color-fg);padding:13px 15px;font-size:var(--text-sm);box-shadow:var(--glass-inset)}
.btn-ghost:hover{background:#fff}
.btn-ghost:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}

/* ---------- hero (centered, Apple splash) ---------- */
.hero{padding-block:var(--space-2xl) var(--space-xl);text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--color-accent);font-weight:600;
  background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-pill);padding:7px 15px;margin-bottom:var(--space-md);box-shadow:var(--glass-inset)}
.hero h1{font-size:var(--text-display);margin:0 auto var(--space-md);max-width:16ch;font-weight:700}
.hero h1 .mark{color:var(--color-accent)}
.hero .lede{font-size:var(--text-lg);color:var(--color-muted);max-width:44ch;margin:0 auto var(--space-lg);font-weight:400}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-sm)}
.hero-note{margin-top:var(--space-md);font-size:var(--text-sm);color:var(--color-faint)}
.hero-note b{color:var(--color-muted);font-weight:600}

/* ---------- section frame ---------- */
section{padding-block:var(--space-xl)}
.sec-k{font-size:var(--text-sm);letter-spacing:.01em;text-transform:none;color:var(--color-accent);font-weight:600;margin-bottom:var(--space-xs);text-align:center}
.sec-h{font-size:var(--text-3xl);max-width:22ch;margin:0 auto var(--space-lg);text-align:center;font-weight:700}

/* ---------- old-way / our-way (glass split) ---------- */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.contrast>div{padding:var(--space-lg)}
.contrast .old{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow),var(--glass-inset)}
.contrast .our{background:linear-gradient(180deg,rgba(0,113,227,.10),var(--glass-bg-strong));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow),var(--glass-inset)}
.contrast h3{font-size:var(--text-2xl);margin:0 0 var(--space-md)}
.contrast ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-sm)}
.contrast li{display:flex;gap:10px;color:var(--color-muted);font-size:var(--text-base)}
.contrast li .i{flex:0 0 auto;margin-top:.1em;color:var(--color-faint)}
.contrast .old li{text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25);opacity:.72}
.contrast .our li{color:var(--color-fg);text-decoration:none;opacity:1}
.contrast .our li .i{color:var(--color-accent)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.step{padding:var(--space-lg);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow),var(--glass-inset)}
.step .num{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:#fff;line-height:1;background:var(--color-accent);
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;box-shadow:0 6px 18px rgba(0,113,227,.3)}
.step h3{font-size:var(--text-lg);margin:var(--space-md) 0 6px}
.step p{color:var(--color-muted);font-size:var(--text-base)}

/* ---------- why (uneven glass grid) ---------- */
.why{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:1fr;gap:var(--space-md)}
.feat{padding:var(--space-lg);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow),var(--glass-inset)}
.feat.lead{grid-row:span 2;background:linear-gradient(160deg,rgba(165,200,255,.32),var(--glass-bg-strong))}
.feat .ic{font-size:1.7rem;margin-bottom:var(--space-sm);display:block}
.feat h3{font-size:var(--text-lg);margin:0 0 6px}
.feat p{color:var(--color-muted);font-size:var(--text-base)}
.feat.lead h3{font-size:var(--text-2xl)}

/* ---------- faq ---------- */
.faq{display:grid;gap:var(--space-xs);max-width:760px;margin-inline:auto}
.faq details{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--glass-inset);padding:2px var(--space-md)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-md) 0;font-weight:600;font-size:var(--text-lg);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--color-accent);font-size:1.4rem;transition:transform var(--dur-fast)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--color-muted);padding:0 0 var(--space-md);max-width:64ch}

/* ---------- closing CTA + footer ---------- */
.close{text-align:center;padding-block:var(--space-2xl)}
.close h2{font-size:var(--text-display-s);margin:0 auto var(--space-lg);max-width:18ch}
.close .mono{font-weight:600}
footer{border-top:var(--rule);padding-block:var(--space-lg);margin-top:var(--space-xl)}
footer .row{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:space-between;align-items:center;color:var(--color-faint);font-size:var(--text-sm)}
footer a{color:var(--color-muted)}
.discl{color:var(--color-faint);font-size:var(--text-sm);max-width:70ch;margin-top:var(--space-sm);line-height:1.5}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---------- RTL ---------- */
[dir="rtl"] .brand{padding-inline-start:12px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .why{grid-template-columns:1fr 1fr}
  .feat.lead{grid-row:auto;grid-column:span 2}
}
@media(max-width:680px){
  .contrast{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .feat.lead{grid-column:auto}
  .hero{padding-block:var(--space-xl) var(--space-lg)}
  .brand span.full{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:opacity .15s linear;transform:none}
  .btn-primary:hover,.btn-ghost:hover{transform:none}
}

/* ---------- blog ---------- */
.blog-head{padding-block:var(--space-xl) var(--space-lg);text-align:center}
.blog-head h1{font-size:var(--text-display-s);margin:0 auto var(--space-sm)}
.blog-head p{color:var(--color-muted);max-width:60ch;margin-inline:auto}
.crumb{font-size:var(--text-sm);color:var(--color-faint);margin-bottom:var(--space-md)}
.crumb a{color:var(--color-accent)}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);padding-bottom:var(--space-2xl)}
.post{padding:var(--space-lg);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow),var(--glass-inset);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast);display:block}
.post:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.12),var(--glass-inset)}
.post .tag{font-size:var(--text-sm);color:var(--color-accent);font-weight:600}
.post h2{font-size:var(--text-2xl);margin:var(--space-xs) 0 var(--space-xs)}
.post p{color:var(--color-muted);font-size:var(--text-base)}
.article{max-width:700px;margin-inline:auto;padding-block:var(--space-lg) var(--space-2xl)}
.article h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 var(--space-sm)}
.article .meta{color:var(--color-faint);font-size:var(--text-sm);margin-bottom:var(--space-lg)}
.article h2{font-size:var(--text-2xl);margin:var(--space-xl) 0 var(--space-sm)}
.article h3{font-size:var(--text-lg);margin:var(--space-lg) 0 var(--space-xs)}
.article p,.article li{color:#4a4a4f;font-size:1.08rem;line-height:1.75}
.article ul,.article ol{padding-inline-start:1.2em;display:grid;gap:6px}
.article a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.article strong{color:var(--color-fg)}
.article .callout{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);border-inline-start:3px solid var(--color-accent);border-radius:var(--radius);
  box-shadow:var(--glass-inset);padding:var(--space-md) var(--space-lg);margin:var(--space-lg) 0}
.article .callout p{color:var(--color-fg);margin:0}
.article .end-cta{margin-top:var(--space-xl);text-align:center}
@media(max-width:680px){.posts{grid-template-columns:1fr}}

/* article link styles must NOT recolor button links (was making white button text turn blue-on-blue) */
.article a.btn{text-decoration:none}
.article a.btn-primary{color:#fff}
.article a.btn-ghost{color:var(--color-fg)}