/* ============================================================================ Search Local Business — "The Map Layer" A cartographic design system: survey paper, hairline grid, coordinate ticks, registration marks and the logo's pin as the recurring marker. Written mobile-first. Every block is designed at 375px, then widened. ========================================================================= */ /* ---- Fonts. Self-hosted Metropolis — the actual typeface of the logo, so the wordmark and the headings are the same voice. Public domain (UNLICENSE). --- */ @font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-ExtraBold.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Black.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap} /* ---- Tokens -------------------------------------------------------------- */ :root{ /* Survey-paper palette. Red and ink are sampled from the logo artwork. */ --paper:#F7F5F2; --paper-2:#FFFFFF; --sunk:#EFEAE3; --ink:#1A1919; --ink-2:#403B38; --muted:#6B6560; --rule:#E2DCD3; --rule-2:#D3CBC0; --red:#AD3533; --red-ink:#8E2A28; --red-tint:#F6E9E8; --grid:rgba(26,25,25,.045); /* map grid hairline */ --contour:rgba(26,25,25,.10); --font:Metropolis,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; --pad:clamp(1.25rem,5vw,2rem); /* gutter */ --wide:76rem; /* max content width */ --narrow:44rem; /* prose measure */ --r:2px; /* the system is drafting-table square */ --tap:44px; /* minimum tap target */ } @media (prefers-color-scheme:dark){ :root{ --paper:#141312; --paper-2:#1C1A19; --sunk:#100F0E; --ink:#F2EEE9; --ink-2:#CFC8C1; --muted:#9A928B; --rule:#2E2B29; --rule-2:#3D3936; --red:#D8524F; --red-ink:#E8706D; --red-tint:#2A1918; --grid:rgba(242,238,233,.05); --contour:rgba(242,238,233,.09); } } /* ---- Reset --------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{ font-family:var(--font); font-size:1.0625rem; /* 17px — never below 16 */ line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; /* `clip` not `hidden`: overflow-x:hidden forces overflow-y to compute as auto, which makes a scroll container and silently breaks in-page anchor links (#section jumps land at the top) and position:sticky. `clip` gives the same 375px protection without creating a scroller. */ overflow-x:clip; } img,svg,video{display:block;max-width:100%;height:auto} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:var(--r)} ::selection{background:var(--red);color:#fff} .skip{ position:absolute;left:-9999px;top:0;z-index:999; background:var(--ink);color:var(--paper);padding:.85rem 1.25rem;font-weight:600; } .skip:focus{left:0} /* ---- Layout -------------------------------------------------------------- */ .wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)} .narrow{max-width:var(--narrow)} /* When .narrow sits on the container itself it would centre the whole block, which reads as a jump away from the left-aligned heroes and section heads. Keep the container at full width and constrain the measure on its children instead, so prose starts on the same line as everything above it. */ .wrap.narrow{max-width:var(--wide)} .wrap.narrow>*{max-width:var(--narrow)} section{padding-block:clamp(3.5rem,9vw,6.5rem)} .sec-sunk{background:var(--sunk)} /* There is exactly one inverted-section class, and it is .band (below). An earlier .sec-ink redefined --ink on the same element that read `background:var(--ink)` — the override fed back into that declaration, so the section rendered in the PAGE colour while its children stayed light-on-light. The headline and the ghost button were invisible and the blank headline held the layout open. Never redefine a token a rule reads. */ /* The map grid. A hairline graticule behind the page — the single most recognisable piece of the system. Kept very faint so text stays AA. */ .grid-bg{position:relative;isolation:isolate} .grid-bg::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:clamp(48px,9vw,88px) clamp(48px,9vw,88px); mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%); } /* ---- Type ---------------------------------------------------------------- */ h1,h2,h3,h4{font-weight:900;line-height:1.02;letter-spacing:-.022em;text-wrap:balance} h1{font-size:clamp(2.4rem,8.4vw,4.6rem)} h2{font-size:clamp(1.85rem,5.4vw,3.1rem);line-height:1.05} h3{font-size:clamp(1.2rem,3vw,1.55rem);line-height:1.15;letter-spacing:-.014em} h4{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em} p{text-wrap:pretty} .lede{font-size:clamp(1.09rem,2.4vw,1.3rem);line-height:1.55;color:var(--ink-2)} .sub{color:var(--muted)} strong{font-weight:700} /* The coordinate tick — mono, letterspaced, red. Used as an eyebrow everywhere. Reads as a map label, and gives every section a machine-readable-looking caption without any actual clutter. */ .tick{ font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--red); display:flex;align-items:center;gap:.6rem; } .tick::before{ content:'';flex:none;width:1.4rem;height:1px;background:var(--red);opacity:.55; } .tick-plain::before{display:none} /* ---- Buttons ------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:var(--tap);padding:.8rem 1.4rem; font-weight:700;font-size:1rem;letter-spacing:-.01em; text-decoration:none;border:1.5px solid transparent;border-radius:var(--r); cursor:pointer;transition:transform .12s ease,background .18s ease,color .18s ease,border-color .18s ease; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--red);color:#fff;border-color:var(--red)} .btn-primary:hover{background:var(--red-ink);border-color:var(--red-ink)} /* A filled button is white-on-red in every context. Nav, drawer and footer link rules are more specific than .btn-primary on their own, so without this a button dropped into one of them inherits that context's link colour and renders dark text on red. */ a.btn-primary,a.btn-primary:hover,a.btn-primary:focus,a.btn-primary:visited, button.btn-primary,.btn-primary{color:#fff} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)} .btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)} .btn-row{display:flex;flex-wrap:wrap;gap:.75rem} /* Text link with the pin-red underline that thickens on hover. */ .link{ color:var(--ink);text-decoration:none;font-weight:600; box-shadow:inset 0 -2px 0 var(--red); transition:box-shadow .15s ease,color .15s ease; } .link:hover{box-shadow:inset 0 -1.2em 0 var(--red-tint);color:var(--red-ink)} /* ---- Header -------------------------------------------------------------- */ .hdr{ position:sticky;top:0;z-index:60; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--rule); } .hdr-in{display:flex;align-items:center;gap:1rem;min-height:64px} .brand{display:flex;align-items:center;flex:none;text-decoration:none;padding-block:.5rem} .brand svg,.brand img{width:132px;height:auto} @media (prefers-color-scheme:dark){.brand img{filter:invert(1) hue-rotate(180deg) saturate(1.2)}} .nav{display:none;margin-left:auto;align-items:center;gap:.35rem} .nav a:not(.btn){ text-decoration:none;font-weight:600;font-size:.95rem; padding:.6rem .8rem;border-radius:var(--r);color:var(--ink-2); min-height:var(--tap);display:inline-flex;align-items:center; } .nav a:not(.btn):hover{color:var(--ink);background:var(--sunk)} .nav a:not(.btn)[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)} .nav .btn{margin-left:.5rem;padding-inline:1.1rem} .hdr-tel{ display:none;align-items:center;gap:.45rem;margin-left:auto; font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.02em; text-decoration:none;color:var(--ink);min-height:var(--tap); } .hdr-tel:hover{color:var(--red)} .burger{ margin-left:auto;width:var(--tap);height:var(--tap); display:grid;place-content:center;gap:5px; background:none;border:1px solid var(--rule-2);border-radius:var(--r);cursor:pointer; } .burger span{display:block;width:19px;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease} .burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded=true] span:nth-child(2){opacity:0} .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .drawer{ display:none;border-top:1px solid var(--rule);background:var(--paper); padding:.75rem var(--pad) 1.5rem; } .drawer.open{display:block} .drawer a:not(.btn){ display:flex;align-items:center;min-height:52px; text-decoration:none;font-weight:700;font-size:1.05rem; border-bottom:1px solid var(--rule); } .drawer a:not(.btn):last-of-type{border-bottom:0} .drawer .btn{width:100%;margin-top:1rem} .drawer-tel{ display:flex;align-items:center;gap:.5rem;margin-top:.75rem; font-family:var(--mono);font-size:.9rem;font-weight:600; text-decoration:none;min-height:var(--tap);color:var(--red); } @media (min-width:62rem){ .burger,.drawer{display:none!important} .nav{display:flex} .hdr-tel{display:inline-flex;margin-left:1rem;order:3} .nav{margin-left:auto;order:2} } /* ---- Hero ---------------------------------------------------------------- */ .hero{position:relative;padding-block:clamp(3rem,10vw,6rem) clamp(3rem,8vw,5rem);overflow:hidden} .hero-in{position:relative;z-index:2} .hero h1{margin-block:1.1rem .9rem} .hero .lede{max-width:38ch} .hero .btn-row{margin-top:1.9rem} .hero-note{ margin-top:1.1rem;font-size:.9rem;color:var(--muted);max-width:44ch; } /* Contour lines — decorative topography behind the hero, hidden from AT. Absolutely positioned, so it is explicitly re-checked at 375px: it is clipped by .hero{overflow:hidden} and faded out under the text. */ .contour{ position:absolute;z-index:1;pointer-events:none; top:50%;left:50%;width:min(1100px,175%);translate:-50% -50%; color:var(--contour);opacity:.9; } @media (min-width:62rem){ .contour{left:auto;right:-6%;width:720px;translate:0 -50%} } /* The pin marker, lifted from the logo geometry. */ .pin{flex:none;display:inline-block;vertical-align:-.12em;width:1em;height:1em;color:var(--red)} /* ---- Cards / grid -------------------------------------------------------- */ .grid{display:grid;gap:1rem} @media (min-width:40rem){ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} } @media (min-width:56rem){.grid-3{grid-template-columns:repeat(3,1fr)}} .card{ position:relative;background:var(--paper-2); border:1px solid var(--rule);border-radius:var(--r); padding:clamp(1.25rem,3.4vw,1.75rem); transition:border-color .18s ease,transform .18s ease; } .card h3{margin-bottom:.5rem} .card p{color:var(--muted);font-size:.98rem} a.card{text-decoration:none;display:block} a.card:hover{border-color:var(--rule-2);transform:translateY(-2px)} a.card:hover h3{color:var(--red)} /* Registration marks — the little corner crosshairs on a printed map sheet. Pure CSS, no extra elements. */ .reg::before,.reg::after{ content:'';position:absolute;width:9px;height:9px;pointer-events:none; border-color:var(--rule-2);border-style:solid; } .reg::before{top:-1px;left:-1px;border-width:1px 0 0 1px} .reg::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0} a.card:hover.reg::before,a.card:hover.reg::after{border-color:var(--red)} .card-tick{ font-family:var(--mono);font-size:.625rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin-bottom:.9rem; } .card-go{ display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem; font-weight:700;font-size:.9rem;color:var(--red); } /* ---- The stack (services as strata) -------------------------------------- */ .stack{border-top:1px solid var(--rule)} .stratum{ display:grid;gap:.35rem 1.5rem; padding-block:clamp(1.35rem,3.6vw,1.9rem); border-bottom:1px solid var(--rule); text-decoration:none;position:relative; transition:background .18s ease,padding-inline .18s ease; } .stratum:hover{background:var(--paper-2)} .stratum-n{ font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--red); align-self:start;padding-top:.35rem; } .stratum h3{transition:color .18s ease} .stratum:hover h3{color:var(--red)} .stratum p{color:var(--muted);font-size:.98rem;max-width:60ch} @media (min-width:52rem){ .stratum{grid-template-columns:5.5rem minmax(0,15rem) minmax(0,1fr);align-items:baseline} .stratum:hover{padding-inline:.9rem} } /* ---- Prose --------------------------------------------------------------- */ .prose>*+*{margin-top:1.15rem} .prose h2{margin-top:2.6rem} .prose h3{margin-top:2rem} .prose ul,.prose ol{padding-left:0;list-style:none} .prose li{position:relative;padding-left:1.6rem;margin-top:.6rem;color:var(--ink-2)} .prose li::before{ content:'';position:absolute;left:.15rem;top:.62em; width:7px;height:7px;background:var(--red);border-radius:50%; } .prose ol{counter-reset:n} .prose ol li{counter-increment:n} .prose ol li::before{ content:counter(n,decimal-leading-zero); font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--red); background:none;width:auto;height:auto;border-radius:0;top:.28em;left:0; } .prose a:not(.btn){color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--red)} .prose a:not(.btn):hover{color:var(--red-ink)} /* ---- Deliverables checklist ---------------------------------------------- */ .checks{list-style:none;padding:0;display:grid;gap:.85rem} .checks li{display:grid;grid-template-columns:1.35rem 1fr;gap:.75rem;align-items:start;color:var(--ink-2)} .checks svg{width:1.1rem;height:1.1rem;color:var(--red);margin-top:.28em;flex:none} /* ---- FAQ ----------------------------------------------------------------- */ .faq{border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{ display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; padding-block:1.15rem;min-height:var(--tap); font-weight:800;font-size:1.05rem;line-height:1.3; cursor:pointer;list-style:none; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:'';flex:none;width:12px;height:12px;margin-top:.42em; border-right:2px solid var(--red);border-bottom:2px solid var(--red); transform:rotate(45deg);transition:transform .2s ease; } .faq details[open] summary::after{transform:rotate(-135deg)} .faq details[open] summary{color:var(--red)} .faq-a{padding-bottom:1.3rem;color:var(--muted);max-width:68ch} /* ---- City plates --------------------------------------------------------- */ .plate{ position:relative;display:block;text-decoration:none; border:1px solid var(--rule);border-radius:var(--r); background:var(--paper-2);padding:1.4rem 1.4rem 1.5rem; transition:border-color .18s ease,transform .18s ease; } .plate:hover{border-color:var(--red);transform:translateY(-2px)} .plate-coord{ font-family:var(--mono);font-size:.625rem;letter-spacing:.12em; color:var(--muted);text-transform:uppercase; } .plate h3{margin:.55rem 0 .1rem;display:flex;align-items:center;gap:.5rem} .plate .county{font-family:var(--mono);font-size:.68rem;color:var(--red);letter-spacing:.1em;text-transform:uppercase} .plate p{margin-top:.7rem;color:var(--muted);font-size:.95rem} /* ---- Callout / CTA band -------------------------------------------------- */ .band{ background:var(--ink);color:var(--paper);position:relative;overflow:hidden; /* Overrides for descendants only. --ink is deliberately NOT among them: this rule's own background reads it, and redefining it here would resolve the background to the new value and invert the whole section by accident. */ --muted:#A69E97; --ink-2:#CFC8C1; --rule:#332F2D; --rule-2:#4A4340; --paper-2:#232120; } .band .tick{color:var(--red-ink)} .band h1,.band h2,.band h3,.band h4{color:var(--paper)} /* Only the band's own copy gets the narrow measure — card paragraphs and the trailing trade list must not inherit a 52ch cap or the centred colour. */ .band>.wrap>p{color:var(--muted);max-width:52ch} .band .lede{color:var(--ink-2);max-width:60ch} .band .card{background:var(--paper-2);border-color:var(--rule)} .band a.card:hover{border-color:var(--red-ink);transform:translateY(-2px)} .band a.card:hover h3{color:var(--red-ink)} .band .card p{color:var(--muted)} .band .card-tick{color:#8A817A} .band .checks li{color:var(--ink-2)} .band .ftr-area{color:#8A817A;max-width:none} .band .stratum{border-color:var(--rule)} .band .stratum:hover{background:var(--paper-2)} .band .stack{border-color:var(--rule)} .band .btn-ghost{color:var(--paper);border-color:var(--rule-2)} .band .btn-ghost:hover{border-color:var(--paper);background:transparent} /* ---- Forms --------------------------------------------------------------- */ .form{display:grid;gap:1rem} @media (min-width:40rem){.form .half{grid-column:span 1}.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}} .field{display:grid;gap:.4rem} .field label{font-weight:700;font-size:.9rem} .field .opt{font-weight:400;color:var(--muted)} .field input,.field select,.field textarea{ width:100%;min-height:var(--tap);padding:.7rem .85rem; background:var(--paper-2);color:var(--ink); border:1.5px solid var(--rule-2);border-radius:var(--r); font-size:1rem; /* ≥16px stops iOS zooming the viewport on focus */ } .field textarea{min-height:7rem;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline-offset:1px} .form-note{font-size:.85rem;color:var(--muted)} .form-status{padding:.9rem 1rem;border-radius:var(--r);font-weight:600;font-size:.95rem;display:none} .form-status.err{display:block;background:var(--red-tint);color:var(--red-ink);border:1px solid var(--red)} .form-status.ok{display:block;background:var(--sunk);color:var(--ink);border:1px solid var(--rule-2)} /* ---- Footer -------------------------------------------------------------- */ .ftr{background:var(--sunk);border-top:1px solid var(--rule);padding-block:clamp(2.5rem,6vw,4rem) 1.5rem} .ftr-top{display:grid;gap:2.25rem} @media (min-width:52rem){.ftr-top{grid-template-columns:repeat(2,1fr)}} @media (min-width:68rem){.ftr-top{grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr}} .ftr img{width:150px} @media (prefers-color-scheme:dark){.ftr img{filter:invert(1) hue-rotate(180deg) saturate(1.2)}} .ftr .ftr-h{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:1rem} .ftr ul{list-style:none;padding:0;display:grid;gap:.1rem} .ftr ul a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;color:var(--ink-2);font-size:.95rem} .ftr ul a:hover{color:var(--red)} .ftr-blurb{color:var(--muted);font-size:.95rem;margin-top:1rem;max-width:38ch} .ftr-nap{margin-top:1.25rem;display:grid;gap:.3rem;font-size:.95rem} .ftr-nap a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;font-weight:600} .ftr-nap a:hover{color:var(--red)} .ftr-area{color:var(--muted);font-size:.9rem;line-height:1.75} .ftr-btm{ margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule); display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between; font-size:.85rem;color:var(--muted); } .ftr-btm a{color:var(--muted)} .ftr-btm a:hover{color:var(--red)} /* ---- Sticky mobile call bar ---------------------------------------------- */ .callbar{ position:fixed;left:0;right:0;bottom:0;z-index:70; display:grid;grid-template-columns:1fr 1fr;gap:1px; background:var(--rule-2);border-top:1px solid var(--rule-2); padding-bottom:env(safe-area-inset-bottom); } .callbar a{ display:flex;align-items:center;justify-content:center;gap:.5rem; min-height:54px;text-decoration:none;font-weight:700;font-size:.98rem; } .callbar .c-tel{background:var(--paper-2);color:var(--ink)} .callbar .c-cta{background:var(--red);color:#fff} body{padding-bottom:calc(54px + env(safe-area-inset-bottom))} @media (min-width:62rem){ .callbar{display:none} body{padding-bottom:0} } /* ---- Utilities ----------------------------------------------------------- */ .stack-sm>*+*{margin-top:.6rem} .stack-md>*+*{margin-top:1.15rem} .stack-lg>*+*{margin-top:2.25rem} .mt-sm{margin-top:1rem}.mt-md{margin-top:2rem}.mt-lg{margin-top:3rem} .center{text-align:center} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .sec-head{max-width:52rem} .sec-head h2{margin-block:.9rem .8rem} .crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center} .crumbs a{text-decoration:none} .crumbs a:hover{color:var(--red)} .crumbs span[aria-current]{color:var(--ink)} /* ---- Tap-target corrections ---------------------------------------------- Inline links inside a sentence are exempt from the target-size rule, but anything that reads as a standalone control is not. These three did not clear the minimum on audit. */ /* Breadcrumbs are navigation, not prose — give them a real hit area. */ .crumbs a{display:inline-flex;align-items:center;min-height:26px;padding-inline:.15rem} /* The phone and email on the contact cards are the primary actions there. */ .card h3 a[href^="tel:"], .card h3 a[href^="mailto:"]{ display:inline-flex;align-items:center;min-height:var(--tap); } /* Footer credit. */ .ftr-btm a{display:inline-flex;align-items:center;min-height:26px} /* Placement/rate table — plain data, so it stays a table rather than being forced into cards that would read as marketing. */ table.rate{width:100%;border-collapse:collapse;font-size:.95rem;max-width:34rem} table.rate th{text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 1rem .5rem 0; border-bottom:1px solid var(--rule-2);white-space:nowrap} table.rate td{padding:.6rem 1rem .6rem 0;border-bottom:1px solid var(--rule);color:var(--ink-2)} table.rate td:first-child{font-weight:700;color:var(--ink)} /* The "separate subscription" callout. Everything else on the lead-generation page is included in the monthly fee; this one is not, and a reader skimming must not carry the wrong assumption into a sales call. */ .sep-note{ border-left:3px solid var(--red); background:var(--red-tint); padding:.85rem 1rem; font-size:.95rem; color:var(--ink-2); max-width:60ch; } .band .sep-note{background:#2A1918;color:#CFC8C1} /* "What you will not be sent". The previous treatment stacked three negation signals — a NOT THIS label, a strikethrough heading and 72% opacity on the whole card — which between them made the copy genuinely hard to read on the dark band. One clear signal does the job: a red cross, full-contrast text. */ ul.nope{list-style:none;padding:0;display:grid;gap:1.15rem 2.25rem} @media (min-width:44rem){ul.nope{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:72rem){ul.nope{grid-template-columns:repeat(3,minmax(0,1fr))}} ul.nope li{ display:grid;grid-template-columns:1.6rem 1fr;gap:.5rem .8rem;align-items:start; padding-left:0;margin:0; } ul.nope li::before{content:none} /* cancel the .prose bullet */ .nope-x{width:1.35rem;height:1.35rem;color:var(--red);margin-top:.1rem;flex:none} ul.nope h4{font-size:1rem;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:0 0 .3rem} ul.nope p{font-size:.93rem;line-height:1.55;color:var(--muted);margin:0} /* On the dark band the muted token is already lightened, but the description needs a touch more lift to stay comfortably readable at this size. */ .band ul.nope p{color:#B4ABA4} .band ul.nope h4{color:var(--paper)} /* The magazine is a separately-subscribed channel, not part of the package the rest of the lead-generation page describes. It sits after that material and is fenced off from it, so the separation is structural and visible rather than something the reader has to take from the copy alone. */ .aside-channel{ border-top:2px solid var(--rule-2); padding-block-start:clamp(3.5rem,8vw,5.5rem); } .aside-channel::before{ content:'';display:block;width:2.5rem;height:2px;background:var(--red); margin-bottom:clamp(1.5rem,4vw,2.25rem); }