/* www.css — the marketing-site components, on top of audora.css. Class names mirror docs/design/www.html (the approved prototype). */ .mx { --navink: var(--ink); --sect: var(--u4); --hgap: var(--u3); --gut: var(--u5); --gap: var(--u3); } .mx .bg { display:block; width:100%; height:100%; object-fit:cover; } .mx-slab-img .bg { filter:grayscale(1) contrast(1.15); } /* shared */ .mx-k { font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--acc-text); margin-bottom:var(--u2); } .mx-h2 { font-family:var(--face-display); font-size:clamp(1.5rem,2.7vw,2.1rem); font-weight:800; letter-spacing:-.028em; line-height:1.05; text-transform:uppercase; max-width:26ch; text-wrap:balance; } .mx-b1 { display:inline-block; background:var(--ink); color:var(--paper); font-size:.88rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:var(--u2) var(--u4); } .mx-b2 { display:inline-block; border:2px solid var(--ink); color:var(--ink); font-size:.88rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:calc(var(--u2) - 2px) calc(var(--u4) - 2px); } .mx-fine { font-family:var(--mono); font-size:.72rem; line-height:1.75; color:var(--faint); } /* 01 nav — from Hard */ .mx-nav { display:flex; align-items:center; gap:var(--u3); padding:var(--u2) var(--edge); background:var(--navink); color:#EAE8E3; position:sticky; top:0; z-index:50; } /* Sticky nav offset: keep in-page anchor targets (#how, #pricing, guide TOCs) clear of the bar. */ [id] { scroll-margin-top:4rem; } .mx-mk { font-size:1.58rem; font-weight:700; letter-spacing:-.028em; } .mx-mk i { font-style:italic; display:inline-block; transform:skewX(-8deg); margin-right:-.025em; } /* The A is inline-block + skewed, so its layout box is the upright advance while the glyph leans into the u. A POSITIVE margin here made the A|u ink gap 0.117em against 0.051em for every other pair — measured, not eyeballed. -.025em lands it at 0.050em, matching ud/do/or exactly. Mirrored in src/components/common/AudoraLogo.tsx. */ /* Mobile-first: the secondary link row collapses below 700px so the header (logo + Log in + Apply) never overflows narrow viewports. www ships no JS, so this is a pure CSS reveal — not a scripted hamburger. .mx-login carries margin-left:auto while the links are hidden so the CTAs stay right-aligned. */ .mx-nav nav { display:none; gap:var(--u3); font-family:var(--mono); font-size:.67rem; letter-spacing:.13em; text-transform:uppercase; color:#9DA2AA; } .mx-login { margin-left:auto; border:1px solid #4A4A52; color:#EAE8E3; font-family:var(--mono); font-size:.67rem; letter-spacing:.13em; text-transform:uppercase; padding:calc(var(--u1) - 1px) var(--u2); } @media (hover:hover){ .mx-login:hover { border-color:#EAE8E3; } } .mx-apply { background:var(--acc); color:#fff; font-family:var(--mono); font-size:.67rem; letter-spacing:.13em; text-transform:uppercase; padding:var(--u1) var(--u2); } @media (min-width:700px){ .mx-nav nav { display:flex; margin-left:auto; } .mx-login { margin-left:0; } } /* 02 hero — text from Signal, buttons from Hard */ .mx-hero { } .mx-hl { padding:var(--u3) var(--edge); } .mx-hl .mx-strap, .mx-hl .mx-h1, .mx-hl .mx-sub, .mx-hl .mx-acts { margin-bottom:var(--u2); } .mx-strap { display:flex; align-items:center; gap:var(--u2); font-family:var(--mono); font-size:.68rem; } .mx-strap b { background:var(--acc); color:#fff; padding:.16rem .4rem; font-weight:700; } .mx-strap { letter-spacing:.15em; text-transform:uppercase; color:var(--dim); margin-bottom:var(--u3); } .mx-h1 { font-family:var(--face-display); font-size:clamp(2.3rem,7.4vw,5.6rem); font-weight:800; line-height:.92; letter-spacing:-.045em; text-transform:uppercase; max-width:15ch; margin-bottom:var(--u3); text-wrap:balance; } .mx-h1 em { font-style:normal; color:var(--acc); } .mx-sub { font-size:1.08rem; line-height:1.55; color:var(--dim); max-width:46ch; margin-bottom:var(--u3); } .mx-acts { display:flex; flex-wrap:wrap; gap:var(--u2); margin-bottom:var(--u3); } .mx-hph { position:relative; aspect-ratio:21/9; border-block:3px solid var(--ink); } .mx-cap { position:absolute; left:0; bottom:0; background:var(--ink); color:#EAE8E3; font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; padding:var(--u1) var(--u2); } /* 03 steps */ .mx-steps { padding:0; } /* No border-bottom: the next block is always .mx-pillar, whose border-top draws this line. Both would stack to 6px against every other 3px seam. */ .mx-track { display:grid; grid-template-columns:1fr; } @media (min-width:800px){ .mx-track { grid-template-columns:repeat(3,1fr); } } .mx-tk { padding:var(--u4) var(--edge); border-top:1px solid var(--seam); } @media (min-width:800px){ .mx-tk { border-top:0; border-left:1px solid var(--seam); padding:var(--u4); } .mx-tk:first-child { border-left:0; padding-left:var(--edge); } .mx-tk:last-child { padding-right:var(--edge); } } .mx-tt { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--acc-text); margin-bottom:var(--u1); font-variant-numeric:tabular-nums; } .mx-tn { font-size:1.02rem; font-weight:800; text-transform:uppercase; letter-spacing:-.014em; margin-bottom:var(--u1); } .mx-tp { font-size:.92rem; line-height:1.56; color:var(--dim); max-width:36ch; } /* 04-07 pillars */ .mx-pillar { display:grid; grid-template-columns:1fr; border-top:3px solid var(--ink); background:var(--card); } @media (min-width:920px){ .mx-pillar { grid-template-columns:1.05fr .95fr; } .mx-pillar.rev { grid-template-columns:.95fr 1.05fr; } } .mx-ptxt { padding:var(--sect) var(--gut) var(--sect) var(--edge); display:flex; flex-direction:column; justify-content:center; } /* Outer/inner edge padding follows which grid column .mx-ptxt actually sits in, not the .rev class name — .rev only means "the graphic block is the narrower/first column", and several pages put the graphic there while still listing .mx-ptxt first in the DOM (non-rev pillars can do the same, graphic-first). Keying off :last-child instead of .rev keeps the outer margin on the true outer edge in every layout, not just the one where .rev happens to also mean "ptxt is last". */ .mx-pillar > .mx-ptxt:last-child { padding:var(--sect) var(--edge) var(--sect) var(--gut); } .mx-ph3 { font-family:var(--face-display); font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:800; letter-spacing:-.026em; line-height:1.05; text-transform:uppercase; max-width:22ch; margin-bottom:var(--u3); } .mx-plist { display:flex; flex-direction:column; gap:var(--u2); margin-top:0; } .mx-plist li { display:flex; gap:var(--u2); font-size:.95rem; line-height:1.5; color:var(--dim); max-width:48ch; } .mx-plist li::before { content:"—"; color:var(--acc); font-weight:600; flex:none; } .mx-pimg { position:relative; min-height:300px; border-left:3px solid var(--ink); } /* Third of the same mirror family as the .mx-ptxt and .mx-monwrap rules above. .mx-pimg's 3px rule is the seam between the photo and the text beside it, not a page edge, so it belongs on whichever side the text is: left while the photo is the right-hand column (the original and still the common case), right once a pillar leads with the photo. Gated at the two-column breakpoint for the .mx-monwrap reason — stacked, there is no text beside it, and flipping the rule at one column would make adjacent photos disagree about which margin they hang off. */ @media (min-width:920px){ .mx-pillar > .mx-pimg:first-child { border-left:0; border-right:3px solid var(--ink); } } .mx-pnote { font-family:var(--mono); font-size:.68rem; color:var(--faint); margin-top:var(--u3); line-height:1.7; } /* release monitor (distribute pillar visual) */ .mx-monwrap { padding:var(--sect) var(--gut) var(--sect) var(--edge); display:flex; align-items:center; } /* Mirror of the .mx-ptxt:last-child rule above, for the same reason: the outer/inner edge padding follows which grid column the block actually sits in. Until /how-it-works/ every .mx-monwrap was the first child, so the single left-column padding was enough; a pillar that puts the panel in the right-hand column needs --edge on the true outer edge, which is now the right. Gated at the two-column breakpoint, unlike the .mx-ptxt rule: a stacked pillar has no inner edge, and .mx-mon is a bordered block with a filled header bar, so flipping its indent at one column makes alternating panels visibly disagree about where the page margin is — an ambiguity a run of body text doesn't have. */ @media (min-width:920px){ .mx-pillar > .mx-monwrap:last-child { padding:var(--sect) var(--edge) var(--sect) var(--gut); } } .mx-mon { border:1px solid var(--seam); background:var(--paper); width:100%; } .mx-montop { display:flex; padding:var(--u1) var(--u2); font-family:var(--mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; background:var(--navink); color:#EAE8E3; } .mx-montop em { margin-left:auto; font-style:normal; font-variant-numeric:tabular-nums; } .mx-row { display:flex; align-items:center; gap:var(--u2); padding:var(--u2); border-bottom:1px solid var(--seam); } .mx-row:last-child { border-bottom:0; } .mx-art { width:34px; height:34px; flex:none; } .mx-t { font-size:.88rem; font-weight:600; } .mx-s { font-family:var(--mono); font-size:.64rem; color:var(--faint); font-variant-numeric:tabular-nums; } .mx-st { margin-left:auto; display:flex; align-items:center; gap:var(--u1); font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } .mx-d { width:9px; height:9px; border:1.5px solid var(--ink); border-radius:50%; flex:none; } .mx-d.f{background:var(--ink)} .mx-d.h{background:linear-gradient(90deg,var(--ink) 0 50%,transparent 50%)} .mx-d.x{border-radius:0;transform:rotate(45deg);background:var(--acc);border-color:var(--acc)} /* feedback card (feedback pillar visual) */ .mx-fbwrap { padding:var(--sect) var(--gut) var(--sect) var(--edge); display:flex; align-items:center; } .mx-fb { border:1px solid var(--seam); background:var(--paper); width:100%; max-width:30rem; } .mx-fbtop { display:flex; align-items:baseline; gap:var(--u2); padding:var(--u1) var(--u2); background:var(--navink); color:#EAE8E3; } .mx-fbt { font-size:.9rem; font-weight:600; } .mx-fbg { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#9DA2AA; margin-left:auto; } .mx-fbrow { display:flex; align-items:center; gap:var(--u2); padding:var(--u1) var(--u2); } .mx-fbrow:first-of-type { padding-top:var(--u2); } .mx-fbk { font-family:var(--mono); font-size:.63rem; letter-spacing:.11em; text-transform:uppercase; color:var(--dim); width:13ch; flex:none; } .mx-bar { flex:1; height:8px; background:#E7E3D8; position:relative; } .mx-bar i { position:absolute; inset:0 auto 0 0; background:var(--ink); } .mx-fbv { font-family:var(--mono); font-size:.68rem; color:var(--ink); width:3ch; text-align:right; font-variant-numeric:tabular-nums; } .mx-fbq { padding:var(--u2); font-size:.88rem; line-height:1.55; color:var(--dim); border-top:1px solid var(--seam); margin-top:var(--u1); } /* 08 proof */ .mx-slab { display:grid; grid-template-columns:1fr; background:var(--navink); color:var(--paper); } @media (min-width:900px){ .mx-slab { grid-template-columns:1.05fr .95fr; } } .mx-slab-txt { padding:var(--sect) var(--gut) var(--sect) var(--edge); display:flex; flex-direction:column; justify-content:center; } .mx-slab-k { font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:#9B988E; margin-bottom:var(--u2); } .mx-slab-h { font-family:var(--face-display); font-size:clamp(1.5rem,2.8vw,2.15rem); font-weight:800; line-height:1.03; letter-spacing:-.028em; text-transform:uppercase; max-width:19ch; margin-bottom:var(--u3); text-wrap:balance; } .mx-slab-p { font-size:1rem; line-height:1.6; color:#C6C3B9; max-width:44ch; } .mx-slab-img { position:relative; min-height:280px; border-left:3px solid var(--ink); } .mx-proof { padding:var(--sect) var(--edge); display:grid; grid-template-columns:1fr; gap:var(--hgap) var(--gut); } @media (min-width:900px){ .mx-slab { display:grid; grid-template-columns:1fr; background:var(--navink); color:var(--paper); } @media (min-width:900px){ .mx-slab { grid-template-columns:1.05fr .95fr; } } .mx-slab-txt { padding:var(--sect) var(--gut) var(--sect) var(--edge); display:flex; flex-direction:column; justify-content:center; } .mx-slab-k { font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:#9B988E; margin-bottom:var(--u2); } .mx-slab-h { font-family:var(--face-display); font-size:clamp(1.5rem,2.8vw,2.15rem); font-weight:800; line-height:1.03; letter-spacing:-.028em; text-transform:uppercase; max-width:19ch; margin-bottom:var(--u3); text-wrap:balance; } .mx-slab-p { font-size:1rem; line-height:1.6; color:#C6C3B9; max-width:44ch; } .mx-slab-img { position:relative; min-height:280px; border-left:3px solid var(--ink); } .mx-proof { grid-template-columns:1.1fr .9fr; align-items:start; } } .mx-bio { font-size:.97rem; line-height:1.62; color:var(--dim); max-width:52ch; margin-top:var(--u2); } .mx-bio b { color:var(--ink); font-weight:600; } .mx-marc { background:var(--card); border:1px solid var(--seam); padding:var(--u3); } .mx-mwho { display:flex; align-items:baseline; gap:var(--u2); margin-bottom:var(--u1); } .mx-mn { font-size:1.06rem; font-weight:600; letter-spacing:-.015em; } .mx-mg { font-family:var(--mono); font-size:.63rem; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); } .mx-mq { font-size:.94rem; line-height:1.6; color:var(--dim); margin-bottom:var(--u2); } .mx-mfacts { display:flex; flex-wrap:wrap; gap:var(--u1) var(--u3); border-top:1px solid var(--seam); padding-top:var(--u2); } .mx-mf { font-family:var(--mono); font-size:.67rem; color:var(--faint); font-variant-numeric:tabular-nums; } .mx-mf b { color:var(--ink); font-weight:500; } /* 09 platforms */ .mx-plat { border-block:3px solid var(--ink); background:var(--card); padding:var(--sect) var(--edge); } .mx-dsps { display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--gut); margin-top:var(--hgap); } @media (min-width:700px){ .mx-dsps { grid-template-columns:repeat(4,1fr); } } .mx-dsp { font-family:var(--mono); font-size:.78rem; color:var(--dim); padding:var(--u1) 0; border-top:1px solid var(--seam); display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; } .mx-dsp b { color:var(--ink); font-weight:500; } /* 10 comparison */ .mx-cmp { padding:var(--sect) var(--edge); } .mx-tblwrap { overflow-x:auto; margin-top:var(--hgap); border:1px solid var(--seam); } .mx-tbl { width:100%; border-collapse:collapse; background:var(--card); min-width:640px; } .mx-tbl th { font-family:var(--mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; text-align:left; background:var(--navink); color:#9DA2AA; padding:var(--u2); } .mx-tbl th.au { color:#fff; background:var(--acc); } .mx-tbl td { font-size:.88rem; line-height:1.5; padding:var(--u2); border-bottom:1px solid var(--seam); color:var(--dim); vertical-align:top; } .mx-tbl td:first-child { font-weight:600; color:var(--ink); } .mx-tbl td.au { color:var(--ink); } .mx-tbl tr:last-child td { border-bottom:0; } /* 11 pricing */ .mx-price { border-block:3px solid var(--ink); background:var(--card); padding:var(--sect) var(--edge); } .mx-tiers { display:grid; grid-template-columns:1fr; gap:var(--gap); margin-top:var(--hgap); } @media (min-width:860px){ .mx-tiers { grid-template-columns:repeat(4,1fr); } } .mx-tier { border:1px solid var(--seam); background:var(--paper); padding:var(--u3); display:flex; flex-direction:column; } .mx-tier.hot { border:3px solid var(--ink); } .mx-tname { font-size:.95rem; font-weight:800; letter-spacing:.01em; text-transform:uppercase; } .mx-tprice { font-size:1.7rem; font-weight:600; letter-spacing:-.03em; margin:var(--u1) 0 0; font-variant-numeric:tabular-nums; } .mx-tprice span { font-size:.85rem; font-weight:400; color:var(--faint); letter-spacing:0; } .mx-tlist { margin-top:var(--u2); display:flex; flex-direction:column; gap:var(--u1); } .mx-tlist li { font-size:.85rem; line-height:1.45; color:var(--dim); display:flex; gap:var(--u1); } .mx-tlist li::before { content:"—"; color:var(--acc); flex:none; } .mx-tcta { margin-top:auto; padding-top:var(--u3); } .mx-tbtn { display:block; text-align:center; border:2px solid var(--ink); color:var(--ink); font-size:.8rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:var(--u1); } /* The featured tier is marked by its 3px card border above — the button does not need to differ too, and filling it made the odd one out in a row of four AND killed its hover, since .mx-tbtn:hover inverts outline->filled and this one was already filled. All four tier buttons are now the same type. */ .mx-pfoot { font-family:var(--mono); font-size:.7rem; color:var(--faint); margin-top:var(--u3); line-height:1.75; } /* 12 faq */ .mx-faq { padding:var(--sect) var(--edge); } .mx-faq details { max-width:58rem; } .mx-faq details { border-top:1px solid var(--seam); } .mx-faq details:last-of-type { border-bottom:1px solid var(--seam); } .mx-faq summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:var(--u2); font-size:1rem; font-weight:600; letter-spacing:-.012em; padding:var(--u2) 0; } .mx-faq summary::before { content:"+"; font-family:var(--mono); color:var(--acc); font-weight:600; } .mx-faq details[open] summary::before { content:"–"; } .mx-faq summary::-webkit-details-marker { display:none; } .mx-fa { font-size:.94rem; line-height:1.62; color:var(--dim); max-width:64ch; padding:0 0 var(--u3) calc(1em + var(--u2)); } /* 13 guides */ .mx-guides { padding:var(--sect) var(--edge); } .mx-gcards { display:grid; grid-template-columns:1fr; gap:var(--gap); margin-top:var(--hgap); } @media (min-width:800px){ .mx-gcards { grid-template-columns:repeat(3,1fr); } } .mx-gc { background:var(--card); border:1px solid var(--seam); padding:var(--u3); display:flex; flex-direction:column; gap:var(--u1); } .mx-gk { font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); } .mx-gt { font-size:1.02rem; font-weight:600; letter-spacing:-.015em; line-height:1.25; } .mx-gd { font-size:.88rem; line-height:1.55; color:var(--dim); } .mx-gm { font-family:var(--mono); font-size:.66rem; color:var(--faint); margin-top:auto; padding-top:var(--u2); } /* 14 close */ .mx-close { position:relative; border-top:3px solid var(--ink); } .mx-cl { padding:var(--sect) var(--gut) var(--sect) var(--edge); } @media (min-width:900px){ .mx-cl { width:48%; } } .mx-clh { font-family:var(--face-display); font-size:clamp(1.6rem,3.1vw,2.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.02; text-transform:uppercase; max-width:16ch; margin-bottom:var(--u3); text-wrap:balance; } .mx-clp { font-size:1.02rem; line-height:1.6; color:var(--dim); max-width:40ch; margin-bottom:var(--u3); } .mx-clim { position:relative; aspect-ratio:16/10; } @media (min-width:900px){ .mx-clim { position:absolute; top:0; right:0; bottom:0; left:52%; aspect-ratio:auto; border-left:3px solid var(--ink); } } /* 15 footer */ .mx-foot { background:var(--navink); color:#A5A29A; padding:var(--sect) var(--edge); } .mx-fgrid { display:flex; flex-wrap:wrap; gap:var(--hgap) var(--sect); } .mx-fcol .mx-fh { font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:#8A887E; margin-bottom:var(--u2); } .mx-fcol ul { display:flex; flex-direction:column; gap:var(--u1); } .mx-fcol li { font-size:.85rem; } .mx-fmk { color:var(--paper); font-size:1.05rem; font-weight:700; letter-spacing:-.028em; margin-bottom:var(--u1); } .mx-fmk i { font-style:italic; display:inline-block; transform:skewX(-8deg); margin-right:-.025em; } .mx-flegal { font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; margin-top:var(--u4); color:#8A887E; } /* ── motion (14-motion.md): instrument ballistics. Base page is complete without any of this. ── */ @media (prefers-reduced-motion: no-preference) { /* peak-hold hovers: attack 0ms, decay 233ms */ .mx-nav nav span, .mx-apply, .mx-b1, .mx-b2, .mx-tbtn, .mx-faq summary, .mx-gc, .mx-fcol li { transition: background-color var(--t-3) var(--e-out), color var(--t-3) var(--e-out), border-color var(--t-3) var(--e-out), transform var(--t-2) var(--e-out); } @media (hover:hover) { .mx-nav nav span:hover { color:#fff; transition:none; } .mx-apply:hover { background:#B02209; transition:none; } /* Was #26262B on #0C0C0E — a 3% lift on near-black, which reads as nothing. Signal red is this system's action colour (the nav Apply button, the 'yours to do' diamond), so the primary CTA revealing it on hover is both unmistakable and on-brand. White on --acc passes AA. */ .mx-b1:hover { background:var(--acc); color:#fff; transition:none; } /* The old rule set border-color to var(--ink) — which is what .mx-b2 already is, so the hover did LITERALLY NOTHING. Invert to filled, matching .mx-tbtn:hover so every outlined button in the system answers the same way. */ .mx-b2:hover { background:var(--ink); color:var(--paper); transition:none; } .mx-tbtn:hover { background:var(--ink); color:var(--paper); transition:none; } .mx-gc:hover { border-color:var(--ink); transition:none; } .mx-fcol li:hover { color:#EAE8E3; transition:none; } } /* press: 0ms in, never below .97 */ .mx-b1:active, .mx-b2:active, .mx-apply:active, .mx-tbtn:active { transform:scale(.97); transition:none; } /* disclosure: answer settles in, 233ms, travel one step */ .mx-faq details[open] .mx-fa { animation: mx-settle var(--t-3) var(--e-in); } @keyframes mx-settle { from { opacity:0; transform:translateY(8px); } } /* the one cue light: DELIVERING is a real in-flight process — slow discrete blink, tally-style */ .mx-d.h { animation: mx-cue 1.6s steps(2, jump-none) infinite; } @keyframes mx-cue { 50% { opacity:.35; } } } /* MPA crossfade where supported; instant elsewhere is the design */ @view-transition { navigation: auto; } html { scroll-behavior: auto; } .mx-gt a:hover { color: var(--acc-text); } /* ── inner-page templates (docs/handoff/10-www.md) ───────────────────── Three shared layouts on the same register as the homepage: .mx-phead content-page header (services, features, campaigns) .mx-prose long-form article body (guides) .mx-legal plain legal text */ /* page header — lighter than the homepage hero, same voice */ .mx-phead { padding:var(--u4) var(--edge) var(--u4); border-bottom:3px solid var(--ink); } .mx-phead .mx-h1 { font-size:clamp(2rem,5.2vw,3.8rem); max-width:18ch; } .mx-phead .mx-sub { margin-bottom:0; } .mx-phead .mx-acts { margin:var(--u3) 0 0; } /* content sections on inner pages */ .mx-sect { padding:var(--sect) var(--edge); border-top:1px solid var(--seam); } .mx-sect:first-of-type { border-top:0; } .mx-sect .mx-h2 { margin-bottom:var(--u3); } /* article (guides) — measured column, mono furniture */ .mx-artw { padding:var(--u4) var(--edge); } .mx-prose { max-width:68ch; } .mx-prose > * + * { margin-top:var(--u3); } .mx-prose h2 { font-family:var(--face-display); font-size:1.35rem; font-weight:800; letter-spacing:-.02em; text-transform:uppercase; padding-top:var(--u3); border-top:3px solid var(--ink); margin-top:var(--u4); } .mx-prose h3 { font-size:1.05rem; font-weight:700; margin-top:var(--u4); } .mx-prose p, .mx-prose li { font-size:1rem; line-height:1.65; color:var(--ink); } .mx-prose ul, .mx-prose ol { padding-left:1.2em; } .mx-prose ul { list-style:square; } .mx-prose ol { list-style:decimal; } .mx-prose li + li { margin-top:var(--u1); } .mx-prose a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .mx-prose strong { font-weight:700; } .mx-prose blockquote { border-left:3px solid var(--ink); padding-left:var(--u3); color:var(--dim); } .mx-meta-row { display:flex; flex-wrap:wrap; gap:var(--u3); font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-top:var(--u3); } .mx-meta-row b { color:var(--acc-text); font-weight:700; } /* data tables inside prose (comparison tables) */ .mx-prose .mx-tblwrap { margin-top:var(--u3); } /* legal — quiet, dense, honest */ .mx-legal { max-width:68ch; padding:var(--u4) 0 var(--u5); } .mx-legal h2 { font-family:var(--face-display); font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:.01em; margin-top:var(--u4); } .mx-legal h3 { font-size:.95rem; font-weight:700; margin-top:var(--u3); } .mx-legal p, .mx-legal li { font-size:.92rem; line-height:1.7; color:var(--dim); margin-top:var(--u2); } .mx-legal ul, .mx-legal ol { padding-left:1.2em; } .mx-legal ul { list-style:square; } .mx-legal ol { list-style:decimal; } .mx-legal a { text-decoration:underline; text-underline-offset:3px; } .mx-legal strong { color:var(--ink); } /* shared gate-CTA close for inner pages (partial cta-apply) */ .mx-pclose { padding:var(--sect) var(--edge); border-top:3px solid var(--ink); } .mx-pclose .mx-clp { font-size:1.02rem; line-height:1.6; color:var(--dim); max-width:52ch; margin:0 0 var(--u3); } .mx-pclose .mx-acts { margin-bottom:var(--u2); } /* article/legal furniture */ .mx-arth1 { font-family:var(--face-display); font-size:clamp(1.9rem,4.6vw,3.2rem); font-weight:800; line-height:1.0; letter-spacing:-.035em; text-transform:uppercase; max-width:22ch; margin:var(--u2) 0 var(--u3); text-wrap:balance; } .mx-stand { font-size:1.08rem; line-height:1.55; color:var(--dim); max-width:52ch; } .mx-afig { position:relative; border-block:3px solid var(--ink); margin:var(--u4) 0; max-width:820px; } .mx-afig img { width:100%; height:auto; } .mx-keys { border:3px solid var(--ink); padding:var(--u3); margin-top:var(--u4); max-width:68ch; } .mx-keys .mx-k { margin-bottom:var(--u2); } .mx-keys ul { padding-left:1.2em; list-style:square; } .mx-keys li { font-size:.95rem; line-height:1.6; } .mx-keys li + li { margin-top:var(--u1); } .mx-note { border-left:3px solid var(--acc); background:var(--card); padding:var(--u2) var(--u3); margin-top:var(--u3); } .mx-note p { font-size:.95rem; } .mx-legal h1 { font-family:var(--face-display); font-size:clamp(1.7rem,3.8vw,2.5rem); font-weight:800; text-transform:uppercase; letter-spacing:-.03em; line-height:1.02; margin-bottom:var(--u1); } .mx-faqs { max-width:68ch; margin-top:var(--u4); } .mx-faqs details { border-top:1px solid var(--seam); } .mx-faqs details:last-child { border-bottom:1px solid var(--seam); } .mx-faqs summary { font-weight:700; font-size:.98rem; padding:var(--u2) 0; cursor:pointer; list-style:none; display:flex; } .mx-faqs summary::after { content:"+"; margin-left:auto; font-weight:400; color:var(--faint); } .mx-faqs details[open] summary::after { content:"–"; } .mx-faqs .mx-fa { font-size:.95rem; line-height:1.6; color:var(--dim); padding:0 0 var(--u3); max-width:60ch; } .mx-rel { margin-top:var(--u4); display:grid; gap:var(--u2); grid-template-columns:1fr; max-width:820px; } @media (min-width:760px){ .mx-rel { grid-template-columns:1fr 1fr; } } .mx-relc { border:1px solid var(--seam); background:var(--card); padding:var(--u3); display:block; } .mx-relc b { display:block; font-size:.98rem; font-weight:700; margin-bottom:var(--u1); } .mx-relc span { font-size:.88rem; line-height:1.5; color:var(--dim); } @media (hover:hover){ .mx-relc:hover { border-color:var(--ink); } } /* 16 forms — a real
posting to an edge function. No JS: every validation cue here is native HTML (required, type=, minlength) — see docs/handoff/12-frontend.md §1 for why www ships none. */ .mx-form { max-width:640px; margin-top:var(--u4); display:flex; flex-direction:column; gap:var(--u3); } .mx-frow { display:grid; gap:var(--u3); grid-template-columns:1fr; } @media (min-width:640px){ .mx-frow.mx-f2 { grid-template-columns:1fr 1fr; } } .mx-field { display:flex; flex-direction:column; gap:var(--u1); } .mx-field label { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); } .mx-field .mx-optional { text-transform:none; letter-spacing:0; } .mx-field input, .mx-field select, .mx-field textarea { font:inherit; font-size:.95rem; color:var(--ink); background:var(--paper); border:1px solid var(--seam); padding:var(--u2); width:100%; } .mx-field textarea { resize:vertical; min-height:9em; } .mx-field input:focus-visible, .mx-field select:focus-visible, .mx-field textarea:focus-visible { outline:2px solid var(--ink); outline-offset:1px; } .mx-fhint { font-size:.8rem; color:var(--faint); } .mx-fnote { font-size:.82rem; line-height:1.6; color:var(--dim); max-width:60ch; } /* Honeypot: off-screen (not display:none/visibility:hidden — some scripted submitters skip fields hidden that way) rather than absent, so a bot filling every visible-looking field still catches it. */ .mx-hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .mx-fsubmit { border:none; cursor:pointer; } /* 17 calculators — plain vanilla JS at the bottom of the page it's in, never a framework. Values in .mx-cres are pre-rendered with the same defaults the