/* =========================================================================== THE BODY — Packages, phone + tablet (<= 1079px). On top of css/mobile.css. Adaptation (no mobile frames in Figma). See MOBILE-CONTRACT.md. Section ids from css/packages.css. Several sections become a section-level CSS grid so that groups the desktop draws with absolute coordinates (chart, tier cards, price table, comparison table, FAQ rows) stay groups in a column. =========================================================================== */ /* ---------- small tracked labels stay on one line ---------- Their Figma box (--w) is only as wide as the desktop text; with the 11px floor and the column's wrapping the label broke onto two lines ("WHAT YOU ARE / BUYING"). */ .page .sec .t.hk.up.nw { width: auto; } .page .hero [data-f="285:28"] { max-width: 100%; white-space: nowrap; } /* ---------- 02 the honest version: copy, then the chart scaled to the column ---------- The chart pieces share one grid cell. Percentage margins on grid items resolve against the cell's WIDTH, so every Figma offset is (x - 862) / 468 of the column: the chart (x 862-1330, y 191-462 in Figma) scales as one drawing. */ .page .sec[data-f="286:2"] { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; } .page .sec[data-f="286:2"] > * { grid-column: 1; justify-self: start; align-self: start; } .page .sec[data-f="286:2"] > [data-f="286:4"] { grid-row: 1; margin-bottom: 16px; } .page .sec[data-f="286:2"] > [data-f="286:6"] { grid-row: 2; margin-bottom: 20px; } .page .sec[data-f="286:2"] > [data-f="286:8"] { grid-row: 3; margin-bottom: 16px; } .page .sec[data-f="286:2"] > [data-f="286:10"] { grid-row: 4; margin-bottom: 40px; } .page .sec[data-f="286:2"] > [data-f="286:13"], .page .sec[data-f="286:2"] > [data-f="286:14"], .page .sec[data-f="286:2"] > [data-f="286:28"], .page .sec[data-f="286:2"] > [data-f="286:16"], .page .sec[data-f="286:2"] > [data-f="286:17"], .page .sec[data-f="286:2"] > [data-f="286:18"], .page .sec[data-f="286:2"] > [data-f="286:19"] { grid-row: 5; margin-left: calc((var(--x) - 862) / 468 * 100%); margin-top: calc((var(--y) - 191) / 468 * 100%); } .page .sec[data-f="286:2"] > img[data-f] { width: calc(var(--w) / 468 * 100%); height: auto; aspect-ratio: var(--w) / var(--h); } .page .sec[data-f="286:2"] > .nw { white-space: nowrap; width: auto; } /* Week 6 hangs off the axis' right end: anchor it there instead of at Figma's x */ .page .sec[data-f="286:2"] > [data-f="286:18"] { justify-self: end; margin-left: 0; margin-right: calc(16 / 468 * 100%); } /* legend: one key per line, dot centred on the label */ .page .sec[data-f="286:2"] > [data-f="286:22"], .page .sec[data-f="286:2"] > [data-f="286:23"] { grid-row: 6; } .page .sec[data-f="286:2"] > [data-f="286:25"], .page .sec[data-f="286:2"] > [data-f="286:26"] { grid-row: 7; } .page .sec[data-f="286:2"] > [data-f="286:23"] { margin: 28px 0 0 18px; } .page .sec[data-f="286:2"] > [data-f="286:26"] { margin: 10px 0 0 18px; } .page .sec[data-f="286:2"] > [data-f="286:22"] { width: 8px; height: 8px; margin-top: calc(28px + 3px); } .page .sec[data-f="286:2"] > [data-f="286:25"] { width: 8px; height: 8px; margin-top: calc(10px + 3px); } .page .sec[data-f="286:2"] > [data-f="286:27"] { grid-row: 8; margin-top: 16px; } /* ---------- 03 what you are buying: the four steps as a vertical timeline ---------- Ring in the left column, the stone line threading the rings, copy to the right. */ .page .sec[data-f="287:2"] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 0; align-items: start; } .page .sec[data-f="287:2"] > [data-f="287:3"] { grid-column: 1 / -1; grid-row: 1; margin-bottom: 16px; } .page .sec[data-f="287:2"] > [data-f="287:5"] { grid-column: 1 / -1; grid-row: 2; margin-bottom: 36px; } .page .sec[data-f="287:2"] > .ring44 { grid-column: 1; } .page .sec[data-f="287:2"] > [data-f="287:9"] { grid-row: 3 / 5; } .page .sec[data-f="287:2"] > [data-f="287:16"] { grid-row: 5 / 7; } .page .sec[data-f="287:2"] > [data-f="287:23"] { grid-row: 7 / 9; } .page .sec[data-f="287:2"] > [data-f="287:30"] { grid-row: 9 / 11; } .page .sec[data-f="287:2"] > h3 { grid-column: 2; margin-top: 6px; } .page .sec[data-f="287:2"] > [data-f="287:12"] { grid-row: 3; } .page .sec[data-f="287:2"] > [data-f="287:19"] { grid-row: 5; } .page .sec[data-f="287:2"] > [data-f="287:26"] { grid-row: 7; } .page .sec[data-f="287:2"] > [data-f="287:33"] { grid-row: 9; } .page .sec[data-f="287:2"] > p.hl { grid-column: 2; width: auto; margin: 6px 0 34px; } .page .sec[data-f="287:2"] > [data-f="287:14"] { grid-row: 4; } .page .sec[data-f="287:2"] > [data-f="287:21"] { grid-row: 6; } .page .sec[data-f="287:2"] > [data-f="287:28"] { grid-row: 8; } .page .sec[data-f="287:2"] > [data-f="287:35"] { grid-row: 10; margin-bottom: 0; } /* the line runs from the first ring's centre to the last ring (rings are paper-filled, so it passes behind them) */ .page .sec[data-f="287:2"] > [data-f="287:36"] { grid-column: 1; grid-row: 3 / 10; justify-self: center; align-self: stretch; width: 1px; height: auto; margin-top: 22px; } /* ---------- 04 two lengths: each tier is one rounded card ---------- Columns: card padding | bullet | copy | card padding. The empty .tier div spans its card's rows and paints behind the copy that sits on top of it. */ .page .sec[data-f="287:37"] { --cp: clamp(22px, 4cqw, 34px); display: grid; grid-template-columns: var(--cp) 17px minmax(0, 1fr) var(--cp); column-gap: 0; row-gap: 0; align-items: start; } .page .sec[data-f="287:37"] > * { grid-column: 2 / 4; width: auto; } .page .sec[data-f="287:37"] > [data-f="287:40"] { grid-column: 1 / -1; grid-row: 1; margin-bottom: 16px; } .page .sec[data-f="287:37"] > [data-f="287:41"] { grid-column: 1 / -1; grid-row: 2; margin-bottom: 18px; } .page .sec[data-f="287:37"] > [data-f="287:42"] { grid-column: 1 / -1; grid-row: 3; margin-bottom: 32px; } .page .sec[data-f="287:37"] > .tier { grid-column: 1 / -1; align-self: stretch; height: auto; } .page .sec[data-f="287:37"] > [data-f="287:45"] { grid-row: 4 / 15; } .page .sec[data-f="287:37"] > [data-f="287:76"] { grid-row: 15 / 26; margin-top: 16px; } /* card copy, top to bottom */ .page .sec[data-f="287:37"] > [data-f="287:46"] { grid-row: 4; margin-top: 28px; } .page .sec[data-f="287:37"] > [data-f="287:77"] { grid-row: 15; margin-top: calc(16px + 28px); } .page .sec[data-f="287:37"] > [data-f="287:48"] { grid-row: 5; } .page .sec[data-f="287:37"] > [data-f="287:79"] { grid-row: 16; } .page .sec[data-f="287:37"] > [data-f="287:50"] { grid-row: 6; } .page .sec[data-f="287:37"] > [data-f="287:81"] { grid-row: 17; } .page .sec[data-f="287:37"] > [data-f="287:52"] { grid-row: 7; } .page .sec[data-f="287:37"] > [data-f="287:83"] { grid-row: 18; } .page .sec[data-f="287:37"] > [data-f="287:54"] { grid-row: 8; } .page .sec[data-f="287:37"] > [data-f="287:85"] { grid-row: 19; } .page .sec[data-f="287:37"] > [data-f="287:56/rule"] { grid-row: 9; } .page .sec[data-f="287:37"] > [data-f="287:87/rule"] { grid-row: 20; } .page .sec[data-f="287:37"] > h3 { margin-top: 12px; } .page .sec[data-f="287:37"] > [data-f="287:50"], .page .sec[data-f="287:37"] > [data-f="287:81"] { margin-top: 6px; white-space: nowrap; } .page .sec[data-f="287:37"] > [data-f="287:52"], .page .sec[data-f="287:37"] > [data-f="287:83"] { margin-top: 8px; } .page .sec[data-f="287:37"] > [data-f="287:54"], .page .sec[data-f="287:37"] > [data-f="287:85"] { margin-top: 6px; } .page .sec[data-f="287:37"] > .line-mint { margin-top: 20px; } /* the four inclusions: dot + line */ /* dot centred on the copy's first 24px line */ .page .sec[data-f="287:37"] > img.hh { grid-column: 2; width: 5px; height: 5px; justify-self: start; margin-top: calc(12px + (24px - 5px) / 2); } .page .sec[data-f="287:37"] > img.hh + p.hl { grid-column: 3; margin-top: 12px; } .page .sec[data-f="287:37"] > [data-f="287:58"], .page .sec[data-f="287:37"] > [data-f="287:59"] { grid-row: 10; } .page .sec[data-f="287:37"] > [data-f="287:61"], .page .sec[data-f="287:37"] > [data-f="287:62"] { grid-row: 11; } .page .sec[data-f="287:37"] > [data-f="287:64"], .page .sec[data-f="287:37"] > [data-f="287:65"] { grid-row: 12; } .page .sec[data-f="287:37"] > [data-f="287:67"], .page .sec[data-f="287:37"] > [data-f="287:68"] { grid-row: 13; } .page .sec[data-f="287:37"] > [data-f="287:89"], .page .sec[data-f="287:37"] > [data-f="287:90"] { grid-row: 21; } .page .sec[data-f="287:37"] > [data-f="287:92"], .page .sec[data-f="287:37"] > [data-f="287:93"] { grid-row: 22; } .page .sec[data-f="287:37"] > [data-f="287:95"], .page .sec[data-f="287:37"] > [data-f="287:96"] { grid-row: 23; } .page .sec[data-f="287:37"] > [data-f="287:98"], .page .sec[data-f="287:37"] > [data-f="287:99"] { grid-row: 24; } .page .sec[data-f="287:37"] > .btn { width: auto; justify-self: stretch; margin: 26px 0 var(--cp); } .page .sec[data-f="287:37"] > [data-f="287:74"] { grid-row: 14; } .page .sec[data-f="287:37"] > [data-f="287:105"] { grid-row: 25; } .page .sec[data-f="287:37"] > [data-f="354:2"] { grid-column: 1 / -1; grid-row: 26; margin-top: 28px; } .page .sec[data-f="287:37"] > [data-f="287:139"] { grid-column: 1 / -1; grid-row: 27; margin-top: 8px; } /* ---------- 05 wellness club ---------- #membership becomes its own column: label, heading, the card, then the blurb and the five option pills right under the card, so a tap shows its crossfade in view. */ .page .sec[data-f="462:171"] > #membership { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .page .sec #membership > [data-f="464:62"] { order: 1; } .page .sec #membership > [data-f="464:64"] { order: 2; margin-bottom: 4px; } .page .sec #membership > .mcard { order: 3; } .page .sec #membership > [data-f="464:66"] { order: 4; margin-top: 6px; } .page .sec #membership > [role="tablist"] { order: 5; } .page .sec #membership > [data-f="464:83"] { order: 6; margin-top: 14px; } .page .sec #membership > [data-f="464:85"] { order: 7; margin-top: -4px; } .page .sec #membership > [data-f="464:87"] { order: 8; } /* the card: photo layers stay absolute (inset 0); its copy becomes a small grid on top */ .page .sec .mcard { width: 100%; height: auto; aspect-ratio: 7 / 5; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 30px 32px 26px; border-radius: 24px; } .page .sec .mcard > .a { width: auto; } .page .sec .mcard > [data-f="464:48"] { grid-column: 1 / 3; grid-row: 1; } .page .sec .mcard > [data-f="464:53"] { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; padding-left: 12px; } .page .sec .mcard > [data-f="464:49"] { grid-column: 1 / -1; grid-row: 2; margin-top: 10px; } .page .sec .mcard > [data-f="464:51"] { grid-column: 1; grid-row: 4; align-self: end; } .page .sec .mcard > [data-f="464:52"] { grid-column: 2; grid-row: 4; align-self: end; margin: 0 0 7px 10px; } /* the white ornament: right edge, below the headline, cut by the card like Figma's */ .page .sec .mcard > [data-f="464:58"] { position: absolute; left: auto; right: -12%; top: 26%; width: 46%; height: auto; aspect-ratio: 1; max-width: none; } /* Figma's crops are for a 560 x 400 card; the card's aspect changes here, so the photos cover it and keep the same focal point (object-position from each crop window) */ .page .sec .mcard-bg > img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .page .sec .mcard-bg > [data-f="464:42"] { object-position: 50% 38%; } .page .sec .mcard-bg > [data-f="464:43"] { object-position: 50% 27%; } .page .sec .mcard-bg > [data-f="464:44"] { object-position: 50% 46%; } .page .sec .mcard-bg > [data-f="464:45"] { object-position: 64% 62%; } .page .sec .mcard-bg > [data-f="508:49"] { object-position: 50% 52%; } /* blurb: every variant shares one cell, so the box is as tall as the longest one and the pills under it never jump when an option is chosen. */ .page .sec #membership > .blurb-box { width: 100%; height: auto; display: grid; } .page .sec #membership > .blurb-box > [data-opt] { display: block; grid-area: 1 / 1; visibility: hidden; } .page .sec #membership > .blurb-box > [data-opt].is-on { visibility: visible; } /* Figma's
s stay: display:none would glue "your
specialist" into one word and Chromium ignores every other display / content on
(recommended: drop them in the markup) */ .page .sec #membership > .blurb-box > [data-opt] { text-wrap: pretty; } /* the five options wrap into rows of pills */ .page .sec #membership > [role="tablist"] { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; } .page .sec #membership .opt { width: auto; min-width: 0; padding: 0 18px; } .page .sec #membership > [data-f="464:87"] { width: 100%; } /* two rates / member benefits / refer a friend: one group after another, CTAs last */ .page .sec[data-f="462:171"] > .line-oat { width: 100%; margin-top: 36px; } .page .sec[data-f="462:171"] > [data-f="509:88/rule"] { order: 1; margin-top: 52px; } .page .sec[data-f="462:171"] > [data-f="509:89"] { order: 2; } .page .sec[data-f="462:171"] > [data-f="509:90"] { order: 3; margin-top: 2px; } .page .sec[data-f="462:171"] > [data-f="509:91"] { order: 4; margin-top: -6px; } .page .sec[data-f="462:171"] > [data-f="509:92"] { order: 5; } .page .sec[data-f="462:171"] > [data-f="509:93/rule"] { order: 6; } .page .sec[data-f="462:171"] > [data-f="509:94"] { order: 7; } .page .sec[data-f="462:171"] > [data-f="509:95"] { order: 8; } .page .sec[data-f="462:171"] > [data-f="509:96/rule"] { order: 9; } .page .sec[data-f="462:171"] > [data-f="509:97"] { order: 10; } .page .sec[data-f="462:171"] > [data-f="509:98"] { order: 11; } .page .sec[data-f="462:171"] > [data-f="509:176"] { order: 12; margin-top: 24px; } .page .sec[data-f="462:171"] > [data-f="509:178"] { order: 13; margin-top: -4px; } .page .sec[data-f="462:171"] > [data-f="509:90"], .page .sec[data-f="462:171"] > [data-f="509:91"] { width: auto; } /* ---------- 05b price list: a three-column table (name | regular | member) ---------- Every cell has an explicit column; grid auto-placement keeps the DOM's row order. */ .page .sec[data-f="543:153"] { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 16px; row-gap: 0; align-items: start; } .page .sec[data-f="543:153"] > * { width: auto; } .page .sec[data-f="543:153"] > [data-f="543:154"], .page .sec[data-f="543:153"] > [data-f="543:156"], .page .sec[data-f="543:153"] > [data-f="543:158"], .page .sec[data-f="543:153"] > [data-f="543:306"], .page .sec[data-f="543:153"] > .line-sage, .page .sec[data-f="543:153"] > .line-mint { grid-column: 1 / -1; } .page .sec[data-f="543:153"] > [data-f="543:154"] { margin-bottom: 16px; } .page .sec[data-f="543:153"] > [data-f="543:156"] { margin-bottom: 18px; } .page .sec[data-f="543:153"] > [data-f="543:158"] { margin-bottom: 20px; } .page .sec[data-f="543:153"] > .line-sage { margin-top: 32px; } .page .sec[data-f="543:153"] > [data-f="543:162/rule"] { margin-top: 8px; } /* group heading row: title left, the two column heads over the prices */ .page .sec[data-f="543:153"] > h3 { grid-column: 1; margin: 16px 0 12px; } .page .sec[data-f="543:153"] > .hk.up.r { align-self: center; margin-top: 4px; text-align: right; justify-self: end; } .page .sec[data-f="543:153"] > [data-f="543:165"], .page .sec[data-f="543:153"] > [data-f="543:201"], .page .sec[data-f="543:153"] > [data-f="543:237"], .page .sec[data-f="543:153"] > [data-f="543:280"], .page .sec[data-f="543:153"] > .mono { grid-column: 2; } .page .sec[data-f="543:153"] > [data-f="543:167"], .page .sec[data-f="543:153"] > [data-f="543:203"], .page .sec[data-f="543:153"] > [data-f="543:239"], .page .sec[data-f="543:153"] > [data-f="543:282"], .page .sec[data-f="543:153"] > .monom { grid-column: 3; } /* rows */ .page .sec[data-f="543:153"] > p.hl.k-ink { grid-column: 1; margin: 14px 0; } .page .sec[data-f="543:153"] > .mono, .page .sec[data-f="543:153"] > .monom { justify-self: end; text-align: right; margin-top: calc(14px + 2px); } .page .sec[data-f="543:153"] > [data-f="543:306"] { margin-top: 24px; } /* Cedar for Two (2026-10-28): its column heads take the price columns like the others */ .page .sec[data-f="543:153"] > [data-f="543:duo/reg"] { grid-column: 2; } .page .sec[data-f="543:153"] > [data-f="543:duo/mem"] { grid-column: 3; } /* ---------- 06 package or wellness club ---------- The comparison keeps two value columns; each row's label runs above its two values. */ .page .sec[data-f="288:99"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; align-items: start; } .page .sec[data-f="288:99"] > * { grid-column: 1 / -1; width: auto; } .page .sec[data-f="288:99"] > .c { align-self: start; text-align: left; text-indent: 0; } .page .sec[data-f="288:99"] > [data-f="288:100"] { margin-bottom: 16px; } .page .sec[data-f="288:99"] > [data-f="288:102"] { margin-bottom: 24px; } .page .sec[data-f="288:99"] > [data-f="288:108"], .page .sec[data-f="288:99"] > [data-f="288:117"], .page .sec[data-f="288:99"] > [data-f="288:126"], .page .sec[data-f="288:99"] > [data-f="288:135"], .page .sec[data-f="288:99"] > [data-f="288:144"], .page .sec[data-f="288:99"] > [data-f="288:153"], .page .sec[data-f="288:99"] > [data-f="288:162"], .page .sec[data-f="288:99"] > [data-f="509:58"], .page .sec[data-f="288:99"] > [data-f="509:65"] { grid-column: 1; } .page .sec[data-f="288:99"] > [data-f="288:110"], .page .sec[data-f="288:99"] > [data-f="288:119"], .page .sec[data-f="288:99"] > [data-f="288:128"], .page .sec[data-f="288:99"] > [data-f="288:137"], .page .sec[data-f="288:99"] > [data-f="288:146"], .page .sec[data-f="288:99"] > [data-f="288:155"], .page .sec[data-f="288:99"] > [data-f="288:164"], .page .sec[data-f="288:99"] > [data-f="509:60"], .page .sec[data-f="288:99"] > [data-f="509:67"] { grid-column: 2; } .page .sec[data-f="288:99"] > [data-f="288:108"], .page .sec[data-f="288:99"] > [data-f="288:110"] { margin: 14px 0 14px; } .page .sec[data-f="288:99"] > .hk.up.k-ink { margin-top: 16px; } /* row labels */ .page .sec[data-f="288:99"] > .hl.c { margin: 6px 0 16px; } /* values */ .page .sec[data-f="288:99"] > [data-f="509:68"] { margin-top: 20px; } .page .sec[data-f="288:99"] > [data-f="509:71"] { margin-top: 56px; margin-bottom: 4px; } .page .sec[data-f="288:99"] > .line-oat { margin-top: 16px; } .page .sec[data-f="288:99"] > h3 { margin-top: 16px; } .page .sec[data-f="288:99"] > [data-f="509:76"], .page .sec[data-f="288:99"] > [data-f="509:79"], .page .sec[data-f="288:99"] > [data-f="509:82"], .page .sec[data-f="288:99"] > [data-f="509:85"] { margin-top: 8px; margin-bottom: 12px; } /* ---------- 08 no small print: three numbered steps, ring beside the copy ---------- */ .page .sec[data-f="289:32"] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 0; align-items: start; } .page .sec[data-f="289:32"] > [data-f="289:33"] { grid-column: 1 / -1; grid-row: 1; margin-bottom: 16px; } .page .sec[data-f="289:32"] > [data-f="289:35"] { grid-column: 1 / -1; grid-row: 2; margin-bottom: 36px; } .page .sec[data-f="289:32"] > .ring44 { grid-column: 1; } .page .sec[data-f="289:32"] > [data-f="289:39"] { grid-row: 3 / 5; } .page .sec[data-f="289:32"] > [data-f="289:46"] { grid-row: 5 / 7; } .page .sec[data-f="289:32"] > [data-f="289:53"] { grid-row: 7 / 9; } .page .sec[data-f="289:32"] > h3 { grid-column: 2; margin-top: 6px; width: auto; } .page .sec[data-f="289:32"] > [data-f="289:42"] { grid-row: 3; } .page .sec[data-f="289:32"] > [data-f="289:49"] { grid-row: 5; } .page .sec[data-f="289:32"] > [data-f="289:56"] { grid-row: 7; } .page .sec[data-f="289:32"] > p.hl { grid-column: 2; width: auto; margin: 6px 0 34px; } .page .sec[data-f="289:32"] > [data-f="289:44"] { grid-row: 4; } .page .sec[data-f="289:32"] > [data-f="289:51"] { grid-row: 6; } .page .sec[data-f="289:32"] > [data-f="289:58"] { grid-row: 8; margin-bottom: 0; } /* ---------- 09 questions: the shared accordion (css/faq.css + mobile.css) takes the column ---------- */ .page .sec[data-f="290:2"] > [data-f="290:5"] { margin-bottom: 0; } /* ---------- 10 start properly: copy, the buttons share a row when they fit, then the photo pair (detail photo overlapping the big one, as on desktop) + the ornament ---------- */ .page .sec[data-f="290:29"] { flex-direction: row; flex-wrap: wrap; column-gap: 10px; row-gap: 16px; isolation: isolate; } .page .sec[data-f="290:29"] > :not(.btn) { flex-basis: 100%; } .page .sec[data-f="290:29"] > .btn { margin-top: 10px; } .page .sec[data-f="290:29"] > [data-f="388:34"] { flex: 0 0 76%; width: auto; margin: 40px 0 0 auto; } /* percentage margins in a flex row resolve against the column width W: big photo is 0.76W x 1.056W, the detail 0.48W x 0.594W; it overlaps the big one by ~0.5W */ .page .sec[data-f="290:29"] > [data-f="290:47"] { flex: 0 0 48%; width: auto; margin: -50% auto 0 0; z-index: 1; } .page .sec[data-f="290:29"] > [data-f="290:43"] { position: absolute; left: auto; top: auto; right: -84px; bottom: 120px; width: 190px; height: 190px; z-index: 2; pointer-events: none; } /* ---------- footer: the shortest link ("Team") was a 32px-wide target at 360 ---------- */ .page .footer.sec[data-f="290:48"] a.t { min-width: 44px; } /* =========================== phones (<= 599px) =========================== */ @media (max-width: 599px) { /* card: a touch taller than desktop so the photo reads on a narrow screen */ .page .sec .mcard { aspect-ratio: 7 / 6; padding: 22px 22px 18px; border-radius: 22px; } .page .sec .mcard > [data-f="464:58"] { right: -16%; top: 30%; width: 54%; } /* the two rates: one line each */ .page .sec[data-f="462:171"] > [data-f="509:90"], .page .sec[data-f="462:171"] > [data-f="509:91"] { font-size: 22px; line-height: 1.4; } /* price list: tighter columns leave the treatment names room */ .page .sec[data-f="543:153"] { column-gap: 12px; } .page .sec[data-f="543:153"] > h3 { font-size: 22px; } .page .sec[data-f="290:29"] > [data-f="290:43"] { width: 150px; height: 150px; right: -70px; bottom: 96px; } } /* Figma's hard breaks in the Wellness Club blurbs: the generator puts a space before each
(invisible on desktop), so the phone column can simply drop them */ .page .sec .blurb-box br { display: none; } /* ---------- 04b face programs (2026-10-28): two more cards after the package notes, built like the tier cards (box spans its rows behind the copy; 11 rows per card, a card with fewer steps leaves an empty, zero-height row) ---------- */ .page .sec[data-f="287:37"] > [data-f="prog/label"] { grid-column: 1 / -1; grid-row: 28; margin: 48px 0 16px; } .page .sec[data-f="287:37"] > [data-f="prog1/box"] { grid-row: 29 / 40; } .page .sec[data-f="287:37"] > [data-f="prog2/box"] { grid-row: 40 / 51; margin-top: 16px; } .page .sec[data-f="287:37"] > [data-f="prog1/lab"] { grid-row: 29; margin-top: 28px; } .page .sec[data-f="287:37"] > [data-f="prog2/lab"] { grid-row: 40; margin-top: calc(16px + 28px); } .page .sec[data-f="287:37"] > [data-f="prog1/ttl"] { grid-row: 30; } .page .sec[data-f="287:37"] > [data-f="prog2/ttl"] { grid-row: 41; } .page .sec[data-f="287:37"] > [data-f="prog1/lead"] { grid-row: 31; } .page .sec[data-f="287:37"] > [data-f="prog2/lead"] { grid-row: 42; } .page .sec[data-f="287:37"] > [data-f="prog1/price"] { grid-row: 32; } .page .sec[data-f="287:37"] > [data-f="prog2/price"] { grid-row: 43; } .page .sec[data-f="287:37"] > [data-f="prog1/sub"] { grid-row: 33; } .page .sec[data-f="287:37"] > [data-f="prog2/sub"] { grid-row: 44; } .page .sec[data-f="287:37"] > [data-f="prog1/save"] { grid-row: 34; } .page .sec[data-f="287:37"] > [data-f="prog2/save"] { grid-row: 45; } .page .sec[data-f="287:37"] > [data-f="prog1/rule"] { grid-row: 35; } .page .sec[data-f="287:37"] > [data-f="prog2/rule"] { grid-row: 46; } .page .sec[data-f="287:37"] > [data-f="prog1/dot1"], .page .sec[data-f="287:37"] > [data-f="prog1/li1"] { grid-row: 36; } .page .sec[data-f="287:37"] > [data-f="prog1/dot2"], .page .sec[data-f="287:37"] > [data-f="prog1/li2"] { grid-row: 37; } .page .sec[data-f="287:37"] > [data-f="prog1/dot3"], .page .sec[data-f="287:37"] > [data-f="prog1/li3"] { grid-row: 38; } .page .sec[data-f="287:37"] > [data-f="prog2/dot1"], .page .sec[data-f="287:37"] > [data-f="prog2/li1"] { grid-row: 47; } .page .sec[data-f="287:37"] > [data-f="prog2/dot2"], .page .sec[data-f="287:37"] > [data-f="prog2/li2"] { grid-row: 48; } .page .sec[data-f="287:37"] > [data-f="prog2/dot3"], .page .sec[data-f="287:37"] > [data-f="prog2/li3"] { grid-row: 49; } .page .sec[data-f="287:37"] > [data-f="prog1/btn"] { grid-row: 39; } .page .sec[data-f="287:37"] > [data-f="prog2/btn"] { grid-row: 50; } .page .sec[data-f="287:37"] > [data-f$="/lead"] { margin-top: 10px; } .page .sec[data-f="287:37"] > [data-f$="/price"] { margin-top: 12px; white-space: nowrap; } .page .sec[data-f="287:37"] > [data-f$="/sub"] { margin-top: 8px; } .page .sec[data-f="287:37"] > [data-f$="/save"] { margin-top: 6px; } .page .sec[data-f="287:37"] > [data-f="prog/nocombine"] { grid-column: 1 / -1; grid-row: 51; margin-top: 28px; } .page .sec[data-f="287:37"] > [data-f="prog/mask"] { grid-column: 1 / -1; grid-row: 52; margin-top: 8px; }