/* ==========================================================================
THE ONLY TWO ADDITIONS TO THE APPROVED STYLESHEET.
Everything below the tokens banner is the design file byte for byte.
1. SELF-HOSTED INTER, replacing the Google Fonts the mocks
carried. The brief calls for this swap; the woff2 files were
already in the repository at /fonts/nairahq/ for the application
shell. Declared as the family name "Inter" -- not the app's own
"Inter NQ" -- precisely so the token block below keeps its
original `--font:"Inter",...` declaration unchanged. The same two
files, the same weight range and the same unicode-range split as
resources/views/app/partials/nairahq-redesign-tokens.blade.php,
because they are literally the same faces; splitting latin from
latin-ext means a page of English prose never fetches the second
file.
This also removes the last reason this site needed
fonts.googleapis.com and fonts.gstatic.com. config/csp.php still
allows both for the other shells that link them; narrowing those
directives is a separate change and is NOT made here.
2. .skip-link, which has no rule in the design file and is required
by the brief's accessibility list. It cannot reuse .sr: that class
is clip:rect(0 0 0 0), so a keyboard user would tab to a link they
could not see, which is worse than having none. Hidden off-canvas
and brought back on focus is the only version that does the job.
========================================================================== */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/nairahq/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/nairahq/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--green);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius) 0;font-weight:600}
.skip-link:focus{left:0}
/* ---------- tokens (map these to your appearance CMS) ---------- */
:root{
--navy:#143723;
--navy-deep:#0C2417;
--green:#14663F;
--green-soft:#DDF0E5;
--green-ink:#0E4D30;
--yellow:#F2B705;
--paper:#F7F4EC;
--paper-2:#EFEBE1;
--ink:#143723;
--ink-2:#3F5447;
--ink-3:#73847A;
--line:#D9D4C7;
--radius:10px;
--max:1160px;
--font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
color-scheme:light;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){ --paper:#F7F4EC; }
}
:root[data-theme="dark"]{ --paper:#F7F4EC; }
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
body{font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.12;letter-spacing:-0.02em;font-weight:800}
h1{font-size:clamp(34px,5.2vw,58px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:18px;font-weight:700;letter-spacing:-0.01em}
p.lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);max-width:56ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:8px;font-weight:600;font-size:16px;transition:background .15s,transform .15s}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-ink)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-yellow{background:var(--yellow);color:var(--navy-deep)}
.btn-yellow:hover{background:#E0A800}
.section{padding:88px 0}
.section-head{max-width:62ch;margin-bottom:44px}
.section-head p{color:var(--ink-2);margin-top:12px;font-size:17px}
/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(247,244,236,.94);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{display:flex;align-items:center}.logo-img{height:34px;width:auto}footer .logo-img{height:40px}
.mark{width:28px;height:28px;border-radius:6px;background:var(--green);position:relative;overflow:hidden}
.mark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:var(--yellow)}
.nav-links{display:flex;gap:28px;font-weight:500;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta .btn{min-height:42px;padding:0 16px;font-size:15px;white-space:nowrap}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px}
.burger span{width:22px;height:2px;background:var(--ink);position:relative;display:block}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--paper);padding:12px 24px 20px}
.mobile-menu a{display:block;padding:12px 0;font-weight:500;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:14px;width:100%}
.nav.open .mobile-menu{display:block}
/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:
radial-gradient(900px 480px at 50% -10%,rgba(221,240,229,.16),transparent 65%),
radial-gradient(600px 400px at 0% 100%,rgba(242,183,5,.18),transparent 60%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr;gap:56px;padding-top:88px;padding-bottom:96px}
.hero .wrap>div:first-child{max-width:800px;margin:0 auto;text-align:center}
.hero p.lead{margin-left:auto;margin-right:auto}
.hero-ctas{justify-content:center}
.hero .frame{max-width:1160px;width:100%;margin:0 auto;border-radius:18px}
.hero .frame-bar{padding:14px 18px}
.hero .frame-bar span{font-size:14px}
.hero .frame-tabs button{font-size:16px;padding:12px 18px}
.hero .frame .pane{padding:28px}
.hero .frame .kpis{gap:16px;margin-bottom:22px}
.hero .frame .kpi{padding:16px 20px}
.hero .frame .kpi small{font-size:14px;margin-bottom:6px}
.hero .frame .kpi strong{font-size:30px}
.hero .frame .kpi em{font-size:14px}
.hero .frame .tbl{font-size:17px}
.hero .frame .tbl th{font-size:14px;padding:10px 12px}
.hero .frame .tbl td{padding:14px 12px}
.hero .frame .pill{font-size:13px;padding:4px 10px}
.hero .frame .bars{height:150px}
.hero .frame .bars-l{font-size:12px}
.hero h1{color:#fff}
/* 52ch, NOT THE COLUMN'S 800px. The hero column is 800px wide and the lead
filled it, which put six or seven words on a last line and sometimes one.
A measure in ch tracks the font rather than the layout, so the line count
stays stable if the type scale moves. Centred by the margin:auto pair
above, which is why this only sets the width. */
.hero p.lead{color:rgba(255,255,255,.78);margin-top:20px;max-width:52ch}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-ctas .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.hero-ctas .btn-ghost:hover{border-color:#fff}
.hero-note{margin-top:18px;font-size:14px;color:rgba(255,255,255,.62);max-width:60ch;margin-left:auto;margin-right:auto}
.hero-note b{color:#fff;font-weight:600}
/* the product frame */
.frame{background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.frame-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:#D5DBE3;display:block}
.frame-bar span{margin-left:auto;font-size:12px;color:var(--ink-3)}
.frame-tabs{display:flex;gap:4px;padding:10px 12px 0;border-bottom:1px solid var(--line)}
.frame-tabs button{padding:8px 12px;border-radius:8px 8px 0 0;font-size:13px;font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent}
.frame-tabs button[aria-selected="true"]{color:var(--green);border-bottom-color:var(--green)}
.pane{display:none;padding:16px}
.pane.active{display:block}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi{background:var(--paper-2);border-radius:8px;padding:10px 12px}
.kpi small{display:block;font-size:11px;color:var(--ink-3);margin-bottom:2px}
.kpi strong{font-size:17px;letter-spacing:-0.01em}
.kpi em{font-style:normal;font-size:11px;color:var(--green);font-weight:600;margin-left:6px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--ink-3);font-weight:500;font-size:11px;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid var(--paper-2)}
.tbl td:last-child,.tbl th:last-child{text-align:right}
.tbl .tot td{font-weight:700;border-top:2px solid var(--line);border-bottom:0}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.pill.paid{background:var(--green-soft);color:var(--green-ink)}
.pill.due{background:#FFF4D6;color:#8A6200}
.pill.part{background:#E8EEF6;color:var(--navy)}
.bars{display:flex;align-items:flex-end;gap:6px;height:90px;margin:4px 0 8px;padding:0 4px;border-bottom:1px solid var(--line)}
.bars i{flex:1;background:var(--green);border-radius:3px 3px 0 0;opacity:.85;display:block}
.bars i:nth-child(odd){background:var(--navy)}
.bars-l{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3);padding:0 4px}
/* ---------- proof strip ---------- */
.proof{border-bottom:1px solid var(--line)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px 24px}
.proof .wrap>div{font-size:15px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start}
.proof .wrap>div::before{content:"";width:18px;height:18px;flex:none;margin-top:3px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5 10l3.5 3.5L15 7'/%3E%3C/svg%3E") center/14px no-repeat}
/* ---------- modules ---------- */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mod{background:#fff;padding:28px 26px}
.mod .ic{width:40px;height:40px;border-radius:9px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin-bottom:18px}
.mod .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mod p{color:var(--ink-2);margin-top:8px;font-size:15px}
.mod ul{margin-top:14px;font-size:14px;color:var(--ink-2);list-style:none}
.mod li{padding:4px 0 4px 18px;position:relative}
.mod li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:2px;background:var(--yellow)}
/* ---------- nigeria ---------- */
.nigeria-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.photo{border-radius:14px;overflow:hidden;background:var(--navy);color:#fff;position:relative;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;border-top:8px solid var(--green)}
.photo-ph{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:40px;color:rgba(255,255,255,.7);gap:12px;justify-items:center;font-size:14px;max-width:none}
.photo-ph p{max-width:34ch}
.photo-cap{position:relative;padding:20px 22px;background:linear-gradient(to top,rgba(9,26,48,.95),rgba(9,26,48,0));font-size:15px;line-height:1.5}
.ng-list{list-style:none;margin-top:24px;display:grid;gap:12px}
.ng-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-2)}
.ng-list li b{flex:none;width:10px;height:10px;border-radius:2px;background:var(--green);margin-top:8px}
.ng-list li:nth-child(even) b{background:var(--yellow)}
/* ---------- two-sided split ---------- */
.split{background:var(--paper-2)}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--line)}
.side{background:#fff;padding:40px 36px}
.side.office{background:var(--navy);color:#fff}
.side.office p,.side.office li{color:rgba(255,255,255,.78)}
.side h3{font-size:24px;letter-spacing:-0.02em;margin-bottom:10px}
.side p{color:var(--ink-2);font-size:16px}
.side ul{margin-top:20px;list-style:none;display:grid;gap:10px}
.side li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.side li b{display:inline-block;flex:none;width:8px;height:8px;border-radius:2px;background:var(--yellow);margin-top:8px}
.side.office li b{background:var(--yellow)}
.side.shop li b{background:var(--green)}
.side-tag{display:inline-block;font-size:13px;font-weight:600;padding:5px 10px;border-radius:6px;margin-bottom:18px}
.side.shop .side-tag{background:var(--green-soft);color:var(--green-ink)}
.side.office .side-tag{background:rgba(242,183,5,.18);color:var(--yellow)}
/* ---------- flow ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;counter-reset:step}
.flow>div{padding:0 28px 0 0;position:relative}
.flow>div::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:15px;margin-bottom:16px}
.flow>div::after{content:"";position:absolute;top:18px;left:46px;right:14px;height:2px;background:var(--line)}
.flow>div:last-child::after{display:none}
.flow p{color:var(--ink-2);font-size:15px;margin-top:6px}
/* ---------- pricing ---------- */
.pricing{background:var(--paper-2)}
.toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;margin-top:18px}
.toggle button{padding:8px 18px;border-radius:999px;font-weight:600;font-size:15px;color:var(--ink-2)}
.toggle button[aria-pressed="true"]{background:var(--navy);color:#fff}
.toggle .save{font-size:12px;color:var(--green);font-weight:700;margin-left:6px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.plan{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px;display:flex;flex-direction:column}
.plan.featured{border:2px solid var(--green);position:relative}
.plan.featured::before{content:"Most chosen";position:absolute;top:-13px;left:22px;background:var(--green);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.plan h3{font-size:19px}
.plan .who{color:var(--ink-3);font-size:14px;margin-top:4px;min-height:42px}
.price{margin:18px 0 6px;letter-spacing:-0.03em}
.price strong{font-size:34px;font-weight:800}
.price span{font-size:14px;color:var(--ink-3);font-weight:500}
.price-note{font-size:13px;color:var(--ink-3);min-height:20px}
.plan ul{list-style:none;margin:20px 0 24px;display:grid;gap:9px;font-size:14px;color:var(--ink-2)}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2314663F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 10l3.5 3.5L15 7'/%3E%3C/svg%3E") center/11px no-repeat}
.plan .btn{margin-top:auto;width:100%}
.pricing-foot{text-align:center;margin-top:24px;font-size:14px;color:var(--ink-3)}
/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote{border-left:3px solid var(--yellow);padding:6px 0 6px 22px}
.quote p{font-size:17px;line-height:1.5;letter-spacing:-0.005em}
.quote footer{margin-top:14px;font-size:14px;color:var(--ink-3)}
.quote footer b{color:var(--ink);font-weight:600;display:block}
/* ---------- faq ---------- */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:24px;font-weight:400;color:var(--ink-3)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;color:var(--ink-2);max-width:62ch}
/* ---------- final cta ---------- */
.cta{background:var(--green);color:#fff}
.cta .wrap{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:40px;padding:72px 24px}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.82);margin-top:12px;font-size:17px;max-width:50ch}
.cta .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.cta .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
/* ---------- footer ---------- */
footer.site{background:var(--navy-deep);color:rgba(255,255,255,.72);font-size:14px}
footer.site .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:56px 24px 28px}
footer.site h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px}
footer.site a{display:block;padding:4px 0}
footer.site a:hover{color:#fff}
footer.site .logo{color:#fff;margin-bottom:12px}
footer.site .legal{border-top:1px solid rgba(255,255,255,.12);padding:20px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
/* ---------- responsive ---------- */
@media (max-width:1024px){
.nav-links{gap:20px}
.hero .wrap{padding-top:64px;padding-bottom:72px;gap:40px}
.modules,.plans,.quotes{grid-template-columns:repeat(2,1fr)}
.nigeria-grid{gap:32px}
.flow{grid-template-columns:repeat(2,1fr);row-gap:32px}
.flow>div:nth-child(2)::after{display:none}
.proof .wrap{grid-template-columns:repeat(2,1fr)}
footer.site .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
.nav-links,.nav-cta .btn-ghost{display:none}
.burger{display:flex}
.section{padding:64px 0}
.modules,.plans,.quotes,.split-grid,.proof .wrap,.flow{grid-template-columns:1fr}
.flow>div::after{display:none}
.cta .wrap{grid-template-columns:1fr}
.nigeria-grid{grid-template-columns:1fr;gap:32px}
.photo{min-height:300px}
.cta .btns{justify-content:flex-start}
.side{padding:32px 24px}
.kpis{grid-template-columns:repeat(3,1fr)}
.kpi strong{font-size:14px}
.hero .frame .kpi strong{font-size:16px}
.hero .frame .tbl{font-size:13px}
.hero .frame .pane{padding:14px}
.hero .frame .kpi{padding:10px 12px}
.hero .frame .kpi small{font-size:11px}
.hero-ctas .btn{width:100%}
footer.site .wrap{grid-template-columns:1fr}
}
@media (max-width:400px){.wrap{padding:0 16px}.proof .wrap{padding:24px 16px}}
/* ---------- routing ---------- */
.page{display:none}.page.active{display:block}
.nav-links a[aria-current="page"],.mobile-menu a[aria-current="page"]{color:var(--green);font-weight:600}
/* ---------- one place mockup ---------- */
.oneplace{background:var(--green-soft);border-bottom:1px solid var(--line)}
.oneplace .wrap{padding-top:80px;padding-bottom:80px}
.op-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center}
.op{position:relative;aspect-ratio:1.1;max-width:560px;margin-left:auto;width:100%}
.op svg{position:absolute;inset:0;width:100%;height:100%}
.op svg circle{stroke:rgba(20,55,35,.18)}
.op-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36%;aspect-ratio:1;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;text-align:center;box-shadow:0 20px 50px rgba(15,36,64,.35);border:6px solid #fff;padding:10%}
.op-core .op-logo{width:100%;filter:brightness(0) invert(1)}
.op-core small{display:block;font-size:12px;color:rgba(255,255,255,.7);margin-top:8px}
.op-node{position:absolute;width:32%;transform:translate(-50%,-50%);background:#fff;border:1px solid rgba(20,55,35,.12);border-radius:10px;padding:12px 14px;box-shadow:0 8px 24px rgba(15,36,64,.08);font-size:13px}
.op-node b{display:flex;align-items:center;gap:8px;font-size:14px;letter-spacing:-0.01em}
.op-node b i{width:9px;height:9px;border-radius:2px;background:var(--green);display:inline-block;flex:none}
.op-node:nth-of-type(even) b i{background:var(--yellow)}
.op-node span{display:block;color:var(--ink-3);margin-top:3px;font-size:12px}
.op-node em{font-style:normal;display:inline-block;margin-top:6px;padding:2px 7px;border-radius:999px;background:var(--green-soft);color:var(--green-ink);font-weight:600;font-size:11px}
.op-pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
/* ---------- page intros ---------- */
.intro{background:var(--navy);color:#fff}
.intro .wrap{padding:72px 24px 64px}
.intro h1{color:#fff;font-size:clamp(32px,4.4vw,50px);max-width:20ch}
.intro p.lead{color:rgba(255,255,255,.78);margin-top:16px}
/* ---------- blog ---------- */
.blog-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.blog-feature .cover{min-height:340px;height:100%;background:linear-gradient(135deg,var(--navy),#1E4A7A 60%,var(--green));position:relative}
.blog-feature .cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--yellow)}
.blog-feature .body{padding:36px 36px 36px 0}
.cat{display:inline-block;font-size:12px;font-weight:700;color:var(--green-ink);background:var(--green-soft);padding:4px 9px;border-radius:6px}
.blog-feature h2{font-size:clamp(24px,2.6vw,32px);margin-top:14px}
.blog-feature p{color:var(--ink-2);margin-top:12px}
.meta{font-size:13px;color:var(--ink-3);margin-top:16px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.post{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.post .cover{height:160px}
.post:nth-child(3n+1) .cover{background:linear-gradient(135deg,var(--green),#2E9C66)}
.post:nth-child(3n+2) .cover{background:linear-gradient(135deg,var(--navy),#2A5A8F)}
.post:nth-child(3n+3) .cover{background:linear-gradient(135deg,#8A6200,var(--yellow))}
.post .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.post h3{margin-top:12px;font-size:18px;line-height:1.3}
.post p{color:var(--ink-2);font-size:14px;margin-top:8px;flex:1}
.post .meta{margin-top:14px}
.post a.read{color:var(--green);font-weight:600;font-size:14px;margin-top:12px}
.blog-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px}
.blog-tools button{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink-2);background:#fff}
.blog-tools button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.post.hide{display:none}
.subscribe{margin-top:56px;background:var(--navy);color:#fff;border-radius:14px;padding:40px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.subscribe h3{font-size:24px;letter-spacing:-0.02em}
.subscribe p{color:rgba(255,255,255,.75);margin-top:8px}
.subscribe form{display:flex;gap:8px}
.subscribe input{flex:1;min-width:0;min-height:48px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;padding:0 14px;font:inherit;font-size:16px}
.subscribe input::placeholder{color:rgba(255,255,255,.5)}
.article{max-width:720px;margin:0 auto}
.article h1{font-size:clamp(30px,4vw,44px)}
.article .meta{margin:18px 0 32px}
.article .cover{height:320px;border-radius:14px;background:linear-gradient(135deg,var(--navy),#1E4A7A 60%,var(--green));margin-bottom:36px}
.article p{font-size:18px;line-height:1.7;color:var(--ink);margin-bottom:22px}
.article h2{font-size:26px;margin:36px 0 14px}
.article ul{margin:0 0 22px 22px;font-size:18px;line-height:1.7}
.article .back{display:inline-block;color:var(--green);font-weight:600;margin-bottom:24px}
.article .box{background:var(--green-soft);border-left:4px solid var(--green);padding:18px 22px;border-radius:0 10px 10px 0;margin:28px 0}
.article .box p{margin:0;font-size:16px}
/* ---------- legal documents inside .article ----------
A CLAUSE OF A LEGAL DOCUMENT IS NOT A PAGE BAND, and that single
mistake was the whole of the "excessive blank space" on /terms and
/privacy. PublicPageRenderer wraps every CMS section in
`.section.public-section`, which is right for a landing-page band and
wrong twenty-five times inside one document: .section carries
`padding:88px 0`, so Terms was spending 25 x 176px = about 4,400px on
padding alone, which is most of why that page measured 14,988px tall.
NOT A DATA PROBLEM, which is worth recording because it was the first
theory. The seeded text in Database\Seeders\Content\LegalDocuments is
already clean, well-formed HTML -- real
paragraphs, a real
list, no nl2br output anywhere. Measured on the rendered page
before changing anything: zero empty paragraphs, zero consecutive
. So nothing in the seeder or the renderer needed normalising and
not a word of the lawyer-bound text was touched; the fix is entirely
presentational, which is the right place for a spacing defect.
Headings are slightly tighter here than .article h2 so a numbered
clause reads as a clause rather than as an article subheading, and the
last paragraph in each clause drops its bottom margin so the rhythm
between clauses comes from one rule rather than two stacking. */
/* BOTH CONTEXTS ARE NAMED, and the second one is why this comment is
longer than the rule. The first version scoped this to `.article
.public-section` only, which fixed /terms and /privacy and sailed
straight past /support -- that page embeds the same CMS body but wraps
it in .support-head rather than .article, so its intro went on carrying
176px of band padding on desktop and 128px on phone. Measured after it
was reported, not before: /support was 2,494px desktop and 3,409px
phone, and is 1,787px / 3,226px with this plus the layout rework below.
The phone figure moves little on purpose: at one column the sidebar is
page length rather than wasted space, so what this removed there is the
128px padding bug and nothing more.
The lesson is the scoping, not the page: a rule that neutralises a
wrapper's padding has to name every context that embeds the wrapper, so
the selector list grows when a third surface starts rendering CMS
bodies. A `.cms-body` class applied at each embed point would invert
that -- worth doing if a fourth appears, overkill for two. */
.article .public-section,
.support-head .public-section{padding:0;background:none !important}
.article .public-section h2{font-size:22px;margin:30px 0 10px}
.article .public-section:first-child h1,
.article .public-section:first-child h2{margin-top:0}
.article .public-section > div > div > :last-child,
.support-head .public-section > div > div > :last-child{margin-bottom:0}
.article .public-section + .public-section{margin-top:26px}
/* ---------- /support ----------
The lighter page: an intro and three route cards. It briefly carried the
ticket form, and the form's styles (.support-card, .support-grid,
.support-done, .support-submit, .support-again) went with the form to
/support-ticket rather than being left here unreferenced -- dead CSS is
dead code, and the next person to read this file would have had to work
out which of two card systems the page actually used.
EVERY COLOUR IS A TOKEN, NOT A LITERAL. The palette asked for is
#143723 for headings, #14663F for the button and #DDF0E5 for the mint
accents, and :root already holds all three as --navy, --green and
--green-soft. Note --navy is #143723 despite its name: it predates the
green rebrand and renaming it is a stylesheet-wide change, not this
page's. Writing the hexes here would have made this the one place that
stops following a future token change. */
.support-page{padding:56px 0 76px}
@media (min-width:900px){.support-page{padding:64px 0 88px}}
.support-head{max-width:58ch;margin-bottom:28px}
.support-head h1{color:var(--navy);font-size:clamp(28px,3.4vw,40px);line-height:1.15}
.support-head p{color:var(--ink-2);margin-top:10px;font-size:17px;line-height:1.65}
.support-head p:last-child{margin-bottom:0}
/* Two fields per row from tablet up; one on phone. Shared by the ticket
form below -- defined here because .field-row is not scoped to a card. */
.field-row{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:620px){.field-row{grid-template-columns:1fr 1fr;gap:18px}}
/* /support's three route cards: ticket form, email, written answers. */
.support-routes{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media (min-width:900px){.support-routes{grid-template-columns:repeat(3,1fr);gap:24px}}
.route-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px;box-shadow:0 1px 2px rgba(20,55,35,.05)}
.route-card h2{color:var(--navy);font-size:19px;margin-bottom:10px}
.route-card p{color:var(--ink-2);line-height:1.6;margin-bottom:14px}
/* The lead card is the primary action and says so with the mint accent. */
.route-card-lead{background:var(--green-soft);border-color:transparent}
.route-card-lead .btn{min-height:48px;padding:0 22px}
.support-mail{margin-bottom:14px}
.support-mail:last-child{margin-bottom:0}
.support-mail a{display:inline-block;color:var(--green-ink);font-weight:600;min-height:28px}
.support-mail span{display:block;color:var(--ink-2);font-size:14px;margin-top:2px}
.support-links{list-style:none;margin:0;padding:0}
/* 48px rows so each link is a real tap target on a phone. */
.support-links a{display:flex;align-items:center;min-height:48px;color:var(--green-ink);font-weight:600}
.support-links a:focus-visible,.support-mail a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* ---------- /support-ticket ----------
Deep green panel on the left, white form card on the cream background
on the right, stacking to one column on phone.
THE PANEL IS --navy (#143723), WHICH IS THE DEEP GREEN despite the token
name -- it predates the green rebrand and renaming it is a
stylesheet-wide change rather than this page's. The button is --green
(#14663F) and the mint accents are --green-soft (#DDF0E5), so every
colour here is a token rather than a literal.
NOTHING OF onisiro_v32_ticket_css() SURVIVES. The old page was a
slate-and-blue card with a 28px radius and a blue submit button from the
pre-rebrand palette, injected inline. It is not restyled here; it is
simply not loaded, because this page is rendered by the marketing
layout. */
.ticket-page{padding:48px 0 76px}
.ticket-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
@media (min-width:980px){
.ticket-page{padding:60px 0 88px}
.ticket-grid{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:40px}
}
.ticket-panel{background:var(--navy);color:#fff;border-radius:16px;padding:30px 28px}
@media (min-width:980px){.ticket-panel{padding:38px 34px;position:sticky;top:96px}}
.ticket-eyebrow{display:inline-block;background:rgba(221,240,229,.16);color:var(--green-soft);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:18px}
.ticket-panel h1{color:#fff;font-size:clamp(27px,3vw,36px);line-height:1.15;margin-bottom:12px}
.ticket-panel .ticket-lead,.ticket-intro p{color:rgba(255,255,255,.82);font-size:17px;line-height:1.65}
/* The CMS intro arrives wrapped in .section.public-section like every
other embedded CMS body -- the same page-band padding that cost /terms
4,400px. Same reset, third context. */
.ticket-intro .public-section{padding:0;background:none !important}
.ticket-intro h1,.ticket-intro h2{color:#fff}
.ticket-intro > div > div > :last-child{margin-bottom:0}
.ticket-panel-block{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.ticket-panel-block h2{color:var(--green-soft);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.ticket-mail{margin-bottom:14px}
.ticket-mail:last-child{margin-bottom:0}
.ticket-mail a{display:inline-block;color:#fff;font-weight:600;min-height:28px;text-decoration:underline;text-underline-offset:3px}
.ticket-mail span{display:block;color:rgba(255,255,255,.7);font-size:14px;margin-top:2px}
.ticket-points{margin:0;padding-left:20px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.7}
.ticket-points li{margin-bottom:6px}
.ticket-panel a:focus-visible{outline:2px solid var(--green-soft);outline-offset:3px}
.ticket-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 1px 2px rgba(20,55,35,.05)}
@media (min-width:900px){.ticket-card{padding:32px 34px}}
.ticket-card h2{color:var(--navy);font-size:21px;line-height:1.25}
.ticket-card .ticket-hint{color:var(--ink-2);font-size:15px;margin:6px 0 22px}
.ticket-card .field{margin-bottom:18px}
.ticket-card label{display:block;color:var(--navy);font-weight:600;font-size:15px;margin-bottom:7px}
.ticket-card .opt{font-weight:400;color:var(--ink-3)}
.ticket-card input,.ticket-card textarea,.ticket-card select{width:100%;min-height:48px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:12px 14px;font:inherit;font-size:16px}
.ticket-card select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%233F5447' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.ticket-card textarea{min-height:150px;line-height:1.6;resize:vertical}
.ticket-card input:focus-visible,.ticket-card textarea:focus-visible,.ticket-card select:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-color:var(--green)}
.ticket-card [aria-invalid="true"]{border-color:#B42318;background:#FEF6F5}
.ticket-card .field-err{color:#B42318;font-weight:600;margin-top:6px;font-size:14px;line-height:1.45}
.ticket-card .field-note{color:var(--ink-2);font-size:14px;margin-top:8px}
.ticket-submit{min-height:48px;padding:0 26px;font-size:16px}
.field-spacer{display:none}
@media (min-width:620px){.field-spacer{display:block}}
/* The styled file picker. The real input is visually hidden but stays
focusable and in the accessibility tree -- display:none would remove it
from both, leaving a control no keyboard could reach. */
.filepick{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* SELECTOR SPECIFICITY IS LOAD-BEARING HERE, and getting it wrong is not
a cosmetic miss. `.ticket-card input` above is (0,1,1); a bare
`.filepick-input` is (0,1,0) and LOSES to it -- so the visually-hidden
input kept width:100% and min-height:48px, and because it is also
position:absolute it rendered 1440px wide starting mid-card and pushed
the document to 2058px. The page scrolled sideways at every width, with
the offending element invisible.
`.ticket-card input.filepick-input` is (0,2,1) and wins. min-height is
reset explicitly rather than relying on height:1px, since min-height
would otherwise override it. */
.ticket-card input.filepick-input{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.filepick-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:8px;border:1px solid var(--green);background:var(--green-soft);color:var(--green-ink);font-weight:600;font-size:15px;cursor:pointer;margin-bottom:0}
.filepick-btn:hover{background:#CFE9DB}
.filepick-input:focus-visible+.filepick-btn{outline:2px solid var(--green);outline-offset:2px}
.filepick-name{color:var(--ink-2);font-size:15px;word-break:break-all}
.ticket-done{border-left:4px solid var(--green)}
.ticket-done h2{margin-bottom:10px}
.ticket-done p{margin-top:8px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.ticket-done p b{color:var(--navy)}
.ticket-again{margin-top:20px}
/* ---------- the second home-page photo band ----------
FULL-BLEED, UNLIKE .nigeria's two-column grid. This band is one
landscape image across the whole viewport with a caption over it, so it
gets no .wrap and no max-width.
ASPECT RATIO RATHER THAN A FIXED HEIGHT: 21:9 on desktop, 4:3 on phone,
per the ruling. aspect-ratio plus object-fit:cover means the browser
reserves the right box before the image arrives, so the page does not
reflow when a lazily-loaded photograph lands -- which is the whole
point of loading it lazily in the first place.
THE CAPTION SITS ON A GRADIENT, not on the raw photograph: white text
on an unknown image is unreadable at whatever the top of that image
happens to be, and a gradient is what makes the contrast predictable
without darkening the picture overall. */
.band{position:relative;overflow:hidden;background:var(--cream)}
.band picture,.band img{display:block;width:100%;height:100%;object-fit:cover}
.band .frame{position:relative;width:100%;aspect-ratio:4/3}
.band .band-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:64px 24px 26px;color:#fff;font-size:17px;line-height:1.55;background:linear-gradient(to top,rgba(11,31,59,.86),rgba(11,31,59,.55) 45%,transparent)}
.band .band-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:28px;border:2px dashed var(--line);background:var(--cream);color:var(--ink-2)}
.band .band-ph p{max-width:46ch;font-size:15px;line-height:1.6}
@media (min-width:860px){
.band .frame{aspect-ratio:21/9}
.band .band-cap{padding:90px 48px 34px;font-size:19px}
}
@media (max-width:1024px){.posts{grid-template-columns:repeat(2,1fr)}.blog-feature{grid-template-columns:1fr}.blog-feature .body{padding:28px}.blog-feature .cover{min-height:220px}.op-grid{grid-template-columns:1fr}.op{margin:0 auto}}
@media (max-width:720px){.posts{grid-template-columns:1fr}.subscribe{grid-template-columns:1fr;padding:28px}.subscribe form{flex-direction:column}.op-node{width:38%;padding:9px 10px}.op-node span{display:none}.op-core small{display:none}.op-core{width:30%}}
/* ---------- compare table ---------- */
.compare{background:var(--paper)}
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:14px}
.cmp thead th{position:sticky;top:0;background:var(--navy);color:#fff;text-align:center;padding:16px 12px;font-size:15px;font-weight:700;vertical-align:top;z-index:2}
.cmp thead th:first-child{text-align:left;background:var(--navy);z-index:3}
.cmp thead th small{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.7);margin-top:4px}
.cmp thead th:nth-child(3){background:var(--green)}
.cmp tbody th{text-align:left;font-weight:500;color:var(--ink);padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.cmp tbody td{text-align:center;padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.cmp tbody td:nth-child(3){background:var(--green-soft)}
.cmp{background:#fff}
.cmp tr.grp th{background:var(--paper-2);color:var(--navy);font-weight:700;font-size:13px;padding:10px 16px;border-top:1px solid var(--line)}
.cmp .yes{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 10l3.5 3.5L15 7'/%3E%3C/svg%3E") center/13px no-repeat;vertical-align:middle}
.cmp .no{color:var(--ink-3)}
.cmp-ctas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:720px){.cmp-ctas{grid-template-columns:1fr 1fr}.cmp tbody th{white-space:normal;min-width:150px}}
.h1-line{display:block}
/* EVERY LINE AFTER THE FIRST TAKES THE ACCENT, written as :nth-child(n+2)
rather than as :nth-child(2),:nth-child(3). The headline was three lines
and is now two; naming the children meant the rule had to be edited
whenever the copy changed length, and the failure mode of forgetting is
silent -- a line that should be yellow simply renders in the body
colour, which reads as a design choice rather than a bug. */
.h1-line:nth-child(n+2){color:var(--yellow)}
/* The headline's first line breaks after "for" from 721px up, and flows
naturally below that -- see the markup for why this is a span going
block rather than a , which a media query cannot undo. 721px rather
than 720px so it does not overlap the 720px max-width breakpoint below
and leave one width matching both. */
@media (min-width:721px){.h1-part{display:block}}
/* The hero's eyebrow: a label above the h1, on the cream background. The
mint-on-green variant for the dark panel is .ticket-eyebrow. */
.hero-eyebrow{display:inline-block;background:var(--green-soft);color:var(--green-ink);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:18px}
.cmp-details{border-top:1px solid var(--line);padding-top:40px}
.cmp-summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:none;margin-bottom:0}
.cmp-summary::-webkit-details-marker{display:none}
.cmp-summary h2{display:flex;align-items:center;gap:14px}
.cmp-summary h2::before{content:"";width:12px;height:12px;border-right:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg);transition:transform .2s;flex:none}
.cmp-details[open] .cmp-summary h2::before{transform:rotate(45deg)}
.cmp-toggle{flex:none;padding:12px 18px;border-radius:8px;border:1.5px solid var(--line);font-weight:600;font-size:15px;color:var(--ink);background:#fff}
.cmp-toggle .close-text,.cmp-details[open] .cmp-toggle .open-text{display:none}
.cmp-details[open] .cmp-toggle .close-text{display:inline}
.cmp-details[open] .cmp-summary{margin-bottom:36px}
@media (max-width:720px){.cmp-summary{flex-direction:column;align-items:flex-start}}
/* ==========================================================================
Page builder: whatever copy and photographs an administrator enters
--------------------------------------------------------------------------
Owner ruling 10: every block renders at 360 and 390px with no horizontal
scroll, readable text and tap-friendly buttons, WHATEVER an administrator
types. Measured, not eyeballed: a 75-character unbroken word in every
field and a 4000px photograph in every slot took / to a 549px scroll
width on a 360px phone, and ran the h1 151px out of its box at 1440.
MarketingMobileCssTest pins each rule below by selector.
1. A long word wraps instead of widening its box. overflow-wrap:anywhere,
not break-word: only "anywhere" also lowers the element's min-content
width, which is what stops a grid track or flex item growing to fit
the word in the first place.
2. Grid and flex children may shrink below their content. Without
min-width:0 a grid item's automatic minimum is its min-content width,
so even a wrappable word can hold a 1fr track open.
3. Buttons never outgrow their row, and every control is at least 44px
tall -- the toggle's buttons were 39px.
4. The three-card tools grid is mobile-first. It carried an inline
repeat(3,1fr) that the stylesheet's max-width:720px rule could not
undo, so phones got three 100px columns even with today's copy.
5. The preview tabs are ONE row that scrolls sideways inside the
frame. They used to wrap, which kept the fourth tab reachable at
360px but broke the row into two lines on every phone. The row now
scrolls on its own (never the page: .frame clips it), each tab keeps
its label on one line, and marketing.js scrolls the selected tab
into the row's view. position:relative makes the row the tabs'
offsetParent, which is what that script measures against.
6. The hub diagram's edge nodes sit inside the page at phone width.
The diagram shrinks rather than its nodes: narrowing a node broke
"Customers & CRM" mid-word with today's copy, and those labels are
code, not something an administrator can lengthen.
7. A photograph of any shape keeps a sane height.
(1 and 2 also cover the plan cards: a plan's tagline is admin copy too,
typed in CmsSettings, and a 75-character one took /plans to a 530px
scroll width at 360 until .who wraps and .plans>* may shrink.)
8. Below 720px the preview shows the PHONE captures (see HomePreview),
top-aligned and capped at 390:660, so one screen of the app reads at
a legible size without the frame becoming the whole hero.
height:auto is what lets any of this work, and it fixed a defect at
every width: the global img rule caps max-width but nothing reset
height, so the height="900" attribute held while the width shrank,
and the desktop capture rendered squashed sideways -- 1054x900 at
1440, condensed text on every phone.
========================================================================== */
main :is(h1,h2,h3,p,li,summary,blockquote,.btn,.photo-cap,.band-cap,.side-tag,.quote footer,.quote footer b,.who){overflow-wrap:anywhere}
.hero .wrap>*,.op-grid>*,.modules>*,.split-grid>*,.nigeria-grid>*,.quotes>*,.flow>*,.cta .wrap>*,.cta .btns>*,.plans>*,.section-head,.faq,.faq details,.proof .wrap>div,.hero-ctas>*{min-width:0}
.btn{max-width:100%;text-align:center}
.toggle button{min-height:44px}
.modules.modules-3{grid-template-columns:1fr}
@media (min-width:721px){.modules.modules-3{grid-template-columns:repeat(3,1fr)}}
.frame-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;position:relative}
.frame-tabs::-webkit-scrollbar{display:none}
.frame-tabs button{flex:none;white-space:nowrap}
@media (max-width:720px){.hero .frame-tabs{padding:8px 10px 0}.hero .frame-tabs button{font-size:14px;padding:10px 12px;min-height:44px}}
.frame .pane img{width:100%;height:auto}
@media (max-width:720px){.hero .frame .pane img{width:100%;aspect-ratio:390/660;object-fit:cover;object-position:top left}}
@media (max-width:720px){.op{width:88%}}
@media (max-width:400px){.op{width:92%}.op-node{padding:8px 6px}}
.photo>img{width:100%;max-height:640px;object-fit:cover}
/* The plans a feature card is on (claims rulings, 18 October 2026). */
.mod .plan-tag{display:inline-block;margin:-4px 0 10px;font-size:13px;font-weight:600;color:var(--green-ink);background:var(--green-soft);border-radius:999px;padding:3px 10px}