/* Looks: the same site designed for a kind of visitor. w = made for women, the default. a = the site as it was written first (nothing here touches it).
   o = made for people 55 and over. m = made for men.
   js/looks.js decides the look in the <head> and writes it on <html data-look>; it is drawn on the home page, the Wearable page and the Buy page.
   w and o are light pages and also carry <html data-lt>: every rule the two share is written against that. m keeps the site's dark page and has its own rules at the end.
   Why each choice was made, with its source, is in brand/LANDING-LOG.md (Nov 10 2026, "Looks"). In short:
   w  warm cream, sage and peach, never pink and never labelled for women; a real woman in ordinary light; words about noticing and choosing, not willpower;
      the 60 nights by the button; no before-and-after of bitten nails.
   m  the dark page; the wearable itself as the opening picture; short lines about control; ship date and "no subscription" by the button; a strip of four facts,
      three numbered steps, a table against the other fixes, and "Nobody knows it's on."; no scrolling scene. Never says who it is for.
   o  dark text on a light page at 7:1 or better, 19px body, 48px or more for anything tapped, buttons 60px tall, nothing that moves by itself,
      no hidden menu on a phone, how it works as four numbered still steps, plain words, returns and a way to reach us by the first button. Never says who it is for. */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif.woff2?v=1) format('woff2'); }

/* What only a look shows is written into the page with display:none, so a missing stylesheet can never show it to everyone. */
html[data-look="w"] .lk[data-for~="w"], html[data-look="o"] .lk[data-for~="o"], html[data-look="m"] .lk[data-for~="m"] { display: block !important; }
html[data-look="o"] span.lk[data-for~="o"] { display: inline !important; }
html[data-look="o"] p.lk-made[data-for~="o"] { margin-top: 2px; font-size: 16.5px; color: var(--soft); }
.foot-end { display: grid; gap: 8px; }
.made { font-size: 14px; color: var(--soft); }
.made i, .lk-made i { font-style: normal; color: var(--ember, #ff5b2e); }

/* ---------- both looks: a light page ---------- */
html[data-lt] {
  --ink: var(--lk-bg); --panel: var(--lk-panel); --panel2: var(--lk-panel2); --line: var(--lk-line); --bone: var(--lk-text); --soft: var(--lk-soft); --mute: var(--lk-mute);
  --paper-ink: var(--lk-text); --steady: var(--lk-good); --btn-bg: var(--lk-text); --btn-fg: var(--lk-bg);
  color-scheme: light;
}
/* Parts drawn for a dark ground keep it, exactly as designed: their tokens are set back here, so nothing inside them changes. */
html[data-lt] :is(.foot, .drawer, .offer, .consent, .lux, .nav.clear, .fullbig, .overlay-card, .tile-f, .t-card, .od-teaser, .buybar, .subnav, .cap, .closer) {
  --ink: #0a0b0b; --panel: #141615; --panel2: #1c1e1d; --line: #2a2d2b; --bone: #f2efe8; --soft: #c9c8c2; --mute: #9da09a; --steady: #9fdcc0; --paper-ink: #151615; --btn-bg: #f2efe8; --btn-fg: #0a0b0b;
  color: var(--bone); color-scheme: dark;
}
html[data-lt] .btn, html[data-lt] .btn.dark { background: var(--btn-bg); color: var(--btn-fg); }
html[data-lt] .btn:hover, html[data-lt] .btn.dark:hover { background: var(--btn-bg); opacity: .86; }
html[data-lt] .btn.ghost { background: transparent; color: inherit; }
html[data-lt] .nav { background: color-mix(in srgb, var(--lk-bg) 88%, transparent); }
html[data-lt] .nav.clear { background: transparent; }
html[data-lt] .bone, html[data-lt] .ledger .l2 { background: var(--lk-alt); color: var(--bone); }
html[data-lt] .bone .sec-h p, html[data-lt] .bone .mute, html[data-lt] .bone .notes ol, html[data-lt] .notes.bone ol { color: var(--mute); }
html[data-lt] .zero { background: #f2efe8; color: #151615; }
html[data-lt] .arm { --arm-bg: #f2efe8; color: #151615; }
html[data-lt] .closer { background: var(--lk-deep); }
html[data-lt] .compare .handle, html[data-lt] .compare .handle::after { background: #fff; }
html[data-lt] .reel-nav button:hover { background: var(--bone); color: var(--ink); }
html[data-lt] .sw { box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
html[data-lt] .buzz-btn { color: #f2efe8; }
html[data-lt] .story, html[data-story="off"] .story { display: none; }
@media (min-width: 761px) {
  html[data-lt] .gal-dots button { background: rgba(0,0,0,.24); }
  html[data-lt] .gal-dots button.on { background: var(--bone); }
}
@media (max-width: 960px) { html[data-lt] .links { background: var(--lk-bg); } }

/* The opening: words on one side, one still photograph on the other; on a phone the words, the button and what comes with it, then the photograph. */
html[data-lt] .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 88px); align-items: center; min-height: 0; padding: clamp(28px, 4.2vw, 60px) var(--gut) clamp(36px, 5vw, 72px); background: var(--lk-hero); color: var(--bone); }
html[data-lt] .hero-img { position: static; order: 2; width: 100%; height: auto; aspect-ratio: 4 / 4.5; max-height: min(78svh, 780px); object-fit: cover; border-radius: var(--r); animation: none; transform: none !important; }
html[data-lt] .hero-copy { order: 1; max-width: 640px; padding-bottom: 0; }
html[data-lt] .hero .lede { max-width: 24em; }
.lk-sure { list-style: none; margin: 22px 0 0; padding: 0; gap: 6px 20px; flex-wrap: wrap; font-size: 15.5px; color: var(--soft); }
html[data-lt] .lk.lk-sure[data-for] { display: grid !important; }
@media (min-width: 961px) { html[data-look="w"] .lk.lk-sure[data-for] { display: flex !important; } }
.lk-sure li::before { content: ""; display: inline-block; width: 11px; height: 6px; margin: 0 8px 4px 2px; border-left: 2px solid var(--lk-good); border-bottom: 2px solid var(--lk-good); transform: rotate(-45deg); }
.lk-ask { margin-top: 14px; font-size: 17px; }
.lk-ask a, .lk-care-f a:not(.btn) { color: inherit; text-underline-offset: 3px; }
@media (max-width: 960px) {
  html[data-lt] .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 30px; }
  html[data-lt] .hero-img { aspect-ratio: 1 / 1.04; max-height: none; }
  html[data-lt] .hero-copy { padding-bottom: 0; }
  html[data-lt] .hero .btn { width: 100%; }
}

/* How it works, as still numbered steps. */
.lk-steps { padding: clamp(64px, 8vw, 120px) var(--gut); counter-reset: step; }
.lk-steps > h2 { text-align: center; margin-bottom: clamp(30px, 4vw, 56px); }
.lk-steps ol { list-style: none; margin: 0 auto; padding: 0; max-width: 1280px; gap: clamp(14px, 2vw, 28px); }
html[data-look="w"] .lk-steps ol[data-for~="w"] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-look="o"] .lk-steps ol[data-for~="o"] { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lk-steps li { counter-increment: step; }
.lk-steps li img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: var(--r); margin-bottom: 18px; }
.lk-steps li h3::before { content: counter(step); display: block; font: 400 15px/1 var(--body); color: var(--mute); margin-bottom: 10px; }
.lk-steps li h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.lk-steps li p { margin-top: 8px; color: var(--soft); max-width: 24em; }
.lk-steps > .btn { display: flex; width: max-content; margin: clamp(30px, 4vw, 52px) auto 0; }
@media (max-width: 960px) {
  html[data-look="w"] .lk-steps ol[data-for~="w"], html[data-look="o"] .lk-steps ol[data-for~="o"] { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lk-steps li img { aspect-ratio: 4 / 2.9; }
  .lk-steps > .btn { width: 100%; }
}

/* Choose your strap: the product as something worn, with no price on the home page. */
.lk-strap-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 18px); max-width: 1280px; margin: 0 auto; }
.lk-strap-row a { display: grid; justify-items: center; gap: 12px; padding: clamp(14px, 2vw, 28px) clamp(10px, 1.6vw, 24px) 22px; border-radius: var(--r); background: var(--lk-panel); text-decoration: none; transition: background .25s; }
.lk-strap-row a:hover { background: var(--lk-panel2); }
.lk-strap-row img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.lk-strap-row span { font: 500 17px/1.2 var(--body); }
@media (max-width: 760px) { .lk-strap-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* What comes with it, the questions people ask first, and a way to reach us, beside a button. */
.lk-care { background: var(--lk-alt); }
html[data-look="w"] .lk.lk-care[data-for], html[data-look="o"] .lk.lk-care[data-for] { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 5vw, 80px); align-items: start; }
.lk-care-h p { margin-top: 16px; color: var(--soft); font-size: clamp(18px, 1.5vw, 21px); max-width: 22em; }
.lk-care dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px clamp(20px, 3vw, 44px); }
.lk-care dt { font: 600 18px/1.3 var(--body); margin-bottom: 6px; }
.lk-care dd { margin: 0; color: var(--soft); }
.lk-care-f { grid-column: 1; grid-row: 2; display: grid; gap: 14px; justify-items: start; }
.lk-care dl { grid-row: 1 / span 2; grid-column: 2; }
.lk-care-f p { font-size: 16px; color: var(--soft); }
@media (max-width: 960px) {
  html[data-look="w"] .lk.lk-care[data-for], html[data-look="o"] .lk.lk-care[data-for] { grid-template-columns: minmax(0, 1fr); }
  .lk-care dl, .lk-care-f { grid-column: 1; grid-row: auto; }
  .lk-care dl { grid-template-columns: 1fr; }
  .lk-care-f .btn { width: 100%; }
}

/* The order of the home page is set per look, without moving anything in the page itself. */
html[data-lt] main#top { display: flex; flex-direction: column; }
html[data-lt] main#top > * { order: 20; }
html[data-lt] main#top > .hero { order: 0; }
html[data-lt] main#top > .notes { order: 30; }
html[data-lt] main#top > .closer { order: 29; }

/* On your wrist (/on-your-wrist) in a light look: the scene on a warm light ground, drawn in the page's ink, the words in its serif. */
html[data-lt] .od { --od-bg: var(--lk-od-bg); --od-ink: var(--lk-od-ink); --od-hot: var(--lk-od-hot); color: var(--lk-text); }
html[data-lt] .od-pin { background: radial-gradient(120% 90% at 78% 30%, var(--lk-od-glow) 0%, transparent 60%), var(--lk-od-bg); }
html[data-lt] .od-bin span { color: var(--lk-soft); }
html[data-lt] .ledger > div:first-child { background: var(--lk-panel); }
html[data-lt] .ledger .l2 { background: var(--lk-od-bg); }
html[data-lt] .pledges b { color: var(--lk-text); }
html[data-look="w"] :is(.od-text h1, .od-text h2) { font-size: clamp(38px, 4.4vw, 68px); line-height: 1.02; }

/* ============ w: made for women ============ */
html[data-look="w"] {
  --lk-bg: #f8f3eb; --lk-alt: #e6eadf; --lk-panel: #f0e9de; --lk-panel2: #e8dfd1; --lk-line: #d6ccbc; --lk-text: #1f2a24; --lk-soft: #445048; --lk-mute: #66716a; --lk-good: #2f6f55;
  --lk-od-bg: #f6e9de; --lk-od-ink: #2a2622; --lk-od-hot: #e2552b; --lk-od-glow: #f2cdb5;
  --lk-hero: #f1e6d8; --lk-deep: #1f2a24; --lk-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
}
/* Headings are set in a serif. :where() keeps these rules weak, so a part of the site with its own heading size (the cart, the Buy page's labels) keeps it. */
html[data-look="w"] :where(h1, h2, .lk-steps li h3, .facts b, .stats b) { font-family: var(--lk-serif); font-weight: 400; letter-spacing: -.012em; }
html[data-look="w"] :is(.hero h1, .lux-hero h1, .pg-hero h1) { font-size: clamp(54px, 7vw, 112px); line-height: .98; }
html[data-look="w"] :is(.say h2, .sec-h h2, .lk-steps > h2, .lk-care h2, .result-side h2, .buzzband h2, .od-teaser h2) { font-size: clamp(40px, 5vw, 76px); line-height: 1.02; }
html[data-look="w"] .lk-steps li h3 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.08; }
html[data-look="w"] .buy-c h2 { font-family: var(--body); font-weight: 600; letter-spacing: 0; }
html[data-look="w"] .buy-c h1 { font-size: 38px; line-height: 1.05; }
html[data-look="w"] .say { padding: clamp(80px, 11vw, 170px) var(--gut); }
html[data-look="w"] .buzzband { background: #f2d6c3; color: var(--lk-text); }
html[data-look="w"] .buzzband .fine { color: #5a3a2a; }
html[data-look="w"] .buzz-btn { background: var(--lk-text); }
html[data-look="w"] .pulse { box-shadow: 0 0 0 2px var(--lk-text); }
html[data-look="w"] #results, html[data-look="w"] .reel-nav { display: none; }   /* no bitten-nails before and after; the row of pictures scrolls by hand */
html[data-look="w"] main#top > .say { order: 1; }
html[data-look="w"] main#top > .lk-steps { order: 2; }
html[data-look="w"] main#top > .buzzband { order: 3; }
html[data-look="w"] main#top > .lk-straps { order: 4; }
html[data-look="w"] main#top > #triggers { order: 5; }
html[data-look="w"] main#top > #on-device { order: 6; }
html[data-look="w"] main#top > .reel { order: 7; }
html[data-look="w"] main#top > #habits { order: 8; }
html[data-look="w"] main#top > .lk-care { order: 9; }

/* ============ o: made for people 55 and over ============ */
html[data-look="o"] {
  --lk-bg: #fbfaf7; --lk-alt: #efede7; --lk-panel: #efede7; --lk-panel2: #e4e1d9; --lk-line: #8d9197; --lk-text: #111315; --lk-soft: #2f3438; --lk-mute: #474d53; --lk-good: #1b6446;
  --lk-od-bg: #f6f3ec; --lk-od-ink: #111315; --lk-od-hot: #c2410c; --lk-od-glow: #ebe4d6;
  --lk-hero: #efede7; --lk-deep: #111315; --btn-fg: #fff;
  scroll-behavior: auto;
}
html[data-look="o"] body { font-size: 19px; line-height: 1.55; }
html[data-look="o"] :where(h1, h2, h3) { font-weight: 600; letter-spacing: -.018em; }
html[data-look="o"] :is(.hero h1, .pg-hero h1) { font-size: clamp(40px, 5.2vw, 70px); line-height: 1.06; }
html[data-look="o"] :is(.say h2, .sec-h h2, .lk-steps > h2, .lk-care h2, .result-side h2, .buzzband h2, .od-teaser h2) { font-size: clamp(31px, 3.6vw, 50px); line-height: 1.1; }
html[data-look="o"] :is(.t-card h3, .faq summary) { font-size: 22px; line-height: 1.25; }
html[data-look="o"] .buy-c h2 { font-size: 20px; }
html[data-look="o"] .buy-c h1 { font-size: 34px; }
html[data-look="o"] .buy-c > .buy-price { font-size: 26px; font-weight: 600; }
html[data-look="o"] .lede { font-size: clamp(20px, 1.7vw, 23px); line-height: 1.45; }
html[data-look="o"] .fine, html[data-look="o"] .notes ol, html[data-look="o"] .facts span, html[data-look="o"] .t-card p, html[data-look="o"] .hours, html[data-look="o"] .lines li, html[data-look="o"] .t-float small,
html[data-look="o"] .ord-s, html[data-look="o"] .ord-ship, html[data-look="o"] .opt small, html[data-look="o"] .buy-c > .buy-sub, html[data-look="o"] .buy-c > p, html[data-look="o"] .foot-cols a, html[data-look="o"] .foot-cols h3, html[data-look="o"] .lk-care-f p, html[data-look="o"] .lk-sure { font-size: 16.5px; }
html[data-look="o"] :is(.sec-h p, .result-side > p, .faq p, .faq summary, .three p, .opt, .order, .strap-note, .ico-list li, .spec li, .specs-in, .tile p, .cards-2 .txt) { font-size: 18px; }
html[data-look="o"] .buzzband .fine { color: #0a0b0b; font-size: 17px; }
html[data-look="o"] .buzz-copy p { font-size: 20px; }
html[data-look="o"] a:not(.btn):not(.logo):not(.habit-card):not(.fin):not(.cart-btn) { text-underline-offset: 3px; }
html[data-look="o"] .lk-ask a, html[data-look="o"] .lk-care-f a:not(.btn) { display: inline-block; padding: 12px 0; font-weight: 600; }
/* Anything tapped is at least 48px, and the main button is 60px and as wide as the phone. */
html[data-look="o"] .btn { min-height: 60px; padding: 0 32px; font-size: 19px; }
html[data-look="o"] .btn.small { min-height: 48px; padding: 0 22px; font-size: 17px; }
html[data-look="o"] .cart-btn, html[data-look="o"] .gal-ar, html[data-look="o"] .x { width: 48px; height: 48px; }
html[data-look="o"] .sw { width: 48px; height: 48px; }
html[data-look="o"] .opt { min-height: 60px; }
html[data-look="o"] .foot-cols a { padding: 11px 0; }
html[data-look="o"] .links { font-size: 18px; }
html[data-look="o"] .links a { padding: 12px 0; color: var(--bone); }
/* Nothing moves unless it is asked to: no arriving text, no drifting pictures, no row that slides. */
html[data-look="o"].js .rv, html[data-look="o"].js .pic.rv img { opacity: 1; transform: none; filter: none; transition: none; }
html[data-look="o"] .lux-band { animation: none; }
html[data-look="o"] .habit-card img, html[data-look="o"] .btn { transition: none; }
html[data-look="o"] .habit-card:hover img, html[data-look="o"] .btn:hover { transform: none; }
html[data-look="o"] .say { display: none; }   /* the sliding row of pictures is removed by a line in index.html, never hidden here: see the note there */
/* Words read from the left, in the order they are written. */
html[data-look="o"] .sec-h, html[data-look="o"] .lk-steps > h2 { text-align: left; margin-left: 0; }
html[data-look="o"] .sec-h p { margin-left: 0; }
html[data-look="o"] .lk-steps > h2, html[data-look="o"] .lk-steps ol { max-width: 1280px; margin-left: auto; margin-right: auto; }
html[data-look="o"] .lk-steps li h3 { font-size: 22px; font-weight: 600; }
html[data-look="o"] .lk-steps li h3::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lk-text); color: #fff; font: 600 21px/1 var(--body); margin-bottom: 14px; }
html[data-look="o"] .lk-steps > .btn { margin-left: max(0px, calc((100% - 1280px) / 2)); }
html[data-look="o"] .lk-care dt { font-size: 20px; }
html[data-look="o"] main#top > .lk-steps { order: 1; }
html[data-look="o"] main#top > .lk-care { order: 2; }
html[data-look="o"] main#top > .buzzband { order: 3; }
html[data-look="o"] main#top > #results { order: 4; }
html[data-look="o"] main#top > #triggers { order: 5; }
html[data-look="o"] main#top > #habits { order: 6; }
html[data-look="o"] main#top > #on-device { order: 7; }
@media (max-width: 960px) {
  /* No hidden menu: the three links are always in view, under the logo. */
  html[data-look="o"] .nav { flex-wrap: wrap; row-gap: 0; position: static; }
  html[data-look="o"] .menu-btn { display: none; }
  html[data-look="o"] .links, html[data-look="o"] .links.open { display: flex; position: static; flex-direction: row; order: 5; width: 100%; gap: 0 26px; padding: 2px 0 0; background: none; }
  html[data-look="o"] .steps-n, html[data-look="o"] .hero { padding-top: 24px; }
  html[data-look="o"] .buzzband { grid-template-columns: minmax(0, 1fr); }
  html[data-look="o"] .facts { grid-template-columns: 1fr; gap: 18px; }
  html[data-look="o"] body:has(#lux) .nav { margin-bottom: -112px; position: relative; }
}

/* ============ m: made for men ============ */
/* The page as written, dark, with the object first. Nothing here changes a colour token. */
html[data-look="m"] .story { display: none; }
html[data-look="m"] .hero { background: #0a0b0b; color: #f2efe8; }
html[data-look="m"] .hero-img { animation: none; object-position: 78% 50%; }
html[data-look="m"] .hero .btn.dark { background: #f2efe8; color: #0a0b0b; }
html[data-look="m"] .hero .btn.dark:hover { background: #fff; }
.lk-ship { margin-top: 16px; font-size: 15px; color: #c9c8c2; }
html[data-look="m"] main#top { display: flex; flex-direction: column; }
html[data-look="m"] main#top > * { order: 20; }
html[data-look="m"] main#top > .hero { order: 0; }
html[data-look="m"] main#top > .lk-spec { order: 1; }
html[data-look="m"] main#top > .say { order: 2; }
html[data-look="m"] main#top > .lk-steps { order: 3; }
html[data-look="m"] main#top > .buzzband { order: 4; }
html[data-look="m"] main#top > .lk-cmp { order: 5; }
html[data-look="m"] main#top > .lk-private { order: 6; }
html[data-look="m"] main#top > #results { order: 7; }
html[data-look="m"] main#top > #triggers { order: 8; }
html[data-look="m"] main#top > .closer { order: 29; }
html[data-look="m"] main#top > .notes { order: 30; }
html[data-look="m"] .say { padding: clamp(64px, 9vw, 140px) var(--gut); }
/* Four facts about the object, straight under the opening. */
.lk-spec dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; background: var(--line); border-block: 1px solid var(--line); }
.lk-spec div { background: var(--ink); padding: clamp(18px, 2.4vw, 34px) var(--gut); }
.lk-spec dt { font: 450 clamp(24px, 2.6vw, 40px)/1 var(--display); letter-spacing: -.02em; }
.lk-spec dd { margin: 8px 0 0; font-size: 14px; color: var(--mute); line-height: 1.35; }
html[data-look="m"] .lk-steps ol[data-for~="m"] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-look="m"] .lk-steps li h3::before { color: var(--ember, #ff5b2e); font-weight: 600; }
/* Every fix, compared: three columns that fit a phone without scrolling sideways. */
.lk-cmp table { width: 100%; max-width: 980px; margin: 0 auto; border-collapse: collapse; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.35; }
.lk-cmp th, .lk-cmp td { text-align: left; vertical-align: top; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); }
.lk-cmp thead th { font: 500 13px/1.3 var(--body); color: var(--mute); }
.lk-cmp tbody th { font-weight: 500; width: 34%; }
.lk-cmp td { color: var(--soft); }
.lk-cmp tr.us th, .lk-cmp tr.us td { color: var(--bone); font-weight: 600; border-bottom: 0; }
.lk-cmp tr.us th { color: var(--ember, #ff5b2e); }
.lk-cmp .more { display: block; width: max-content; margin: 26px auto 0; color: var(--soft); text-underline-offset: 3px; }
html[data-habit] .lk-cmp tr[data-only="nail"] { display: none; }
html[data-look="m"] .lk.lk-private[data-for] { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 80px); align-items: center; }
.lk-private img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.lk-private p { margin-top: 16px; color: var(--soft); font-size: clamp(17px, 1.4vw, 20px); max-width: 26em; }
.lk-private .btn { margin-top: 26px; }
@media (max-width: 960px) {
  .lk-spec dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-look="m"] .lk-steps ol[data-for~="m"] { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  html[data-look="m"] .lk.lk-private[data-for] { grid-template-columns: minmax(0, 1fr); }
  html[data-look="m"] .hero .btn, .lk-private .btn { width: 100%; }
  html[data-look="m"] .hero-img { object-position: 74% 46%; }
}