/* OwnBrand Fitness · homepage v2 (design 2d, 29 Sep 2026). Load after styles.css.
   Colours resolve through the --mk-* tokens in styles.css plus the local --hp-*
   values below. No inline styles: assets/home.js writes the visitor's colour into
   --brand* with style.setProperty on [data-brand-scope] (CSSOM, allowed by the CSP).
   One breakpoint: phone layout below 1100px (content capped at 640px), desktop from
   1100px (content capped at 1200px). Every rule is scoped under .hp so it wins over
   the .marketing element rules in styles.css. */

.hp{
  --hp-gut:max(20px,calc((100% - 640px) / 2));
  --hp-gut-vw:max(20px,calc((100vw - 640px) / 2));
  --hp-display:var(--font-display),system-ui,sans-serif;
  --hp-mono:var(--font-mono),ui-monospace,monospace;
  --hp-serif:var(--font-serif),Georgia,serif;
  --hp-bezel:#050608;
  --hp-white:#fff;
  --hp-line-2:rgba(var(--mk-ink-rgb),.16);
  --hp-line-ink-2:rgba(var(--mk-paper-rgb),.22);
  --hp-shadow-phone:0 30px 60px -24px rgba(var(--mk-ink-rgb),.45);
  --hp-shadow-hero:0 40px 80px -24px rgba(var(--mk-ink-rgb),.45);
  --hp-shadow-tile:0 24px 48px -18px rgba(var(--mk-ink-rgb),.35);
  --hp-shadow-bar:0 16px 40px rgba(var(--mk-ink-rgb),.35);
  --hp-shadow-head:0 14px 36px -14px rgba(var(--mk-ink-rgb),.22);
  --hp-ring:0 0 0 3px var(--mk-paper),0 0 0 5.5px var(--mk-ink);
  /* the visitor's colour; home.js overwrites all five (defaults = sky blue, light phone) */
  --brand:#0f9fe0;--on-brand:#06121c;--brand-tint:#ddf2fb;--brand-tint2:#abddf4;--brand-acc:#0b6894;
}
@media (min-width:1100px){.hp{--hp-gut:max(clamp(40px,8.333vw,120px),calc((100% - 1200px) / 2))}}

/* ---------- type ---------- */
.hp em{color:var(--mk-strong)}
.hp .hp-on-ink em{color:var(--mk-on-flood-soft)}
.hp p{text-wrap:pretty}
.hp .hp-mono{margin:0;font:500 11px/1.3 var(--hp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mk-dim)}
.hp .hp-mono-strong{color:var(--mk-strong)}
.hp .hp-mono-soft{color:var(--mk-on-flood-soft)}
.hp .hp-h2{margin:0;font:600 40px/.95 var(--hp-display);letter-spacing:-.05em}
.hp .hp-h2 em{font-size:1.08em}
@media (min-width:1100px){
  .hp .hp-mono{font-size:12px}
  .hp .hp-h2{font-size:72px}
}

/* ---------- buttons and links ---------- */
.hp .hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border:0;border-radius:999px;font:600 18px/1 var(--hp-display);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:background-color .15s ease}
.hp a.hp-btn-blue,.hp button.hp-btn-blue{background:var(--mk-flood);color:var(--mk-on-flood)}
.hp a.hp-btn-blue:hover,.hp button.hp-btn-blue:hover{background:var(--mk-flood-deep)}
.hp a.hp-soft{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--mk-on-flood-soft);font:500 16px/1.2 var(--hp-display)}
.hp :is(input,textarea):focus-visible{outline:none}

/* ---------- header ---------- */
.hp .hp-head{display:flex;align-items:center;justify-content:space-between;height:60px;margin:0 var(--hp-gut);border-bottom:1px solid var(--mk-line)}
.hp .hp-brand{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--mk-ink);text-decoration:none;font:600 15px/1 var(--hp-display);letter-spacing:-.02em}
.hp .hp-mark{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:7px;background:var(--mk-flood)}
.hp .hp-mark svg{width:19px;height:19px;fill:var(--mk-on-flood)}
.hp .hp-nav{display:flex;gap:40px}
.hp .hp-nav a{display:flex;align-items:center;min-height:44px;color:var(--mk-ink);text-decoration:none;font:500 12px/1 var(--hp-mono);letter-spacing:.14em;text-transform:uppercase}
.hp .hp-nav a:hover{color:var(--mk-strong)}
.hp .hp-nav .hp-nav-extra{display:none}
@media (min-width:1100px){
  .hp .hp-head{height:84px}
  .hp .hp-brand{gap:12px;font-size:17px}
  .hp .hp-mark{width:32px;height:32px;border-radius:8px}
  .hp .hp-mark svg{width:22px;height:22px}
  .hp .hp-nav a{color:var(--mk-nav-link)}
  .hp .hp-nav .hp-nav-extra{display:flex}
}

/* ---------- hero ---------- */
.hp .hp-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "h1" "lede" "stage" "form";padding:14px var(--hp-gut) 36px}
.hp .hp-eyebrow{grid-area:eyebrow}
.hp .hp-h1{grid-area:h1;margin:10px 0 0;font:600 42px/.94 var(--hp-display);letter-spacing:-.055em}
.hp .hp-h1 em{white-space:nowrap;font-size:1.08em}
.hp .hp-lede{grid-area:lede;margin:12px 0 0;font-size:16px;line-height:1.45;color:var(--mk-dim)}
.hp .hp-desk{display:none}
.hp .hp-stage{grid-area:stage;position:relative;display:flex;justify-content:center;height:218px;margin-top:10px;padding-top:24px;overflow:hidden;border-radius:28px 28px 0 0;background:var(--mk-paper-alt)}
.hp .hp-stage .hp-phone{zoom:.72}
.hp .hp-stage .hp-ph-tabs{visibility:hidden}
/* the label is non-negotiable: keep it visible whatever else changes */
.hp .hp-illus{position:absolute;top:6px;left:0;right:0;margin:0;text-align:center;font:500 10px/1.3 var(--hp-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mk-dim);display:block!important;visibility:visible!important;opacity:1!important}
.hp .hp-tile,.hp .hp-stage-hint{display:none}

.hp .hp-custom{grid-area:form;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "input" "sw" "try" "price";margin-top:12px}
.hp .hp-label{grid-area:label;margin-bottom:6px}
.hp .hp-inputwrap{grid-area:input;position:relative}
.hp .hp-input{width:100%;height:56px;margin:0;padding:0 16px 0 60px;border:1.5px solid var(--mk-ink);border-radius:14px;background:var(--hp-white);color:var(--mk-ink);font:500 19px/1 var(--hp-display);letter-spacing:-.02em}
.hp .hp-input::placeholder{color:var(--mk-dim);opacity:1}
.hp .hp-input:focus{box-shadow:0 0 0 4px rgba(var(--mk-flood-rgb),.4)}
.hp .hp-fieldicon{position:absolute;left:8px;top:8px;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--brand);color:var(--on-brand);font:800 15px/1 var(--hp-display);letter-spacing:.02em;pointer-events:none}
.hp .hp-clabel{display:none}
.hp .hp-swatches{grid-area:sw;display:flex;align-items:center;gap:12px;margin-top:12px}
.hp .hp-swatch{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:var(--sw);cursor:pointer}
.hp .hp-swatch[aria-pressed="true"]{box-shadow:var(--hp-ring)}
.hp .hp-swatch[data-hex="#0F9FE0"]{--sw:#0F9FE0}
.hp .hp-swatch[data-hex="#14B8A6"]{--sw:#14B8A6}
.hp .hp-swatch[data-hex="#A3E635"]{--sw:#A3E635}
.hp .hp-swatch[data-hex="#6D7CFF"]{--sw:#6D7CFF}
.hp .hp-swatch[data-hex="#F08DB0"]{--sw:#F08DB0}
.hp .hp-swatch-custom{--sw:transparent;border:1.5px dashed var(--mk-ink);color:var(--mk-ink);font:500 22px/1 var(--hp-display)}
.hp .hp-swatch-custom.is-on{border:0;background:var(--custom,transparent);color:transparent;box-shadow:var(--hp-ring)}
.hp .hp-swatch-custom input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.hp .hp-swatch-custom:focus-within{outline:3px solid var(--mk-flood-deep);outline-offset:3px}
.hp .hp-try-hero{grid-area:try;width:100%;margin-top:14px}
.hp .hp-hero-price{grid-area:price;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 0;font-size:14.5px;line-height:1.45;color:var(--mk-dim)}
.hp .hp-hero-price b{font-weight:600;color:var(--mk-ink)}
.hp .hp-hero-price a{display:inline-flex;align-items:center;flex:none;min-height:44px;color:var(--mk-strong);font-weight:500}

/* store tile (desktop) */
.hp .hp-tile{align-items:center;gap:14px;width:300px;padding:12px 16px 12px 12px;border-radius:18px;border:1px solid rgba(var(--mk-ink-rgb),.08);background:var(--hp-white);box-shadow:var(--hp-shadow-tile)}
.hp .hp-tile-icon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:13px;background:var(--brand);color:var(--on-brand);font:800 18px/1 var(--hp-display);letter-spacing:.02em}
.hp .hp-tile-text{display:grid;gap:3px;min-width:0}
.hp .hp-tile-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 18px/1.2 var(--hp-display);letter-spacing:-.02em}
.hp .hp-tile-sub{font-size:13px;line-height:1.3;color:var(--mk-dim)}
.hp .hp-tile-get{margin-left:auto;padding:7px 14px;border-radius:999px;background:var(--mk-ink);color:var(--mk-paper);font:600 12px/1 var(--hp-display)}

@media (min-width:1100px){
  .hp .hp-hero{grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:1fr auto auto auto auto 1fr;grid-template-areas:". stage" "eyebrow stage" "h1 stage" "lede stage" "form stage" ". stage";column-gap:80px;padding-top:56px;padding-bottom:76px}
  .hp .hp-h1{margin-top:20px;font-size:clamp(64px,6.11vw,88px);line-height:.92}
  .hp .hp-h1 em{font-size:1.1em}
  .hp .hp-lede{margin-top:26px;max-width:36ch;font-size:20px;line-height:1.5}
  .hp .hp-desk{display:inline}
  .hp .hp-stage{display:grid;justify-items:center;align-self:center;justify-self:center;width:340px;height:auto;margin:0;padding:0;overflow:visible;border-radius:0;background:none}
  .hp .hp-stage .hp-phone{zoom:1.1}
  .hp .hp-stage .hp-ph-tabs{visibility:visible}
  .hp .hp-illus{position:static;margin-top:10px;font-size:12px}
  .hp .hp-tile{position:absolute;left:-150px;top:430px;display:flex}
  .hp .hp-stage-hint{display:block;margin:16px 0 0;text-align:center;font-size:15px;color:var(--mk-dim)}
  .hp .hp-custom{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "input try" "clabel clabel" "sw sw" "price price";column-gap:10px;max-width:620px;margin-top:36px}
  .hp .hp-label{margin-bottom:10px}
  .hp .hp-input{height:64px;padding:0 20px;font-size:22px}
  .hp .hp-fieldicon{display:none}
  .hp .hp-clabel{display:block;grid-area:clabel;margin:20px 0 10px}
  .hp .hp-swatches{gap:14px;margin-top:0}
  .hp .hp-try-hero{width:auto;height:64px;margin-top:0;padding:0 30px;font-size:19px}
  .hp .hp-hero-price{flex-wrap:wrap;justify-content:flex-start;gap:6px 16px;margin-top:24px;font-size:16px}
  .hp .hp-hero-price a{min-height:0}
}
@media (min-width:1100px) and (max-width:1279px){.hp .hp-tile{left:-72px}}
/* Real browser windows are shorter than the frames the design was drawn at.
   Phones: Safari and Instagram's browser leave about 660-740 px, not 844, so
   the hero tightens until "Try it free" is on the first screen. */
@media (max-width:1099px) and (max-height:860px){
  .hp .hp-hero{padding-top:8px}
  .hp .hp-h1{margin-top:6px;font-size:38px}
  .hp .hp-lede{margin-top:8px}
  .hp .hp-stage{height:186px;margin-top:8px}
  .hp .hp-stage .hp-phone{zoom:.6}
  .hp .hp-custom,.hp .hp-swatches,.hp .hp-try-hero{margin-top:10px}
}
/* Laptops: a 13-inch Air shows about 1470 x 830, not 1440 x 900. The whole
   page scales down in steps, the same design proportionally smaller, so the
   hero fits the first screen with its price line. */
@media (min-width:1100px) and (max-height:899px){.hp{zoom:.92}}
@media (min-width:1100px) and (max-height:819px){.hp{zoom:.86}}
@media (min-width:1100px) and (max-height:739px){.hp{zoom:.8}}

/* ---------- phone mock (hero) ---------- */
.hp .hp-phone{position:relative;flex:none;width:300px;height:618px;margin:0;padding:9px;border-radius:50px;background:var(--hp-bezel);box-shadow:var(--hp-shadow-hero);font-family:-apple-system,"SF Pro Text",var(--font-body),system-ui,sans-serif;letter-spacing:0;-webkit-font-smoothing:antialiased;
  --ph-bg:#F2F0EA;--ph-card:#FFFFFF;--ph-card2:#ECEAE3;--ph-text:#17181D;--ph-text2:#585E68;--ph-line:rgba(23,24,29,.08);--ph-m1:#E5533D;--ph-m2:#E89A2A;--ph-m3:#8A6FDB;--ph-tab:#F7F6F2;--ph-dash:rgba(23,24,29,.22);--ph-shadow:0 2px 8px rgba(23,24,29,.06)}
.hp .hp-phone[data-theme="dark"]{--ph-bg:#0B0C0F;--ph-card:#14161B;--ph-card2:#1D2027;--ph-text:#F3F4F6;--ph-text2:#9BA1AC;--ph-line:rgba(255,255,255,.08);--ph-m1:#FF6B5C;--ph-m2:#F2A93A;--ph-m3:#C792EA;--ph-tab:#0F1116;--ph-dash:rgba(255,255,255,.26);--ph-shadow:none}
.hp .hp-ph-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:41px;background:var(--ph-bg);color:var(--ph-text);font-size:12px;line-height:1.25}
.hp .hp-ph-island{position:absolute;top:10px;left:50%;width:86px;height:25px;margin-left:-43px;border-radius:14px;background:#000}
.hp .hp-ph-status{display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 24px 0 28px;font-size:13px;font-weight:600}
.hp .hp-ph-right{display:flex;align-items:center;gap:5px}
.hp .hp-ph-sig{display:flex;align-items:flex-end;gap:1.5px;height:10px}
.hp .hp-ph-sig i{width:3px;border-radius:1px;background:var(--ph-text)}
.hp .hp-ph-sig i:nth-child(1){height:4px}.hp .hp-ph-sig i:nth-child(2){height:6px}.hp .hp-ph-sig i:nth-child(3){height:8px}.hp .hp-ph-sig i:nth-child(4){height:10px}
.hp .hp-ph-bat{display:flex;align-items:center;width:22px;height:11px;padding:1.5px;border:1px solid var(--ph-text2);border-radius:3.5px}
.hp .hp-ph-bat i{width:75%;height:100%;border-radius:1.5px;background:var(--ph-text)}
.hp .hp-ph-body{padding:0 14px}
.hp .hp-i{flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hp .hp-i2{stroke-width:2}.hp .hp-i22{stroke-width:2.2}.hp .hp-i24{stroke-width:2.4}
.hp .hp-if{flex:none;fill:currentColor;stroke:none}
.hp .hp-ph-top{display:flex;align-items:center;gap:10px;margin-top:6px}
.hp .hp-ph-avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--ph-card2);font-size:15px;font-weight:700}
.hp .hp-ph-hello{flex:1;min-width:0}
.hp .hp-ph-welcome{font-size:11px;color:var(--ph-text2)}
.hp .hp-ph-hi{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.hp .hp-ph-gear{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--ph-line);background:var(--ph-card);color:var(--ph-text2)}
.hp .hp-ph-card{margin-top:10px;padding:13px;border-radius:18px;border:1px solid var(--ph-line);background:var(--ph-card);box-shadow:var(--ph-shadow)}
.hp .hp-ph-card--first{margin-top:14px}
.hp .hp-ph-card--flush{padding:0}
.hp .hp-ph-row{display:flex;align-items:center;justify-content:space-between}
.hp .hp-ph-kicker{font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--ph-text2)}
.hp .hp-ph-meta{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ph-text2)}
.hp .hp-ph-meta--sm{font-size:10.5px}
.hp .hp-ph-h{font-size:13.5px;font-weight:700}
.hp .hp-ph-h--lg{font-size:14px}
.hp .hp-ph-note{margin-top:3px;font-size:10px;color:var(--ph-text2)}
.hp .hp-ph-plan{display:flex;align-items:center;gap:11px;margin-top:11px}
.hp .hp-ph-planicon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:11px;background:var(--ph-card2);color:var(--brand-acc)}
.hp .hp-ph-plantext{flex:1;min-width:0}
.hp .hp-ph-planname{font-size:15px;font-weight:700;letter-spacing:-.01em}
.hp .hp-ph-tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;margin-top:5px}
.hp .hp-ph-tag{padding:3px 6px;border-radius:5px;background:var(--brand-tint);color:var(--brand-acc);font-size:8.5px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.hp .hp-ph-small{font-size:10.5px;font-weight:600;color:var(--ph-text2);white-space:nowrap}
.hp .hp-ph-chev{color:var(--ph-text2)}
.hp .hp-ph-cta{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;margin-top:13px;border-radius:11px;background:var(--brand);color:var(--on-brand);font-size:13px;font-weight:700}
.hp .hp-ph-cta--sm{margin-top:10px}
.hp .hp-ph-phase{display:flex;align-items:center;gap:7px;height:32px;margin-top:8px;padding:0 11px;border-radius:9px;background:var(--brand-tint);color:var(--brand-acc);font-size:11px;font-weight:700}
.hp .hp-ph-phase span{flex:1}
.hp .hp-ph-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:11px;text-align:center}
.hp .hp-ph-day{display:grid;place-items:center;height:28px;border-radius:8px}
.hp .hp-ph-day--done{background:var(--brand-tint);color:var(--brand-acc)}
.hp .hp-ph-day--rest{background:var(--ph-card2);color:var(--ph-text2)}
.hp .hp-ph-day--today{border:1.5px solid var(--brand);color:var(--brand-acc)}
.hp .hp-ph-day--next{border:1.5px dashed var(--ph-dash)}
.hp .hp-ph-dayl{margin-top:5px;font-size:9px;font-weight:600;color:var(--ph-text2)}
.hp .hp-ph-dayl--today{font-weight:800;color:var(--brand-acc)}
.hp .hp-ph-log{font-size:11px;font-weight:700;color:var(--brand-acc)}
.hp .hp-ph-nut{display:flex;align-items:center;gap:14px;margin-top:10px}
.hp .hp-ph-ring{display:grid;place-items:center;flex:none;width:68px;height:68px;border-radius:50%;background:conic-gradient(var(--brand) 0 68%,var(--ph-card2) 68% 100%)}
.hp .hp-ph-ring>div{display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--ph-card)}
.hp .hp-ph-ring b{font-size:15px;font-weight:800;line-height:1}
.hp .hp-ph-ring small{margin-top:2px;font-size:6.5px;font-weight:700;letter-spacing:.06em;color:var(--ph-text2)}
.hp .hp-ph-ring--lg{width:76px;height:76px}
.hp .hp-ph-ring--lg>div{width:62px;height:62px}
.hp .hp-ph-ring--lg small{font-size:8px;font-weight:400;letter-spacing:0}
.hp .hp-ph-macros{flex:1;display:grid;gap:7px}
.hp .hp-ph-macros--full{margin-top:12px}
.hp .hp-ph-mrow{display:flex;justify-content:space-between;font-size:10px}
.hp .hp-ph-mrow>span:last-child{color:var(--ph-text2)}
.hp .hp-ph-mname{display:flex;align-items:center;gap:5px;font-weight:700}
.hp .hp-ph-mname i{width:6px;height:6px;border-radius:50%}
.hp .hp-ph-bar{height:4px;margin-top:4px;border-radius:2px;background:var(--ph-card2)}
.hp .hp-ph-bar i{display:block;height:100%;border-radius:2px}
.hp .hp-ph-p i,.hp .hp-ph-mname i.hp-ph-p{background:var(--ph-m1)}
.hp .hp-ph-c i,.hp .hp-ph-mname i.hp-ph-c{background:var(--ph-m2)}
.hp .hp-ph-f i,.hp .hp-ph-mname i.hp-ph-f{background:var(--ph-m3)}
.hp .hp-ph-w i{background:var(--brand)}
.hp .hp-ph-p i,.hp .hp-ph-w i{width:75%}.hp .hp-ph-c i{width:70%}.hp .hp-ph-f i{width:57%}
.hp .hp-ph-title{margin-top:4px;text-align:center;font-size:15px;font-weight:700}
.hp .hp-ph-hero{position:relative;height:112px;margin-top:12px;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,var(--brand-tint2),var(--ph-card2))}
.hp .hp-ph-hero>div{position:absolute;left:14px;right:14px;bottom:12px}
.hp .hp-ph-hero .hp-ph-row{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--ph-text2)}
.hp .hp-ph-hero b{display:block;margin-top:4px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.hp .hp-ph-ex{display:flex;align-items:center;gap:10px;padding:9px 12px}
.hp .hp-ph-ex+.hp-ph-ex{border-top:1px solid var(--ph-line)}
.hp .hp-ph-num{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand-tint);color:var(--brand-acc);font-size:10px;font-weight:800}
.hp .hp-ph-ex>div{flex:1;min-width:0}
.hp .hp-ph-ex b{display:block;font-size:12.5px;font-weight:700}
.hp .hp-ph-ex small{display:block;margin-top:2px;font-size:10px;color:var(--ph-text2)}
.hp .hp-ph-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:12px}
.hp .hp-ph-days>span{display:grid;justify-items:center;gap:1px;padding:5px 0;border-radius:10px;border:1px solid var(--ph-line);background:var(--ph-card)}
.hp .hp-ph-days>span:last-child{background:var(--brand);color:var(--on-brand)}
.hp .hp-ph-days small{font-size:7.5px;font-weight:700;letter-spacing:.04em}
.hp .hp-ph-days b{font-size:12px;font-weight:800}
.hp .hp-ph-left small{display:block;font-size:10px;color:var(--ph-text2)}
.hp .hp-ph-left b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hp .hp-ph-left span{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--ph-text2)}
.hp .hp-ph-drop{color:var(--brand-acc)}
.hp .hp-ph-water{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.hp .hp-ph-step{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ph-card2);color:var(--ph-text2);font-size:18px}
.hp .hp-ph-step--on{background:var(--brand-tint);color:var(--brand-acc)}
.hp .hp-ph-glass{text-align:center}
.hp .hp-ph-glass b{display:block;font-size:22px;font-weight:800;line-height:1}
.hp .hp-ph-glass small{font-size:9.5px;color:var(--ph-text2)}
.hp .hp-ph-bar--water{margin-top:10px}
.hp .hp-ph-segs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.hp .hp-ph-segs span{display:flex;align-items:center;justify-content:center;height:32px;border-radius:10px;border:1px solid var(--ph-line);background:var(--ph-card);color:var(--ph-text2);font-size:11px;font-weight:700}
.hp .hp-ph-segs span.is-on,.hp .hp-ph-chips span.is-on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-acc)}
.hp .hp-ph-chips{display:flex;gap:5px;margin-top:9px}
.hp .hp-ph-chips span{padding:4px 9px;border-radius:7px;border:1px solid transparent;background:var(--ph-card2);color:var(--ph-text2);font-size:10px;font-weight:600}
.hp .hp-ph-chips span.is-on{font-weight:700}
.hp .hp-ph-trend{margin-top:9px;font-size:10px;color:var(--ph-text2)}
.hp .hp-ph-chart{display:block;margin-top:6px;overflow:visible}
.hp .hp-ph-chart .g{fill:none;stroke:var(--ph-line);stroke-width:1}
.hp .hp-ph-chart polyline{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hp .hp-ph-chart circle{fill:var(--brand)}
.hp .hp-ph-vol{display:flex;align-items:flex-end;gap:6px;height:74px;margin-top:10px}
.hp .hp-ph-vol i{flex:1;border-radius:4px;background:var(--brand)}
.hp .hp-ph-vol i:nth-child(-n+3){background:var(--ph-card2)}
.hp .hp-ph-vol i:nth-child(1){height:18%}.hp .hp-ph-vol i:nth-child(2){height:22%}.hp .hp-ph-vol i:nth-child(3){height:20%}.hp .hp-ph-vol i:nth-child(4){height:62%}
.hp .hp-ph-vol i:nth-child(5),.hp .hp-ph-vol i:nth-child(6),.hp .hp-ph-vol i:nth-child(7){height:80%}.hp .hp-ph-vol i:nth-child(8){height:47%}
.hp .hp-ph-tabbar{position:absolute;left:0;right:0;bottom:0;height:72px;border-top:1px solid var(--ph-line);background:var(--ph-tab)}
.hp .hp-ph-tabs{display:grid;grid-template-columns:repeat(4,1fr);padding-top:7px}
.hp .hp-ph-tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:44px;margin:0;padding:0;border:0;background:transparent;color:var(--ph-text2);font-family:inherit;font-size:9px;font-weight:600;line-height:1.2;cursor:pointer}
.hp .hp-ph-tabs button[aria-pressed="true"]{color:var(--brand-acc)}
.hp .hp-ph-homebar{position:absolute;left:50%;bottom:7px;width:104px;height:4px;margin-left:-52px;border-radius:2px;background:var(--ph-text)}

/* ---------- sections ---------- */
.hp .hp-sec{padding:64px var(--hp-gut)}
/* Desktop section spacing tightened by about a fifth (29 Sep 2026): 128 to 104. */
@media (min-width:1100px){.hp .hp-sec{padding-top:104px;padding-bottom:104px}}

/* what members get */
.hp .hp-members{padding-bottom:56px}
.hp .hp-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px}
.hp .hp-theme{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.hp .hp-seg{display:grid;grid-template-columns:1fr 1fr;width:160px;height:48px;padding:0;border:1.5px solid var(--mk-ink);border-radius:999px}
/* the whole segment is the hit area (>=44px); the inset ring draws the visual gap */
.hp .hp-seg button{margin:0;border:0;border-radius:999px;background:transparent;color:var(--mk-ink);box-shadow:inset 0 0 0 3px var(--mk-paper);font:500 11px/1 var(--hp-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.hp .hp-seg button[aria-pressed="true"]{background:var(--mk-ink);color:var(--mk-paper)}
.hp .hp-mbody{display:grid;gap:12px;margin-top:24px}
.hp .hp-plans{overflow:hidden;margin:0;border-radius:20px;background:var(--mk-ink);color:var(--mk-paper)}
.hp .hp-plans-text{padding:20px 18px 0}
.hp .hp-plans-title{margin:8px 0 0;font:600 24px/1.05 var(--hp-display);letter-spacing:-.04em}
.hp .hp-plans-copy{margin:8px 0 0;font-size:14.5px;line-height:1.45;color:var(--mk-dim-ink)}
.hp .hp-plans-fig{height:250px;margin:0;padding:18px 48px 0;overflow:hidden}
.hp .hp-bezel-top{padding:5px 5px 0;border-radius:26px 26px 0 0;background:var(--hp-bezel)}
.hp .hp-bezel-top img{display:block;width:100%;height:auto;aspect-ratio:1320/2868;object-fit:cover;object-position:top;border-radius:22px 22px 0 0}
.hp .hp-cards{display:flex;gap:12px;width:100vw;margin-left:calc(50% - 50vw);padding:4px var(--hp-gut-vw) 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hp-gut-vw);scrollbar-width:none}
.hp .hp-cards::-webkit-scrollbar{display:none}
.hp .hp-card{flex:0 0 244px;display:flex;flex-direction:column;gap:18px;margin:0;padding:14px 14px 22px;border-radius:24px;background:var(--mk-paper-alt);scroll-snap-align:start}
.hp .hp-shot{padding:6px;border-radius:36px;background:var(--hp-bezel);box-shadow:0 24px 44px -22px rgba(var(--mk-ink-rgb),.45)}
.hp .hp-shot img{display:block;width:100%;height:auto;aspect-ratio:1206/2622;object-fit:cover;object-position:top;border-radius:30px}
.hp .hp-card-text{padding:0 4px}
.hp .hp-card-title{margin:8px 0 0;font:600 20px/1.15 var(--hp-display);letter-spacing:-.03em}
.hp .hp-card-copy{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--mk-dim)}
.hp .hp-also{margin-top:28px;padding-top:20px;border-top:1px solid var(--mk-line)}
.hp .hp-also-lead{margin:8px 0 0;font-size:16.5px;line-height:1.55}
.hp .hp-also-fine{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--mk-dim)}
.hp .hp-app-note{margin-top:24px;max-width:60ch}
@media (min-width:1100px){
  .hp .hp-members{padding-bottom:90px}
  .hp .hp-theme{display:grid;justify-items:end;gap:10px;width:auto;padding-bottom:8px}
  .hp .hp-seg{width:180px}
  .hp .hp-seg button{box-shadow:inset 0 0 0 4px var(--mk-paper);font-size:12px}
  .hp .hp-mbody{gap:24px;margin-top:64px}
  .hp .hp-plans{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;border-radius:28px}
  .hp .hp-plans-text{display:grid;align-content:center;gap:14px;padding:44px 0 44px 44px}
  .hp .hp-plans-title{margin:0;font-size:40px;line-height:1;letter-spacing:-.045em}
  .hp .hp-plans-copy{margin:0;max-width:40ch;font-size:17px;line-height:1.5}
  .hp .hp-plans-fig{height:420px;padding:36px 44px 0 0}
  .hp .hp-bezel-top{padding:6px 6px 0;border-radius:36px 36px 0 0}
  .hp .hp-bezel-top img{border-radius:30px 30px 0 0}
  .hp .hp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;width:auto;margin-left:0;padding:0;overflow:visible}
  .hp .hp-card{gap:26px;padding:20px 20px 30px;border-radius:28px}
  .hp .hp-shot{padding:7px;border-radius:40px;box-shadow:var(--hp-shadow-phone)}
  .hp .hp-shot img{border-radius:33px}
  .hp .hp-card-text{padding:0 6px}
  .hp .hp-card-title{margin-top:10px;font-size:23px;line-height:1.12;letter-spacing:-.035em}
  .hp .hp-card-copy{margin-top:8px;font-size:16px}
  .hp .hp-also{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;margin-top:48px;padding-top:28px}
  .hp .hp-also .hp-mono{margin-top:4px}
  .hp .hp-also-lead{margin:0;max-width:60ch;font-size:19px}
  .hp .hp-also-fine{font-size:15px}
}

/* your members pay you */
.hp .hp-income{display:flex;flex-direction:column;background:var(--mk-paper-alt)}
.hp .hp-income-text{display:contents}
.hp .hp-income .hp-h2{margin-top:12px}
.hp .hp-income-lede{margin:16px 0 0;font-size:16.5px;line-height:1.5;color:var(--mk-dim)}
.hp .hp-income-fig{order:4;display:grid;justify-items:center;gap:12px;margin:28px 0 0}
.hp .hp-tiers{order:5;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:28px 0 0}
.hp .hp-tier{padding:20px;border:1px solid var(--hp-line-2);border-radius:18px;background:var(--mk-paper)}
.hp .hp-tier ul{display:grid;gap:9px;margin:14px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.4}
.hp .hp-tier li{position:relative;padding-left:24px}
.hp .hp-tier li::before{content:"";position:absolute;top:5px;left:2px;width:10px;height:5px;border:solid var(--mk-strong);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.hp .hp-tier-plus{margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--mk-dim-ink)}
.hp .hp-tier-premium{border-color:var(--mk-ink);background:var(--mk-ink);color:var(--mk-paper)}
.hp .hp-tier-premium .hp-mono{color:var(--mk-on-flood-soft)}
.hp .hp-tier-premium li::before{border-color:var(--mk-on-flood-soft)}
.hp .hp-income-dl{order:5;margin:28px 0 0;border-top:1px solid var(--hp-line-2)}
.hp .hp-income-dl>div{padding:16px 0;border-bottom:1px solid var(--hp-line-2)}
.hp .hp-income-dl dt{font:600 17px/1.3 var(--hp-display);letter-spacing:-.02em}
.hp .hp-income-dl dd{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--mk-dim)}
.hp .hp-phone-shot{width:220px;padding:6px;border-radius:36px;background:var(--hp-bezel);box-shadow:var(--hp-shadow-phone)}
.hp .hp-phone-shot img{display:block;width:100%;height:auto;aspect-ratio:1206/2622;object-fit:cover;object-position:top;border-radius:30px}
.hp .hp-caption{font:500 10px/1.3 var(--hp-mono);letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--mk-dim)}
@media (min-width:1100px){
  .hp .hp-income{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:120px;align-items:center}
  .hp .hp-income-text{display:block}
  .hp .hp-income .hp-h2{margin-top:18px}
  .hp .hp-income-lede{margin-top:24px;max-width:40ch;font-size:21px}
  .hp .hp-tiers{gap:16px;margin-top:40px}
  .hp .hp-tier{padding:24px}
  .hp .hp-tier ul{font-size:16px}
  .hp .hp-income-dl{margin-top:32px}
  .hp .hp-income-dl>div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding:22px 0}
  .hp .hp-income-dl dt{font-size:20px}
  .hp .hp-income-dl dd{margin:0;max-width:46ch;font-size:17px;line-height:1.55}
  .hp .hp-income-fig{gap:16px;margin:0}
  .hp .hp-phone-shot{width:300px;padding:8px;border-radius:48px;box-shadow:0 40px 80px -28px rgba(var(--mk-ink-rgb),.5)}
  .hp .hp-phone-shot img{border-radius:40px}
  .hp .hp-caption{font-size:11px}
}

/* how it works */
.hp .hp-how-list{margin:28px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--mk-line)}
.hp .hp-how-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:20px 0;border-top:1px solid var(--mk-line)}
.hp .hp-how-n{font:italic 400 56px/.8 var(--hp-serif);color:var(--mk-strong)}
.hp .hp-how-t{margin:0;font:600 21px/1.15 var(--hp-display);letter-spacing:-.03em}
.hp .hp-how-d{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:var(--mk-dim)}
.hp .hp-how-try{width:100%;margin-top:28px}
@media (min-width:1100px){
  .hp .hp-how-list{margin-top:48px}
  .hp .hp-how-list li{grid-template-columns:96px minmax(0,1fr);gap:32px;align-items:center;padding:28px 0}
  .hp .hp-how-n{font-size:88px}
  .hp .hp-how-t{font-size:32px;line-height:1.05;letter-spacing:-.04em}
  .hp .hp-how-d{margin-top:10px;max-width:56ch;font-size:17px;line-height:1.55}
  .hp .hp-how-try{width:auto;height:60px;margin-top:40px;padding:0 32px}
}

/* price card */
.hp .hp-price-sec{padding:0 calc(var(--hp-gut) - 4px) 64px}
.hp .hp-price{padding:32px 22px 26px;border-radius:28px;background:var(--mk-ink);color:var(--mk-paper)}
.hp .hp-price .hp-mono{color:var(--mk-paper)}
.hp .hp-price-title{margin:16px 0 0;font:600 31px/1.05 var(--hp-display);letter-spacing:-.04em;text-wrap:balance}
.hp .hp-nw{white-space:nowrap}
.hp .hp-when{margin:30px 0 0 6px;padding:0;list-style:none}
.hp .hp-when li{position:relative;padding:0 0 26px 24px;border-left:2px solid var(--hp-line-ink-2)}
.hp .hp-when li:last-child{padding-bottom:0;border-left-color:transparent}
.hp .hp-when-dot{position:absolute;left:-7px;top:1px;width:12px;height:12px;border-radius:50%;background:var(--mk-on-flood-soft)}
.hp .hp-price .hp-when-k{color:var(--mk-on-flood-soft)}
.hp .hp-when-amt{display:flex;align-items:baseline;gap:8px;margin:10px 0 0}
.hp .hp-when-amt b{font:600 34px/.95 var(--hp-display);letter-spacing:-.04em}
.hp .hp-when-unit{font:500 18px/1 var(--hp-display);letter-spacing:-.02em}
.hp .hp-when-t{margin:8px 0 0;font:600 17px/1.3 var(--hp-display);letter-spacing:-.02em}
.hp .hp-when-d{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--mk-dim-ink)}
.hp .hp-price-foot{display:grid;grid-template-areas:"fine" "actions" "tax";margin-top:28px;padding-top:20px;border-top:1px solid var(--mk-line-ink)}
.hp .hp-price-fine{grid-area:fine;margin:0;font-size:14.5px;line-height:1.55;color:var(--mk-dim-ink)}
.hp .hp-price-actions{grid-area:actions;display:flex;flex-direction:column;gap:6px;margin-top:20px}
.hp .hp-price-actions .hp-btn{width:100%}
.hp .hp-price-tax{grid-area:tax;margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--mk-dim-ink)}
.hp .hp-price-error{margin:16px 0 0;font-size:15px;line-height:1.5}
.hp .hp-price-error a{color:var(--mk-on-flood-soft)}
@media (min-width:1100px){
  .hp .hp-price-sec{padding:0 var(--hp-gut) 104px}
  .hp .hp-price{padding:68px 80px 60px;border-radius:40px}
  .hp .hp-price-title{margin-top:22px;font-size:48px}
  .hp .hp-when{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:96px;margin:60px 0 0;border-top:2px solid var(--hp-line-ink-2)}
  .hp .hp-when li{padding:30px 0 0;border-left:0}
  .hp .hp-when-dot{left:0;top:-7px}
  .hp .hp-when-amt{gap:10px;margin-top:16px}
  .hp .hp-when-amt b{font-size:44px}
  .hp .hp-when-t{margin-top:12px;font-size:19px}
  .hp .hp-when-d{margin-top:8px;max-width:30ch;font-size:16px;line-height:1.55}
  .hp .hp-price-foot{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"fine actions" "tax actions";align-items:center;column-gap:48px;margin-top:52px;padding-top:32px}
  .hp .hp-price-fine{max-width:60ch;font-size:15px}
  .hp .hp-price-actions{flex-direction:row-reverse;align-items:center;gap:24px;margin-top:0}
  .hp .hp-price-actions .hp-btn{width:auto;height:60px;padding:0 34px}
  .hp .hp-price-actions a.hp-soft{font-size:17px}
  .hp .hp-price-tax{margin-top:4px;font-size:15px}
}
/* live-price slots: empty until price.js fills them from /api/offer */
.hp [data-offer]:empty{display:inline-block;min-width:3.4ch;height:.72em;border-radius:.2em;background:rgba(var(--mk-ink-rgb),.1);vertical-align:-.04em}
.hp [data-offer="included"]:empty{min-width:2.2ch}
.hp .hp-on-ink [data-offer]:empty{background:rgba(var(--mk-paper-rgb),.18)}

/* contact */
.hp .hp-contact{display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-areas:"text video" "cards cards" "email email" "booking booking";column-gap:16px;align-items:center;padding-top:56px;padding-bottom:56px;background:var(--mk-paper-alt)}
.hp .hp-contact-text{grid-area:text}
.hp .hp-contact .hp-h2{margin-top:12px;font-size:32px;line-height:1;letter-spacing:-.045em}
.hp .hp-contact-lede{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--mk-dim)}
.hp .hp-contact-fig{grid-area:video;margin:0}
.hp .hp-clip-frame{padding:4px;border-radius:22px;background:var(--hp-bezel);box-shadow:0 20px 40px -18px rgba(var(--mk-ink-rgb),.45)}
.hp .hp-clip{display:block;width:100%;height:auto;aspect-ratio:640/1307;object-fit:cover;border-radius:18px;background:#000}
.hp .hp-contact-fig .hp-caption{display:none}
.hp .hp-options{grid-area:cards;display:grid;gap:10px;margin-top:24px}
.hp a.hp-option{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t arrow" "d arrow";gap:4px 12px;align-items:center;min-height:64px;padding:14px 16px;border-radius:16px;border:1px solid var(--hp-line-2);background:var(--mk-paper);color:var(--mk-ink);text-decoration:none;transition:background-color .15s ease,border-color .15s ease}
.hp a.hp-option:hover{background:var(--hp-white);border-color:var(--mk-ink)}
.hp .hp-option-t{grid-area:t;font:600 17px/1.2 var(--hp-display);letter-spacing:-.02em}
.hp .hp-option-d{grid-area:d;font-size:14px;line-height:1.45;color:var(--mk-dim)}
.hp .hp-option-arrow{grid-area:arrow;font:500 20px/1 var(--hp-display);color:var(--mk-strong)}
.hp .hp-contact-email{grid-area:email;margin:18px 0 0;font-size:14.5px;line-height:1.5;color:var(--mk-dim)}
.hp .hp-contact-email a{color:var(--mk-strong)}
.hp a.hp-booking{grid-area:booking;justify-self:start;display:inline-flex;align-items:center;min-height:44px;color:var(--mk-strong);font-weight:500}
@media (min-width:1100px){
  .hp .hp-contact{grid-template-columns:minmax(0,1fr) 200px;grid-template-areas:"text video" "cards video" "email video" "booking video";column-gap:96px;padding-top:104px;padding-bottom:104px}
  .hp .hp-contact .hp-h2{margin-top:16px;font-size:64px;line-height:.95;letter-spacing:-.05em}
  .hp .hp-contact-lede{margin-top:22px;max-width:52ch;font-size:19px;line-height:1.55}
  .hp .hp-contact-fig{display:grid;justify-items:center;gap:14px}
  .hp .hp-clip-frame{width:200px;padding:5px;border-radius:32px;box-shadow:var(--hp-shadow-phone)}
  .hp .hp-clip{border-radius:27px}
  .hp .hp-contact-fig .hp-caption{display:block}
  .hp .hp-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
  .hp a.hp-option{display:flex;flex-direction:column;gap:8px;min-height:156px;padding:22px;border-radius:20px}
  .hp .hp-option-t{font-size:21px;line-height:1.15;letter-spacing:-.025em}
  .hp .hp-option-d{font-size:15px;line-height:1.5}
  .hp .hp-option-arrow{margin-top:auto}
  .hp .hp-contact-email{margin-top:24px;font-size:16px}
}

/* questions */
.hp .hp-faq-sub{display:none}
.hp .hp-faq-list{margin-top:28px;border-top:1px solid var(--mk-line)}
.hp .hp-faq-list details{border-bottom:1px solid var(--mk-line)}
.hp .hp-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:14px 0;list-style:none;cursor:pointer;font:600 19px/1.25 var(--hp-display);letter-spacing:-.025em}
.hp .hp-faq-list summary::-webkit-details-marker{display:none}
.hp .hp-faq-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--mk-ink);font:400 20px/1 var(--hp-display);transition:transform .2s ease}
.hp .hp-faq-list details[open] .hp-faq-icon{transform:rotate(45deg)}
.hp .hp-faq-a{margin:0;padding:0 0 20px;font-size:16px;line-height:1.6;color:var(--mk-dim)}
@media (min-width:1100px){
  .hp .hp-faq{display:grid;grid-template-columns:400px minmax(0,1fr);gap:96px}
  .hp .hp-faq-sub{display:block;margin:24px 0 0;max-width:22ch;font-size:18px;line-height:1.55;color:var(--mk-dim)}
  .hp .hp-faq-list{margin-top:0}
  .hp .hp-faq-list summary{gap:24px;padding:24px 0;font-size:26px;line-height:1.2;letter-spacing:-.035em}
  .hp .hp-faq-icon{width:44px;height:44px;font-size:24px}
  .hp .hp-faq-a{max-width:60ch;padding-bottom:26px;font-size:18px}
}

/* ask me a question */
.hp .hp-ask{background:var(--mk-paper-alt)}
.hp .hp-ask-lede{margin:16px 0 0;font-size:16px;line-height:1.55;color:var(--mk-dim)}
.hp .hp-form{display:grid;gap:22px;margin-top:28px}
.hp .hp-topics{min-width:0;margin:0;padding:0;border:0}
.hp .hp-topics legend{margin-bottom:12px;padding:0;letter-spacing:.12em}
.hp .hp-chips{display:flex;flex-wrap:wrap;gap:8px}
.hp .hp-chip{position:relative;display:inline-flex}
.hp .hp-chip input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.hp .hp-chip span{display:inline-flex;align-items:center;height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--mk-ink);color:var(--mk-ink);font:500 15px/1 var(--hp-display);cursor:pointer}
.hp .hp-chip input:checked+span{background:var(--mk-ink);color:var(--mk-paper)}
.hp .hp-chip input:focus-visible+span{outline:3px solid var(--mk-flood-deep);outline-offset:3px}
.hp .hp-f{display:grid;gap:2px}
.hp .hp-f-label{font:500 12px/1.3 var(--hp-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mk-dim)}
.hp .hp-req{color:var(--mk-strong)}
.hp .hp-f input,.hp .hp-f textarea{width:100%;height:48px;margin:0;padding:0 2px;border:0;border-bottom:1.5px solid var(--mk-ink);border-radius:0;background:transparent;color:var(--mk-ink);font:500 19px/1.3 var(--hp-display);letter-spacing:-.02em}
.hp .hp-f textarea{height:auto;padding:10px 2px;line-height:1.45;resize:vertical}
.hp .hp-f input:focus,.hp .hp-f textarea:focus{border-bottom-color:var(--mk-flood-deep);box-shadow:0 3px 0 0 rgba(var(--mk-flood-rgb),.5)}
.hp .mk-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.hp .hp-submit{width:100%;margin-top:4px}
.hp .hp-form-error{display:grid;gap:4px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--mk-ink);background:var(--hp-white);font-size:15px;line-height:1.5}
.hp .hp-form-error a{color:var(--mk-strong)}
.hp .hp-sent{display:grid;gap:12px;margin-top:28px;padding:28px;border-radius:24px;background:var(--mk-paper);outline:none}
.hp .hp-sent h3{margin:0;font:600 32px/1 var(--hp-display);letter-spacing:-.04em}
.hp .hp-sent p:not(.hp-mono){font-size:17px;line-height:1.55;color:var(--mk-dim)}
.hp .hp-textbtn{justify-self:start;min-height:44px;padding:0;border:0;background:none;color:var(--mk-strong);font:500 16px/1 var(--hp-display);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (min-width:1100px){
  .hp .hp-ask{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:96px}
  .hp .hp-ask-lede{margin-top:26px;max-width:34ch;font-size:19px}
  .hp .hp-form{gap:26px;margin-top:0}
  .hp .hp-chip span{padding:0 18px;font-size:16px}
  .hp .hp-f{gap:4px}
  .hp .hp-f input{height:52px;font-size:21px}
  .hp .hp-f textarea{padding:12px 2px;font-size:21px}
  .hp .hp-submit{justify-self:start;width:auto;height:62px;margin-top:0;padding:0 34px}
  .hp .hp-sent{margin-top:0}
}

/* footer */
.hp .hp-foot{display:grid;gap:18px;padding:36px var(--hp-gut) 120px;background:var(--mk-ink);color:var(--mk-paper)}
.hp .hp-foot .hp-brand{color:var(--mk-paper)}
.hp .hp-foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;font-size:15px}
.hp .hp-foot-links a{display:flex;align-items:center;min-height:44px;color:var(--mk-on-flood-soft)}
.hp .hp-foot-links small{font-size:13px;color:var(--mk-dim-ink)}
@media (min-width:1100px){
  .hp .hp-foot{display:flex;align-items:center;justify-content:space-between;padding-top:48px;padding-bottom:48px}
  .hp .hp-foot-links{gap:0 32px;font-size:16px}
}

/* ---------- sticky "Try it free": header on desktop, bar on phones ---------- */
.hp .hp-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--brand)}
.hp .hp-sticky{display:none}
@media (min-width:1100px){
  .hp .hp-sticky{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 var(--hp-gut);border-bottom:1px solid var(--mk-line);background:rgba(var(--mk-paper-rgb),.96);box-shadow:var(--hp-shadow-head);transform:translateY(-100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
  .hp .hp-sticky.is-on{transform:none;visibility:visible;transition:transform .25s ease}
}
.hp .hp-sticky-right{display:flex;align-items:center;gap:16px}
.hp .hp-sticky-name{display:flex;align-items:center;gap:8px;max-width:220px;font:600 15px/1.2 var(--hp-display);letter-spacing:-.01em}
.hp .hp-sticky-name span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hp .hp-sticky .hp-btn{height:48px;padding:0 24px;font-size:16px}
.hp .hp-bar{position:fixed;left:max(12px,calc((100% - 616px) / 2));right:max(12px,calc((100% - 616px) / 2));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;gap:12px;height:64px;padding:0 6px 0 20px;border-radius:999px;background:var(--mk-ink);color:var(--mk-paper);box-shadow:var(--hp-shadow-bar);transform:translateY(calc(100% + 24px));visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.hp .hp-bar.is-on{transform:none;visibility:visible;transition:transform .25s ease}
.hp .hp-bar .hp-dot{width:14px;height:14px}
.hp .hp-bar-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 16px/1.2 var(--hp-display);letter-spacing:-.01em}
.hp .hp-bar .hp-btn{height:52px;padding:0 22px;font-size:17px}
@media (min-width:1100px){.hp .hp-bar{display:none}}

@media (prefers-reduced-motion:reduce){
  .hp *,.hp *::before,.hp *::after{transition:none!important;animation:none!important}
}