/* OwnBrand Fitness · site v2 shared layer (round 2, 30 Sep 2026).
   Every v2 page except the homepage loads styles.css, then this file, then its own page CSS.
   Class names and values are home.css's (hp-*), so the homepage and these pages are one set.
   home.css still carries its own copy of the shared blocks; see README "Later: one stylesheet".
   Scope: <main class="marketing hp" data-palette="blue">. Colours come from the --mk-* tokens in
   styles.css. No --brand here: the homepage and the preview set their own. No image URLs, no inline styles. */

.hp{
  --hp-gut:max(20px,calc((100% - 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-off:rgba(var(--mk-ink-rgb),.12);
  --hp-shadow-phone:0 30px 60px -24px rgba(var(--mk-ink-rgb),.45);
  --hp-shadow-lift:0 40px 80px -24px rgba(var(--mk-ink-rgb),.45);
  --hp-shadow-bar:0 16px 40px rgba(var(--mk-ink-rgb),.35);
  --hp-glow:0 0 0 4px rgba(var(--mk-flood-rgb),.4);
  --hp-ring:0 0 0 3px var(--mk-paper),0 0 0 5.5px var(--mk-ink);
}
@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 :is(h1,h2,h3) em{font-size:1.08em}
.hp .hp-on-ink em{color:var(--mk-on-flood-soft)}
.hp :is(p,li){text-wrap:pretty}
.hp :where(p,li,dd) a{color:var(--mk-strong);text-underline-offset:3px}
.hp :where(p,li,dd) a:hover{color:var(--mk-ink)}
.hp .hp-on-ink :where(p,li,dd) a{color:var(--mk-on-flood-soft)}
.hp .hp-on-ink :where(p,li,dd) a:hover{color:var(--mk-paper)}
.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-mono-paper{color:var(--mk-paper)}
.hp .hp-h1{margin:10px 0 0;font:600 42px/.94 var(--hp-display);letter-spacing:-.055em;text-wrap:balance}
.hp .hp-h1 em{white-space:nowrap}
.hp .hp-h2{margin:0;font:600 40px/.95 var(--hp-display);letter-spacing:-.05em}
.hp .hp-lede{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--mk-dim)}
@media (min-width:1100px){
  .hp .hp-mono{font-size:12px}
  .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-h2{font-size:72px}
  .hp .hp-lede{margin-top:28px;max-width:46ch;font-size:20px}
}

/* ---------- buttons: primary, secondary (line), quiet ----------
   .mk-btn / .mk-btn-blue / .mk-btn-outline are aliases, so older markup inside a v2 page
   (the preview's dialogs and offer block) gets the same buttons without new class names. */
.hp .hp-btn,.hp .mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;min-height:0;padding:0 28px;border:0;border-radius:999px;font:600 18px/1 var(--hp-display);letter-spacing:-.01em;text-align:center;text-decoration:none;cursor:pointer;transform:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.hp :is(a,button):is(.hp-btn-blue,.mk-btn-blue){background:var(--mk-flood);color:var(--mk-on-flood)}
.hp :is(a,button):is(.hp-btn-blue,.mk-btn-blue):hover{background:var(--mk-flood-deep);transform:none}
.hp :is(a,button):is(.hp-btn-line,.mk-btn-outline){border:1.5px solid var(--mk-ink);background:transparent;color:var(--mk-ink)}
.hp :is(a,button):is(.hp-btn-line,.mk-btn-outline):hover{background:var(--mk-ink);color:var(--mk-paper)}
.hp .hp-on-ink :is(a,button):is(.hp-btn-line,.mk-btn-outline){border-color:var(--mk-paper);color:var(--mk-paper)}
.hp .hp-on-ink :is(a,button):is(.hp-btn-line,.mk-btn-outline):hover{background:var(--mk-paper);color:var(--mk-ink)}
.hp button:is(.hp-btn,.mk-btn):disabled{border-color:transparent;background:var(--hp-off);color:var(--mk-dim);cursor:not-allowed}
.hp .hp-quiet{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--mk-strong);font:500 16px/1.2 var(--hp-display);letter-spacing:-.01em;text-decoration:none;cursor:pointer}
.hp .hp-quiet:hover{color:var(--mk-strong);text-decoration:underline;text-underline-offset:4px}
.hp .hp-on-ink .hp-quiet,.hp .hp-on-ink .hp-quiet:hover{color:var(--mk-on-flood-soft)}
@media (min-width:1100px){
  .hp .hp-btn,.hp .mk-btn{height:60px;padding:0 32px}
  .hp .hp-quiet{font-size:17px}
}

/* ---------- header (same as the homepage; the current page is underlined) ---------- */
.hp .hp-head{display:flex;align-items:center;justify-content:space-between;gap:20px;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 a[aria-current="page"]{color:var(--mk-ink);text-decoration:underline;text-decoration-color:var(--mk-flood);text-decoration-thickness:2px;text-underline-offset:7px}
.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 a[aria-current="page"]{color:var(--mk-ink);text-underline-offset:8px}
  .hp .hp-nav .hp-nav-extra{display:flex}
}

/* ---------- page head and sections ---------- */
.hp .hp-page-head{padding:28px var(--hp-gut)}
.hp .hp-sec{padding:64px var(--hp-gut)}
@media (min-width:1100px){
  .hp .hp-page-head{padding:88px var(--hp-gut) 56px}
  .hp .hp-sec{padding-top:104px;padding-bottom:104px}
}

/* ---------- surfaces ---------- */
.hp .hp-sand{padding:20px;border-radius:24px;background:var(--mk-paper-alt)}
.hp .hp-ink{padding:32px 22px;border-radius:28px;background:var(--mk-ink);color:var(--mk-paper)}
.hp .hp-panel{padding:22px 16px;border-radius:22px;background:var(--mk-paper);color:var(--mk-ink)}
@media (min-width:1100px){
  .hp .hp-sand{padding:28px;border-radius:28px}
  .hp .hp-ink{padding:56px;border-radius:40px}
  .hp .hp-panel{padding:40px 36px;border-radius:30px}
}

/* ---------- fields ---------- */
.hp .hp-label{display:block;margin:0 0 8px;font:500 11px/1.3 var(--hp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mk-dim)}
.hp .hp-inputwrap{position:relative}
.hp .hp-input{display:block;width:100%;height:56px;min-height:0;margin:0;padding:0 16px;border:1.5px solid var(--mk-ink);border-radius:14px;background:var(--hp-white);color:var(--mk-ink);font:500 18px/1 var(--hp-display);letter-spacing:-.02em;outline:none;box-shadow:none;transition:box-shadow .15s ease}
.hp .hp-input::placeholder{color:var(--mk-dim);opacity:1}
.hp .hp-input:focus{border-color:var(--mk-ink);box-shadow:var(--hp-glow)}
.hp .hp-input[readonly]{padding-right:52px;border-color:transparent;background:var(--mk-paper-alt)}
.hp .hp-lock{position:absolute;top:50%;right:18px;display:none;width:20px;height:20px;margin-top:-10px;fill:none;stroke:var(--mk-dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hp .hp-input[readonly]+.hp-lock{display:block}
.hp .hp-help{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--mk-dim)}
.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-f :is(input,textarea){width:100%;height:48px;min-height:0;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;outline:none;box-shadow:none}
.hp .hp-f textarea{height:auto;padding:10px 2px;line-height:1.45;resize:vertical}
.hp .hp-f :is(input,textarea):focus{border-bottom-color:var(--mk-flood-deep);box-shadow:0 3px 0 0 rgba(var(--mk-flood-rgb),.5)}
@media (min-width:1100px){
  .hp .hp-label{margin-bottom:10px;font-size:12px}
  .hp .hp-input{height:64px;padding:0 20px;font-size:20px}
  .hp .hp-input[readonly]{padding-right:52px}
  .hp .hp-help{font-size:15px}
  .hp .hp-f{gap:4px}
  .hp .hp-f input{height:52px;font-size:21px}
  .hp .hp-f textarea{padding:12px 2px;font-size:21px}
}

/* ---------- choices: radio chips, the tick (a checkbox in a chip), the tick row ---------- */
.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-tick{position:relative;display:inline-flex;align-items:center;align-self:flex-start;gap:10px;min-height:48px;margin:0;padding:0 18px 0 12px;border:1.5px solid var(--mk-ink);border-radius:999px;color:var(--mk-ink);font:500 15.5px/1.25 var(--hp-display);letter-spacing:-.01em;text-transform:none;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.hp .hp-tick input{position:absolute;top:0;left:0;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0;opacity:0}
.hp .hp-tick-box{position:relative;flex:none;width:24px;height:24px;border:1.5px solid var(--mk-ink);border-radius:7px;background:var(--hp-white)}
.hp .hp-tick-box::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--mk-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0}
.hp .hp-tick-text{white-space:nowrap}
.hp .hp-tick a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hp .hp-tick:has(input:checked){background:var(--mk-ink);color:var(--mk-paper)}
.hp .hp-tick input:checked+.hp-tick-box{border-color:var(--mk-paper);background:var(--mk-paper)}
.hp .hp-tick input:checked+.hp-tick-box::after{opacity:1}
.hp .hp-tick:has(input:focus-visible){outline:3px solid var(--mk-flood-deep);outline-offset:3px}
/* long consent sentences: the same box, beside the text rather than inside a pill */
.hp .hp-tick.hp-tick-row{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:12px;min-height:44px;padding:10px 0;border:0;border-radius:0;background:none;color:var(--mk-ink);font:400 15px/1.5 var(--font-body),system-ui,sans-serif;letter-spacing:-.005em}
.hp .hp-tick.hp-tick-row:has(input:checked){background:none;color:var(--mk-ink)}
.hp .hp-tick-row input:checked+.hp-tick-box{border-color:var(--mk-ink);background:var(--mk-ink)}
.hp .hp-tick-row .hp-tick-box::after{border-color:var(--mk-paper)}
@media (min-width:1100px){.hp .hp-chip span{padding:0 18px;font-size:16px}.hp .hp-tick{padding-right:20px;font-size:16px}}

/* ---------- collapsible: the + is summary::after, so every summary stays plain text ---------- */
.hp .hp-qs{border-top:1px solid var(--mk-line)}
.hp .hp-q{border-bottom:1px solid var(--mk-line)}
.hp .hp-q>summary{position:relative;display:flex;align-items:center;min-height:44px;padding:14px 56px 14px 0;list-style:none;cursor:pointer;font:600 19px/1.25 var(--hp-display);letter-spacing:-.025em}
.hp .hp-q>summary::-webkit-details-marker{display:none}
.hp .hp-q>summary::after{content:"+";position:absolute;top:50%;right:0;display:grid;place-items:center;width:36px;height:36px;margin-top:-18px;border:1.5px solid var(--mk-ink);border-radius:50%;font:400 20px/1 var(--hp-display);transition:transform .2s ease}
.hp .hp-q[open]>summary::after{transform:rotate(45deg)}
.hp .hp-q>:not(summary){margin:0 0 12px;max-width:60ch;font-size:16px;line-height:1.6;color:var(--mk-dim)}
.hp .hp-q>:last-child{margin-bottom:20px}
.hp .hp-q ul{display:grid;gap:8px;padding-left:20px}
@media (min-width:1100px){
  .hp .hp-q>summary{padding:24px 68px 24px 0;font-size:26px;line-height:1.2;letter-spacing:-.035em}
  .hp .hp-q>summary::after{width:44px;height:44px;margin-top:-22px;font-size:24px}
  .hp .hp-q>:not(summary){margin-bottom:14px;font-size:18px}
  .hp .hp-q>:last-child{margin-bottom:28px}
}

/* ---------- status lines: one line, a 22px disc drawn in CSS, the words carry the meaning ----------
   Tone by class (hp-status-ok / -err / -muted) or by data-tone="ok|err|muted" set from script.
   No tone reads as muted. */
.hp .hp-status{position:relative;margin:0;padding-left:34px;font-size:15px;line-height:1.5;color:var(--mk-ink)}
.hp .hp-status::before{content:"";position:absolute;top:0;left:0;width:22px;height:22px;box-sizing:border-box;border:1.5px solid var(--mk-dim);border-radius:50%;font:700 13px/19px var(--hp-display);text-align:center}
.hp .hp-status:is(.hp-status-ok,[data-tone="ok"])::before{border:0;background:var(--mk-flood)}
.hp .hp-status:is(.hp-status-ok,[data-tone="ok"])::after{content:"";position:absolute;top:5px;left:8px;width:5px;height:10px;border:solid var(--mk-on-flood);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.hp .hp-status:is(.hp-status-err,[data-tone="err"])::before{content:"!";border:0;background:var(--mk-ink);color:var(--mk-paper);line-height:22px}
.hp .hp-status:is(.hp-status-muted,[data-tone="muted"]){color:var(--mk-dim)}
.hp .hp-on-ink .hp-status{color:var(--mk-paper)}
.hp .hp-on-ink .hp-status::before{border-color:var(--mk-dim-ink)}
.hp .hp-on-ink .hp-status:is(.hp-status-ok,[data-tone="ok"])::before{background:var(--mk-on-flood-soft)}
.hp .hp-on-ink .hp-status:is(.hp-status-err,[data-tone="err"])::before{background:var(--mk-paper);color:var(--mk-ink)}
@media (min-width:1100px){.hp .hp-status{font-size:16px;line-height:1.45}}

/* ---------- one phone frame, one shadow ----------
   Padding 3% of the frame's width, corners 16.5%, screen corners = corners minus padding.
   In use: 216 wide 6/36/30 · 244 wide 7/40/33 · 320 wide 10/53/43 (the preview's live phone). */
.hp .hp-frame{padding:7px;border-radius:40px;background:var(--hp-bezel);box-shadow:var(--hp-shadow-phone)}
.hp .hp-frame :is(img,video){display:block;width:100%;height:auto;aspect-ratio:1206/2622;object-fit:cover;object-position:top;border-radius:33px}

/* ---------- Dark | Light ---------- */
.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}
.hp .hp-seg button{margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--mk-ink);box-shadow:inset 0 0 0 3px var(--hp-seg-gap,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)}
@media (min-width:1100px){.hp .hp-seg{width:180px}.hp .hp-seg button{box-shadow:inset 0 0 0 4px var(--hp-seg-gap,var(--mk-paper));font-size:12px}}

/* ---------- footer (the homepage's, without the room its sticky bar needs) ---------- */
.hp .hp-foot{display:grid;gap:18px;padding:36px var(--hp-gut) calc(44px + env(safe-area-inset-bottom,0px));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 a:hover{color:var(--mk-paper)}
.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:48px var(--hp-gut)}
  .hp .hp-foot-links{gap:0 32px;font-size:16px}
}

/* ---------- live-price slots, as on the homepage ---------- */
.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 .hp-on-ink [data-offer]:empty{background:rgba(var(--mk-paper-rgb),.18)}

/* ---------- fade-up: CSS scroll-driven, so no script; where a browser can't, the block is simply there ---------- */
@keyframes hp-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hp .hp-rise{animation:hp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}

/* ---------- small pages: /terms and /privacy (the "In short" box), /404 ---------- */
.hp.mk-legal{min-height:0}
.hp .mk-legal-back{display:none}
.hp .mk-legal-main{width:auto;margin:0;padding:32px var(--hp-gut) 64px}
.hp .mk-legal-main>*{max-width:720px}
.hp .mk-legal-main h1{margin:12px 0 20px;font:600 40px/.96 var(--hp-display);letter-spacing:-.05em;text-wrap:balance}
.hp .mk-legal-main h2{margin:40px 0 12px;font:600 21px/1.2 var(--hp-display);letter-spacing:-.03em}
.hp .mk-legal-main :is(p,li){font-size:16px;line-height:1.65;color:var(--mk-nav-link)}
.hp .mk-legal-main .mk-legal-date{font:500 11px/1.4 var(--hp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mk-dim)}
.hp .mk-legal-main aside{margin:28px 0 12px;padding:22px 20px 20px;border-radius:24px;background:var(--mk-paper-alt)}
.hp .mk-legal-main aside h2{margin:0 0 14px;font:500 11px/1.3 var(--hp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mk-strong)}
.hp .mk-legal-main aside ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.hp .mk-legal-main aside li{position:relative;padding-left:22px;color:var(--mk-ink)}
.hp .mk-legal-main aside li::before{content:"";position:absolute;top:.62em;left:2px;width:7px;height:7px;border-radius:50%;background:var(--mk-flood)}
.hp .mk-legal-main aside p{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--hp-line-2);font-size:14px;line-height:1.55;color:var(--mk-dim)}
.hp .hp-404{padding:48px var(--hp-gut) 104px}
.hp .hp-404 p:not(.hp-mono){margin:18px 0 0;max-width:40ch;font-size:18px;line-height:1.5;color:var(--mk-dim)}
@media (min-width:1100px){
  .hp .mk-legal-main{padding:72px var(--hp-gut) 104px}
  .hp .mk-legal-main h1{margin:16px 0 28px;font-size:64px;line-height:.94}
  .hp .mk-legal-main h2{margin-top:48px;font-size:28px}
  .hp .mk-legal-main :is(p,li){font-size:17px}
  .hp .mk-legal-main .mk-legal-date{font-size:12px}
  .hp .mk-legal-main aside{margin:36px 0 16px;padding:32px 36px 30px;border-radius:28px}
  .hp .mk-legal-main aside h2{font-size:12px}
  .hp .hp-404{padding:120px var(--hp-gut) 160px}
  .hp .hp-404 p:not(.hp-mono){margin-top:28px;font-size:21px}
}

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