/* Landing pages (free-match.html, for/*.html): one offer each, built to be read on a phone and acted on.
   No motion script loads here, so everything is visible on first paint; the only moving part is a hover.
   Pictures: the illustrations are labelled as illustrations, the app pictures are the app's own. */

/* hero: the promise, one button, three reassurances, and the picture */
.lhero{position:relative;padding:clamp(28px,5vw,72px) 0 clamp(40px,6vw,88px);border-bottom:1px solid var(--rule);overflow:hidden}
.lhero::before{content:"";position:absolute;inset:auto -10% -55% auto;width:min(760px,90vw);aspect-ratio:1;border:1.5px solid var(--rule);border-radius:50%;pointer-events:none}
.lhero-grid{position:relative;display:grid;grid-template-columns:minmax(0,13fr) minmax(0,11fr);gap:clamp(28px,5vw,72px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:22px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.lhero h1{font-size:clamp(40px,4.9vw,68px);line-height:.98;letter-spacing:-.04em;font-weight:750;margin-bottom:22px;text-wrap:balance}
.mark{background:linear-gradient(transparent 68%,rgba(194,64,111,.28) 68%,rgba(194,64,111,.28) 92%,transparent 92%);padding:0 .04em}
.lhero .lead{max-width:52ch;margin-bottom:30px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.btn-lg{min-height:54px;padding:0 26px;font-size:17px;border-radius:8px}
.btn-lg .i{width:18px;height:18px;transition:transform .2s var(--ease)}
.btn-lg:hover .i{transform:translateX(3px)}
.textlink{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:4px}
.textlink:hover{text-decoration-color:var(--accent);color:var(--accent-ink)}
.assure{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:14.5px;color:var(--ink-2)}
.assure li{display:flex;align-items:center;gap:8px}
.assure li::before{content:"";width:10px;height:5.5px;border-left:1.6px solid var(--ok);border-bottom:1.6px solid var(--ok);transform:rotate(-45deg) translateY(-2px)}

.lfig{position:relative;margin:0}
.lfig img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;border:1px solid var(--rule-2);background:var(--paper-2)}
.lfig figcaption{margin-top:10px}
.lfig.bare img{border:0;border-radius:0;background:none;transform:scale(1.12)}   /* a picture drawn on white paper needs no frame */
.tag-float{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ink);border-radius:6px;padding:9px 12px;font:500 12.5px/1 var(--mono);letter-spacing:.02em;color:var(--ink);box-shadow:0 14px 30px -18px rgba(13,15,18,.45)}
.tag-float::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.tag-float.a{left:-14px;top:12%}
.tag-float.b{right:-12px;top:58%}
.tag-float.b::before{background:var(--team-a)}
.tag-float.c{left:8%;bottom:-16px}
.tag-float.c::before{background:var(--team-b)}

@media (max-width:900px){
  .lhero-grid{grid-template-columns:1fr}
  .tag-float.a{left:10px}.tag-float.b{right:10px}
}
@media (max-width:560px){
  .lhero h1{font-size:clamp(36px,10.5vw,48px)}
  .cta-row .btn-lg{width:100%}
  .cta-row{gap:14px}
  .tag-float{font-size:11.5px;padding:7px 9px}
  .tag-float.b{display:none}
}

/* a strip of the app's own pictures: three across, a swipeable row on a phone */
.lshots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lshot{display:grid;gap:12px;align-content:start;margin:0}
.lshot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:10px;border:1px solid var(--rule-2);background:var(--paper-2)}
.lshot h3{font-size:18px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.lshot p{font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:860px){
  .lshots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;scrollbar-width:none}
  .lshots::-webkit-scrollbar{display:none}
  .lshot{flex:0 0 78%;scroll-snap-align:start}
}
.swipe{display:none;margin-top:10px}
@media (max-width:860px){.swipe{display:block}}

/* rows: an illustration and what it means for you */
.lrows{display:grid;gap:clamp(36px,5vw,64px)}
.lrow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.lrow:nth-child(even) .lrow-pic{order:2}
.lrow-pic{width:100%;max-width:340px;aspect-ratio:1;margin:0 auto;border-radius:50%;background:var(--paper-2);overflow:hidden}
.lrow-pic img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:multiply}   /* the white paper takes the circle's grey */
.lrow-pic.photo img{mix-blend-mode:normal}   /* a photograph keeps its own colours */
.lrow h3{font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:-.025em;font-weight:700;margin-bottom:12px}
.lrow p{color:var(--ink-2);max-width:56ch}
.lrow .ticks{margin-top:14px}
.lrow .textlink{display:inline-block;margin-top:14px;font-size:15px}
@media (max-width:760px){
  .lrow{grid-template-columns:1fr;gap:18px}
  .lrow:nth-child(even) .lrow-pic{order:0}
  .lrow-pic{max-width:200px;margin:0 auto}
}

/* three steps, numbered */
.lsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);counter-reset:ls}
.lsteps li{counter-increment:ls;padding:26px 28px 6px 0;display:grid;gap:10px;align-content:start}
.lsteps li+li{padding-left:28px;border-left:1px solid var(--rule)}
.lsteps li::before{content:counter(ls,decimal-leading-zero);font:500 40px/1 var(--mono);letter-spacing:-.04em;color:var(--accent)}
.lsteps h3{font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.lsteps p{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:760px){.lsteps{grid-template-columns:1fr}.lsteps li,.lsteps li+li{padding:22px 0;border-left:0;border-bottom:1px solid var(--rule)}}

/* a week, Saturday to Thursday */
.week{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.week li{position:relative;padding:34px 22px 0 0;display:grid;gap:8px;align-content:start}
.week li::before{content:"";position:absolute;left:0;right:0;top:9px;height:1.5px;background:var(--ink)}
.week li::after{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.week li.hi::after{background:var(--accent);border-color:var(--accent)}
.week .day{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.week h3{font-size:19px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.week p{font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:760px){
  .week{grid-template-columns:1fr}
  .week li{padding:0 0 26px 34px}
  .week li::before{left:6px;right:auto;top:14px;bottom:0;width:1.5px;height:auto}
  .week li:last-child::before{display:none}
  .week li::after{top:2px}
}

/* who starts how: two offers side by side */
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.offer{display:grid;gap:12px;align-content:start;padding:clamp(22px,3vw,32px);border:1px solid var(--rule-2);border-radius:var(--r);background:var(--paper)}
.offer.main{border-color:var(--ink);box-shadow:0 22px 44px -34px rgba(13,15,18,.5)}
.offer h3{font-size:22px;font-weight:700;letter-spacing:-.015em}
.offer .big{font-size:clamp(28px,3vw,36px);font-weight:750;letter-spacing:-.03em;line-height:1.05}
.offer .btn{justify-self:start;margin-top:6px}
@media (max-width:760px){.offers{grid-template-columns:1fr}.offer .btn{justify-self:stretch}}

/* a dark band in the middle of the page: one sentence worth stopping on */
.quote-band{background:var(--night);color:var(--night-ink);padding:clamp(56px,8vw,112px) 0}
.quote-band p.big{font-size:clamp(28px,3.8vw,50px);line-height:1.1;letter-spacing:-.03em;font-weight:700;max-width:22ch;text-wrap:balance}
.quote-band .mark{background:linear-gradient(transparent 70%,rgba(194,64,111,.6) 70%,rgba(194,64,111,.6) 92%,transparent 92%)}
.quote-band .small{color:var(--night-ink-2);margin-top:20px;max-width:60ch}

/* a phone keeps the offer one tap away */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:10px;align-items:center;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);border-top:1px solid var(--rule-2)}
  .mbar .btn{flex:1;min-height:48px}
  .mbar{transition:transform .25s var(--ease)}
  .mbar.hide{transform:translateY(110%)}
  .lhero .crumbs{display:none}
  body.has-mbar{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* coming soon (club-kit.html, app.html): one email box and a button where the sign-up button would be */
.soon-note{margin:-14px 0 24px;font-size:15.5px;color:var(--ink-2)}
.soon-note b{color:var(--accent-ink)}
.notify-wrap{display:block;width:100%;max-width:560px}
.notify{display:grid;gap:10px}
.notify-row{display:flex;flex-wrap:wrap;gap:10px}
.notify input:not([type="hidden"]){flex:1 1 220px;min-width:0;min-height:54px;padding:0 16px;border:1px solid var(--rule-2);border-radius:8px;
  font:400 16px/1.4 var(--text);color:var(--ink);background:var(--paper)}
.notify input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--ink)}
.notify .btn:disabled{opacity:.6;cursor:progress}
.notify .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.notify .err{font-size:14.5px;color:#b42318}
.notify-sent{padding:16px 18px;border:1px solid var(--rule-2);border-radius:8px;background:var(--paper-2);font-size:15.5px;line-height:1.45}
.notify-sent b{color:var(--ink)}
.on-dark .notify input:not([type="hidden"]){border-color:rgba(255,255,255,.35)}
.on-dark .notify .err{color:#ffb4ab}
.on-dark .notify-sent{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.on-dark .notify-sent b{color:#fff}
@media (max-width:560px){.notify-row .btn{width:100%}}

/* ---- demo / samples / ask-your-match (2026-11-05) ---- */
.lfig.lshotfig img{aspect-ratio:auto;object-fit:contain;box-shadow:0 18px 50px -24px rgba(11,20,38,.45)}
.lfig.lshotfig figcaption{font-size:13px}
.lfiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;list-style:none;margin:0;padding:0}
.lfile{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--rule-2);border-radius:14px;background:var(--paper)}
.lfile h3{margin:0}
.lfile p{margin:0;flex:1}
.lfile .btn{align-self:flex-start}
.lfile .lmeta{font-size:13px;color:var(--ink-3)}
.lasks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.lasks li{padding:16px 18px;border:1px solid var(--rule-2);border-radius:12px;background:var(--paper);font-weight:550}
.lasks li span{display:block;font-weight:400;font-size:14px;color:var(--ink-3);margin-top:6px}
.lhero .ask{max-width:560px;margin-left:auto}