/* =========================================================================== Shep — documentation readiness. Every figure on this page is product UI: an appointment row, a verdict, a timing tag, a checklist, a sheet. Verdict strings are outputs/appointment_flag.py PLAIN_VERDICT, verbatim. Timing tags are the phase axis from tests/test_phase_tag.py: CHAIRSIDE -> NOW, PRE_TREATMENT -> BEFORE, phase None -> NO TAG (never inferred). =========================================================================== */ :root{ --ink:#0E1A2B; --slate:#55677F; --surface:#FFFFFF; --surface-alt:#F4F6FA; --border:#E1E7EF; --line-strong:#8C9AAE; /* control + tag boundaries, 3:1 on white */ --dark:#030D28; --dark-lift:#0B1734; /* the rule panel, lifted off the band */ --on-dark:#FFFFFF; /* 19.23:1 on --dark */ --on-dark-body:#E4EAF4; /* 15.91:1 */ --on-dark-muted:#AFBCD4; /* 10.04:1 */ --on-dark-border:#54628A; /* 3.20:1 */ /* Brand. Page chrome only — never inside a product mockup: CODES PROPOSED ink is #5B3FC4 and the two are near-identical. */ --brand:#5E2BC4; --brand-deep:#4A1F9E; --brand-wash:rgba(94,43,196,.07); /* --brand at 7% — the hero grid block */ --brand-line:rgba(94,43,196,.20); /* --brand at 20% — its ruled lines */ --rule-on-dark:rgba(255,255,255,.07); /* the same rules, inverted, on --dark */ /* Product status palette (settled; values untouched). */ --blocked:#9c0000; --blocked-ink:#9c0000; /* ACTION NEEDED */ --review:#8f7400; --review-ink:#7d6500; /* CHECK */ --verify:#0290ed; --verify-ink:#026cb2; /* VERIFY */ --codes-added:#a993f7; --codes-added-ink:#5b3fc4; /* CODES PROPOSED */ --ready:#236e17; --ready-ink:#236e17; /* READY FOR TREATMENT */ --container:1200px; --gutter:clamp(24px,4vw,64px); --band:clamp(64px,7vw,110px); --stage-h:clamp(360px,42vw,600px); /* the hero graphic band */ --t-dsp:clamp(34px,5.2vw,64px); --t-hd:clamp(30px,3.4vw,44px); --t-sub:clamp(21px,2vw,30px); /* The step the scale did not have. The hero subhead sat on --t-sub, the same size as the trust pull quote and the sheet's title, and seven lines of it under a 64px headline read as a wall. 1.46vw puts it at 21px at 1440; the floor holds it clear of --t-ui below ~1300. */ --t-lead:clamp(19px,1.46vw,21px); --t-ui:18px; --t-bd:17px; --t-cap:14px; --t-mic:12px; --measure:66ch; --shadow:0 1px 2px rgba(14,26,43,.05),0 18px 40px -26px rgba(14,26,43,.34); } *{box-sizing:border-box} body{margin:0;background:var(--surface);color:var(--ink);font-family:Manrope,system-ui,sans-serif; font-size:var(--t-bd);line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty} a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-deep)} :focus-visible{outline:2px solid var(--brand);outline-offset:2px} [id]{scroll-margin-top:96px} [hidden]{display:none!important} p{margin:0} ul,ol,dl{margin:0;padding:0;list-style:none} .container{width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto} .s{padding-block:var(--band)} /* ---------- type ---------- */ /* One block, two inline weights. As flex children the clauses could never share a line, which floored the headline at 2+2 = 4 lines however small the type got. Inline, it reflows as a single paragraph. */ .dsp{margin:0 0 22px;font-size:var(--t-dsp);line-height:1.08;letter-spacing:-.026em} .dsp__a{font-weight:800} .dsp__b{font-weight:400;color:var(--slate)} .hd{margin:0 0 14px;font-size:var(--t-hd);font-weight:700;line-height:1.08;letter-spacing:-.02em;max-width:20ch} .hd--split{display:flex;flex-direction:column;max-width:24ch} .hd--split .hd__a{font-weight:800} .hd--split .hd__b{font-weight:400} .lede{font-size:var(--t-sub);font-weight:400;line-height:1.36;color:var(--slate);max-width:36ch;margin:0 0 32px} .bd{font-size:var(--t-bd);line-height:1.6;color:var(--slate);max-width:var(--measure)} /* ---------- the eyebrow: one label above every section heading ---------- */ .eyebrow{margin:0 0 12px;font-size:var(--t-mic);font-weight:800;letter-spacing:.14em; text-transform:uppercase;line-height:1.3;color:var(--slate)} .eyebrow--dark{color:var(--on-dark-muted)} .s1__copy .eyebrow{margin-bottom:18px} /* ---------- buttons — no disabled state anywhere on this page ---------- */ .acts{display:flex;flex-wrap:wrap;gap:12px} .btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:var(--t-bd); font-weight:700;padding:14px 22px;border-radius:4px;border:1px solid transparent;cursor:pointer} .btn--sm{font-size:var(--t-cap);padding:9px 15px} .btn--ink{background:var(--brand);color:#fff;border-color:var(--brand)} .btn--ink:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff} .btn--line{background:transparent;color:var(--ink);border-color:var(--line-strong)} .btn--line:hover{border-color:var(--ink);color:var(--ink)} .btn--onDark{background:#fff;color:var(--ink);border-color:#fff} .btn--onDark:hover{background:var(--on-dark-body);border-color:var(--on-dark-body);color:var(--ink)} .btn--lineDark{background:transparent;color:var(--on-dark);border-color:var(--on-dark-border)} .btn--lineDark:hover{border-color:var(--on-dark);color:var(--on-dark)} /* ============== STATIC CONTENT IS NOT A CONTROL ============== Every real control on this page is a .btn: 4px radius, a 1px border on all four sides. Three sets of static items were borrowing that exact shape, so six capture types, three requirement clusters and two six-item lists all read as rows of buttons. One treatment for all of them, and it is chosen to be un-button-like on every axis a .btn is defined by: square corners, no box border, a tinted ground and a single left accent rule. A record, not a button. Colour is the only thing that varies, because the dark sections and the light one need different tints. */ .chip,.clus__l li,.split__l li{border:0;border-left:2px solid;border-radius:0} .chip,.clus__l li{border-left-color:var(--on-dark-border);background:rgba(255,255,255,.055)} .split__l li{border-left-color:var(--brand-line);background:var(--brand-wash)} /* ---------- product primitives ---------- Verdict = a filled tint. Timing = a plain outline. Item mark = a flat chip. Three shapes because they answer three different questions. */ .v{display:inline-flex;align-items:center;padding:5px 10px;border-radius:3px;font-size:var(--t-mic); font-weight:700;line-height:1.2;letter-spacing:.05em;white-space:nowrap} .v--action{background:rgba(156,0,0,.09);border:1px solid rgba(156,0,0,.28);color:var(--blocked-ink)} .v--check{background:rgba(143,116,0,.10);border:1px solid rgba(143,116,0,.30);color:var(--review-ink)} .v--verify{background:rgba(2,144,237,.09);border:1px solid rgba(2,144,237,.30);color:var(--verify-ink)} .v--codes{background:rgba(169,147,247,.13);border:1px solid rgba(169,147,247,.42);color:var(--codes-added-ink)} .v--ready{background:rgba(35,110,23,.09);border:1px solid rgba(35,110,23,.28);color:var(--ready-ink)} .tg{display:inline-flex;align-items:center;padding:3px 8px;border-radius:3px;border:1px solid var(--line-strong); background:transparent;color:var(--slate);font-size:11px;font-weight:700;line-height:1.2; letter-spacing:.08em;white-space:nowrap} .tg--now{background:var(--ink);border-color:var(--ink);color:#fff} .tg--none{border-style:dashed;letter-spacing:.02em;font-weight:600} .s3 .tg--now,.s8 .tg--now{background:#fff;border-color:#fff;color:var(--ink)} .s6 .tg--before{border-color:var(--on-dark-border);color:var(--on-dark-muted)} .m{flex:0 0 auto;padding:4px 9px;border-radius:3px;font-size:var(--t-mic);font-weight:700; line-height:1.2;letter-spacing:.04em;white-space:nowrap} .m--missing{background:rgba(156,0,0,.09);color:var(--blocked-ink)} .m--verify{background:rgba(2,144,237,.11);color:var(--verify-ink)} .m--present{background:rgba(35,110,23,.10);color:var(--ready-ink)} .s6 .m--missing{background:rgba(156,0,0,.26);color:#FF9E9E} /* ---------- header: wordmark + the brand line beneath it ---------- */ .topbar{height:3px;background:var(--brand)} .header-sticky{position:sticky;top:0;z-index:30} .header{padding-block:12px;background:var(--surface);border-bottom:1px solid transparent;transition:border-color .16s} .header.is-scrolled{border-bottom-color:var(--border)} .header__in{display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;flex-direction:column;gap:1px} .brand__mark{font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--ink)} /* The wordmark is one element in two parts: the name, and the domain it lives at. ".dental" drops two weight steps and takes brand purple, so it reads as the quieter half of a single mark rather than a second word. */ .brand__a{font-weight:800;color:var(--ink)} .brand__b{font-weight:500;color:var(--brand)} .brand__line{font-size:var(--t-mic);font-weight:500;color:var(--slate);letter-spacing:.005em} .nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px)} .nav a{font-size:var(--t-cap);font-weight:600;color:var(--slate)} .nav a:not(.btn):hover{color:var(--ink)} .nav .btn{color:#fff} /* ============= S1 HERO · a centred text block, then a graphic band ============= Headline, subhead, two actions. The scope line that used to close this block is gone - the same fact is stated in the credibility row directly below, in S8's scope list, and in the pilot body copy - and the bottom padding goes back to what it was before that line was added, because it had been cut from ~66px to ~27px to pay for it. */ .s1{padding-bottom:0} .s1__copy{text-align:center;padding-bottom:clamp(40px,4.6vw,68px)} /* THE HEADLINE BREAKS WHERE THE SENTENCE DOES. The two spans have always been the two halves of the sentence; inline, they were only a hand-off in the source and the line broke wherever 19ch ran out ("Your team knows what / to capture before the / patient sits down."). As blocks they break on their own seam. Span A needs 26.18ch, so the cap goes to 27ch and the container takes over above 1267px. Below ~1267px the container is narrower than span A and the headline goes back to three lines, by design - no type is shrunk to buy the break. Scoped to .s1__copy: S8's CTA h2 uses the same spans inline. */ .s1__copy .dsp{max-width:27ch;margin:0 auto 24px} .s1__copy .dsp__a,.s1__copy .dsp__b{display:block} /* THE HERO SUBHEAD ONLY. .lede elsewhere keeps --t-sub; this is the one place the new step is used. TWO BOUNDS, AND THE SECOND ONE IS NOT DECORATION. 60ch is the character cap. On its own it made the subhead WIDER THAN THE HEADLINE - measured 21px wider at 1024 and 179px wider at 768 - because the h1 is capped in ch of --t-dsp, which shrinks with the viewport far faster than 60ch of --t-lead does. The clamp tracks --t-dsp's own scaling, so whichever is smaller wins and the subhead stays under the headline at every width. The h1's cap is now 27ch, so this clamp is the tighter of the two everywhere and the subhead sits well inside the headline. */ .s1__copy .lede{font-size:var(--t-lead);max-width:min(60ch,clamp(430px,66vw,800px)); margin:0 auto 18px} /* THE COMPLIANCE LEAD'S OWN LINE, verbatim. A clear step below the lede - --t-bd against --t-lead, 17px against 19-21px - so it reads as a supporting line and not a second subhead. What it loses in size it takes back in weight and colour: 600 on --ink against the lede's 400 on --slate, because a step down in size should not read as a step down in standing. The lede's bottom margin drops from 32px to 18px so the two group as one statement and the 32px below this line is the gap before the buttons, not between the copy. TWO BOUNDS, THE SECOND BORROWED FROM THE LEDE. The sentence needs 620.7px to sit on one line and a 48ch cap gave it 567.8px, so it broke after "Shep checks" and left "the record." alone. 54ch is 638.8px and clears it. The second bound is the lede's own clamp, verbatim: below about 900px the lede is narrower than 54ch, and a supporting line wider than the subhead it supports reads as the louder of the two. So it wraps at 768 instead. */ .s1__copy .s1__auto{margin:0 auto 32px; max-width:min(54ch,clamp(430px,66vw,800px)); font-size:var(--t-bd);font-weight:600;line-height:1.45;color:var(--ink)} .s1__copy .acts{justify-content:center} /* ---------- the graphic band ---------- Full-bleed because .s has no inline padding: a direct child of the section already spans the viewport. Height is fixed, so the figure — absolutely positioned inside it — cannot shift anything when it decodes. */ .stage{--fig-w:calc(var(--stage-h) * .6664); /* 933/1400, both assets' ratio */ /* WHERE THE GROUND STARTS. The head crown sits at ~1.2% of stage height; the ground used to start at 0.3% and swallow it. At 18% the band's top edge runs the full width below the crown, so the head breaks clear above it in both slides — 99px of clearance at 1440, 60px at 375. */ --band-top:18%; position:relative;width:100%;height:var(--stage-h);overflow:hidden; background:var(--surface-alt);border-block:1px solid var(--border)} /* TWO FIGURES, ONE GROUND. The ground is not in here: it is painted once, outside both figures, so it cannot cross-fade and does not change across the cycle. Only the person swaps. Both figures are absolutely positioned in the same reserved box, so neither can move layout and CLS stays at zero. */ /* Geometry. Flat shapes, one flat colour each: no gradient, no blur, no texture. Arranged off-centre — light mass left, dark block right of the figure's spine, dots and a bar breaking the right edge. */ /* The ground is a BAND, not the whole stage: it starts at --band-top so the figure's head stands above its top edge. Children are positioned inside the band, so their percentages are of the band, not of the stage. */ .geo{position:absolute;left:0;right:0;top:var(--band-top);bottom:0;overflow:hidden; pointer-events:none;transform:translateY(var(--py,0px))} /* The figure is lit on one side and backed on the other: the ruled block runs under its left half, the dark block behind its right. The scrubs are very pale, and on a flat light band the shoulders would dissolve. */ /* Two masses, not a frame: a ruled block bleeding off the left, a solid dark block bleeding off the right, and a light channel between them where the figure's head sits. The scrubs are very pale — on a flat light band the shoulders dissolved, so the dark block runs behind the torso. An is a replaced element: top/bottom do not size it, only height. */ .geo__grid{position:absolute;left:-6%;top:0;width:48%;height:100%} /* Ruled, not blank. As a flat fill this block read as a hole in the page; carrying the same 28px rules as the light block at 7% white, it reads as the same material seen against a dark ground. Position and bleed are unchanged. */ /* A BAND, NOT A MASS. As a full-height block it was 778x550 at 1440 — 49.5% of the stage — and no amount of ruling stopped half the band reading as an empty rectangle. It now runs behind the figure's lower half only, at 21.7%, and the right-hand card sits across it so it has something to hold. It still bleeds off the right edge. */ /* Was top:69% of the stage; the band is 82% of the stage and starts at 18%, so (69-18)/82 = 62% keeps this block exactly where it has always sat. */ .geo__dark{position:absolute;left:36%;top:62%;width:70%;height:38%;background:var(--dark);overflow:hidden} .geo__darkrule{position:absolute;inset:0;width:100%;height:100%} .geo__bar{position:absolute;height:12px;background:var(--brand);opacity:.16;transform-origin:left center} .geo__bar--a{left:-8%;top:73%;width:34%;transform:rotate(-14deg)} .geo__bar--b{left:70%;top:10%;width:34%;transform:rotate(28deg);background:#fff;opacity:.10} /* Four, and high: five at a 20px gap ran into the left card at 1024. */ .geo__dots{position:absolute;left:7%;top:4%;display:flex;flex-direction:column;gap:14px} .geo__dots i{width:16px;height:16px;border-radius:50%;background:var(--brand)} /* ---------- MORE WORK ON THE GROUND, ALL OF IT OUT OF THE CARDS' WAY ---------- Three scales of dot and two of rule, in --brand and --brand-line only. The card envelope measured across 1025-1920 is x 15%-81.4%, y 11.9%-88.4% of the band; every one of these sits outside it, so no decorative box ever meets a card box. They are children of .geo, which is the first child of .stage, so both figures and the whole card group paint over them. */ .geo__fine{position:absolute;left:0;top:0;width:13%;height:100%;opacity:.85} .geo__coarse{position:absolute;right:0;top:0;width:16%;height:56%;opacity:.20} .geo__rules{position:absolute;left:0;right:0;top:0;height:9%; display:flex;flex-direction:column;justify-content:space-evenly} .geo__rules i{display:block;height:1px;background:var(--brand-line)} .geo__rules i:nth-child(2){opacity:.6} .geo__rules i:nth-child(4){opacity:.45} .geo__hairs{position:absolute;left:0;bottom:0;width:32%;height:9%; display:flex;justify-content:space-around;align-items:stretch} .geo__hairs i{display:block;width:1px;background:var(--brand-line)} .geo__hairs i:nth-child(even){opacity:.5} .stage__fig{position:absolute;left:50%;bottom:0;height:100%;width:auto;display:block; transform:translateX(-50%) translateY(var(--py,0px));-webkit-user-drag:none;user-select:none; opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s} .stage__fig.is-on{opacity:1;visibility:visible;transition:opacity .8s ease} /* Two product fragments, placed off the figure's own width so they overlap it at every viewport, not off the container — the container stops growing at 1200 and the figure does not. */ /* Three of five appointments, in three fixed positions. Only which appointment occupies a slot changes; a card's own text never does. Slots are measured off the figure's width, not the container's, so they overlap the figure at every viewport. Parallax rides the whole layer, so a card swapping in does not inherit a stale offset. */ .stage__cards{position:absolute;inset:0;pointer-events:none;transform:translateY(var(--py,0px))} .stage__cards:focus-visible{outline:2px solid var(--brand);outline-offset:6px;border-radius:4px} .fc{position:absolute;top:22%;right:calc(50% + var(--fig-w) * .15); display:flex;flex-direction:column;align-items:flex-start;gap:9px; background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:13px 16px; box-shadow:0 1px 2px rgba(14,26,43,.06),0 20px 40px -26px rgba(14,26,43,.40); /* THE CARDS DO NOT TAKE THE POINTER, and that is the whole pause fix. They sit at y~855 in a 1440x900 window — the lower middle of the first screen, where a laptop cursor rests. With pointer-events:auto a stationary cursor fired mouseenter, cleared the interval and froze the cycle for good, for somebody who never touched them. Nothing in here is clickable — no href, no click handler, no cursor other than the default — so the cards lose no interaction by declining the pointer. The mouseenter/mouseleave listeners stay bound and simply become unreachable; focusin/focusout on #cards are untouched, so a keyboard user can still hold a card still. */ pointer-events:none} /* THE CARDS ARRIVE ONE AT A TIME, ON EVERY CHANGE. The group only decides who is on stage; the motion belongs to the cards, and it is the same motion they have always used at load — 28px of travel over 460ms, 140ms apart. The outgoing three fade first, then the incoming three arrive staggered. A card's own text is still fixed for the life of the page. */ .fcg{position:absolute;inset:0;visibility:hidden} .fcg.is-on{visibility:visible} /* ENTRANCE AND EXIT. transform and opacity only: .fc is absolutely positioned, so its final box is held from first paint and nothing here can move layout. The wait state is in the markup so there is no flash before the first run. The same four states drive the load-time arrival and every later one — one motion language, not two. 28px of travel over 460ms, 140ms apart. */ .fcg[data-enter="wait"] .fc{opacity:0;transform:translateY(28px)} .fcg[data-enter="out"] .fc{opacity:0;transform:none;transition:opacity .26s ease} .fcg[data-enter="in"] .fc{opacity:1;transform:none; transition:opacity .46s ease,transform .46s cubic-bezier(.22,.7,.3,1)} .fcg[data-enter="in"] .fc.slot-1{transition-delay:.14s} .fcg[data-enter="in"] .fc.slot-2{transition-delay:.28s} .fcg[data-enter="done"] .fc{opacity:1;transform:none} /* Motion off, and the no-JS case: slide A only, static, all three cards present at final position. The second figure never appears, nothing transitions, and no timer runs. */ @media (prefers-reduced-motion:reduce){ .fcg .fc{transform:none;opacity:1;transition:none} .fcg,.stage__fig{transition:none} .stage__fig[data-slide="1"],.fcg[data-slide="1"]{opacity:0;visibility:hidden} .stage__fig[data-slide="0"],.fcg[data-slide="0"]{opacity:1;visibility:visible} } @media (scripting:none){ .fcg[data-enter="wait"] .fc{transform:none;opacity:1} .stage__fig[data-slide="0"],.fcg[data-slide="0"]{opacity:1;visibility:visible} } .fc.slot-0{top:27%;right:calc(50% + var(--fig-w) * .15);left:auto} .fc.slot-1{top:49%;left:calc(50% + var(--fig-w) * .13);right:auto} .fc.slot-2{top:71%;right:calc(50% + var(--fig-w) * .26);left:auto} .fc__t{font-size:var(--t-cap);font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--ink);white-space:nowrap} /* Reduced motion gets the three the markup ships with and no cross-fade. */ @media (prefers-reduced-motion:reduce){.fc{transition:none}} /* Parallax is opt-in from JS and revoked here in two places: below the desktop grid, and under reduced motion. Either one renders the resting composition, whatever the script has set. */ /* Below the desktop grid the two cards are dropped, not scaled. Card A is 379px of non-wrapping product string: measured across widths its left edge clears the gutter by 49px at 1024, by 22px at 960, and is off-screen by 900 — and by 1024 it is already within 10px of the dot column. Shrinking it would mean shrinking the strings. The figure and the geometry stay. */ @media (max-width:1024px){.stage__cards{display:none}} @media (max-width:1024px){.geo,.stage__fig,.fc{--py:0px!important}} @media (prefers-reduced-motion:reduce){.geo,.stage__fig,.fc{--py:0px!important}} /* Four columns, not a wrapping flex row. Set inline, the four items measure 1214px against a 1200px container even at zero gap, so the fourth dropped to a line of its own. As a grid each item wraps inside its own column and the dividers stay even. */ /* CENTRED IN THE COLUMN, BOTH WAYS. align-items:start sized each cell to its own text, so the dividers ran ragged - 20.3px of rule beside 40.59px - and one-line items floated at the top of a two-line row. Stretch gives every cell the row's height, so the rules are even and each item centres in a cell the same size as its neighbours. The divider's clearance moves from a padding-left on items 2-4 to a symmetric padding-inline on all four, or the centred text would sit half a gap right of its own column. Half the gap each side keeps the space between two items' text at exactly what it was. */ .proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:0 clamp(16px,2.1vw,30px); margin-top:0;padding-block:22px;border-bottom:1px solid var(--border)} .proof__i{display:flex;flex-direction:column;justify-content:center;text-align:center; padding-inline:clamp(8px,1.05vw,15px); font-size:var(--t-cap);font-weight:600;line-height:1.45;color:var(--slate)} .proof__i + .proof__i{border-left:1px solid var(--border)} /* ========= S1b TOMORROW'S SCHEDULE · modelled on the dashboard's /schedule ========= A vertical list of appointment rows. Seven tracks at desktop, mirroring the product's own: time, appointment, provider, codes, verdict, chairside, chevron. The product's second track is a patient identity; this page shows the appointment instead, because no patient data may appear here at all. */ .sch{background:var(--surface-alt);padding-block:calc(var(--band) * .8)} .sch__h{max-width:24ch} .sch__lead{margin:0 0 30px;font-size:var(--t-bd);line-height:1.6;color:var(--slate);max-width:56ch} .dv{border:1px solid var(--border);border-radius:6px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden} /* The hazard strip. The product prints one of two labels here and the other one is LIVE — Open Dental, which this page has no claim to. This page is always the demo one. Text only was changed; every declaration below is untouched, because this strip sits inside the mockup. */ .dv__hz{padding:8px clamp(14px,1.6vw,20px);background:rgba(143,116,0,.12); border-bottom:1px solid rgba(143,116,0,.34);color:var(--review-ink); font-size:var(--t-mic);font-weight:800;letter-spacing:.1em;text-transform:uppercase} .dv__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px clamp(14px,1.6vw,20px); background:var(--ink);color:#fff;font-size:var(--t-mic);font-weight:700;letter-spacing:.05em} .dv__pipe{width:1px;height:11px;background:rgba(255,255,255,.34)} .dv__cols,.ap__row{display:grid; grid-template-columns:56px minmax(0,1fr) 92px 142px 232px 92px 18px; gap:3px 14px;align-items:center;text-align:left} .dv__cols{padding:9px clamp(14px,1.6vw,20px);border-bottom:1px solid var(--border); background:var(--surface-alt);font-size:var(--t-mic);font-weight:700;letter-spacing:.06em;color:var(--slate)} .ap + .ap{border-top:1px solid var(--border)} /* THE ROW IS A BUTTON. The product uses
/; this needs one row open at a time and an idle cycle, which a native toggle fights. */ .ap__h{margin:0;font-size:inherit;font-weight:inherit} .ap__row{width:100%;font:inherit;background:none;border:0;cursor:pointer; padding:14px clamp(14px,1.6vw,20px);min-height:60px;color:inherit} .ap__row:hover{background:var(--surface-alt)} .ap__row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} .ap__t{font-size:var(--t-cap);font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums} .ap__n{font-size:var(--t-ui);font-weight:700;line-height:1.25;min-width:0} .ap__p{font-size:var(--t-cap);font-weight:500;color:var(--slate)} .ap__c{display:flex;flex-wrap:wrap;gap:4px} .cd{padding:3px 7px;border-radius:3px;background:var(--surface-alt);border:1px solid var(--border); font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--slate);white-space:nowrap} .cd--none{border-style:dashed;font-weight:600;letter-spacing:0;text-transform:none} .ap__v,.ap__w{display:flex;flex-wrap:wrap;gap:5px} /* The chairside badge. The dot is part of the mark, not decoration: it keeps NOW legible as a distinct object in greyscale. */ .bn{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:3px; background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;white-space:nowrap} .bn i{width:5px;height:5px;border-radius:50%;background:currentColor} .ap__x{width:10px;height:10px;border-right:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong); transform:rotate(45deg) translate(-2px,-2px);justify-self:end;transition:transform .18s ease} .ap__row[aria-expanded="true"] .ap__x{transform:rotate(-135deg) translate(-2px,-2px)} /* ---------- the expansion ---------- */ /* TIGHT, BECAUSE THERE ARE FIVE SECTIONS AND UP TO EIGHT LINES IN ONE PANEL. Nothing is removed — all five sections are still named and every line is still here; what changed is the air between them. Section headers drop a step to --t-mic, line padding goes 3px to 1px, section padding 10px to 4px, and the line's leading tightens to 1.3. */ .ap__b{padding:0 clamp(14px,1.6vw,20px) 11px;background:var(--surface-alt); border-top:1px solid var(--border)} .ap__k,.t2__k,.res__k{margin:5px 0 2px;font-size:var(--t-mic);font-weight:800; letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:var(--slate)} /* A SECTION IS A GROUP, NOT MORE LIST. .sr carried 1px of padding and .sh no margin at all, so five section headers and eight requirement rows ran together as one undifferentiated column. The header now sits on its own rule and the rows breathe beneath it. */ .sr{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 8px; padding:13px 0 14px;border-top:1px solid var(--border)} .sr:first-of-type{padding-top:9px} .sn{font-size:var(--t-mic);font-weight:800;line-height:1.35;color:var(--slate);font-variant-numeric:tabular-nums} .sb{display:flex;flex-direction:column;gap:9px} .sh{display:flex;align-items:baseline;gap:8px;margin-bottom:0; padding-bottom:8px;border-bottom:1px solid var(--border)} .st{font-size:var(--t-mic);font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;color:var(--ink)} .sc{font-size:11px;font-weight:700;color:var(--slate)} /* 92px, not 78: "Not yet due" measures 88.8px and "Suggested" 80.1px, so both spilled their pill onto the requirement text beside them. */ .ln{display:grid;grid-template-columns:92px minmax(0,1fr);gap:3px 10px;padding:0;align-items:baseline} .lt{font-size:var(--t-cap);line-height:1.3;color:var(--ink)} /* The status mark is a WORD, never a tick or a colour alone. */ .gl{padding:1px 7px;border-radius:3px;font-size:11px;font-weight:700;line-height:1.45; text-align:center;white-space:nowrap} .gl-missing{background:rgba(156,0,0,.09);color:var(--blocked-ink)} .gl-check{background:rgba(143,116,0,.12);color:var(--review-ink)} .gl-review{background:rgba(2,144,237,.11);color:var(--verify-ink)} .gl-ok{background:rgba(35,110,23,.10);color:var(--ready-ink)} .gl-task{background:rgba(169,147,247,.15);color:var(--codes-added-ink)} .gl-later,.gl-hedged{background:var(--surface);border:1px solid var(--line-strong);color:var(--slate)} /* THE CHIPS WERE TOUCHING. A single source space put "tooth #30" 0px from the words before it and 4.5px from the BEFORE/NOW tag beside it, so the three read as one run. The margin is on the chip, not the copy. */ .tooth{font-weight:700;margin-inline-start:8px;padding:1px 5px;border-radius:2px;background:var(--surface); border:1px solid var(--border);white-space:nowrap} .mk{font-style:normal;display:inline-block;margin-inline-start:8px;padding:1px 6px;border-radius:3px;border:1px solid var(--line-strong); font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--slate)} .mk-now{background:var(--ink);border-color:var(--ink);color:#fff} /* The sections that drew nothing: named on one line, never dropped. The product folds them exactly this way — see dashboard/render.py's _groups_html and _section_summary. Two sentences, not one: "checked and clear" and "no rule of that kind for these codes" are different facts. */ .ss{margin:5px 0 0;padding:6px 9px;border-radius:4px;font-size:var(--t-cap);line-height:1.35; background:var(--surface);border:1px solid var(--border)} .ss b{color:var(--ink)} .ss span{color:var(--slate)} .ss-clear{border-left:3px solid var(--ready)} .ss-unenc{border-left:3px solid var(--line-strong)} /* Not a section, and it may not look like one. */ .res{margin-top:8px;padding:7px 10px;border:1px dashed var(--line-strong);border-radius:4px;background:var(--surface)} .res__k,.t2__k{margin-top:0} /* Two days out is a different question from the day before, and a reader who conflates them treats a proposal as a deficiency. */ .t2{margin-top:8px;padding:8px 10px;border:1px solid var(--border);border-radius:4px;background:var(--surface)} /* NO HEIGHT RESERVE, AND NO IDLE CYCLE EITHER — the second is why the first is unnecessary. Pinning .dv__list at its tallest measured state (913px at 1440) held the CARD's size constant, but an auto-advancing accordion's shift is its ROWS moving inside the list: CLS came back 0.46831 with the reserve and without it, to five decimal places. The cycle is gone instead, so a row moves only when somebody opens it — a shift the reader asked for, which CLS does not count. */ .dv__foot{padding:12px clamp(14px,1.6vw,20px);border-top:1px solid var(--border); background:var(--surface-alt);font-size:var(--t-mic);color:var(--slate)} /* ========== S2 PILLARS · stepped and asymmetric, deliberately not cards ========== */ /* ---------- the hero geometry, reused at low prominence ---------- RESTORED. These rules were deleted by accident in d5d0bc6, when the S1b block was rewritten and the replacement span swallowed them. Without them .deco--rule fell back to position:static, display:inline and drew a bare 300x150 SVG in normal flow at x=0 — the stray rectangle above the huddle sheet — and .deco--dots collapsed to 0x0 and vanished. Both are decoration: aria-hidden, never behind body text, never inside a product mockup, and dropped below the desktop grid. .deco--dots is gone: it was filler for the dead space under the FAQ scope list, and a figure now occupies that space. .deco--rule remains. */ .deco{position:absolute;z-index:0;pointer-events:none} /* The sheet's top-right corner now rests on this, so it has a job. What stays visible is the sliver outside the container. */ .deco--rule{right:0;top:clamp(190px,23vw,320px);width:clamp(180px,22vw,300px); height:clamp(150px,17vw,240px);opacity:.75} @media (max-width:1024px){.deco{display:none}} /* White, not --surface-alt: the schedule section above it took that ground and two adjacent sections must not share one. */ .s2{background:var(--surface)} /* S4's heading, restored. The grid below keeps its 35/65 split. */ .s4__head{margin-bottom:clamp(30px,3.4vw,46px)} .s4__head .hd{max-width:26ch} /* ====== S3 CAPTURE WINDOW · dark 1 · vertical timeline, lit down the left ====== */ .s3{background:var(--dark);color:var(--on-dark-body);padding-block:calc(var(--band) * .78)} .s3 .hd{color:var(--on-dark)} .s3__thesis{max-width:46ch} .s3__thesis{font-size:var(--t-sub);font-weight:400;line-height:1.35;color:var(--on-dark-muted);margin:0 0 26px;max-width:46ch} .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} /* Six record types, named as records rather than sentences in a pill. */ .chip{padding:11px 14px; font-size:var(--t-cap);font-weight:600;line-height:1.4;color:var(--on-dark)} .tl{margin-top:clamp(48px,6vw,84px)} /* THE FIGURE IN THE TIMELINE'S EMPTY COLUMN. .tl__d is capped at 52ch, so the right of the container is free: measured 28.4% of it at 1025, 40.9% at 1300 and 39.3% from 1600 up. min(24vw,430px) stays inside the narrowest of those with room to spare, so the figure never reaches the step text at any width from 1025. Absolutely positioned inside a wrapper that is exactly the timeline's box: out of flow, so it cannot move a step or the foot paragraph, and bottom:0 stands it on the last step. width + aspect-ratio reserve the box before the file arrives, so it costs no layout shift. Hidden below 1025, where the steps go full width and there is no free column: lazy + display:none means a phone never requests the file. */ .s3__tlwrap{position:relative} /* THE FREE COLUMN, AS ONE BOX. Everything right of the 52ch measure is a child of .s3__aside, so one width rule governs the lot and the clearance from the step text is proved once. min(24vw,380px) is the measured fit: the free column is 28.4% of the container at 1025, 40.9% at 1300, 39.3% from 1600 up. TWO COMPOSITIONS, ONE BOX. Below 1281 the column is 246-307px wide, which cannot hold a card and the figure side by side, so the cards stack above it. From 1281 the column is wide enough: the figure drops to 76% and sits at the lower left, the cards take the upper right at 60%, and the two overlap horizontally by 36% of the column. --fw is the figure's rendered width and --fh its height (width over the 1.2129 aspect). BOTH connector endpoints are written against --fw/--fh, so an anchor stated as a percentage of the FIGURE lands on the same pixel of the photograph at every viewport width and at any figure size. THE BLOCK CLOSES ON ONE LINE. The aside runs --drop past .s3__tlwrap, where --drop repeats .s3__end's own margin-top, so the aside's bottom edge sits on .s3__end's border-top. The figure, the pool, the pool's hairline, the ring and the glow are all bottom:0 against that edge, so the five land on the same y and nothing paints below the rule. --fwr IS A KEEP-OUT CAP, NOT A TASTE CALL. Widening the figure drags the leftmost head edge - (100-Fw) + 8.11% x Fw of the column - left across the wires' vertical lanes. The lanes sit at the card left edges, so the largest of them fixes the ceiling: 28% caps Fw at 76.18% below 1281, and 36% caps it at 67.47% from 1281 up. --fwr is set just under each, which is why the figure grows only where the column is wide enough to allow it. Z-INDEX STACK inside the aside, back to front: 0 .s3__deco glow + dot grid (Change 3) 1 .s3__ground the pool it stands on (Change 3) 2 .s3__fig the figure 3 .wires the three connectors (Change 1) 4 .cal the callout cards (Change 2) The aside is out of flow, so nothing here can move a step, .s3__end or .s3__foot; below 1025 the whole box is display:none, so no card renders and the lazy figure is never requested. */ .s3__aside{display:none;position:absolute;right:0;top:0;bottom:calc(-1 * var(--drop)); width:var(--aw);isolation:isolate;pointer-events:none; --drop:clamp(44px,5vw,66px); --aw:min(24vw,380px); --fwr:.76; --fw:calc(var(--aw) * var(--fwr)); --fh:calc(var(--fw) * .8244); --above:calc(100% - var(--fh))} @media (min-width:1025px){.s3__aside{display:block}} .s3__fig{position:absolute;z-index:2;right:0;bottom:0; width:var(--fw);height:auto;aspect-ratio:900/742} /* THE GROUND IT STANDS ON. --brand-wash is 7% purple and --brand-line 20%; neither registered on --dark, so the pool is built from the solid --brand token held down by the element's own opacity - the same colour, stated at a strength that reads. A hairline of --rule-on-dark rides the pool's base so the ground has an edge instead of dissolving. */ .s3__ground{position:absolute;z-index:1;right:-4%;bottom:0;width:104%;height:72%; opacity:.38; background: radial-gradient(40% 26% at 50% 100%, var(--brand) 0%, transparent 72%), radial-gradient(68% 54% at 50% 100%, var(--brand) 0%, transparent 76%)} .s3__ground::after{content:"";position:absolute;left:14%;right:14%;bottom:0; height:1px;background:var(--rule-on-dark)} /* DECORATION. Was a 1.7px dot grid and a 1px ring, both in --brand-line at 20% alpha on a near-black ground: measurable but not visible. Now the solid --brand token at a stated opacity - a soft glow behind the figure, a 2.4px grid on a 22px pitch, and a 2px ring. No new colour values; the same token, turned up. Behind the figure and behind the cards at z-index 0. */ .s3__deco{position:absolute;z-index:0;inset:0} .s3__deco::before{content:"";position:absolute;right:-10%;bottom:0;width:104%;aspect-ratio:1; border-radius:50%;opacity:.20; background:radial-gradient(circle at 50% 50%, var(--brand) 0%, transparent 64%)} .s3__deco::after{content:"";position:absolute;right:0;bottom:6%;width:66%;height:38%; background-image:radial-gradient(var(--brand) 2.4px,transparent 2.5px); background-size:22px 22px;opacity:.55} .s3__ring{position:absolute;z-index:0;right:-8%;bottom:0;width:78%;aspect-ratio:1; border-radius:50%;border:2px solid var(--brand);opacity:.30} /* THE CALLOUT CARDS. Light cards with dark text, the same language as the hero's status cards, so the page has one card idiom on either ground. FACES ARE A KEEP-OUT ZONE. Both head boxes were read off the file's own pixels - skin-tone blobs grown up through the opaque hair: male x 8.11% .. 52.33% y 1.35% .. 44.88% female x 54.44% .. 88.89% y 9.16% .. 53.77% as percentages of the figure box. Together they cover x 8.11-88.89% of the width down to y 53.77%, so there is no horizontal way past them at any card width worth having. The cards therefore sit entirely ABOVE the figure, in a box that is the aside's height less the figure's, and the figure is narrower than before so it is shorter and its top sits lower in the column. Cards can never reach a head because they never reach the figure. */ .cal{position:absolute;z-index:4;right:0;top:0;pointer-events:auto; height:calc(100% - var(--fh))} .cal__c{position:absolute;right:0; display:grid;grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto;column-gap:11px;align-items:center; padding:clamp(10px,.85vw,13px) clamp(12px,1vw,15px); background:var(--surface);border-radius:8px;box-shadow:0 10px 26px rgba(3,13,40,.45)} .cal__i{grid-row:1 / span 2;display:grid;place-items:center;width:26px;height:26px;color:var(--brand)} .cal__i svg{width:20px;height:20px;display:block} .cal__k{margin:0;font-size:var(--t-cap);font-weight:800;line-height:1.25; letter-spacing:-.01em;color:var(--ink)} .cal__d{margin:2px 0 0;font-size:var(--t-mic);font-weight:500;line-height:1.35;color:var(--slate)} .cal__c:nth-child(1){top:0} .cal__c:nth-child(2){top:33%} .cal__c:nth-child(3){top:66%} /* THE CONNECTORS. Each drops from just below its own card and turns right onto the body: border-left plus border-bottom, so the vertical run is at the card's own left edge and the horizontal run is at the anchor's height. BOTH RUNS ARE PROVABLY CLEAR OF THE FACES. The cards are staggered in width so their left edges - and therefore the three vertical lanes - all fall left of the leftmost head edge, which is at (100-Fw) + 8.11% x Fw of the column. The horizontal runs sit at y 86%, 62% and 60% of the figure, all below the deepest head bottom of 53.77%. So no part of any wire can enter a head box. The three anchors, as percentages of the FIGURE, each checked against the file's alpha (15x15 fully opaque, and outside both head boxes): A1 20% , 62% the doctor's coat, mid-chest A2 48% , 60% his fingertip, at the edge of the phone A3 34% , 86% low on the coat, below the hand Lanes are assigned outermost-to-deepest, which is what keeps the three from crossing one another: the widest card drops furthest out and runs along the lowest line, the narrowest drops innermost and turns first. Each starts 24px below its own card's pinned top - the centre of that card's first line - so the hairline leaves the card it belongs to whatever height that card wraps to, and runs tangent to its left edge on the way down. */ .wires{position:absolute;z-index:3;inset:0} .wire{position:absolute; border-color:var(--brand);border-style:solid;border-width:0; border-left-width:1px;border-bottom-width:1px;border-bottom-left-radius:16px} .wire::before,.wire::after{content:"";position:absolute;width:6px;height:6px; border-radius:50%;background:var(--brand)} .wire::before{left:-3px;top:-3px} /* hangs from its own card's left edge */ .wire::after{right:-3px;bottom:-3px} /* lands on the body */ /* ---- STACKED, 1025-1280 -------------------------------------------------- Figure 76% of the column, so the leftmost head edge is at 30.16%; the three card left edges are 16%, 22% and 28%, all inside that corridor. */ @media (min-width:1025px) and (max-width:1280px){ .cal{width:84%} .cal__c:nth-child(1){width:100%} .cal__c:nth-child(2){width:92.86%} .cal__c:nth-child(3){width:85.71%} .wire--1{left:16%;right:calc(var(--fw) * .66);top:24px; bottom:calc(var(--fh) * .14)} .wire--2{left:22%;right:calc(var(--fw) * .80);top:calc(var(--above) * .33 + 24px);bottom:calc(var(--fh) * .38)} .wire--3{left:28%;right:calc(var(--fw) * .52);top:calc(var(--above) * .66 + 24px);bottom:calc(var(--fh) * .40)} } /* ---- WIDER COLUMN, 1281 AND UP ------------------------------------------- The column widens to min(31vw,440px) - the measured free space allows it. Figure 67%, so the leftmost head edge is at 38.43%; card left edges are 28%, 32% and 36%, all inside that corridor, and the cards are wide enough that no line wraps. */ @media (min-width:1281px){ .s3__aside{--aw:min(31vw,440px);--fwr:.67} .cal{width:72%} .cal__c:nth-child(1){width:100%} .cal__c:nth-child(2){width:94.44%} .cal__c:nth-child(3){width:88.89%} .wire--1{left:28%;right:calc(var(--fw) * .66);top:24px; bottom:calc(var(--fh) * .14)} .wire--2{left:32%;right:calc(var(--fw) * .80);top:calc(var(--above) * .33 + 24px);bottom:calc(var(--fh) * .38)} .wire--3{left:36%;right:calc(var(--fw) * .52);top:calc(var(--above) * .66 + 24px);bottom:calc(var(--fh) * .40)} } .tl__s{position:relative;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:clamp(18px,3vw,48px);padding:0 0 clamp(34px,4vw,54px) clamp(30px,3.4vw,46px)} .tl__s:last-child{padding-bottom:0} /* The lit band. Each stage paints its own segment so they join seamlessly. */ .tl__s::before{content:"";position:absolute;left:0;top:10px;bottom:0;width:3px;background:var(--on-dark)} .tl__s--shut::before{background:none;border-left:3px dashed var(--on-dark-border);width:0} .tl__s--peak::before{background:none;border-left:3px dashed var(--on-dark-border);width:0} .tl__s:last-child::before{bottom:auto;height:0;border:0} .tl__dot{position:absolute;left:-6px;top:5px;width:15px;height:15px;border-radius:999px; background:var(--dark);border:3px solid var(--on-dark)} .tl__s--peak .tl__dot{background:var(--on-dark);box-shadow:0 0 0 6px rgba(255,255,255,.13)} .tl__s--shut .tl__dot{border-color:var(--on-dark-border)} /* WAS --t-hd/800: 44px, the same size as every section h2 and heavier. Four step labels inside one section do not outrank the heading that governs them. */ /* THE LABEL CELL NEEDS A FLOOR. The two lead steps lost their T-2 / T-1 markers, and .tl__s is a per-row grid: with nothing in the cell its first column collapses to 0 and those two steps hang 80px left of Visit and After. Measured at 1440: 209/209/279/289 without this, 293 across with it. */ .tl__w{min-width:2.9em;font-size:var(--t-sub);font-weight:700;letter-spacing:-.018em;line-height:1.05;color:var(--on-dark);white-space:nowrap} .tl__s--shut .tl__w{color:var(--on-dark-muted)} .tl__t{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:var(--t-ui);font-weight:700; line-height:1.3;color:var(--on-dark);margin-bottom:8px} .tl__s--shut .tl__t{color:var(--on-dark-muted)} .tl__d{font-size:var(--t-bd);line-height:1.55;color:var(--on-dark-muted);max-width:52ch} .s3__end{margin-top:clamp(44px,5vw,66px);padding-top:26px;border-top:1px solid var(--on-dark-border)} .s3__foot{font-size:var(--t-bd);line-height:1.6;color:var(--on-dark-muted);max-width:var(--measure)} /* ========== S4 CROWN #30 · 35/65 · dominant: the seven-row checklist ========== */ .s4__grid{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);gap:clamp(28px,4.5vw,64px);align-items:start} /* Outside the mockup, so the brand tint is allowed here. It is a background only: no brand purple reaches text, chip or border inside .chk beside it. */ .quo{font-size:var(--t-lead);font-weight:500;line-height:1.42;letter-spacing:-.006em;color:var(--ink); border-left:3px solid var(--brand);background:var(--brand-wash); padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,24px);margin-bottom:22px} .s4__note{font-size:var(--t-cap);font-weight:500;color:var(--slate);margin-bottom:26px} /* Instructional scaffolding, sized below the checklist it explains. */ .legend{border-top:1px solid var(--border);margin-top:2px} .legend__r{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center; padding:7px 0;border-bottom:1px solid var(--border)} .legend__r dd{margin:0;font-size:var(--t-mic);line-height:1.45;color:var(--slate)} .chk{border:1px solid var(--border);border-radius:6px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden} .chk__bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:15px clamp(16px,2vw,26px); border-bottom:1px solid var(--border);background:var(--surface-alt)} .chk__t{font-size:var(--t-ui);font-weight:700;letter-spacing:-.01em} .chk__p{font-size:var(--t-cap);font-weight:500;color:var(--slate)} .chk__bar .v{margin-left:auto} .it + .it{border-top:1px solid var(--border)} .it__row{display:flex;align-items:center;gap:11px;width:100%;padding:15px clamp(16px,2vw,26px); background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer} .it__row:hover{background:var(--surface-alt)} .it__dot{flex:0 0 auto;width:14px;height:14px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface)} .it__dot--yes{border-color:var(--ink);background:var(--ink)} .it__dot--part{background:var(--surface-alt)} .it__l{flex:1 1 auto;font-size:var(--t-bd);line-height:1.4;min-width:0} .it__c{flex:0 0 auto;width:8px;height:8px;border-right:1.6px solid var(--slate);border-bottom:1.6px solid var(--slate); transform:rotate(45deg);transition:transform .15s ease} .it.is-open .it__c{transform:rotate(225deg)} .it__why{max-height:0;overflow:hidden;transition:max-height .2s ease;background:var(--surface-alt)} .it.is-open .it__why{max-height:280px} .it__why > *{padding-inline:clamp(16px,2vw,26px)} .it__why > :first-child{padding-top:16px} .it__why > :last-child{padding-bottom:18px} .why__k{font-size:var(--t-mic);font-weight:700;letter-spacing:.08em;color:var(--slate);margin-bottom:8px;text-transform:uppercase} .why__r{font-size:var(--t-bd);line-height:1.5;max-width:60ch} .why__c{margin-top:8px;font-size:var(--t-cap);line-height:1.5;color:var(--slate);max-width:60ch} .why__lab{font-weight:700;color:var(--ink)} /* ---- S1 · her subhead, set as two units: one break, one weight change ---- */ /* ONE SENTENCE, SET AS ONE. The two spans are a hand-off in the source, not a typographic instruction: as blocks at two sizes, two weights and two colours they read as two orphaned paragraphs with a gap between them. Inline and inheriting, they set as the single sentence they are. The words are untouched; only display, size, weight and colour change. */ .lede__a,.lede__b{display:inline;font-size:inherit;font-weight:inherit; line-height:inherit;color:inherit;margin:0} /* ---- S2 · clinical autonomy. The DOCTOR|SHEP split is the dominant visual. ---- */ .aut__h{max-width:26ch} .aut__b{font-size:var(--t-bd);line-height:1.6;color:var(--slate);max-width:var(--measure)} .split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--line-strong)} .split__c{padding-top:clamp(20px,2.4vw,32px)} .split__c:first-child{padding-right:clamp(22px,3vw,48px)} .split__c + .split__c{border-left:1px solid var(--border);padding-left:clamp(22px,3vw,48px)} /* THE TWO COLUMN LABELS. One step up the scale, --t-mic to --t-cap, and into brand purple: they name the split, which is this section's whole argument. Still labels and not headings - 14px against the h2's 44px, and under the 18px list items they head, so the column contents stay the loudest thing here. Editorial chrome, not product UI: no mockup is involved. */ .split__k{display:block;margin-bottom:16px;font-size:var(--t-cap);font-weight:800; letter-spacing:.13em;text-transform:uppercase;color:var(--brand)} /* WAS --t-sub/600: 28.8px, the pull-quote scale, for six list items. This is list content; --t-ui sits it under .split__k, which stays the column label. */ .split__l{display:flex;flex-direction:column;gap:6px} .split__l li{font-size:var(--t-ui);font-weight:600;line-height:1.3;letter-spacing:-.008em;padding:9px 13px} /* HOW A SECTION CLOSES. S2 and S6 both end on a one-line conclusion; both get the same mark, a short rule above in the text's own colour, so the page has one closing gesture rather than two loose paragraphs. */ /* ONE LINE, AND THE CAP WAS THE ONLY THING STOPPING IT. The sentence wants 988.66px at 1440; 30ch gave it 601.11px, so it broke after "Shep". 52ch is 1041.92px there and still inside the 1200px container. No type was shrunk. It wraps again below 768, where the container itself is narrower than the sentence. S6 used to close on a matching 52ch line; that line was a second statement of this one and is gone, so this is now the page's only closing gesture of its kind. */ .aut__close{margin-top:clamp(30px,3.4vw,46px);font-size:var(--t-sub);font-weight:700; line-height:1.26;letter-spacing:-.016em;max-width:52ch} .aut__close{position:relative;padding-top:clamp(18px,2vw,26px)} .aut__close::before{content:"";position:absolute;left:0;top:0; width:56px;height:2px;background:currentColor;opacity:.45} /* ---- S6 · differentiation, folded under the rule panel so that stays dominant ---- */ .diff{margin-top:clamp(46px,5.5vw,80px);padding-top:clamp(32px,3.8vw,50px);border-top:1px solid var(--on-dark-border)} .diff__h{margin:0 0 clamp(24px,2.8vw,38px);display:flex;flex-direction:column; font-size:var(--t-sub);line-height:1.2;letter-spacing:-.018em} .diff__h1{font-weight:800;color:var(--on-dark)} .clus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,38px)} .clus__k{display:block;margin-bottom:11px;font-size:var(--t-mic);font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-muted)} .clus__l{display:flex;flex-wrap:wrap;gap:6px} .clus__l li{padding:6px 11px; font-size:var(--t-cap);font-weight:600;line-height:1.35;color:var(--on-dark-body)} /* ---- S8 · founder band. A trust strip inside the pilot section, not a section. ---- */ .fb{padding-bottom:clamp(32px,3.8vw,50px);margin-bottom:clamp(32px,3.8vw,50px); border-bottom:1px solid var(--on-dark-border)} .fb__k{margin-bottom:22px;font-size:var(--t-mic);font-weight:800;letter-spacing:.13em; text-transform:uppercase;color:var(--on-dark-muted)} .fb__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,44px)} .fb__n{display:block;font-size:var(--t-ui);font-weight:700;color:var(--on-dark)} .fb__d{display:block;margin-top:5px;font-size:var(--t-cap);line-height:1.45;color:var(--on-dark-muted)} .fb__tag{margin-top:22px} .tagx{display:inline-flex;border:1px solid var(--on-dark-border);border-radius:3px;padding:5px 10px; font-size:var(--t-mic);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted)} .steps__note{margin:14px 0 26px;font-size:var(--t-cap);line-height:1.5;color:var(--on-dark-muted)} /* ============== S5 HUDDLE SHEET · one contained artifact ============== */ .s5{position:relative;overflow:hidden;background:var(--surface-alt);border-top:1px solid var(--border)} .s5__lede{margin-bottom:clamp(30px,4vw,48px);max-width:var(--measure)} /* Above the reused ruled block, which is absolutely positioned and would otherwise paint over the sheet's rows. */ .hs{position:relative;z-index:1;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow);overflow:hidden} /* THE SHEET'S HEAD IS A DOCUMENT HEAD. A title on its own line, the day it is for beneath it, and where the data came from set small and away to the right — the shape of something printed, not of a product bar. */ .hs__mast{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1px 20px; padding:22px clamp(16px,2.2vw,28px) 13px;border-bottom:2px solid var(--ink)} .hs__doc{grid-column:1;grid-row:1;font-size:var(--t-sub);font-weight:700;line-height:1.1; letter-spacing:-.022em;color:var(--ink)} .hs__date{grid-column:1;grid-row:2;font-size:var(--t-cap);font-weight:500;color:var(--slate); font-variant-numeric:tabular-nums} .hs__src{grid-column:2;grid-row:1 / span 2;align-self:end;font-size:var(--t-mic);font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--slate)} .hs__cols,.hr{display:grid;grid-template-columns:58px minmax(0,1fr) 104px 290px;gap:3px 16px;align-items:center} .hs__cols{padding:10px clamp(16px,2.2vw,28px);border-bottom:1px solid var(--border); font-size:var(--t-mic);font-weight:700;letter-spacing:.06em;color:var(--slate)} .hr{padding:15px clamp(16px,2.2vw,28px);min-height:66px} .hr + .hr{border-top:1px solid var(--border)} .hr__t{font-size:var(--t-cap);font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums} .hr__a{font-size:var(--t-ui);font-weight:700;line-height:1.25;min-width:0} .hr__r{display:block;margin-top:2px;font-size:var(--t-cap);font-weight:400;line-height:1.4;color:var(--slate)} .hr__p{font-size:var(--t-cap);font-weight:500;color:var(--slate)} .hr__v{display:flex;flex-wrap:wrap;gap:5px} .hs__foot{padding:17px clamp(16px,2.2vw,28px);border-top:1px solid var(--border);background:var(--surface-alt); font-size:var(--t-cap);line-height:1.5;color:var(--slate)} /* ============ S6 TRUST · dark 2 · dominant: one rule at poster scale ============ */ .s6{background:var(--dark);color:var(--on-dark-body);padding-block:calc(var(--band) * .78)} .s6 .hd{color:var(--on-dark)} .s6__scope{max-width:48ch} .s6__scope{font-size:var(--t-sub);font-weight:400;line-height:1.35;color:var(--on-dark-muted);max-width:48ch} .ten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(38px,4vw,58px)} .ten__i{padding-inline:clamp(18px,2.4vw,36px)} .ten__i:first-child{padding-inline-start:0} .ten__i:last-child{padding-inline-end:0} .ten__i + .ten__i{border-left:1px solid var(--on-dark-border)} .ten__h{margin:0 0 10px;font-size:var(--t-ui);font-weight:700;line-height:1.33;color:var(--on-dark)} .ten__b{font-size:var(--t-cap);line-height:1.55;color:var(--on-dark-muted)} .rul{margin:clamp(44px,5.5vw,72px) 0 0;background:var(--dark-lift); border:1px solid var(--on-dark-border);border-radius:8px; padding:clamp(26px,3.6vw,52px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(20px,3.2vw,56px);align-items:start} .rul__hd{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:9px 13px; margin-bottom:clamp(14px,1.6vw,22px);padding-bottom:clamp(14px,1.6vw,22px);border-bottom:1px solid var(--on-dark-border)} .rul__i{font-size:var(--t-ui);font-weight:700;color:var(--on-dark)} .rul__k{margin-left:auto;font-size:var(--t-mic);font-weight:700;letter-spacing:.08em; color:var(--on-dark-muted);text-transform:uppercase} /* --t-sub, NOT --t-hd. At --t-hd it set at 44px, the same size as every h2 on the page, so a piece of supporting evidence carried the same weight as the section headings. It is a quotation; it sets below them. */ .rul__q{margin:0;font-size:var(--t-sub);font-weight:400;line-height:1.26;letter-spacing:-.014em;color:var(--on-dark)} .rul__c{font-size:var(--t-cap);line-height:1.55;color:var(--on-dark-muted);padding-top:5px} .s6 .why__lab{color:var(--on-dark)} /* ================== S7 SCOPE + FAQ · 35/65 ================== */ .s7__grid{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);gap:clamp(28px,4.5vw,64px);align-items:start} .scope{margin-top:26px;border-top:1px solid var(--border)} .scope li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:baseline; padding:12px 0;border-bottom:1px solid var(--border);font-size:var(--t-cap);line-height:1.45} .scope__k{font-size:var(--t-mic);font-weight:700;letter-spacing:.07em;color:var(--slate);text-transform:uppercase} .s7__main details{border-top:1px solid var(--border)} .s7__main details:last-of-type{border-bottom:1px solid var(--border)} .s7__main summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between; gap:20px;padding:19px 2px;min-height:44px;font-size:var(--t-ui);font-weight:700;line-height:1.35} .s7__main summary:hover{background:var(--surface-alt)} .s7__main summary::-webkit-details-marker{display:none} .cv{flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate); transform:rotate(45deg);transition:transform .15s ease} .s7__main details[open] .cv{transform:rotate(225deg)} .s7__main details p{padding:0 2px 21px;font-size:var(--t-bd);line-height:1.6;color:var(--slate);max-width:var(--measure)} /* THE FIGURE UNDER THE SCOPE LIST. It takes the dots' place and their top margin. Full column width, so it reads as part of the left column rather than a stamp floating in it. In flow, so width:100% + aspect-ratio reserve its height before the file arrives - no layout shift. It makes the left column taller than the FAQ beside it, which is the cost of filling the column: the section grows and the FAQ list ends where it ends. The frame is the source's own, trimmed only of dead headroom - a square crop cut straight through the forearms and the pen cup, which read as a rendering fault on a cutout with no background behind it. Hidden below 1025, exactly where the dots were hidden, so the phone layout is byte-for-byte what it was; lazy + display:none means no request there. */ /* SEATED, NOT PASTED ON. Measured at HEAD: the figure's bottom row is 100% opaque and composites 37.7 luminance below the white ground (max 76), and the left and right edges carry ink on 42.2% and 53.4% of their length. Three of the four frame edges were therefore visible as straight cuts against white - the "photograph on a white rectangle" read. The fix is a tinted shape the figure stands in, not a fade: a fade hides the bottom cut but leaves the left and right ones against white. Here every cut edge coincides with an edge of a shape that is deliberately there, the cutout's transparent regions fill with the tint instead of with page white, and the figure has something to stand on. The padding is the point: every cut edge of the crop meets tint instead of page white, and the only line against white is the seat's own rounded edge, which is meant to be seen. More below the figure than above it, so it stands on the shape rather than floating in it. */ .s7__seat{display:none;position:relative;isolation:isolate; margin-top:clamp(28px,3vw,40px);border-radius:12px;overflow:hidden; padding:22px 0 0;background:var(--brand-wash)} /* FLUSH TO THE SEAT. The height cap left a 241px photo centred in a 398px panel, so the crop's own edges read as a small rectangle floating inside a larger one - four visible boundaries instead of none. The cap is gone and the figure is full width again, with the seat's padding removed on the sides and the bottom: the crop edge now coincides with the seat's own rounded edge on three sides, and the fourth is transparent. The top keeps its inset so the ground shows above the head. */ .s7__fig{display:block;position:relative;z-index:2; width:100%;height:auto;aspect-ratio:760/946} /* Part 3 decoration, behind the figure and inside the seat's own bounds. */ /* THE SEAT'S GROUND, in S3's vocabulary: a dot grid, a soft rounded shape and a ring, all in the solid --brand token held at a stated opacity. A plain 7% tint read as a blank swatch behind the photo; this reads as a ground the figure is standing on. Everything here is z-index 0 or 1, behind the figure at z-index 2. */ .s7__dots{position:absolute;z-index:0;inset:0; background-image:radial-gradient(var(--brand) 2.2px,transparent 2.3px); background-size:22px 22px;opacity:.34} .s7__blob{position:absolute;z-index:1;left:-18%;bottom:-22%;width:96%;aspect-ratio:1; border-radius:50%;background:var(--brand);opacity:.13} .s7__blob::before{content:"";position:absolute;right:-30%;top:-14%;width:78%;aspect-ratio:1; border-radius:50%;border:2px solid var(--brand);opacity:.30} @media (min-width:1025px){.s7__seat{display:block}} /* ================== S8 PILOT · dark 3 · a destination ================== */ .s8{background:var(--dark);color:var(--on-dark-body);padding-block:calc(var(--band) * .78) 0} .s8 .dsp{color:var(--on-dark)} .dsp--cta .dsp__b{color:var(--on-dark-muted)} .s8__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(32px,4.5vw,72px);align-items:start} .s8__lede{font-size:var(--t-sub);font-weight:400;line-height:1.35;color:var(--on-dark);margin-bottom:14px} .s8__body{font-size:var(--t-bd);line-height:1.6;color:var(--on-dark-muted);max-width:52ch;margin-bottom:30px} .steps{display:grid;gap:11px;margin-bottom:28px} .steps li{display:flex;align-items:center;gap:12px;font-size:var(--t-cap);font-weight:600;color:var(--on-dark-body)} .steps__n{flex:0 0 auto;width:24px;height:24px;border-radius:999px;border:1px solid var(--on-dark-border); color:var(--on-dark-muted);display:inline-flex;align-items:center;justify-content:center; font-size:11px;font-weight:700} .frm{background:var(--surface);border-radius:6px;padding:clamp(20px,2.6vw,30px);display:flex; flex-direction:column;gap:15px;color:var(--ink)} .fr{display:flex;flex-direction:column;gap:6px} .fr label{font-size:var(--t-cap);font-weight:700} .fr input,.fr select{height:44px;padding:0 12px;width:100%;font:inherit;font-size:var(--t-bd);color:var(--ink); background:var(--surface);border:1px solid var(--line-strong);border-radius:4px} /* These inputs carry no placeholder, so :placeholder-shown never matched and :not(:placeholder-shown) painted every required field red on first paint. :user-invalid only matches after real interaction or a submit attempt. */ .fr input:user-invalid,.fr select:user-invalid{border-color:var(--blocked)} .frm__note{font-size:var(--t-cap);line-height:1.5;max-width:46ch} /* The small print under the button. Same footnote style as the note above it, set quieter: it is a disclosure, not an alert. */ .frm__legal{color:var(--slate);max-width:52ch} .frm__reply{color:var(--slate)} .frm__body{display:flex;flex-direction:column;gap:inherit} /* The two answers the form can give. role="status" carries them to a screen reader; the left rule and the colour carry them to everyone else, and the wording carries them on its own in greyscale. */ .frm__status{font-size:var(--t-bd);line-height:1.5;max-width:46ch; padding:12px 14px;border-radius:4px;border-left:3px solid var(--line-strong)} .frm__status.is-ok{background:rgba(35,110,23,.09);border-left-color:var(--ready);color:var(--ready-ink)} .frm__status.is-bad{background:rgba(156,0,0,.08);border-left-color:var(--blocked);color:var(--blocked-ink)} .frm .btn{align-self:flex-start} /* product.html closes on the footer alone: the pilot band's top padding and the footer's own margin would otherwise stack into an empty dark screen. */ .s8--ftr{padding-block:clamp(40px,4vw,64px) 0} .s8--ftr .ftr{margin-top:0} /* THE FOOTER IS NOW THE SECOND NAVIGATION and carries the legal identity, so .ftr is a stack of rows rather than the single baseline line it was. Its ground is --dark on all six pages, which is why the links take --on-dark-body and the small print --on-dark-muted: the global a{} rule is --brand, and #5E2BC4 on #030D28 is nowhere near AA. */ .ftr{margin-top:clamp(52px,6vw,84px);padding-block:24px;border-top:1px solid var(--on-dark-border)} .ftr__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px} .ftr__m{font-size:var(--t-ui);font-weight:800;letter-spacing:-.02em;color:var(--on-dark)} .ftr__l{font-size:var(--t-cap);color:var(--on-dark-muted)} .ftr__nav{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:22px} .ftr__nav a{font-size:var(--t-cap);font-weight:600;color:var(--on-dark-body)} .ftr__nav a:hover{color:var(--on-dark)} .ftr__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px; padding-top:16px;border-top:1px solid var(--on-dark-border)} .ftr__legal,.ftr__co{margin:0;font-size:var(--t-cap);color:var(--on-dark-muted)} .ftr__legal a,.ftr__co a{color:var(--on-dark-body)} .ftr__legal a:hover,.ftr__co a:hover{color:var(--on-dark)} /* --on-dark-border is a 3.2:1 hairline colour: fine for a 1px rule, not for a character. The separator is text, so it takes the body-text token. */ .ftr__sep{color:var(--on-dark-muted)} /* "Questions we get." is three words and was breaking after two of them: at 44px it needs ~350px and its column is 398px wide and fixed by the 35/65 grid, so the measure cannot fix it — only the size can. This is below the >3-line threshold; it is a judgement call, flagged in the report. */ .s7__side .hd{font-size:clamp(26px,2.4vw,34px)} /* ===================== .ten on a light ground ===================== */ /* Same grid, same rhythm as the dark .ten; only the three colours swap to their light-ground tokens. Nothing new enters :root. */ .ten--lt .ten__h{color:var(--ink)} .ten--lt .ten__b{color:var(--slate)} .ten--lt .ten__i + .ten__i{border-left-color:var(--border);border-top-color:var(--border)} .ten__n{display:block;margin-bottom:9px;font-size:var(--t-mic);font-weight:800; letter-spacing:.14em;line-height:1.3;color:var(--slate)} .ten--dk .ten__n{color:var(--on-dark-muted)} /* Three across, two rows. Item 4 opens a row, so the divider it inherits from .ten__i + .ten__i would hang in empty space; the 3n+1 reset drops it. */ .ten--3{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(28px,3.2vw,44px)} .ten--3 .ten__i:nth-child(3n+1){border-left:0;padding-inline-start:0} .ten--3 .ten__i:nth-child(3n){padding-inline-end:0} .ten--2{row-gap:clamp(28px,3.2vw,44px)} .ten--2 .ten__i:nth-child(2n+1){border-left:0;padding-inline-start:0} /* A role under a name, in the team list. */ .ten__r{margin:-4px 0 11px;font-size:var(--t-cap);font-weight:700;color:var(--slate)} /* ===================== legal pages ===================== */ /* privacy.html and terms.html are one prose column — no cards, no grid. The measure is the same --measure the rest of the site's body copy uses. Links are underlined here because in a wall of prose colour alone is not enough to find them. */ .leg{max-width:var(--measure)} .leg__d{margin:0 0 clamp(26px,3vw,40px);font-size:var(--t-cap);font-weight:600;color:var(--slate)} .leg__h{margin:clamp(26px,3vw,38px) 0 8px;font-size:var(--t-ui);font-weight:700; letter-spacing:-.012em;line-height:1.3;color:var(--ink)} .leg__p{margin:0;font-size:var(--t-bd);line-height:1.65;color:var(--slate)} .leg__p a,.leg__d a{text-decoration:underline;text-underline-offset:2px} /* ===================== simple page hero ===================== */ /* how-it-works, about, privacy and terms open on text alone. .s1 is the home hero and carries a full-bleed graphic band with it, so these use their own two-line block instead of inheriting furniture they do not have. */ .ph{padding-bottom:clamp(30px,3.4vw,48px)} .ph .hd{max-width:22ch} .ph__lede{margin:0;font-size:var(--t-sub);font-weight:400;line-height:1.36; color:var(--slate);max-width:52ch} .sec__h{margin:0 0 clamp(20px,2.4vw,32px)} /* The closing call to action on a page that is not the home page. */ .cta{padding-block:clamp(44px,5vw,72px)} .cta .hd{margin-bottom:22px} /* ============================ breakpoints ============================ */ @media (max-width:1024px){ .s4__grid,.s7__grid,.s8__grid{grid-template-columns:minmax(0,1fr);gap:34px} .lede{max-width:50ch} .ten{grid-template-columns:minmax(0,1fr)} .ten__i{padding-inline:0} .ten__i + .ten__i{border-left:0;border-top:1px solid var(--on-dark-border);margin-top:22px;padding-top:22px} .rul{grid-template-columns:minmax(0,1fr);gap:16px} /* Four documentation types do not fit four columns below the desktop grid. */ .chips{grid-template-columns:repeat(2,minmax(0,1fr))} .clus,.fb__cols{grid-template-columns:minmax(0,1fr);gap:22px} .ten{grid-template-columns:minmax(0,1fr)} } @media (max-width:820px){ .dv__cols,.hs__cols{display:none} .hr{grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:start} .hr__t{grid-column:1;grid-row:1;padding-top:2px} .hr__a{grid-column:2;grid-row:1} .hr__p{grid-column:2;grid-row:2} .hr__v{grid-column:2;grid-row:3;margin-top:9px} /* THE ROW STACKS, IT DOES NOT SHRINK. Seven tracks cannot hold their content at 820 and below; named areas keep the reading order and the chevron stays on its own right-hand column so the control is still obviously a control. */ .ap__row{grid-template-columns:auto minmax(0,1fr) 18px; grid-template-areas:"t n x" "p p x" "c c x" "v v x" "w w x"; gap:6px 12px;align-items:start;padding-block:16px} .ap__t{grid-area:t;padding-top:3px} .ap__n{grid-area:n} .ap__p{grid-area:p} .ap__c{grid-area:c} .ap__v{grid-area:v;margin-top:2px} .ap__w{grid-area:w} .ap__x{grid-area:x;align-self:start;margin-top:6px} /* THE PILL STAYS ON THE ROW. Dropping it to its own line above the text made one requirement read as two items. An auto first column keeps it beside the text at any width, and the text wraps in its own column so the pill visibly governs every line of it. */ .ln{grid-template-columns:auto minmax(0,1fr);gap:3px 9px} .gl{justify-self:start} .tl__s{grid-template-columns:minmax(0,1fr);gap:10px} .tl__w:empty{display:none} /* Four columns hold to 821. At 820 a quarter of the container is 164px and the third item runs to four lines, so it becomes two rows of two. */ .proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(16px,2.1vw,30px)} .proof__i:nth-child(3){border-left:0} } @media (max-width:640px){ /* THE HEADER IS ONE LINE. The tagline is desktop chrome; on a phone it cost a second line beside the CTA and pushed the wordmark down into a caption. No burger: all three nav links point at sections of this one page and the CTA is already in the bar, so a menu would add a control with nowhere new to go. */ .brand__line{display:none} .brand{gap:0} /* WHY THE MARK GETS SMALLER HERE, NOT BIGGER. This was 25px: a bare "Shep" needed the bump to hold the corner once the tagline went. "Shep.dental" is eleven characters and holds it on its own - it is 106.67px wide at 18px, against 67.16px for the old mark at 25px. The bump is what broke the bar: at 25px the mark wants 148.14px and only 112.95px is free beside the CTA at 375, so the CTA wrapped and the header grew to two lines. 18px with a 12px minimum gap keeps one line down to 360. The gap is a floor, not a gutter - space-between still puts 30.28px between them at 375. */ .brand__mark{font-size:18px;letter-spacing:-.035em} .header__in{gap:12px} /* The four proof points were four loose lines under the photo. Bounded, grounded, and ruled between, so they read as one set. Deliberately not the .chip left-bar treatment — that mark already carries three other jobs. */ .proof{grid-template-columns:minmax(0,1fr);gap:0; background:var(--surface-alt);border:1px solid var(--border);border-radius:6px; padding:2px clamp(14px,4vw,18px)} /* The card supplies the inset at this width, so the items drop their own. */ .proof__i{padding-block:9px;padding-inline:0} .proof__i + .proof__i{border-left:0;border-top:1px solid var(--border)} /* ONE GROUP, NOT SIX SLABS. On --dark at this width the per-item left bar read as a column of broken rules and the tinted blocks as uneven slabs. The bar moves to the group and the items join into a continuous list with hairline rules between. Still nothing a .btn could be confused with: 0 radius against its 4px, and no item carries a border on all four sides. */ .chips{gap:0;border-left:2px solid var(--on-dark-border)} .chip{border-left:0;padding:10px 14px} .chip + .chip{border-top:1px solid var(--rule-on-dark)} .clus__l{display:block;border-left:2px solid var(--on-dark-border)} .clus__l li{border-left:0;padding:8px 14px} .clus__l li + li{border-top:1px solid var(--rule-on-dark)} .nav a:not(.btn){display:none} /* "Book a 20-minute walkthrough" needs more than 327px on one line, so it filled the row while the outline button sat half as wide beside it. Stacked, they read as a pair. */ .s1__copy .acts{flex-direction:column;align-items:stretch} .scope li{grid-template-columns:minmax(0,1fr);gap:3px} .legend__r{grid-template-columns:72px minmax(0,1fr)} .it__row{flex-wrap:wrap;gap:8px} .it__l{flex:1 1 100%;order:-1} .chips{grid-template-columns:minmax(0,1fr)} .split{grid-template-columns:minmax(0,1fr)} .split__c:first-child{padding-right:0;padding-bottom:18px} .split__c + .split__c{border-left:0;border-top:1px solid var(--border);padding-left:0} } @media (prefers-reduced-motion:reduce){.it__why,.it__c,.cv{transition:none}} /* ================================ print ================================ */ @media print{ .header-sticky,.topbar,.acts,.frm,.s7{display:none!important} body{background:#fff;color:#000} .s{padding-block:16px!important;background:#fff!important;color:#000!important} .s3,.s6,.s8{background:#fff!important;color:#000!important} .hs,.chk,.dv{box-shadow:none!important;break-inside:avoid} }