/* M.A. Whately Suite - public pages (home, free browser tools, guides).
   Load after the kit, whose tokens it uses:
     <link href="../assets/suite-ui.css" rel="stylesheet"><link href="../assets/suite-public.css" rel="stylesheet">
   Gives every public page the same frame: content width, hero, trust line, buttons, section labels, footer.
   Pages keep only the layout that is specific to them. Spec: .design/suite-polish/DESIGN_SYSTEM.md */

:root{
  /* names older public pages still use, mapped onto the kit */
  --paper-2:var(--panel-2);--blue-bright:#1D8FDB;
  --shadow-card:var(--shadow-1);--shadow-lift:var(--shadow-2);
  --pub-max:1120px;
}

/* ---------- Frame ---------- */
.wrap{width:100%;max-width:calc(var(--pub-max) + 2 * var(--sa-gutter));margin:0 auto;padding-left:var(--sa-gutter);padding-right:var(--sa-gutter)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--blue);outline-offset:2px}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- Hero: the same height, type scale and rhythm on every public tool ---------- */
.pub-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff}
.pub-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 420px at 88% -25%,rgba(29,143,219,.22),transparent 60%),radial-gradient(680px 380px at -10% 125%,rgba(30,90,183,.26),transparent 62%)}
.pub-hero>.wrap{padding-top:clamp(36px,5.5vw,60px);padding-bottom:clamp(36px,5vw,56px)}
.pub-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.pub-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.pub-hero h1{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,4.2vw,2.9rem);line-height:1.1;letter-spacing:-.015em;max-width:22ch;text-wrap:balance}
.pub-hero h1 em{font-style:italic;color:var(--gold)}
.pub-lede{margin:14px 0 0;max-width:62ch;font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.74)}
.pub-trust{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:13px;font-weight:500;color:rgba(255,255,255,.68)}
.pub-trust svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pub-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.pub-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0;list-style:none}
.pub-chips li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);padding:5px 12px}

/* ---------- Buttons: the kit's shapes, sizes and colours (sa-btn and the older btn names) ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1.2;
  min-height:42px;padding:9px 20px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;letter-spacing:normal;text-transform:none;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease),transform .1s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.sa-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn svg{width:16px;height:16px;flex:none}
.btn .arr{transition:transform .15s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(22,64,127,.3)}
.btn-primary:hover{background:var(--blue-deep);color:#fff}
.btn-secondary,.btn-ghost,.btn-ghost-dark,.btn-line{background:var(--panel);color:var(--text);border-color:var(--line-strong)}
.btn-secondary:hover,.btn-ghost:hover,.btn-ghost-dark:hover,.btn-line:hover{border-color:var(--text);color:var(--text)}
.btn-quiet{background:transparent;color:var(--blue-deep);padding-left:12px;padding-right:12px}
.btn-quiet:hover{background:var(--blue-soft)}
.btn-danger,.btn.btn-danger{background:var(--panel);color:var(--red);border-color:#F1C3BF}
.btn-danger:hover{background:var(--red-soft)}
/* on the ink surfaces only (hero, call-to-action band): gold is the brand action */
.btn-gold,.sa-btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 8px 22px -10px rgba(255,183,0,.55)}
.btn-gold:hover,.sa-btn-gold:hover{background:#FFC533;color:var(--ink)}
.btn-ghost-light,.sa-btn-ghost,.pub-hero .btn-ghost,.pub-dark .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.btn-ghost-light:hover,.sa-btn-ghost:hover,.pub-hero .btn-ghost:hover,.pub-dark .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff}
.pub-hero .btn:focus-visible,.pub-dark .btn:focus-visible,.pub-hero .sa-btn:focus-visible,.pub-dark .sa-btn:focus-visible{box-shadow:0 0 0 3px rgba(255,183,0,.55)}
.btn-small,.btn-sm{min-height:36px;padding:6px 14px;font-size:13px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none!important}
@media (pointer:coarse){.btn{min-height:44px}.btn-small,.btn-sm{min-height:40px}}

/* Stats: two per row on a phone, as the design system asks */
@media (max-width:560px){.sa-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.sa-stat{padding:14px}.sa-stat-v{font-size:1.35rem;overflow-wrap:anywhere}}

/* ---------- Sections ---------- */
.section-title{display:flex;align-items:center;gap:12px;margin:40px 0 16px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Footer ---------- */
.pub-foot{margin-top:64px;background:var(--ink);color:rgba(255,255,255,.62);font-size:12.5px;line-height:1.6}
.pub-foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:26px;padding-bottom:26px}
.pub-foot b{color:#fff;font-weight:600}
.pub-foot a{color:rgba(255,255,255,.86);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.pub-foot a:hover{color:#fff;border-color:#fff}
.pub-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}

@media (prefers-reduced-motion:reduce){.btn,.sa-btn,.btn .arr{transition:none!important}}
@media print{.pub-hero,.pub-foot{display:none!important}}