/* CutPuff shared site chrome: tokens, reset, header, footer, buttons, prose.
   Page-specific styles stay inline in the page that needs them. */

:root{
  --blue:#4160DF;--blueDeep:#26357F;--blueMid:#3352C7;--soft:#C3D0F7;--wash:#EDF2FE;
  --paper:#F4F7FC;--ink:#0F1620;--ink2:#4C5566;--ink3:#8A93A5;--line:#E2E8F4;
  --gold:#E2C063;--green:#43A45D;
  --maxw:1120px;--maxw-prose:720px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font-family:Poppins,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--blueDeep)}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
h1,h2,h3{letter-spacing:-.02em;line-height:1.08;font-weight:700;text-wrap:pretty}
h1{font-size:clamp(38px,5.4vw,62px)}
h2{font-size:clamp(30px,3.9vw,45px)}
h3{font-size:19px;letter-spacing:-.01em;line-height:1.3}
p{text-wrap:pretty}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.lede{font-size:clamp(16.5px,1.35vw,19px);line-height:1.62;color:var(--ink2)}

/* ── nav ── */
header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .25s ease,box-shadow .25s ease,backdrop-filter .25s}
header.stuck{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;gap:32px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.brand:hover{color:var(--ink)}
.mark{width:30px;height:30px;border-radius:9px;background:var(--blue);display:grid;place-items:center;flex:0 0 auto}
.mark i{display:block;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(255,255,255,.28),0 0 0 9px rgba(255,255,255,.16)}
.navlinks{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500}
.navlinks a{color:var(--ink2)}.navlinks a:hover{color:var(--blue)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-weight:600;transition:transform .14s ease,background .18s ease,box-shadow .18s ease}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-lg{padding:16px 26px;font-size:16px}
.btn-p{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(65,96,223,.28)}
.btn-p:hover{background:var(--blueMid);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(65,96,223,.34)}
.btn-d{background:var(--ink);color:#fff}
.btn-d:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.btn-g{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-g:hover{color:var(--blue);box-shadow:inset 0 0 0 1px var(--soft)}

/* ── footer ── */
footer{background:var(--ink);color:#fff;padding:56px 0 44px}
.f-top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
footer .brand{color:#fff}footer .brand:hover{color:#fff}
.f-tag{font-size:13.5px;color:#8A93A5;margin-top:12px;max-width:270px;line-height:1.6}
.f-links{display:flex;gap:48px}
.f-col{display:flex;flex-direction:column;gap:11px}
.f-col strong{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6F7889;margin-bottom:3px}
.f-col a{font-size:14.5px;color:#D5DAE4;font-weight:500}
.f-col a:hover{color:var(--soft)}
.f-bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding-top:26px;font-size:12.5px;color:#6F7889}
.f-bot a{color:#8A93A5}.f-bot a:hover{color:var(--soft)}

/* ── reveal ── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ── prose (privacy / terms / contact) ──
   Narrow measure on purpose: --maxw is for the marketing layout, not legal copy.
   Top padding clears the fixed header. */
.prose{max-width:var(--maxw-prose);margin:0 auto;padding:130px 0 84px;font-size:17px;line-height:1.65;color:var(--ink2)}
.prose h1{font-size:clamp(30px,3.4vw,40px);color:var(--ink);margin-bottom:6px}
.prose h2{font-size:21px;line-height:1.25;color:var(--ink);margin-top:38px;margin-bottom:8px}
.prose h3{font-size:17px;color:var(--ink);margin-top:24px;margin-bottom:4px}
.prose p{margin:14px 0}
.prose .updated{color:var(--ink3);font-size:14.5px;margin-top:0}
.prose .intro{color:var(--ink3);font-size:15.5px;margin-top:0}
.prose ul{padding-left:1.25rem;margin:14px 0}
.prose li{margin:.35rem 0}
.prose code{background:var(--wash);color:var(--blueDeep);padding:.1em .35em;border-radius:4px;font-size:.92em}
.prose iframe{width:100%;border:0;margin-top:1.5rem}

@media(max-width:920px){
  .navlinks{display:none}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .nav{height:64px}
  .btn-lg{padding:15px 22px;font-size:15.5px}
  .f-top{flex-direction:column}
  .f-links{gap:32px}
  .prose{padding:104px 0 64px}
}