/* Product site kit. Shared by every product; the look comes from /skin.css (generated from the sales
   record). No colour literals and no font names in this file: only --sk-* tokens.
   Shape tokens a skin's kit (skin.kit) may set; unset, the kit's default look holds:
   --sk-round (corner multiplier), --sk-radius-btn, --sk-shadow-bar, --sk-shadow-card, --sk-mark-ring,
   --sk-btn-on-dark / --sk-btn-ink-on-dark (button fill and text on ink), --sk-tick, --sk-font-label,
   --sk-compare-us-font / --sk-compare-us-weight (our column in the comparison). */
:root{
  --paper:var(--sk-paper); --ink:var(--sk-ink);
  --bg:var(--paper); --fg:var(--ink);
  --accent:var(--sk-accent); --on-accent:var(--sk-paper);
  --ease-out:cubic-bezier(.625,.05,0,1); --ease-inout:cubic-bezier(.76,0,.24,1);
  --motion:1;
  --round:var(--sk-round, 1);
  --t-label:clamp(12px, .8rem, 13px);
  --t-body:clamp(17px, 1.05rem, 19px);
  --t-lead:clamp(19px, 1rem + .6vw, 24px);
  --t-h3:clamp(20px, 1rem + .5vw, 26px);
  --t-h2:clamp(30px, 1.2rem + 2.4vw, 54px);
  --t-h1:clamp(42px, 1.4rem + 5vw, 96px);
  --t-big:clamp(22px, 1rem + 1.2vw, 34px);
  --margin:clamp(16px, 4vw, 56px);
  --section:clamp(80px, 10vw, 168px);
  --max:1320px;
}
@media (prefers-reduced-motion:reduce){:root{--motion:0}}
.alt{--bg:color-mix(in srgb, var(--ink) 4%, var(--paper))}
.dark,.surface,.foot{--bg:var(--sk-panel);--fg:var(--sk-panel-ink);--accent:var(--sk-accent-on-dark);--on-accent:var(--sk-panel);
  --btn-bg:var(--sk-btn-on-dark, var(--accent));--btn-fg:var(--sk-btn-ink-on-dark, var(--on-accent))}
/* derived tones are recomputed wherever the ground changes (custom properties inherit computed values) */
:root,.alt,.dark,.surface,.foot{
  --muted:color-mix(in srgb, var(--fg) 72%, var(--bg));
  --line:color-mix(in srgb, var(--fg) 16%, var(--bg));
  --line-strong:color-mix(in srgb, var(--fg) 40%, var(--bg));
  --fill:color-mix(in srgb, var(--fg) 4%, var(--bg));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sk-font-text);font-size:var(--t-body);line-height:1.55;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--sk-font-display);font-weight:inherit;margin:0;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:.98;letter-spacing:-.035em;max-width:13ch}
h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.025em;max-width:20ch}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
::selection{background:var(--accent);color:var(--on-accent)}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:30;background:var(--ink);color:var(--paper);padding:12px 16px}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--margin)}
.narrow{max-width:820px}
.band{background:var(--bg);color:var(--fg);padding:var(--section) 0}
.band:not(.alt):not(.dark) + .band:not(.alt):not(.dark){padding-top:0}
.label{font-family:var(--sk-font-label, var(--sk-font-text));font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.small{font-size:16px;color:var(--muted)}
.lead{font-size:var(--t-lead);line-height:1.4;max-width:46ch;color:var(--fg)}

/* chrome */
.bar{position:fixed;top:12px;left:max(12px, calc((100% - var(--max)) / 2 + var(--margin) - 16px));right:max(12px, calc((100% - var(--max)) / 2 + var(--margin) - 16px));
  z-index:20;height:60px;display:flex;align-items:center;gap:24px;padding:0 8px 0 16px;border-radius:calc(12px * var(--round));
  background:color-mix(in srgb, var(--paper) 84%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--sk-shadow-bar, 0 12px 32px -20px color-mix(in srgb, var(--ink) 28%, transparent))}
.bar:not(:has(.btn)){padding-right:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--sk-font-display);font-size:19px;min-height:44px;margin-right:auto}
.links{display:flex;gap:28px}
.links a{text-decoration:none;font-size:16px;min-height:44px;display:flex;align-items:center;position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform calc(.6s*var(--motion)) var(--ease-inout)}
@media (hover:hover) and (pointer:fine){.links a:hover::after{transform:scaleX(1);transform-origin:left}}
main{padding-top:84px;min-height:calc(100svh - 120px)}
.narrow > * + *{margin-top:20px}

/* buttons: rectangle, fill wipe (UI-02, UI-04) */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--sk-radius-btn, 6px);
  background:var(--btn-bg, var(--accent));color:var(--btn-fg, var(--on-accent));text-decoration:none;font-size:17px;font-weight:400;letter-spacing:-.005em;white-space:nowrap;
  transition:transform calc(.1s*var(--motion)) var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);transform:translateY(101%);transition:transform calc(.3s*var(--motion)) var(--ease-out)}
.btn i{font-style:normal;transition:transform calc(.3s*var(--motion)) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover::before{transform:none}.btn:hover{color:var(--bg)}.btn:hover i{transform:translateX(4px)}}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:44px;padding:0 16px;font-size:16px}
.btn-lg{min-height:56px;padding:0 28px;font-size:18px}
.text-link{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:var(--line-strong)}
.text-link:hover{text-decoration-color:currentColor}

/* double bezel (shell + core) */
.shell{padding:6px;border-radius:calc(22px * var(--round));background:var(--fill);border:1px solid var(--line)}
.core{border-radius:calc(16px * var(--round));background:var(--paper);padding:clamp(24px,3vw,40px);box-shadow:var(--sk-shadow-card, inset 0 1px 0 color-mix(in srgb, var(--paper) 60%, transparent), 0 24px 60px -32px color-mix(in srgb, var(--ink) 30%, transparent))}
.amt{font-family:var(--sk-font-display);font-size:clamp(40px, 1.4rem + 3vw, 64px);line-height:1;letter-spacing:-.03em;margin:4px 0 16px;font-variant-numeric:tabular-nums}
.amt span{font-family:var(--sk-font-text);font-size:18px;letter-spacing:0;color:var(--muted)}
.core p + p{margin-top:8px}

/* hero */
.hero{min-height:min(100svh, 980px);display:flex;align-items:center;padding:clamp(56px,8vw,120px) 0}
.hero{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center;width:100%}
.price-line{margin-top:28px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;color:var(--muted);font-size:16px}
.price-line strong{font-family:var(--sk-font-display);font-weight:inherit;font-size:22px;color:var(--fg);letter-spacing:-.01em}
.hero-visual.surface{margin:0;--bg:var(--sk-panel);--fg:var(--sk-panel-ink);--accent:var(--sk-accent-on-dark)}
.hero-visual .ruler{position:relative;height:36px;border-bottom:1px solid var(--line)}
.hero-visual .playhead{position:absolute;top:0;bottom:-1px;left:calc(var(--at) * 100%);width:2px;background:var(--accent)}
.hero-visual .playhead::after{content:"";position:absolute;bottom:-5px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.hero-visual td:last-child{text-align:right;color:var(--muted)}
.hero-visual tr.on td:last-child{color:var(--fg)}
.hero h1{margin-bottom:28px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:36px}

/* why: one pain, one fix */
.pain-fix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,96px);margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.big{font-size:var(--t-big);line-height:1.3;letter-spacing:-.01em;max-width:28ch}
.pain-fix > div:first-child .big{color:var(--muted)}
.fix .label{color:var(--accent);filter:none}

/* steps */
.steps{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 clamp(24px,3vw,48px)}
.steps li{border-top:1px solid var(--line-strong);padding:24px 0 8px}
.idx{display:block;font-size:var(--t-label);letter-spacing:.1em;color:var(--muted);margin-bottom:28px;font-variant-numeric:tabular-nums}
.steps h3{margin-bottom:10px}
.steps p{color:var(--muted);max-width:34ch}

/* see: the live surface */
.surface{margin:56px 0 0;border-radius:calc(14px * var(--round));background:var(--bg);color:var(--fg);border:1px solid var(--line);overflow:hidden;position:relative}
.surface table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.surface th,.surface td{text-align:left;padding:16px 24px;border-bottom:1px solid var(--line);font-weight:400;font-size:17px}
.surface thead th{font-family:var(--sk-font-label, var(--sk-font-text));font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-block:12px}
.surface tbody th{width:7rem;color:var(--muted)}
.surface tr.on{background:color-mix(in srgb, var(--accent) 14%, var(--bg))}
.surface tr.on th,.surface tr.on td{color:var(--fg)}
.surface tr.on th{box-shadow:inset 3px 0 0 var(--accent)}
.surface figcaption{padding:14px 24px;font-size:16px;color:var(--muted)}
.proof{margin:32px 0 0}.proof img{filter:var(--sk-img-filter);border-radius:calc(14px * var(--round))}.proof figcaption{margin-top:12px;color:var(--muted);font-size:16px}

/* compare */
.table-wrap{margin-top:48px}
.compare{width:100%;border-collapse:collapse;font-size:17px}
.compare th,.compare td{text-align:left;vertical-align:top;padding:16px 20px 16px 0;border-bottom:1px solid var(--line);font-weight:400}
.compare thead th{font-family:var(--sk-font-display);font-size:18px}
.compare tbody th{color:var(--muted);width:11rem}
.compare td:nth-child(2),.compare thead th:nth-child(2){color:var(--fg);font-family:var(--sk-compare-us-font, var(--sk-font-display));font-weight:var(--sk-compare-us-weight, 400)}
.compare td:nth-child(2){box-shadow:inset 2px 0 0 var(--accent);padding-left:16px}
.compare thead th:nth-child(2){padding-left:16px}

/* included / not for */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,96px)}
.cols h2{font-size:clamp(28px,1rem + 1.6vw,40px);margin-bottom:28px}
.ticks,.dashes{list-style:none;margin:0;padding:0}
.ticks li,.dashes li{padding:14px 0 14px 32px;border-top:1px solid var(--line);position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:24px;width:12px;height:6px;border-left:1.5px solid var(--sk-tick, var(--accent));border-bottom:1.5px solid var(--sk-tick, var(--accent));transform:rotate(-45deg)}
.dashes li::before{content:"";position:absolute;left:2px;top:27px;width:12px;height:1.5px;background:var(--muted)}
.dashes li{color:var(--muted)}

/* offer: what you get + who it isn't for, beside the price */
.offer-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,7vw,120px);align-items:start}
.offer h2{font-size:clamp(28px,1rem + 1.6vw,40px);margin-bottom:28px}
.not-for{margin-top:56px}
#start{position:sticky;top:96px}
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.plan .btn{margin-top:24px}
.after{margin-top:20px}

/* faq */
.faq-cols{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:22px 0;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--sk-font-text);font-size:var(--t-h3);font-weight:inherit}
.plus{flex:none;width:16px;height:16px;position:relative;transition:transform calc(.3s*var(--motion)) var(--ease-out)}
.plus::before,.plus::after{content:"";position:absolute;background:currentColor;left:0;top:7.25px;width:16px;height:1.5px}
.plus::after{transform:rotate(90deg)}
.faq details[open] .plus{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--muted);max-width:60ch}

/* ask: the last screen is the ask */
.ask{min-height:min(80svh,760px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px}
.ask h2{font-size:var(--t-h1);line-height:.98;letter-spacing:-.035em;max-width:14ch}

/* buy page */
.buy-list{list-style:none;padding:0;margin:40px 0 24px;display:grid;gap:12px;justify-items:start}
.buy-list .btn{white-space:normal;text-align:left;max-width:100%;padding-top:12px;padding-bottom:12px}

/* footer */
.foot{background:var(--sk-panel);color:var(--sk-panel-ink);--fg:var(--sk-panel-ink);--bg:var(--sk-panel);padding:40px 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid color-mix(in srgb, var(--sk-panel-ink) 14%, var(--sk-panel))}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px}
.foot-name{display:flex;align-items:center;gap:10px;font-family:var(--sk-font-display)}
.foot-mark{border-radius:calc(5px * var(--round));box-shadow:var(--sk-mark-ring, 0 0 0 1px color-mix(in srgb, var(--sk-panel-ink) 55%, var(--sk-panel)))}
.by{font-family:var(--sk-font-text);font-size:16px;color:color-mix(in srgb, var(--sk-panel-ink) 72%, var(--sk-panel))}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.foot a{min-height:44px;display:inline-flex;align-items:center;font-size:16px}

/* sticky mobile CTA */
.sticky-cta{display:none}
@media (max-width:767px){
  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);font-family:var(--sk-font-display);font-size:18px;
    transition:transform calc(.4s*var(--motion)) var(--ease-out)}
  html.js .sticky-cta:not(.show){transform:translateY(110%)}
  html.js .sticky-cta:focus-within{transform:none}
  .sticky-cta .btn{min-height:48px;padding:0 18px}
  body:has(.sticky-cta) .foot{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .ask{min-height:auto}
}

/* reveals: rest state is finished (A11Y-03) */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal:not(.in){opacity:0;transform:translateY(24px)}
  html.js .reveal{transition:opacity .4s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
  @view-transition{navigation:auto}
}

/* signatures, one per skin (data-sig comes from the record) */
[data-sig="bar"] .hero h1::before,[data-sig="rise"] .hero h1::before{content:"";display:block;width:3px;height:56px;background:var(--accent);margin-bottom:28px;transform-origin:bottom}
@media (prefers-reduced-motion:no-preference){[data-sig="rise"] .hero h1::before{animation:rise 1.4s var(--ease-out) both}}
@keyframes rise{from{transform:scaleY(0)}}
[data-sig="ticks"]{--ruler:
  repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px) left bottom/100% 7px no-repeat,
  repeating-linear-gradient(90deg, var(--fg) 0 1px, transparent 1px 60px) left bottom/100% 15px no-repeat}
[data-sig="ticks"] .band > .wrap::before{content:"";display:block;grid-column:1/-1;align-self:start;height:15px;margin-bottom:48px;background:var(--ruler);
  -webkit-mask:linear-gradient(90deg,black 0 55%,transparent);mask:linear-gradient(90deg,black 0 55%,transparent)}
[data-sig="ticks"] .band:not(.alt):not(.dark) + .band:not(.alt):not(.dark) > .wrap::before{display:none}
[data-sig="ticks"] .hero > .wrap::before{display:none}
[data-sig="ticks"] .hero::after{content:"";position:absolute;left:var(--margin);right:var(--margin);bottom:0;height:15px;max-width:calc(var(--max) - 2 * var(--margin));margin:0 auto;background:var(--ruler)}
[data-sig="ticks"] .hero-visual .ruler{background:var(--ruler);background-position:24px bottom}
[data-sig="ticks"] .steps li{border-top:0;padding-top:0}
[data-sig="ticks"] .steps .idx{padding-top:20px;background:repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px) left top/100% 9px no-repeat,linear-gradient(var(--accent),var(--accent)) left top/1px 15px no-repeat}
[data-sig="ticks"] .hero-copy .label::before{content:"";display:inline-block;width:40px;height:9px;margin-right:12px;vertical-align:-1px;background:repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 8px)}
[data-sig="crosshair"] .shell,[data-sig="crosshair"] .surface{overflow:visible}
[data-sig="crosshair"] .shell::before,[data-sig="crosshair"] .surface::before{content:"";position:absolute;inset:-8px;pointer-events:none;
  background:
    linear-gradient(var(--line-strong),var(--line-strong)) left top/12px 1px,linear-gradient(var(--line-strong),var(--line-strong)) left top/1px 12px,
    linear-gradient(var(--line-strong),var(--line-strong)) right bottom/12px 1px,linear-gradient(var(--line-strong),var(--line-strong)) right bottom/1px 12px;
  background-repeat:no-repeat}
[data-sig="crosshair"] .shell{position:relative}

/* collapse */
@media (max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual.surface{max-width:560px}
  .faq-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .links{display:none}
  .bar{gap:12px}
  .steps li{margin-bottom:24px}
  .hero{min-height:auto}
  .pain-fix,.cols,.offer-grid{grid-template-columns:minmax(0,1fr)}
  #start{position:static}
  .hero-visual.surface{display:none}
  .hero::after{display:none}
  /* compare: one block per row, our line first with the accent rule */
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .compare tr{padding:20px 0;border-bottom:1px solid var(--line)}
  .compare tr:first-child{border-top:1px solid var(--line)}
  .compare tbody th{color:var(--fg);font-family:var(--sk-font-display);font-size:19px;padding:0 0 10px;border:0}
  .compare td{border:0;padding:4px 0 4px 14px;color:var(--muted)}
  .compare td::before{content:attr(data-col) ": ";color:var(--fg)}
  .compare td:nth-child(2){box-shadow:inset 2px 0 0 var(--accent);padding-left:14px;color:var(--fg)}
  html.sticky-on .bar .btn{visibility:hidden;opacity:0}
  .surface th,.surface td{padding:14px 16px;font-size:16px}
  .surface tbody th{width:4.5rem}
  .surface thead th:last-child,.surface td:last-child{text-align:right}
  .btn-lg{width:100%;justify-content:center}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .text-link{justify-content:center}
}
@media (max-width:380px){
  .bar .btn-sm{padding:0 12px}
}