/* =================================================================
   EffortFreeWeb.com — shared stylesheet (v3: blue-dominant)

   PALETTE: edit the four lines under :root to change the whole site.
   Values sampled from the EffortFreeWeb logo file.

   SYSTEM: the page is BRAND blue almost everywhere. Big display
   statements sit directly on it in bold white type. Anything that's
   actually body text to read — lists, tables, FAQ, legal copy — sits
   inside a plain white ".panel", rounded at the same 18px radius as
   the logo's browser-frame device, so panels read as windows on the
   blue canvas rather than an unrelated inconsistency. The dotted
   browser-bar device itself is reserved for the one thing it means:
   an actual website preview. It does not appear on plain panels.
   ================================================================= */

:root{
  --brand:   #272177;   /* the dominant field color, most of the page */
  --signal:  #B23A1E;   /* the primary action and nothing else */
  --surface: #FBFAF7;   /* panel background, cream */
  --ink:     #17143D;   /* text inside panels — dark brand, not black */

  --ink-60:  #5B5884;
  --onbrand:     #FFFFFF;                 /* headlines on blue */
  --onbrand-85:  rgba(255,255,255,.88);   /* body copy on blue */
  --onbrand-60:  rgba(255,255,255,.62);   /* quiet text on blue */
  --rule-onbrand: rgba(255,255,255,.22);  /* hairlines on blue */

  --rule:        rgba(23,20,61,.16);      /* hairlines inside panels */
  --rule-strong: rgba(23,20,61,.32);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--brand);
  color:var(--onbrand-85);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:3px}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:0.94;
  margin:0;
  color:var(--onbrand);
}

/* ---------- masthead — transparent, sits on the blue body ---------- */
.masthead{border-bottom:1px solid var(--rule-onbrand)}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  min-height:88px;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;text-decoration:none;gap:10px}
.brand img{height:58px;width:auto}
.brandtype{
  font-family:var(--display);font-weight:900;font-size:30px;line-height:1;
  letter-spacing:-0.02em;color:var(--onbrand);
}
footer .brandtype{display:block;margin-bottom:22px;font-size:28px}
.nav{display:flex;gap:26px;align-items:center;font-size:15px}
.nav a{text-decoration:none;color:var(--onbrand-60);padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--onbrand);border-bottom-color:var(--onbrand)}

/* ---------- sections ---------- */
section{padding:64px 0}
.pad-lg{padding:128px 0}

/* ---------- hero ---------- */
.hero{padding:96px 0 88px}
.hero h1{font-size:clamp(48px,11vw,104px);max-width:14ch}
.hero p{
  margin:32px 0 0;font-size:clamp(18px,2.4vw,23px);line-height:1.45;
  max-width:30em;color:var(--onbrand-85);
}

.pagehead{padding:72px 0 8px}
.pagehead h1{font-size:clamp(40px,8vw,76px);max-width:16ch}
.pagehead p{margin:24px 0 0;font-size:19px;max-width:34em;color:var(--onbrand-85)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--signal);color:#fff;
  text-decoration:none;font-weight:600;font-size:19px;
  padding:19px 32px;min-height:44px;border:0;transition:background .15s ease;
}
.btn:hover{background:#8F2E17}
.btn-quiet{
  display:inline-block;background:transparent;color:var(--onbrand);
  text-decoration:none;font-weight:600;font-size:17px;
  padding:17px 28px;min-height:44px;border:1px solid var(--rule-onbrand);
}
.btn-quiet:hover{border-color:var(--onbrand)}
/* quiet button variant for use INSIDE a white panel */
.panel .btn-quiet{color:var(--brand);border-color:var(--rule-strong)}
.panel .btn-quiet:hover{border-color:var(--ink)}
.linky{color:var(--onbrand);text-decoration:underline;text-underline-offset:3px}
.panel .linky{color:var(--brand)}

/* ---------- PANEL — the reading surface ---------- */
.panel{
  background:var(--surface);color:var(--ink);
  border-radius:18px;padding:44px 40px;
}
.panel h2,.panel h3{color:var(--ink)}
.panel a.linky{color:var(--brand)}

/* ---------- example site frame (the ONE dotted browser device) ---------- */
.frame{border:2px solid var(--onbrand);border-radius:18px;background:#fff;max-width:880px;overflow:hidden}
.frame-bar{
  display:flex;align-items:center;gap:14px;padding:11px 18px;
  border-bottom:2px solid var(--onbrand);background:var(--surface);
  font-size:13px;color:var(--ink-60);
}
.dots{display:flex;gap:7px;flex:none}
.dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none}
.caption{margin:16px 0 0;font-size:14px;color:var(--onbrand-60);max-width:52em}
.caption b{font-weight:600;color:var(--onbrand-85)}

.ex{--ex-brand:#14343F;--ex-signal:#C43D12;--ex-surface:#F2F1ED;--ex-ink:#0E2328}
.ex-nav{
  background:var(--ex-surface);color:var(--ex-ink);padding:14px 24px;
  display:flex;justify-content:space-between;align-items:center;font-size:13px;
}
.ex-nav .n{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-0.02em}
.ex-hero{background:var(--ex-brand);color:var(--ex-surface);padding:44px 24px 48px}
.ex-hero h3{
  font-family:var(--display);font-weight:900;line-height:0.9;letter-spacing:-0.03em;
  margin:0;font-size:clamp(34px,7vw,62px);color:var(--ex-surface);
}
.ex-hero .sub{margin:14px 0 0;font-size:15px;opacity:.75;line-height:1.45}
.ex-call{background:var(--ex-signal);color:#fff;padding:26px 24px;text-align:center}
.ex-call .num{
  font-family:var(--display);font-weight:900;letter-spacing:-0.02em;
  font-size:clamp(30px,6vw,46px);line-height:1;
}
.ex-call .lab{font-size:13px;opacity:.85;margin-top:6px}
.ex-proof{
  background:var(--ex-surface);color:var(--ex-ink);padding:28px 24px;
  display:flex;gap:28px;flex-wrap:wrap;
}
.ex-proof div{flex:1;min-width:92px}
.ex-proof .fig{
  font-family:var(--display);font-weight:900;font-size:clamp(34px,7vw,54px);
  line-height:0.9;letter-spacing:-0.02em;
}
.ex-proof .lab{font-size:12px;color:#4a6068;margin-top:6px}

/* ---------- steps (inside a panel) ---------- */
.steps{border-top:1px solid var(--rule)}
.step{display:flex;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--rule)}
.step:last-child{border-bottom:0;padding-bottom:4px}
.step .no{
  font-family:var(--display);font-weight:900;font-size:40px;line-height:1;
  color:var(--brand);flex:none;width:52px;letter-spacing:-0.02em;
}
.step p{margin:0;font-size:clamp(19px,2.4vw,24px);line-height:1.35;color:var(--ink)}

/* ---------- big statements, directly on blue ---------- */
.statement{
  font-family:var(--display);font-weight:900;letter-spacing:-0.03em;line-height:0.98;
  font-size:clamp(34px,6.4vw,68px);max-width:17ch;margin:0;color:var(--onbrand);
}
.domain-line{
  font-family:var(--display);font-weight:900;letter-spacing:-0.03em;line-height:1;
  font-size:clamp(30px,5.2vw,54px);max-width:18ch;margin:0;color:var(--onbrand);
}

/* ---------- ruled lists (inside a panel) ---------- */
.ruled{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule);max-width:44em}
.ruled li{padding:22px 0;border-bottom:1px solid var(--rule);font-size:clamp(17px,2vw,20px);line-height:1.45}
.ruled li:last-child{border-bottom:0;padding-bottom:4px}

/* ---------- why (inside a panel) ---------- */
.why p{font-size:clamp(19px,2.6vw,26px);line-height:1.45;margin:0;max-width:24em;color:var(--ink)}

/* ---------- single offer (inside a panel) ---------- */
.offer-price{font-family:var(--display);font-weight:900;font-size:clamp(72px,14vw,128px);line-height:0.9;letter-spacing:-0.03em;color:var(--brand);margin:0}
.offer-promise{margin:18px 0 0;font-size:clamp(19px,2.6vw,25px);line-height:1.4;max-width:26em;color:var(--ink)}
.included-head{margin:40px 0 0;font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-0.02em;color:var(--ink)}
.included{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--rule);max-width:44em}
.included li{padding:16px 0 16px 30px;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.5;color:var(--ink);position:relative}
.included li::before{content:"";position:absolute;left:4px;top:24px;width:12px;height:6px;border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg)}
.included li.key{font-weight:600}
.paybox{margin:36px 0 0;border:2px solid var(--brand);border-radius:14px;padding:26px 24px;max-width:44em}
.paybox .full{margin:0;font-size:19px;line-height:1.45;color:var(--ink)}
.paybox .full b{font-weight:600}
.paybox .btn{margin-top:22px}
.paybox .split{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule);font-size:16px;line-height:1.5;color:var(--ink-60)}
.askline{margin:28px 0 0;border-left:3px solid var(--brand);padding:4px 0 4px 20px;max-width:44em;font-size:17px;line-height:1.5;color:var(--ink)}
.footnote{margin:28px 0 0;font-size:15px;color:var(--ink-60);max-width:48em}
.terms-lines{margin:40px 0 0;border-top:1px solid var(--rule);max-width:48em}
.terms-lines p{padding:18px 0;border-bottom:1px solid var(--rule);margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.terms-lines p:last-child{border-bottom:0}

/* ---------- FAQ (inside a panel) ---------- */
.faq{border-top:1px solid var(--rule);max-width:44em;margin-top:0}
.faq .q{padding:26px 0 0;font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-0.02em;line-height:1.1;color:var(--ink)}
.faq .a{padding:12px 0 26px;border-bottom:1px solid var(--rule);margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.faq .a:last-child{border-bottom:0}

/* ---------- legal (inside a panel) ---------- */
.legal{max-width:36em}
.legal h2{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-0.02em;margin:40px 0 10px;line-height:1.15;color:var(--ink)}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:16.5px;line-height:1.65;color:var(--ink)}
.legal ul{padding-left:20px}
.legal .meta{color:var(--ink-60);font-size:15px;border-top:1px solid var(--rule);padding-top:20px;margin-top:48px}

/* ---------- claim ---------- */
.claimhead{padding:88px 0 96px}
.claimhead h1{font-size:clamp(38px,8vw,84px);max-width:15ch}
.claimhead p{margin:28px 0 0;font-size:clamp(18px,2.2vw,22px);color:var(--onbrand-85)}
.claimhead .btn{margin-top:36px;background:#fff;color:var(--brand)}
.claimhead .btn:hover{background:#e8e6ff}

/* ---------- cta, directly on blue ---------- */
.cta h2{font-size:clamp(34px,6vw,62px);max-width:14ch;color:var(--onbrand)}
.cta .btn{margin-top:32px}
.cta .alt{margin:24px 0 0;font-size:16px;color:var(--onbrand-60);max-width:38em}
.cta .alt a{color:var(--onbrand)}
.disclose{margin:28px 0 0;font-size:14px;color:var(--onbrand-60);max-width:44em;border-top:1px solid var(--rule-onbrand);padding-top:16px}

/* ---------- footer ---------- */
footer{background:var(--ink);padding:56px 0 96px;font-size:14px}
footer .ftmark{height:56px;width:auto;margin-bottom:22px}
footer p{margin:0 0 12px;max-width:46em;color:var(--onbrand-85);line-height:1.55}
footer a{color:var(--onbrand)}
footer .links{margin:24px 0 0;display:flex;gap:22px;flex-wrap:wrap}
footer .links a{color:var(--onbrand-60);text-decoration:none}
footer .links a:hover{color:var(--onbrand)}

/* ---------- sticky action, mobile ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--signal);display:none}
.sticky a{display:block;text-align:center;color:#fff;text-decoration:none;font-weight:600;font-size:18px;padding:18px 16px;min-height:44px}

@media (max-width:760px){
  .sticky{display:block}
  body{padding-bottom:64px}
  section{padding:56px 0}
  .pad-lg{padding:72px 0}
  .hero{padding:64px 0 72px}
  .claimhead{padding:64px 0 72px}
  .panel{padding:32px 22px;border-radius:14px}
  .step{gap:16px}
  .step .no{width:40px;font-size:32px}
  .nav{gap:18px;font-size:14px}
  .masthead .wrap{min-height:72px;padding-top:10px;padding-bottom:10px}
  .brand img{height:46px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}