/* ───────────────────────────────────────────────────────────────────────── MidBank Tipping — MARKETING surface (white). Owned by the marketing lane. Do NOT put app/product styles in here; the guest flow and the consoles keep their own dark system in css/tipping-system.css, which this file never touches or overrides. The look: white, airy, Inter for everything that is words, IBM Plex Mono for everything that is money. Money is the one place this brand raises its voice — the fee, the split, the payout are always set in the mono face with tabular numerals, so a figure is recognisable as a figure before it is read. Green (#00A37A) is an accent, never a background wash. RENDER-WITHOUT-JS RULE (hard, learned the hard way): nothing in here sets opacity:0 at rest. Reveal animation is opt-in and is only ever armed by js/tipping-reveal.js adding .js-reveal to . With scripting off, every section is simply visible. ───────────────────────────────────────────────────────────────────────── */ :root{ --t-bg:#ffffff; --t-bg-soft:#F5F6FA; /* section alternation, barely there */ --t-bg-tint:#EDEEF7; /* navy-tinted band */ --t-ink:#101223; /* near-black with a navy cast */ --t-ink-2:#4A4E63; --t-ink-3:#71768C; --t-line:#E3E5EE; --t-line-2:#CBCFDF; /* MidBank ink, sampled straight out of images/midbank-logo-dark.png: navy #2C2E83 and red #DD1726 are the two colours actually in the mark. Navy is the voice — buttons, links, headline accents, glyphs. Red is punctuation, never a surface: short rules, hover, one figure at a time. Green survives in exactly one job, the success tick, because a tick that is not green reads as a decoration rather than a confirmation. The token names still say "green" because every page and both partials reference them; renaming would be a find-and-replace across twelve files for no rendering benefit. Read --t-green as "the primary accent". */ --t-green:#2C2E83; /* NAVY. 12.5:1 on white. */ --t-green-press:#232562; /* navy, pressed */ --t-green-bright:#3A3DA8; /* navy, lifted — glyph fills, gradients */ --t-green-ink:#1B1C52; /* navy text on a tinted band */ --t-red:#DD1726; /* MidBank red — rules, hover, small accents */ --t-red-ink:#BF1619; /* the darker red in the mark, for red TEXT */ --t-success:#00A37A; /* the ONLY green left: ticks and confirmations */ --t-bar:#0D1030; /* the near-black navy header bar */ --t-font:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif; --t-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --t-r:22px; /* the card radius */ --t-r-sm:14px; --t-r-pill:999px; --t-w:1160px; --t-gut:24px; --t-sec:clamp(64px,9vw,120px); --t-shadow:0 1px 2px rgba(16,18,35,.04),0 8px 28px -12px rgba(16,18,35,.10); --t-shadow-lift:0 2px 4px rgba(16,18,35,.05),0 22px 48px -18px rgba(16,18,35,.18); --t-ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--t-bg);color:var(--t-ink);font-family:var(--t-font); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} [hidden]{display:none!important} .t-wrap{width:100%;max-width:var(--t-w);margin:0 auto;padding:0 var(--t-gut)} .t-sec{padding:var(--t-sec) 0} .t-sec--soft{background:var(--t-bg-soft)} .t-sec--tint{background:var(--t-bg-tint)} .t-rule{height:1px;background:var(--t-line);border:0} /* ── type ──────────────────────────────────────────────────────────────── */ /* The eyebrow is the one place red appears in body content: a 22px rule before the label, nothing more. Red is punctuation on this site. */ .t-eyebrow{font:600 12px/1 var(--t-font);text-transform:uppercase; letter-spacing:.14em;color:var(--t-green);display:flex;align-items:center;gap:10px; margin-bottom:20px} .t-eyebrow::before{content:'';width:22px;height:2px;background:var(--t-red);flex:none} h1,.t-h1{font-weight:700;font-size:clamp(2.4rem,5.6vw,4rem);line-height:1.04; letter-spacing:-.033em;max-width:17ch} h2,.t-h2{font-weight:700;font-size:clamp(1.85rem,3.6vw,2.75rem);line-height:1.1; letter-spacing:-.028em;max-width:20ch} h3,.t-h3{font-weight:650;font-size:1.25rem;line-height:1.3;letter-spacing:-.016em} .t-lede{margin-top:22px;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.58; color:var(--t-ink-2);max-width:60ch;font-weight:400} .t-body{color:var(--t-ink-2);max-width:62ch} .t-small{font-size:.875rem;color:var(--t-ink-3)} .t-sechead{max-width:680px;margin-bottom:clamp(36px,5vw,60px)} .t-sechead p{margin-top:18px;color:var(--t-ink-2);font-size:1.0625rem;max-width:58ch} /* Money voice. Every dollar figure and every rate on the marketing site. */ .t-fig{font-family:var(--t-mono);font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;letter-spacing:-.03em;font-weight:500} .t-fig--xl{font-size:clamp(2.75rem,8vw,4.25rem);line-height:.95;display:block} .t-mono{font-family:var(--t-mono);font-variant-numeric:tabular-nums;font-size:.9em} /* ── buttons ───────────────────────────────────────────────────────────── */ .t-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:52px;padding:0 28px;border:0;border-radius:var(--t-r-pill); font:600 1rem/1 var(--t-font);letter-spacing:-.01em;cursor:pointer; transition:transform .18s var(--t-ease),background .18s var(--t-ease), box-shadow .18s var(--t-ease),color .18s var(--t-ease)} .t-btn:active{transform:translateY(1px)} .t-btn--primary{background:var(--t-green);color:#fff; box-shadow:0 1px 2px rgba(27,28,82,.20),0 10px 24px -12px rgba(44,46,131,.55)} .t-btn--primary:hover{background:var(--t-green-press)} .t-btn--ghost{background:#fff;color:var(--t-ink);box-shadow:inset 0 0 0 1px var(--t-line-2)} .t-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--t-ink);} .t-btn--quiet{background:transparent;color:var(--t-green);padding:0 4px;min-height:auto} .t-btn--quiet:hover{color:var(--t-green-press)} .t-btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;align-items:center} .t-arrow{font-family:var(--t-mono);font-weight:400} /* an inline text link that reads as a link */ .t-link{color:var(--t-green);font-weight:550; box-shadow:inset 0 -1px 0 rgba(44,46,131,.32);transition:box-shadow .18s var(--t-ease)} .t-link:hover{box-shadow:inset 0 -2px 0 var(--t-green)} :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:none; box-shadow:0 0 0 2px #fff,0 0 0 4px var(--t-green)} .t-header :where(a,button):focus-visible{box-shadow:0 0 0 2px var(--t-bar),0 0 0 4px #fff} /* ── cards & grids ─────────────────────────────────────────────────────── */ .t-card{background:#fff;border:1px solid var(--t-line);border-radius:var(--t-r); padding:clamp(24px,3.2vw,34px);box-shadow:var(--t-shadow); transition:transform .3s var(--t-ease),box-shadow .3s var(--t-ease), border-color .3s var(--t-ease)} a.t-card:hover,.t-card--hover:hover{transform:translateY(-3px); box-shadow:var(--t-shadow-lift);border-color:var(--t-line-2)} .t-card h3{margin-bottom:10px} .t-card p{color:var(--t-ink-2);font-size:1rem} .t-card .t-cardfoot{margin-top:22px;color:var(--t-green);font-weight:600;font-size:.95rem} .t-grid{display:grid;gap:clamp(16px,2.2vw,24px)} .t-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .t-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .t-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:900px){.t-grid--3,.t-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.t-grid--2,.t-grid--3,.t-grid--4{grid-template-columns:1fr}} /* glyph tile that sits at the top of a card — geometric, never an emoji blob */ .t-glyph{width:46px;height:46px;border-radius:13px;display:grid;place-items:center; background:var(--t-bg-tint);color:var(--t-green-ink);margin-bottom:20px} .t-glyph svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.75;fill:none; stroke-linecap:round;stroke-linejoin:round} /* ── numbered steps ────────────────────────────────────────────────────── */ .t-steps{display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:repeat(3,minmax(0,1fr)); counter-reset:tstep} @media (max-width:820px){.t-steps{grid-template-columns:1fr}} .t-step{position:relative;padding-top:26px;border-top:2px solid var(--t-line)} .t-step::before{counter-increment:tstep;content:counter(tstep); position:absolute;top:-2px;left:0;width:34%;height:2px;background:var(--t-green); font:0/0 a;color:transparent} .t-step .t-stepno{font-family:var(--t-mono);font-size:.8rem;font-weight:500; color:var(--t-green);letter-spacing:.06em;display:block;margin-bottom:12px} .t-step h3{margin-bottom:10px} .t-step p{color:var(--t-ink-2);font-size:1rem} /* ── the fee receipt — "we print the math" ─────────────────────────────── */ .t-receipt{background:#fff;border:1px solid var(--t-line);border-radius:var(--t-r); padding:clamp(22px,3vw,30px);box-shadow:var(--t-shadow);max-width:460px} .t-receipt .t-rrow{display:flex;align-items:baseline;gap:12px;padding:11px 0; border-bottom:1px dashed var(--t-line-2);font-size:.95rem} .t-receipt .t-rrow:last-child{border-bottom:0;padding-bottom:0} .t-receipt .t-rrow b{font-weight:600} .t-receipt .t-rlead{flex:1;color:var(--t-ink-3); overflow:hidden;white-space:nowrap} .t-receipt .t-ramt{font-family:var(--t-mono);font-variant-numeric:tabular-nums; font-weight:500;letter-spacing:-.02em} .t-receipt .t-rtotal{border-top:2px solid var(--t-ink);margin-top:6px;padding-top:14px} .t-receipt .t-rtotal .t-ramt{color:var(--t-green-ink);font-size:1.15rem} /* ── device mocks ──────────────────────────────────────────────────────── */ .t-phone{width:100%;max-width:330px;margin-inline:auto; border:12px solid #10122A;border-radius:44px;background:#10122A; box-shadow:0 30px 70px -30px rgba(16,18,35,.55);overflow:hidden; position:relative;aspect-ratio:330/690} .t-phone iframe,.t-phone img{width:100%;height:100%;border:0;display:block; border-radius:32px;background:#fff;object-fit:cover;object-position:top center} .t-phone::after{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%); width:96px;height:22px;border-radius:999px;background:#10122A;pointer-events:none} .t-tablet{width:100%;max-width:560px;margin-inline:auto; border:14px solid #10122A;border-radius:28px;background:#10122A; box-shadow:0 30px 70px -30px rgba(16,18,35,.55);overflow:hidden;aspect-ratio:4/3} .t-tablet iframe,.t-tablet img{width:100%;height:100%;border:0;display:block; background:#fff;object-fit:cover;object-position:top center} .t-mockcap{margin-top:16px;text-align:center;font-family:var(--t-mono); font-size:.75rem;color:var(--t-ink-3);letter-spacing:.02em} /* split: copy on one side, device on the other */ .t-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(32px,6vw,80px);align-items:center} .t-split--rev>*:first-child{order:2} @media (max-width:900px){ .t-split{grid-template-columns:1fr;gap:44px} .t-split--rev>*:first-child{order:0} } /* ── industries strip ──────────────────────────────────────────────────── */ .t-inds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} @media (max-width:860px){.t-inds{grid-template-columns:repeat(2,minmax(0,1fr))}} .t-ind{display:flex;align-items:center;gap:13px;padding:18px 20px;background:#fff; border:1px solid var(--t-line);border-radius:var(--t-r-sm);font-weight:550; font-size:.95rem;transition:border-color .2s var(--t-ease),transform .2s var(--t-ease)} .t-ind:hover{border-color:var(--t-green);transform:translateY(-2px)} .t-ind svg{width:20px;height:20px;flex:none;stroke:var(--t-green);stroke-width:1.75; fill:none;stroke-linecap:round;stroke-linejoin:round} /* ── checklist ─────────────────────────────────────────────────────────── */ .t-checks{list-style:none;display:grid;gap:14px;margin-top:26px} .t-checks li{display:block;position:relative;padding-left:33px;color:var(--t-ink-2); font-size:1rem} .t-checks li::before{content:'';position:absolute;left:0;top:3px;width:21px;height:21px; border-radius:50%;background:#E6F6F1; /* the one green left: a tick reads as a tick */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A37A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:13px;background-repeat:no-repeat;background-position:center} .t-checks li b{color:var(--t-ink);font-weight:600} /* ── FAQ (native details — works with JS off) ──────────────────────────── */ .t-faq{border-top:1px solid var(--t-line);max-width:820px} .t-faq details{border-bottom:1px solid var(--t-line)} .t-faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative; font-weight:600;font-size:1.0625rem;letter-spacing:-.015em} .t-faq summary::-webkit-details-marker{display:none} .t-faq summary::after{content:'';position:absolute;right:8px;top:30px;width:11px;height:11px; border-right:2px solid var(--t-green);border-bottom:2px solid var(--t-green); transform:rotate(45deg);transition:transform .25s var(--t-ease)} .t-faq details[open] summary::after{transform:rotate(-135deg);top:34px} .t-faq .t-ans{padding:0 0 26px;color:var(--t-ink-2);max-width:62ch} .t-faq .t-ans p+p{margin-top:14px} /* ── CTA band ──────────────────────────────────────────────────────────── */ .t-cta{background:var(--t-ink);color:#fff;border-radius:clamp(24px,4vw,34px); padding:clamp(40px,6vw,76px);text-align:center;position:relative;overflow:hidden} .t-cta::before{content:'';position:absolute;inset:auto -10% -60% -10%;height:70%; background:radial-gradient(ellipse at 50% 100%,rgba(58,61,168,.55),transparent 70%); pointer-events:none} .t-cta h2{margin-inline:auto;color:#fff;max-width:18ch} .t-cta p{margin:20px auto 0;color:rgba(255,255,255,.72);max-width:52ch;position:relative} .t-cta .t-btnrow{justify-content:center;position:relative} .t-cta .t-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)} .t-cta .t-btn--ghost:hover{box-shadow:inset 0 0 0 1px #fff} .t-cta .t-fine{margin-top:22px;font-family:var(--t-mono);font-size:.78rem; color:rgba(255,255,255,.55);position:relative} /* ── table (comparison / pricing) ──────────────────────────────────────── */ .t-tablewrap{overflow-x:auto;border:1px solid var(--t-line);border-radius:var(--t-r); background:#fff} .t-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem} .t-table th,.t-table td{padding:16px 20px;text-align:left;vertical-align:top; border-bottom:1px solid var(--t-line)} .t-table thead th{font:600 .78rem/1.3 var(--t-font);text-transform:uppercase; letter-spacing:.09em;color:var(--t-ink-3);background:var(--t-bg-soft)} .t-table tbody tr:last-child td{border-bottom:0} .t-table .t-col-ours{background:rgba(44,46,131,.045)} .t-table thead .t-col-ours{color:var(--t-green-ink)} /* ── form ──────────────────────────────────────────────────────────────── */ .t-form{display:grid;gap:18px} .t-field{display:grid;gap:8px} .t-field label{font:600 .8rem/1 var(--t-font);text-transform:uppercase; letter-spacing:.08em;color:var(--t-ink-3)} /* Text-ish controls only. This selector used to be a bare `.t-field input`, which also matched the radio buttons inside .t-radio — giving each one a 100%-wide box that shoved its own label off the right edge of a 390px phone. Radios and checkboxes are excluded here and sized in .t-radio. */ .t-field input:not([type='radio']):not([type='checkbox']), .t-field select,.t-field textarea{width:100%;padding:15px 17px; border:1px solid var(--t-line-2);border-radius:var(--t-r-sm);background:#fff; font:400 1rem/1.4 var(--t-font);color:var(--t-ink);transition:border-color .18s var(--t-ease)} .t-field input:focus,.t-field select:focus,.t-field textarea:focus{ border-color:var(--t-green);outline:none;box-shadow:0 0 0 3px rgba(44,46,131,.14)} .t-field textarea{min-height:120px;resize:vertical} .t-form .t-two{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:560px){.t-form .t-two{grid-template-columns:1fr}} .t-radios{display:grid;gap:10px} .t-radio{display:flex;gap:12px;align-items:flex-start;padding:16px 18px; border:1px solid var(--t-line-2);border-radius:var(--t-r-sm);cursor:pointer; transition:border-color .18s var(--t-ease),background .18s var(--t-ease)} .t-radio:hover{border-color:var(--t-green)} .t-radio input{width:18px;height:18px;padding:0;margin-top:3px; accent-color:var(--t-green);flex:0 0 18px} .t-radio>span{min-width:0;flex:1 1 auto} .t-form,.t-field,.t-radios,.t-radio{min-width:0} .t-radio span b{display:block;font-weight:600;color:var(--t-ink)} .t-radio span small{color:var(--t-ink-3);font-size:.875rem} .t-radio:has(input:checked){border-color:var(--t-green);background:var(--t-bg-tint)} /* ── nav ───────────────────────────────────────────────────────────────── */ /* The header is the one dark band on the site: a near-black navy bar carrying the white lockup, with a 2px red rule under it. Everything below the bar is white or off-white. That is the whole institutional move — one authoritative strip at the top, then paper. */ .t-header{position:sticky;top:0;z-index:60;background:var(--t-bar); border-bottom:2px solid var(--t-red);padding-top:env(safe-area-inset-top,0px)} .t-nav{max-width:var(--t-w);margin:0 auto;padding:0 var(--t-gut);height:68px; display:flex;align-items:center;gap:28px} .t-nav__logo img{height:34px;width:auto} .t-nav__links{display:flex;align-items:center;gap:4px;margin-left:8px} .t-nav__links>a,.t-nav__dd>button{display:inline-flex;align-items:center;gap:6px; padding:9px 13px;border:0;background:none;border-radius:10px;cursor:pointer; font:550 .95rem/1 var(--t-font);color:rgba(255,255,255,.76);letter-spacing:-.01em; transition:background .18s var(--t-ease),color .18s var(--t-ease)} .t-nav__links>a:hover,.t-nav__dd>button:hover{background:rgba(255,255,255,.09);color:#fff} .t-nav__dd{position:relative} .t-nav__dd>button::after{content:'';width:6px;height:6px;border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)} .t-nav__panel{position:absolute;top:calc(100% + 10px);left:-8px;min-width:290px; background:#fff;border:1px solid var(--t-line);border-radius:18px;padding:8px; box-shadow:var(--t-shadow-lift); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .2s var(--t-ease),transform .2s var(--t-ease),visibility .2s} /* Hover AND focus-within AND click(:target-less [data-open]) — the panel is a progressive enhancement; with JS off, hover and keyboard focus still open it. */ .t-nav__dd:hover .t-nav__panel, .t-nav__dd:focus-within .t-nav__panel, .t-nav__dd[data-open='true'] .t-nav__panel{opacity:1;visibility:visible;transform:none} .t-nav__panel a{display:block;padding:12px 14px;border-radius:12px; transition:background .16s var(--t-ease)} .t-nav__panel a:hover{background:var(--t-bg-soft)} .t-nav__panel b{display:block;font-weight:600;font-size:.95rem;letter-spacing:-.01em} .t-nav__panel small{display:block;color:var(--t-ink-3);font-size:.825rem;line-height:1.45;margin-top:2px} .t-nav__right{margin-left:auto;display:flex;align-items:center;gap:8px} .t-nav__right .t-btn{min-height:42px;padding:0 20px;font-size:.92rem} .t-nav__right .t-btn--primary{background:#fff;color:var(--t-green);box-shadow:none} .t-nav__right .t-btn--primary:hover{background:#EDEEF7} .t-nav__right .t-btn--ghost{background:transparent;color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)} .t-nav__right .t-btn--ghost:hover{box-shadow:inset 0 0 0 1px #fff;background:rgba(255,255,255,.06)} .t-nav__login{font:550 .95rem/1 var(--t-font);color:rgba(255,255,255,.76);padding:9px 12px} .t-nav__login:hover{color:#fff} .t-nav__burger{display:none;margin-left:auto;width:42px;height:42px; border:1px solid rgba(255,255,255,.28); border-radius:12px;background:transparent;cursor:pointer;align-items:center;justify-content:center} .t-nav__burger span{display:block;width:17px;height:1.7px;background:#fff;position:relative} .t-nav__burger span::before,.t-nav__burger span::after{content:'';position:absolute;left:0; width:17px;height:1.7px;background:#fff} .t-nav__burger span::before{top:-5.5px}.t-nav__burger span::after{top:5.5px} /* Mobile menu: a
element, so it opens with scripting off. */ .t-mob{display:none;border-top:1px solid var(--t-line);background:#fff} /* The
summary is the no-JS door into the mobile menu. When scripting is available the burger opens the same element, so the duplicate "Menu" row is hidden — never the other way round. */ .has-js .t-mob>summary{display:none} .t-mob>summary{list-style:none;cursor:pointer;padding:16px var(--t-gut); font:600 .95rem/1 var(--t-font);color:var(--t-ink-2)} .t-mob>summary::-webkit-details-marker{display:none} .t-mob__body{padding:0 var(--t-gut) 22px;display:grid;gap:2px; max-width:var(--t-w);margin-inline:auto} .t-mob__body a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-weight:550; color:rgba(255,255,255,.88)} .t-mob__body .t-mobhead{margin-top:16px;font:600 .72rem/1 var(--t-font);text-transform:uppercase; letter-spacing:.12em;color:rgba(255,255,255,.5);border:0;padding:8px 0} .t-mob__body .t-btn--primary{background:#fff;color:var(--t-green);box-shadow:none} .t-mob__body .t-btn--ghost{background:transparent;color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)} .t-mob__body .t-btn{margin-top:18px} @media (max-width:1040px){ .t-nav__links,.t-nav__right .t-btn--ghost,.t-nav__login{display:none} .t-nav__burger{display:flex} .t-nav__right{margin-left:12px} .t-mob{display:block} } @media (max-width:560px){.t-nav__right .t-btn{display:none}} /* ── footer ────────────────────────────────────────────────────────────── */ .t-footer{border-top:1px solid var(--t-line);background:var(--t-bg-soft); padding:clamp(48px,7vw,80px) 0 40px;margin-top:0} .t-footer__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr)); gap:clamp(24px,4vw,40px)} @media (max-width:980px){.t-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.t-footer__top{grid-template-columns:1fr}} .t-footer img{height:30px;width:auto} .t-footer__blurb{margin-top:18px;color:var(--t-ink-3);font-size:.92rem;max-width:34ch} .t-footer h4{font:600 .72rem/1 var(--t-font);text-transform:uppercase;letter-spacing:.12em; color:var(--t-ink-3);margin-bottom:16px} .t-footer ul{list-style:none;display:grid;gap:11px} .t-footer ul a{font-size:.93rem;color:var(--t-ink-2);transition:color .16s var(--t-ease)} .t-footer ul a:hover{color:var(--t-green)} .t-footer__bot{margin-top:clamp(36px,5vw,56px);padding-top:26px;border-top:1px solid var(--t-line); display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center; font-size:.82rem;color:var(--t-ink-3)} .t-footer__bot .t-fee{font-family:var(--t-mono);letter-spacing:-.01em} /* ── MOBILE-FIRST LAYER (2026-09-15) ─────────────────────────────────── Italo's call: mobile is the primary screen for this site, not the afterthought. Everything above is the desktop composition; this block is what a 390px phone actually gets. Rules of the layer: · the hero headline must be readable without zoom and must not wrap to six lines — so the h1 ceiling drops and the tracking loosens slightly · every multi-column grid has already collapsed to one column by 640px · the primary action is always reachable: a sticky CTA bar sits at the bottom of the viewport on phones, above the home indicator · nothing is hidden on mobile that is not also reachable from the hamburger menu ──────────────────────────────────────────────────────────────────────── */ /* Sticky phone CTA. Lives in the footer partial, so every marketing page has exactly one. Hidden from 741px up, where the nav CTA is already visible. */ .t-stickycta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none; gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-top:1px solid var(--t-line); box-shadow:0 -8px 24px -18px rgba(16,18,35,.4)} .t-stickycta .t-btn{flex:1;min-height:48px;padding:0 14px;font-size:.94rem} .t-stickycta .t-btn--ghost{flex:0 0 auto;padding:0 18px} @media (max-width:740px){ :root{--t-gut:18px;--t-sec:clamp(48px,11vw,68px);--t-r:20px} body{font-size:16px} .t-stickycta{display:flex} /* clear the sticky bar so the last section and the footer are fully readable */ body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))} h1,.t-h1{font-size:clamp(2rem,8.6vw,2.5rem);line-height:1.08;letter-spacing:-.026em; max-width:none} h2,.t-h2{font-size:clamp(1.55rem,6.4vw,1.95rem);line-height:1.14;letter-spacing:-.022em; max-width:none} h3,.t-h3,.t-card h3{font-size:1.125rem} .t-lede{font-size:1.02rem;line-height:1.55;margin-top:16px;max-width:none} .t-eyebrow{margin-bottom:14px;font-size:11px} .t-sechead{margin-bottom:28px} .t-sechead p{font-size:1rem} .t-body,.t-checks li,.t-card p{max-width:none} /* buttons go full width and stack — a 48px+ target, never two half-pills */ .t-btnrow{gap:10px;margin-top:26px} .t-btnrow>.t-btn{flex:1 1 100%;width:100%} .t-btnrow>.t-btn--quiet{flex:0 0 auto;width:auto;justify-content:flex-start} .t-card{padding:22px 20px;border-radius:var(--t-r)} .t-grid{gap:14px} .t-steps{gap:22px} .t-inds{grid-template-columns:1fr;gap:9px} .t-ind{padding:15px 16px} .t-cta{padding:34px 22px;border-radius:22px} .t-cta h2{max-width:none} .t-faq summary{padding:19px 38px 19px 0;font-size:1rem} .t-faq summary::after{top:25px} .t-faq details[open] summary::after{top:29px} .t-receipt{padding:20px 18px} .t-fig--xl{font-size:clamp(2.25rem,12vw,3rem)} /* the device mocks are decorative at this width — keep them, shrink them */ .t-phone{max-width:272px;border-width:9px;border-radius:36px} .t-phone iframe,.t-phone img{border-radius:27px} .t-tablet{max-width:100%;border-width:10px;border-radius:22px} /* tables keep their own scroller and say so */ .t-tablewrap{border-radius:var(--t-r-sm)} .t-table{min-width:560px;font-size:.9rem} .t-table th,.t-table td{padding:13px 14px} .t-footer{padding-bottom:28px} .t-footer__bot{font-size:.78rem} } /* Small phones (iPhone SE and the 360px Android floor). */ @media (max-width:380px){ :root{--t-gut:16px} h1,.t-h1{font-size:1.85rem} .t-stickycta .t-btn{font-size:.88rem;padding:0 10px} } /* Tablet / small laptop: two columns, full nav still hidden until 1040px. */ @media (min-width:741px) and (max-width:1023px){ :root{--t-gut:26px} .t-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} .t-grid--3>*:last-child:nth-child(odd){grid-column:1 / -1} .t-inds{grid-template-columns:repeat(2,minmax(0,1fr))} .t-steps{grid-template-columns:1fr 1fr} .t-steps>*:last-child:nth-child(odd){grid-column:1 / -1} } /* ── reveal (opt-in, armed by JS only) ─────────────────────────────────── */ .js-reveal [data-reveal]{opacity:0;transform:translateY(18px); transition:opacity .7s var(--t-ease),transform .7s var(--t-ease)} .js-reveal [data-reveal].is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .js-reveal [data-reveal]{opacity:1!important;transform:none!important} }