/* ============================================================================
   2SM funnel — the single stylesheet for every public funnel surface:
   the sales page (FunnelKit landing step), the upsell offer, the thank-you
   step, and the Terms / Privacy pages.

   This file replaces the 14 KB <style> block that used to live inside the
   landing page's content. One cacheable file, one set of @font-face rules,
   one type scale — instead of two competing systems fighting on specificity.

   Type follows Apple's typographic rules: tracking is size-specific (tight on
   display sizes, neutral on body, open on micro caps), leading runs inversely
   to size, and every step is fluid so the page scales continuously with the
   viewport and with the reader's own text-size setting instead of jumping at
   one breakpoint.
   ============================================================================ */

/* ---------- Faces. Subset; latin-ext stays off the wire until a Lithuanian
     character actually appears on the page. ---------- */
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/NotoSans-400-latin.sub.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/NotoSans-400-latin-ext.sub.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSans-700-latin.sub.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSans-700-latin-ext.sub.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/NotoSerif-400-latin.sub.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/NotoSerif-400-latin-ext.sub.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSerif-700-latin.sub.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSerif-700-latin-ext.sub.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

body.twosm-funnel{
  /* ---- palette: unchanged brand ---- */
  --paper:#fff; --ink:#000; --body:#141414; --ink-2:#4a4a4a; --ink-3:#6b6b6b;
  --marker:#fff3a3; --cta:#ffd61e; --cta-edge:#d0a800; --green:#12783f;
  --rule:#e3e3e0; --wash:#f7f7f5;

  /* ---- type: fluid, so there is no jump at a breakpoint and the whole page
       scales with the reader's own text-size setting ---- */
  --t-micro: 0.8125rem;
  --t-small: clamp(1rem,      0.95rem + 0.25vw, 1.3125rem);
  --t-body:  clamp(1.1875rem, 1.05rem + 0.62vw, 1.6875rem);
  --t-lead:  clamp(1.3125rem, 1.15rem + 0.70vw, 1.8125rem);
  --t-h3:    clamp(1.375rem,  1.15rem + 1.00vw, 1.875rem);
  --t-state: clamp(1.4375rem, 1.15rem + 1.25vw, 2.0625rem);
  --t-sub:   clamp(1.25rem,   1.08rem + 0.72vw, 1.6875rem);
  --t-h2:    clamp(1.625rem,  1.20rem + 1.85vw, 2.375rem);
  --t-h1:    clamp(1.9375rem, 1.35rem + 2.60vw, 3.125rem);

  /* ---- leading runs inversely to size ---- */
  --lh-display:1.06; --lh-head:1.14; --lh-lead:1.36;
  --lh-body:1.55; --lh-small:1.5; --lh-micro:1.2;

  /* ---- tracking is size-specific: tight as type grows, open as it shrinks ---- */
  --tr-h1:-0.022em; --tr-h2:-0.018em; --tr-h3:-0.012em;
  --tr-body:0em; --tr-small:0.004em; --tr-micro:0.16em;

  /* ---- rhythm ---- */
  --s1:8px; --s2:12px; --s3:16px; --s4:20px; --s5:24px; --s6:32px;
  --s7:clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --s8:clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);
  --measure:clamp(20rem, 92vw, 41rem);
  --pad:clamp(1rem, 0.55rem + 1.9vw, 1.5rem);

  /* ---- motion: one critically damped curve, no overshoot, used everywhere ---- */
  --ease:cubic-bezier(0.32, 0.72, 0, 1);

  margin:0; background:var(--paper); color:var(--body);
  font:400 var(--t-body)/var(--lh-body) 'Noto Sans', system-ui, sans-serif;
  letter-spacing:var(--tr-body);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

html:has(body.twosm-funnel){background:#fff; -webkit-text-size-adjust:100%; scrollbar-color:#c9c9c9 #fff}

/* GeneratePress chrome is removed on funnel surfaces by the child theme; these
   rules flatten what is left of its wrappers. */
body.twosm-funnel .site-header,
body.twosm-funnel .site-footer,
body.twosm-funnel .entry-header{display:none}
body.twosm-funnel .site-content,
body.twosm-funnel .inside-article,
body.twosm-funnel .entry-content{display:block; max-width:none; margin:0; padding:0; background:transparent}
body.twosm-funnel .content-area{width:100%}

.twosm-funnel *{box-sizing:border-box}
.twosm-funnel ::selection{background:var(--marker); color:var(--ink)}
.twosm-funnel :focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:2px}

/* ---------- Measure ---------- */
.twosm-funnel .wrap{max-width:calc(var(--measure) + 2 * var(--pad)); margin:0 auto; padding:0 var(--pad)}

/* Long page, 14 sections: let the browser skip layout and paint for the ones
   that are nowhere near the viewport. The size hint keeps the scrollbar honest. */
.twosm-funnel .wrap > section{content-visibility:auto; contain-intrinsic-size:auto 700px}
.twosm-funnel .wrap > section:first-of-type,
.twosm-funnel .wrap > section:nth-of-type(2){content-visibility:visible}

/* ---------- Blocks ---------- */
.twosm-funnel p{margin:0 0 var(--s4); text-wrap:pretty}

/* One source of vertical space between blocks. The section owns the gap; the last
   element inside it drops its own bottom margin, otherwise a figure's 52px and the
   section's 52px stacked into a 124px hole between every section. */
.twosm-funnel section{padding:0 0 var(--s7)}
.twosm-funnel section > :last-child{margin-bottom:0}
/* FunnelKit's container already opens with 20px, so the hero does not need a full
   section's padding on top of it. */
.twosm-funnel section:first-of-type{padding-top:var(--s3)}

.twosm-funnel img{display:block; max-width:100%; height:auto}
.twosm-funnel figure{margin:var(--s6) 0}
.twosm-funnel figure img{
  width:100%; border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 12px 28px -12px rgba(16,24,40,.18);
}

/* ---------- Headings ---------- */
.twosm-funnel h1,
.twosm-funnel h2,
.twosm-funnel h3{
  color:var(--ink); font-family:'Noto Serif', Georgia, serif; font-weight:700;
  text-wrap:balance; font-optical-sizing:auto;
}
.twosm-funnel h1{
  font-size:var(--t-h1); line-height:var(--lh-display); letter-spacing:var(--tr-h1);
  text-align:center; margin:0 0 var(--s4);
}
.twosm-funnel h2{
  font-size:var(--t-h2); line-height:var(--lh-head); letter-spacing:var(--tr-h2);
  text-align:center; margin:0 0 var(--s6);
}
.twosm-funnel h2:not(:first-child){margin-top:var(--s7)}
.twosm-funnel h3{
  font-size:var(--t-h3); line-height:var(--lh-head); letter-spacing:var(--tr-h3);
  margin:var(--s6) 0 var(--s4);
}

.twosm-funnel .subhead{
  font:400 var(--t-sub)/var(--lh-lead) 'Noto Serif', Georgia, serif;
  letter-spacing:-0.006em; color:var(--body); text-align:center;
  margin:0 0 var(--s6); text-wrap:balance;
}
.twosm-funnel .hairline{width:150px; height:0; border-top:1px solid var(--rule); margin:0 auto var(--s7)}

.twosm-funnel b,
.twosm-funnel strong{color:var(--ink); font-weight:700}
.twosm-funnel em,
.twosm-funnel i{font-style:italic}
.twosm-funnel mark{background:var(--marker); color:var(--ink); padding:.05em .12em; font-weight:700; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.twosm-funnel .nowrap{white-space:nowrap}
.twosm-funnel .ph{background:#ffe1e0; color:#b8000e; padding:0 .2em; font-weight:700}

.twosm-funnel .lead{font-size:var(--t-lead); line-height:var(--lh-lead); letter-spacing:-0.004em; font-weight:700}
.twosm-funnel .statement{
  font:700 var(--t-state)/var(--lh-lead) 'Noto Serif', Georgia, serif;
  letter-spacing:-0.012em; color:var(--ink); text-align:left;
  margin:var(--s6) 0; text-wrap:pretty;
}
.twosm-funnel .statement--long{font-size:var(--t-lead); line-height:var(--lh-lead); margin:var(--s6) 0}
.twosm-funnel .statement--reg{font-weight:400}

.twosm-funnel .eyebrow,
.twosm-funnel .road-n{
  font:700 var(--t-micro)/var(--lh-micro) 'Noto Sans', sans-serif;
  letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--ink-3);
  margin:0 0 var(--s2);
}
.twosm-funnel .eyebrow{text-align:center}

.twosm-funnel .money,
.twosm-funnel .price{color:var(--green); font-weight:700; white-space:nowrap}
.twosm-funnel .price{font-size:var(--t-lead); line-height:var(--lh-lead); margin:0 0 var(--s4)}
.twosm-funnel .price--sm{margin:var(--s6) 0 var(--s4)}
.twosm-funnel .ps{font-size:var(--t-small); line-height:var(--lh-small); letter-spacing:var(--tr-small); color:var(--ink-2); margin:0 0 var(--s4)}
.twosm-funnel .undercta{text-align:center; font-size:var(--t-small); line-height:var(--lh-small); color:var(--ink-2); margin:0 0 var(--s7)}

/* ---------- Lists ---------- */
.twosm-funnel .arrows,
.twosm-funnel .crosses,
.twosm-funnel .ticks,
.twosm-funnel .days{list-style:none; margin:0 0 var(--s6); padding:0}
/* text-indent sized the marker column by guesswork, so the second line of every bullet
   landed ~12px off the first. The marker is taken out of the flow instead and the list
   item carries a fixed indent, so every line — first or wrapped — starts on the same
   left edge. Same mechanism as .ticks below.
   Grid is deliberately not used here: these items mix a <b> with a bare text node, and
   grid would make each of those its own cell. */
.twosm-funnel .arrows li,
.twosm-funnel .crosses li{
  position:relative; margin:0 0 var(--s4); text-indent:0;
}
.twosm-funnel .arrows li{padding-left:1.75em}
.twosm-funnel .crosses li{padding-left:1em}
.twosm-funnel .arrows li::before,
.twosm-funnel .crosses li::before{
  position:absolute; left:0; top:0; color:var(--body); font-weight:400;
}
.twosm-funnel .arrows li::before{content:'>>'}
.twosm-funnel .crosses li::before{content:'>'}

.twosm-funnel .ticks li{position:relative; margin:0; padding:0 0 var(--s4) var(--s6)}
.twosm-funnel .ticks li::before{
  content:''; position:absolute; left:0; top:.30em; width:.94em; height:.94em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2312783f'/%3E%3Cpath d='M7 12.4l3.2 3.2L17 8.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.twosm-funnel .days li{position:relative; margin:0; padding:0 0 var(--s6) 44px; counter-increment:list-item}
.twosm-funnel .days li::before{
  content:counter(list-item); position:absolute; left:0; top:.17em;
  display:grid; place-items:center; width:1.6em; height:1.6em; border-radius:50%;
  background:var(--green); color:#fff; font:700 .62em/1 'Noto Sans', sans-serif; letter-spacing:0;
}
.twosm-funnel .days .t{display:block; font-weight:700; color:var(--ink); margin-bottom:2px}

/* ---------- Surfaces ---------- */
.twosm-funnel .box,
.twosm-funnel .guarantee:not(.is-plain){
  background:var(--wash); border:1px solid var(--rule); border-radius:14px;
  padding:var(--s6); margin:var(--s6) 0;
}
.twosm-funnel .box > :last-child,
.twosm-funnel .guarantee > :last-child{margin-bottom:0}
.twosm-funnel .guarantee{margin:0 0 var(--s7)}
.twosm-funnel .guarantee.is-plain{border:0; padding:0; border-radius:0; background:transparent}
.twosm-funnel .guarantee h2{margin-top:0; font-size:var(--t-h3); letter-spacing:var(--tr-h3)}

.twosm-funnel .road{margin:0 0 var(--s7)}
.twosm-funnel .road-h{
  font:700 var(--t-h3)/var(--lh-head) 'Noto Serif', Georgia, serif;
  letter-spacing:var(--tr-h3); color:var(--ink); text-align:left; margin:0 0 var(--s2);
}
.twosm-funnel .road > :last-child{margin-bottom:0}

.twosm-funnel .faq{margin:0 0 var(--s7)}
.twosm-funnel .faq .q{
  font:700 var(--t-h3)/var(--lh-head) 'Noto Serif', Georgia, serif;
  letter-spacing:var(--tr-h3); color:var(--ink); text-align:left; margin:0 0 var(--s2);
}
.twosm-funnel .faq p{margin:0 0 var(--s4)}
.twosm-funnel .faq p:last-child{margin-bottom:0}

.twosm-funnel .offer,
.twosm-funnel .close-block{text-align:center}
.twosm-funnel .offer p{margin:0 0 var(--s3)}
.twosm-funnel .offer .cta{margin-top:var(--s6)}
.twosm-funnel .close-block h3{text-align:center; margin-top:0}
.twosm-funnel .close-block p{margin:0 0 var(--s4)}
.twosm-funnel .close-block .price--sm{text-align:center; margin:0}

/* ---------- The button ----------
   Feedback lands on pointer-down, not on release, and `touch-action` removes
   the browser's tap delay so the press registers the instant the finger lands. */
.twosm-funnel .cta{
  display:block; width:100%; margin:var(--s7) 0; padding:var(--s4) var(--s5);
  border:0; border-radius:8px; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--cta); color:var(--ink);
  font:700 var(--t-lead)/1.25 'Noto Sans', system-ui, sans-serif; letter-spacing:0.004em;
  box-shadow:0 4px 0 0 var(--cta-edge);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
/* Hover only where a real pointer exists, so a tap on a phone does not leave
   the button stuck in its hovered state. */
@media (hover:hover) and (pointer:fine){
  .twosm-funnel .cta:hover{transform:translateY(-2px); box-shadow:0 6px 0 0 var(--cta-edge)}
}
.twosm-funnel .cta:active{transform:translateY(2px); box-shadow:0 2px 0 0 var(--cta-edge)}

/* ---------- Upsell offer step ---------- */
.twosm-funnel .sec{padding:0 0 var(--s7); max-width:calc(var(--measure) + 2 * var(--pad)); margin:0 auto; padding-inline:var(--pad)}
.twosm-funnel .sec:first-of-type{padding-top:var(--s7)}
.twosm-funnel .sec h1{margin-bottom:var(--s5)}
.twosm-funnel .sec ul{margin:0 0 var(--s5); padding-left:1.2em}
.twosm-funnel .sec li{margin:0 0 var(--s4)}
.twosm-funnel .tag{
  display:inline-block; font:700 var(--t-micro)/1 'Noto Sans', sans-serif;
  letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--ink);
  background:var(--marker); padding:.5em .7em; border-radius:999px;
}
.twosm-funnel .note{font-size:var(--t-small); line-height:var(--lh-small); color:var(--ink-2)}
.twosm-funnel .twosm-offer-action{text-align:center}
.twosm-funnel .twosm-offer-action .cta{max-width:34rem; margin-inline:auto}
.twosm-funnel .twosm-offer-action a{color:var(--ink-2); text-underline-offset:3px}

/* ---------- Footer ---------- */
.twosm-funnel .sitefoot{
  max-width:calc(var(--measure) + 2 * var(--pad)); margin:0 auto;
  padding:var(--s7) var(--pad) var(--s8); border-top:1px solid var(--rule);
  color:var(--ink-3); font-size:var(--t-small); line-height:var(--lh-small); text-align:center;
}
.twosm-funnel .sitefoot a{color:inherit; text-underline-offset:3px}

/* ---------- Legal pages ----------
   Terms and Privacy are ordinary pages, so they get the reading column and the
   same type scale, left-aligned rather than centred. */
/* GeneratePress renders page content inside .inside-article, not .entry-content,
   so without this the legal text ran edge to edge on a phone. */
/* body.twosm-funnel .inside-article above zeroes this padding at 0-2-1, so the legal
   override has to carry the body element too or it loses on specificity. */
body.twosm-legal .wrap,
body.twosm-legal .entry-content,
body.twosm-legal .inside-article{max-width:calc(var(--measure) + 2 * var(--pad)); margin:0 auto; padding:var(--s7) var(--pad) var(--s8)}
body.twosm-legal .entry-header{display:block; margin:0 0 var(--s5)}
.twosm-legal .entry-title{font-family:'Noto Serif', Georgia, serif; font-size:var(--t-h1); line-height:var(--lh-display); letter-spacing:var(--tr-h1); text-align:left; margin:0}
.twosm-legal p{margin:0 0 var(--s4)}
body.twosm-legal h1,
body.twosm-legal h2{text-align:left}
.twosm-legal h1{margin-bottom:var(--s5)}
.twosm-legal h2{font-size:var(--t-h3); letter-spacing:var(--tr-h3); margin:var(--s7) 0 var(--s3)}
.twosm-legal ul,
.twosm-legal ol{margin:0 0 var(--s5); padding-left:1.3em}
.twosm-legal li{margin:0 0 var(--s2)}
.twosm-legal a{color:var(--ink); text-underline-offset:3px}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .twosm-funnel *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .twosm-funnel .cta:hover,
  .twosm-funnel .cta:active{transform:none}
}
@media (prefers-contrast:more){
  body.twosm-funnel{--ink-2:#333; --ink-3:#444; --rule:#000}
  .twosm-funnel .box,
  .twosm-funnel .guarantee:not(.is-plain){border-width:2px}
  .twosm-funnel .cta{outline:2px solid var(--ink); outline-offset:-2px}
}