/* ==========================================================================
   Patchline design system — dark token sheet + shared primitives.
   Same make-up as the SamuelWize site (sw-design.css), re-accented for
   Patchline: cyan patch-ring accent, gold reserved for Pro markers.
   Typeface roles: Archivo (display/UI), IBM Plex Mono (kickers, prices,
   captions, keycaps) — matching the app's own type.
   ========================================================================== */

:root{
  /* neutrals */
  --bg:#0B0C10; --bg-elev:#121317; --surface:#18191D; --surface-2:#212226;
  --ink:#F8F9FC; --ink-2:#E6EAF0; --muted:#B2BBC5; --muted-2:#8B939E;
  --hairline:rgba(230,234,240,.12); --hairline-strong:rgba(230,234,240,.24);

  /* brand accent — Patchline cyan */
  --accent:#45B8C6; --accent-hover:#6BCBD7; --accent-ink:#06272B;
  --accent-dim:rgba(69,184,198,.12);

  /* Pro gold (the app's PRO tag colour) */
  --gold:#E3B14F; --gold-hover:#EFC26B; --gold-ink:#231A07;
  --gold-dim:rgba(227,177,79,.14);

  /* fonts */
  --font-sans:'Archivo','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-code:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;

  /* type scale */
  --text-landing:96px; --lh-landing:1.0; --ls-landing:-1.92px;
  --text-6xl:72px; --text-5xl:54px; --text-4xl:42px; --text-3xl:32px;
  --text-2xl:28px; --text-xl:24px; --text-lg:22px; --text-md:20px;
  --text-base:17.5px; --lh-base:1.45; --ls-base:.18px;
  --text-sm:14.5px; --text-xs:12.5px;
  --w-heading:550;

  /* spacing */
  --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px;
  --space-xl:36px; --space-2xl:48px; --space-3xl:60px; --space-4xl:80px;
  --space-5xl:88px; --space-6xl:120px; --space-7xl:180px;

  /* radius */
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:24px; --r-pill:9999px;

  /* motion */
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
  --ease-out-quint:cubic-bezier(.23,1,.32,1);
  --dur-fast:.2s; --dur-med:.45s;

  /* layout */
  --container:1440px; --page-margin:72px; --gutter:64px; --nav-h:52px;
}
@media (max-width:1024px){
  :root{
    --text-landing:56px; --ls-landing:-1.12px;
    --text-6xl:44px; --text-5xl:38px; --text-4xl:32px; --text-3xl:28px;
    --text-2xl:24px; --text-xl:22px; --text-lg:20px; --text-md:18px;
    --text-base:15.5px;
    --page-margin:40px; --gutter:28px;
  }
}
@media (max-width:767px){
  :root{
    --text-landing:40px; --ls-landing:-.8px;
    --page-margin:16px; --gutter:16px;
    --space-6xl:80px; --space-7xl:100px;
  }
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:none; text-size-adjust:none;
  scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px);}
body{margin:0; min-height:100svh; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-weight:400; font-optical-sizing:auto;
  font-size:var(--text-base); line-height:var(--lh-base); letter-spacing:var(--ls-base);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;}
h1,h2,h3,h4{margin:0; font-weight:var(--w-heading); font-optical-sizing:auto; line-height:1.08; letter-spacing:-.02em;}
p{margin:0}
a{color:inherit; text-decoration:none}
img,video{max-width:100%; display:block}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm);}
::selection{background:var(--accent); color:var(--accent-ink);}

.container{max-width:calc(var(--container) + var(--page-margin)*2); margin:0 auto; padding:0 var(--page-margin);}

/* ---- shared type roles ---- */
.kicker{font-family:var(--font-code); font-size:var(--text-xs); font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);}
.lead{font-size:var(--text-md); line-height:1.5; color:var(--muted); letter-spacing:0;}
.mono{font-family:var(--font-code); letter-spacing:0;}
.small{font-size:var(--text-xs); color:var(--muted-2);}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-weight:500; font-size:var(--text-sm); letter-spacing:.1px;
  padding:11px 22px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out-quint),
             border-color var(--dur-fast) var(--ease-out-quint),
             color var(--dur-fast) var(--ease-out-quint),
             transform var(--dur-fast) var(--ease-out-quint);}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-ghost{background:transparent; color:var(--ink-2); border-color:var(--hairline);}
.btn-ghost:hover{border-color:var(--hairline-strong); color:var(--ink);}
.btn-mini{padding:8px 16px; font-size:13px;}
.btn-gold{background:var(--gold); color:var(--gold-ink);}
.btn-gold:hover{background:var(--gold-hover);}

.arrow-link{display:inline-flex; align-items:center; gap:2px; font-weight:500;
  font-size:var(--text-sm); color:var(--muted); transition:color var(--dur-fast) var(--ease-out-quint);}
.arrow-link::after{content:"\203A"; font-size:1.3em; line-height:1; margin-left:4px;
  transition:transform var(--dur-med) var(--ease-out-expo);}
.arrow-link:hover{color:var(--ink);}
.arrow-link:hover::after{transform:translateX(50%);}

/* ---- nav ---- */
.nav{position:sticky; top:0; z-index:40; height:var(--nav-h);
  background:rgba(11,12,16,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);}
.nav-inner{height:var(--nav-h); display:flex; align-items:center; gap:var(--space-lg);}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:600;
  font-size:var(--text-sm); color:var(--ink); letter-spacing:.14em;}
.brand-logo{width:26px; height:26px; flex:0 0 auto;}
.brand .wm-b{color:var(--gold);}
.nav-links{margin-left:auto; display:flex; gap:var(--space-lg); font-size:var(--text-sm);}
.nav-links a{color:var(--muted); transition:color var(--dur-fast) var(--ease-out-quint);}
.nav-links a:hover{color:var(--ink);}
.nav-end{display:flex; align-items:center; gap:var(--space-md); margin-left:var(--space-md);}

/* ---- media panels (screenshots) ---- */
.media{position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--hairline);}
.shot{width:100%; height:auto;}

.chip{position:absolute; left:var(--space-md); top:var(--space-md); z-index:2;
  font-family:var(--font-code); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); background:rgba(18,19,23,.55); border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  padding:6px 10px; border-radius:var(--r-pill);}

/* ---- badges + keycaps + PRO tag ---- */
.badge{position:absolute; left:10px; top:10px; z-index:2; font-family:var(--font-code);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:6px 9px; border-radius:var(--r-md);}
.badge-free{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--hairline);}
.badge-pro{background:var(--gold); color:var(--gold-ink);}

.protag{display:inline-block; vertical-align:2px; font-family:var(--font-code); font-size:10px;
  font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px;
  border-radius:var(--r-pill); background:var(--gold); color:var(--gold-ink); margin-left:8px;}

kbd.key{font-family:var(--font-code); font-size:.82em; color:var(--accent);
  background:var(--surface); border:1px solid var(--hairline-strong);
  border-radius:var(--r-sm); padding:4px 7px; margin:0 1px;
  box-shadow:0 2px 0 rgba(0,0,0,.55);}

/* ---- cards ---- */
.card{display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  transition:transform var(--dur-med) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-out-quint);}
.card:hover{transform:translateY(-2px); border-color:var(--hairline-strong);}
.card .media{border:0; border-radius:0; border-bottom:1px solid var(--hairline);}
.card-body{padding:var(--space-lg); display:flex; flex-direction:column; gap:10px; flex:1;}
.card-body h3{font-size:var(--text-lg); line-height:1.15;}
.card-body p{color:var(--muted); font-size:var(--text-sm); line-height:1.5; flex:1;}

/* ---- section scaffolding ---- */
.section{padding:var(--space-6xl) 0; position:relative;}
.section--elev{background:var(--bg-elev); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
.sec-head{max-width:720px; margin:0 auto var(--space-3xl); text-align:center;
  display:flex; flex-direction:column; gap:var(--space-md); align-items:center;}
.sec-head h2{font-size:var(--text-4xl); letter-spacing:-.022em;}
.sec-head p{color:var(--muted); font-size:var(--text-md); line-height:1.5; max-width:56ch;}

/* ---- FAQ list ---- */
.qa{border-bottom:1px solid var(--hairline);}
.qa summary{list-style:none; cursor:pointer; padding:var(--space-lg) 0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  font-weight:500; font-size:var(--text-base); color:var(--ink-2);
  transition:color var(--dur-fast) var(--ease-out-quint);}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"+"; font-family:var(--font-code); font-size:20px; font-weight:400;
  color:var(--muted-2); flex:0 0 auto; transition:transform var(--dur-med) var(--ease-out-expo);}
.qa[open] summary::after{content:"\2212"; color:var(--accent);}
.qa summary:hover{color:var(--ink);}
.qa .ans{padding:0 0 var(--space-lg); color:var(--muted); font-size:var(--text-sm); line-height:1.6; max-width:64ch;}
.qa .ans a{color:var(--ink-2); text-decoration:underline; text-underline-offset:3px;}
.qa .ans a:hover{color:var(--accent);}

/* ---- footer ---- */
.foot{border-top:1px solid var(--hairline); background:var(--bg-elev); position:relative; z-index:1;}
.foot-top{display:flex; flex-wrap:wrap; gap:var(--space-2xl) var(--space-3xl);
  align-items:flex-start; padding:var(--space-4xl) 0 var(--space-2xl);}
.foot-brand{max-width:300px; display:flex; flex-direction:column; gap:var(--space-md);}
.foot-tag{color:var(--muted-2); font-size:var(--text-sm); line-height:1.5;}
.foot-cols{margin-left:auto; display:grid; grid-template-columns:repeat(3,minmax(140px,auto)); gap:var(--space-2xl);}
.foot-col h4{font-family:var(--font-code); font-size:var(--text-xs); font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 var(--space-md);}
.foot-col a{display:block; color:var(--muted); font-size:var(--text-sm); margin-bottom:10px;
  transition:color var(--dur-fast) var(--ease-out-quint);}
.foot-col a:hover{color:var(--ink);}
.foot-legal{border-top:1px solid var(--hairline); padding:var(--space-lg) 0 var(--space-sm);
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:center;
  text-align:center; color:var(--muted-2); font-size:var(--text-xs);}
.foot-legal a{color:var(--muted);}
.foot-legal a:hover{color:var(--ink); text-decoration:underline;}
.foot-pay{text-align:center; color:var(--muted-2); font-size:var(--text-xs); padding:0 0 var(--space-lg);}

/* ---- responsive shared bits ---- */
@media (max-width:820px){
  .nav-links{display:none;}
  .foot-cols{margin-left:0; width:100%; grid-template-columns:repeat(2,1fr); gap:var(--space-lg);}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}