:root{ --void:#161D30; --void-2:#1B2338; --panel:#222C45; --panel-2:#2A3552; --chrome:#DDE5F2; /* Dim text is tuned to the panel it sits on. When --void/--panel were lightened these stayed put and every muted element lost contrast: --muted on a card fell from 3.64:1 to 2.69:1, which is why the "1-word · .com" line went unreadable. Lifted so --muted clears WCAG AA (4.5:1) on both --panel and --void, with the steps between tokens preserved. */ --chrome-dim:#B4C0D4; --muted:#93A1BA; --faint:#6E7B95; --blue:#4C8DFF; --blue-mid:#2A62E0; --blue-deep:#1B47B8; --blue-dark:#0A2260; --blue-glow:rgba(76,141,255,.45); --navh:72px; /* The nav sits deliberately darker than the page. Two forms of one colour: translucent for the sticky bar (it blurs what scrolls under it), solid for the mobile drawer (nothing scrolls under that). Keep them in step. */ --nav-bg:rgba(12,18,32,.86); --nav-solid:#0C1220; --grad:linear-gradient(135deg,#4C8DFF 0%,#1B47B8 55%,#0A2260 100%); --grad-soft:linear-gradient(135deg,rgba(76,141,255,.16) 0%,rgba(10,34,96,.30) 100%); --jade:#4FD1A0; --hair:rgba(221,229,242,.16); --hair-2:rgba(221,229,242,.10); --maxw:1200px; --gutter:clamp(20px,5vw,56px); --ease:cubic-bezier(.22,.61,.36,1); --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif; --f-body:"Inter Tight","Helvetica Neue",Arial,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace; } /* Single committed visual world: a dark trading-desk aesthetic. Every colour is painted explicitly so the page holds on any host ground. */ *{box-sizing:border-box} /* ── scrollbar: present but almost invisible, never a UI element ── */ *{scrollbar-width:thin;scrollbar-color:rgba(221,229,242,.13) transparent} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(221,229,242,.11);border-radius:99px;border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:rgba(221,229,242,.24);background-clip:content-box} ::-webkit-scrollbar-corner{background:transparent} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{ margin:0;background:var(--void);color:var(--chrome); font-family:var(--f-body);font-size:16.5px;line-height:1.6; -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} /* ── mockup strip ── */ .mockbar{ background:var(--grad);color:#EAF1FF; font-family:var(--f-mono);font-size:11px;letter-spacing:.05em; padding:8px 16px;text-align:center;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; } .mockbar b{font-weight:500} /* ── nav ── */ nav{ position:sticky;top:0;z-index:50; background:var(--nav-bg);backdrop-filter:blur(14px); border-bottom:1px solid var(--hair-2); } .navin{ max-width:var(--maxw);margin:0 auto;padding:16px var(--gutter); display:flex;align-items:center;gap:28px; } .logo{ font-family:var(--f-display);font-weight:800;font-size:23px; letter-spacing:-.02em;color:var(--chrome);text-decoration:none; } .logo span{color:var(--blue)} .navlinks{display:none;gap:26px;margin-left:auto} @media(min-width:840px){.navlinks{display:flex}} /* ── mobile nav drawer ───────────────────────────────────────────────────── Below 840px .navlinks used to be display:none with NO replacement, so a phone visitor could not reach Browse, Past sales, List your domain, Lease to own or About at all. Same markup both sides of the breakpoint. */ .navtoggle{ display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:42px;height:38px;padding:9px 8px;background:transparent;cursor:pointer; border:1px solid var(--hair);border-radius:2px; /* Sits left of the logo, so pull back against .navin's 28px gap. */ margin-right:-14px; } .navtoggle .bar{display:block;height:1.5px;background:var(--chrome);border-radius:2px;transition:transform .2s var(--ease),opacity .2s var(--ease)} .navtoggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .navtoggle[aria-expanded="true"] .bar:nth-child(2){opacity:0} .navtoggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} @media(min-width:840px){.navtoggle{display:none}} @media(max-width:839px){ /* nav carries backdrop-filter, which makes it the containing block for fixed descendants. So `bottom:0` resolves against the 72px nav, not the viewport, and collapsed the drawer to 41px. Size it explicitly instead. 100dvh rather than 100vh so mobile browser chrome does not clip it. */ .navlinks{ display:flex;flex-direction:column;gap:0;margin:0; position:fixed;left:0;right:0;top:var(--navh);z-index:55; height:calc(100dvh - var(--navh)); background:var(--nav-solid);border-top:1px solid var(--hair-2); padding:8px var(--gutter) 32px;overflow-y:auto; transform:translateX(-100%);visibility:hidden; transition:transform .24s var(--ease),visibility .24s var(--ease); } .navlinks.is-open{transform:none;visibility:visible} .navlinks a{ font-size:15px;letter-spacing:.04em;padding:18px 2px; border-bottom:1px solid var(--hair-2); } .navlinks a[aria-current="page"]{color:var(--blue)} } body.no-scroll{overflow:hidden} .navlinks a{ font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:var(--chrome-dim);text-decoration:none;transition:color .2s var(--ease); } .navlinks a:hover{color:var(--blue)} .navcta{ margin-left:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.05em; padding:9px 16px;border:1px solid var(--blue);color:var(--blue); text-decoration:none;border-radius:2px;white-space:nowrap; transition:background .2s var(--ease),color .2s var(--ease); } @media(min-width:840px){.navcta{margin-left:0}} .navcta:hover{background:var(--grad);color:#F2F7FF;border-color:var(--blue-mid)} a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px} /* Below 380px the nav runs out of room: gutter + toggle + 23px logo + a 135px cta exceeds the viewport. Tighten the gap and the cta rather than shrink the wordmark, which Clement just sized up deliberately. */ @media(max-width:379px){ .navin{gap:14px;padding-left:16px;padding-right:16px} .navcta{padding:8px 11px;font-size:11px;letter-spacing:.03em} .navtoggle{margin-right:-7px} } /* ── section frame ── */ section{padding:88px 0;border-top:1px solid var(--hair-2)} section:first-of-type{border-top:none} .kicker{ font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--blue);margin:0 0 16px;display:flex;align-items:center;gap:14px; } .kicker::after{content:"";flex:1;height:1px;background:var(--hair)} h2{ font-family:var(--f-display);font-weight:600; font-size:clamp(30px,4.4vw,46px);line-height:1.06;letter-spacing:-.025em; margin:0 0 16px;text-wrap:balance; } h3{font-family:var(--f-body);font-weight:600;font-size:18px;margin:0 0 8px} /* Prose fills its line, then wraps. `pretty` guards only the last line against an orphan. `balance` stays on headings — on prose it shortens every line and leaves a ragged gap. */ p,li,dd,h3,h4,.card p,.step p,.phase p,.directstrip p{text-wrap:pretty} p{margin:0 0 18px;max-width:74ch;color:var(--chrome-dim)} p.tight{max-width:none} .appendix p.tight{max-width:none} strong{color:var(--chrome);font-weight:600} /* ── hero ── */ .hero{padding:92px 0 76px;position:relative;overflow:hidden} .hero::before{ content:"";position:absolute;inset:-40% -20% auto -20%;height:520px; background:radial-gradient(62% 62% at 50% 0%,rgba(76,141,255,.16),transparent 72%); pointer-events:none; } .hero h1{ font-family:var(--f-display);font-weight:600; font-size:clamp(40px,6.6vw,74px);line-height:1.0;letter-spacing:-.035em; margin:0 0 22px;max-width:16ch;text-wrap:balance;position:relative; } .hero h1 em{font-style:normal;color:var(--blue)} .hero .sub{font-size:21px;line-height:1.5;max-width:70ch;color:var(--chrome-dim);position:relative} .herobtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;position:relative} .btn{ font-family:var(--f-mono);font-size:12.5px;letter-spacing:.05em; padding:13px 22px;border-radius:2px;text-decoration:none; transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease); display:inline-block;cursor:pointer; } button.btn{font-family:var(--f-mono);font-size:12.5px} .btn.solid{background:var(--grad);color:#F2F7FF;border:1px solid var(--blue-mid);box-shadow:0 6px 24px -12px var(--blue-glow)} .btn.solid:hover{transform:translateY(-1px);box-shadow:0 10px 30px -12px var(--blue-glow)} .btn.ghost{background:transparent;border:1px solid var(--hair);color:var(--chrome)} .btn.ghost:hover{border-color:var(--blue);color:var(--blue)} /* ── name wall (hero) ── */ .wall{ margin-top:60px;display:flex;flex-wrap:wrap;gap:10px;position:relative; } .wall a{ font-family:var(--f-display);font-weight:400; font-size:clamp(18px,2.6vw,30px);letter-spacing:-.02em; color:var(--chrome-dim);text-decoration:none; padding:6px 14px;border:1px solid var(--hair-2);border-radius:2px; transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease); } .wall a:hover{color:var(--chrome);border-color:var(--blue-mid);background:var(--grad-soft)} .wall a.dim{color:var(--faint)} /* ── stats ── */ .stats{display:grid;gap:1px;background:var(--hair-2);border:1px solid var(--hair-2);border-radius:3px;overflow:hidden} @media(min-width:700px){.stats{grid-template-columns:repeat(3,1fr)}} .stat{background:var(--void);padding:30px 26px} .stat .n{ font-family:var(--f-display);font-weight:600;font-size:44px;line-height:1; color:var(--blue);letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-shadow:0 0 40px var(--blue-glow); } .stat .l{ font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-top:12px; } /* ── filters ── */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px} .filters button{ font-family:var(--f-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase; background:transparent;color:var(--chrome-dim); border:1px solid var(--hair);border-radius:2px;padding:8px 14px;cursor:pointer; transition:all .2s var(--ease); } .filters button:hover{color:var(--chrome);border-color:var(--chrome-dim)} .filters button[aria-pressed="true"]{background:var(--grad);color:#F2F7FF;border-color:var(--blue-mid)} /* ── portfolio grid ── */ /* minmax(0,1fr), not 1fr. A bare 1fr resolves to minmax(auto,1fr), and `auto` means min-content, which long unbreakable domain names inflate — that is what pushed the browse page to a 1627px scrollWidth inside a 1440px viewport. */ /* auto-fill sizes against the CONTAINER, not the viewport. Viewport breakpoints were wrong here because on browse the grid lives inside a column the sidebar has already narrowed by ~220px, which is how 1024px ended up with three 225px cards and names breaking mid-word. minmax(0,...) matters too: a bare 1fr is minmax(auto,1fr) and `auto` is min-content, which long domain names inflate — that produced a 1627px scrollWidth inside 1440px. */ .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))} .dom{ container-type:inline-size; background:var(--panel);border:1px solid var(--hair-2);border-radius:3px; padding:22px;display:flex;flex-direction:column;gap:14px; transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease); text-decoration:none;color:inherit; } /* The whole card is one anchor, so every link state must stay undecorated — including :visited, which otherwise repaints the price purple. */ .dom:link,.dom:visited,.dom:hover,.dom:focus,.dom:active{text-decoration:none;color:inherit} .dom *{text-decoration:none} /* /browse/ filters by toggling [hidden] on each card. .dom sets display:flex, which beats the browser's own [hidden] rule, so a filtered-out card would stay on screen. Issue #27, per Thomas 2026-09-13. */ .dom[hidden]{display:none} .dom:hover{border-color:var(--blue-mid);transform:translateY(-2px);background:var(--panel-2);box-shadow:0 10px 34px -20px var(--blue-glow)} /* min-width:0 on both, or the name's min-content floor shoves the tag past the card edge. That was the residual 900-1100px overflow after the grid tracks were fixed. overflow-wrap lets a very long name take two lines instead. */ .dom .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0} .dom .top>.tag{flex:0 0 auto} .dom .name{ font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.6vw,28px); letter-spacing:-.03em;line-height:1.05;color:var(--chrome); min-width:0;overflow-wrap:break-word; } .dom .name .tld{color:var(--muted);font-weight:400} .tag{ font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; padding:4px 8px;border-radius:2px;white-space:nowrap; border:1px solid var(--hair);color:var(--chrome-dim); } .tag.prem{border-color:var(--blue-mid);color:var(--blue);background:var(--grad-soft)} /* The Premium/Brandable tag takes ~78px of the head, so on a narrow card the name was left about 147px and split mid-word: Rentac|ouch, WalletFor|Men. Container queries let the CARD decide, which viewport breakpoints cannot do inside a sidebar layout. Under 340px the tag drops to its own line and the name takes the full width; type scales with the card. */ @container (max-width:340px){ /* Stack, do not wrap. flex-wrap left the tag on the left and right-aligned the name, which demotes the one thing the card exists to show. Column with the tag ordered first reads as a label above a left-aligned name. */ .dom .top{flex-direction:column;align-items:flex-start;gap:9px} .dom .top>.tag{order:-1} .dom .name{font-size:clamp(21px,8.4cqi,26px)} } .dom .cat{ font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--muted); margin-top:-6px; } .dom .foot{ margin-top:auto;padding-top:14px;border-top:1px solid var(--hair-2); display:flex;flex-direction:column;gap:7px; } .dom .foot .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .price{font-family:var(--f-mono);font-size:15px;color:var(--chrome);font-variant-numeric:tabular-nums} .price.req{font-size:12px;color:var(--blue);letter-spacing:.04em} .lease{font-family:var(--f-mono);font-size:11px;color:var(--muted)} .saving{ font-family:var(--f-mono);font-size:10px;letter-spacing:.05em; color:var(--jade);white-space:nowrap; } .directstrip{ display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px; border:1px solid var(--hair);border-radius:3px;padding:18px 22px;margin:0 0 26px; background:var(--grad-soft); } .directstrip .big{ font-family:var(--f-display);font-weight:600;font-size:26px;letter-spacing:-.02em; color:var(--chrome);white-space:nowrap; } .directstrip p{margin:0;font-size:15.5px;max-width:none;flex:1 1 340px} /* ── sold wall ── */ .sold{display:grid;gap:12px} @media(min-width:620px){.sold{grid-template-columns:repeat(2,1fr)}} @media(min-width:960px){.sold{grid-template-columns:repeat(3,1fr)}} .soldcard{ border:1px solid var(--hair-2);border-radius:3px;padding:20px 22px; background:linear-gradient(160deg,var(--panel-2) 0%,var(--void-2) 100%); display:flex;align-items:center;justify-content:space-between;gap:14px; } .soldcard .name{ font-family:var(--f-display);font-weight:600;font-size:23px;letter-spacing:-.03em; color:var(--chrome-dim); } .soldcard .name .tld{color:var(--faint);font-weight:400} .stamp{ font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--jade);border:1px solid rgba(89,217,165,.35);border-radius:2px; padding:4px 9px;white-space:nowrap; } /* ── lease steps ── */ .steps{display:grid;gap:1px;background:var(--hair-2);border:1px solid var(--hair-2);border-radius:3px;overflow:hidden;margin-top:8px} @media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}} .step{background:var(--void);padding:28px 26px} .step .num{ font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--blue);margin-bottom:14px; } .step p{font-size:15px;margin:0;color:var(--chrome-dim)} /* ── founders ── */ .founders{display:grid;gap:14px;margin-top:8px} @media(min-width:700px){.founders{grid-template-columns:repeat(2,1fr)}} .founder{ background:var(--panel);border:1px solid var(--hair-2);border-radius:3px;padding:24px; display:flex;gap:18px;align-items:center; } .avatar{ width:68px;height:68px;border-radius:50%;flex:0 0 68px; border:1px solid var(--hair); object-fit:cover;display:block; box-shadow:0 6px 20px -12px rgba(0,0,0,.9); } .founder .role{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .founder .who{font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:-.02em;margin-top:4px} .founder .li{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-family:var(--f-mono);font-size:12px;color:var(--chrome-dim);text-decoration:none;transition:color .18s var(--ease)} .founder .li:hover,.founder .li:focus{color:var(--blue)} .founder .li svg{flex:0 0 auto;display:block} /* ── contact ── */ .contact{display:grid;gap:14px} @media(min-width:760px){.contact{grid-template-columns:1.1fr .9fr}} .cbox{background:var(--panel);border:1px solid var(--hair-2);border-radius:3px;padding:28px} .field{display:block;margin-bottom:14px} .field span{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);display:block;margin-bottom:7px; } .field input,.field textarea{ width:100%;background:var(--void);border:1px solid var(--hair);border-radius:2px; color:var(--chrome);font-family:var(--f-body);font-size:15px;padding:11px 13px; } .field input:focus,.field textarea:focus{outline:none;border-color:var(--blue)} .field textarea{min-height:96px;resize:vertical} .direct dt{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-top:20px; } .direct dt:first-child{margin-top:0} .direct dd{margin:6px 0 0;font-size:16px} .direct dd a{color:var(--chrome);text-decoration:none;border-bottom:1px solid var(--blue-mid)} .direct dd a:hover{color:var(--blue)} /* ── footer ── */ footer{border-top:1px solid var(--hair-2);padding:40px 0;background:var(--void-2)} .footin{ display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center; font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted); } .footin a{color:var(--chrome-dim);text-decoration:none} .footin a:hover{color:var(--blue)} /* ── appendix ── */ .appendix{background:var(--void-2);border-top:1px solid var(--hair)} .appendix h2{font-size:clamp(26px,3.4vw,34px)} .audit{display:grid;gap:1px;background:var(--hair-2);border:1px solid var(--hair-2);border-radius:3px;overflow:hidden;margin:26px 0} @media(min-width:760px){.audit{grid-template-columns:1fr 1fr}} .audit > div{background:var(--void);padding:24px 26px} .audit h4{ font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; margin:0 0 14px;font-weight:500; } .audit .now h4{color:#D8735A} .audit .next h4{color:var(--jade)} .audit ul{margin:0;padding:0;list-style:none} .audit li{position:relative;padding-left:20px;margin-bottom:11px;font-size:15px;color:var(--chrome-dim);max-width:none} .audit li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:1px;background:var(--faint)} .audit li strong{color:var(--chrome)} .audit-list{margin:0;padding:0;list-style:none} .audit-list li{position:relative;padding-left:20px;margin-bottom:11px;font-size:15px;color:var(--chrome-dim);max-width:none} .audit-list li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:1px;background:var(--faint)} .urlspec{ font-family:var(--f-mono);font-size:clamp(12px,2.6vw,15px);color:var(--blue); background:var(--panel);border:1px solid var(--hair-2);border-radius:3px; padding:14px 18px;margin:0 0 18px;max-width:none; overflow-x:auto;white-space:nowrap; } .tablewrap{overflow-x:auto;border:1px solid var(--hair-2);border-radius:3px;margin:24px 0;background:var(--void)} table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px} th{ font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);text-align:left;font-weight:500;padding:12px 16px; border-bottom:1px solid var(--hair);background:var(--panel); } td{padding:12px 16px;border-bottom:1px solid var(--hair-2);color:var(--chrome-dim);vertical-align:top} tr:last-child td{border-bottom:none} td.k{color:var(--chrome);font-weight:600;white-space:nowrap} td.no{color:#D8735A} td.yes{color:var(--jade)} /* ───────────────────────────────────────────────────────────────────────── Domain page — one page per name. The name is the whole hero; everything else supports the decision to buy it. ───────────────────────────────────────────────────────────────────────── */ .dp-hero{padding:64px 0 56px} .dp-head{display:flex;align-items:center;gap:22px;margin:0 0 28px} .dp-logo{flex:0 0 auto;width:96px;height:96px;border-radius:6px;display:block} .dp-head .dp-name{margin:0} @media(max-width:639px){.dp-head{gap:14px}.dp-logo{width:64px;height:64px}} .dp-name{ font-family:var(--f-display);font-weight:600; font-size:clamp(44px,9vw,104px);line-height:.95;letter-spacing:-.04em; margin:0 0 28px;position:relative;word-break:break-word; } .dp-name .tld{color:var(--muted);font-weight:400} .dp-buy{ display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px; padding:22px 26px;margin:0 0 28px;position:relative; border:1px solid var(--hair);border-radius:3px;background:var(--grad-soft); } .dp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px} .dp-list{font-family:var(--f-mono);font-size:17px;color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums} .dp-badge{font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--jade);border:1px solid var(--hair);border-radius:2px;padding:4px 8px;white-space:nowrap} .dp-figure{ font-family:var(--f-display);font-weight:600;font-size:clamp(30px,4.4vw,42px); line-height:1;letter-spacing:-.03em;color:var(--chrome);font-variant-numeric:tabular-nums; } .dp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto} .leasenote{font-family:var(--f-mono);font-size:11px;letter-spacing:.03em;color:var(--muted);margin:0 0 18px} .gdattr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0;font-size:13px;color:var(--chrome-dim)} #lease .dp-actions{margin-left:0} .dp-facts{margin-top:8px} .dp-facts .n{font-size:36px} /* the enquiry form's submit is a