:root { --ink:#182126; --muted:#5b686d; --paper:#fffdf9; --mist:#f1f7f2; --line:#dbe5dd; --tomato:#f4513f; --tomato-deep:#c93a31; --leaf:#2fa36c; --night:#19272a; --cream:#fff7ea; --radius:24px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; }
.container { width:min(1120px, calc(100% - 40px)); margin:0 auto; }
.skip-link { position:absolute; left:12px; top:-60px; background:var(--ink); color:#fff; padding:10px 14px; border-radius:8px; z-index:10; }.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:5; background:rgba(255,253,249,.94); border-bottom:1px solid rgba(219,229,221,.8); backdrop-filter:blur(14px); }
.nav-wrap { min-height:74px; display:flex; align-items:center; gap:26px; }.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:18px; font-weight:800; white-space:nowrap; }.tomato,.tiny-tomato { display:inline-block; flex:0 0 auto; width:30px; height:30px; background:url('/tomato-drive-logo.svg') center/contain no-repeat; }.tiny-tomato { width:19px; height:19px; }
nav { display:flex; align-items:center; gap:22px; margin-left:auto; } nav a { text-decoration:none; color:#435156; font-size:14px; font-weight:650; } nav a:hover, nav a:focus-visible, .text-link:hover { color:var(--tomato-deep); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 18px; gap:9px; text-decoration:none; color:#fff; background:var(--tomato); border:1px solid var(--tomato); border-radius:999px; font-weight:750; box-shadow:0 9px 23px rgba(244,81,63,.22); transition:transform .2s ease,background .2s ease; }.button:hover,.button:focus-visible { background:var(--tomato-deep); transform:translateY(-2px); }.button-small { min-height:40px; padding:8px 14px; font-size:14px; margin-left:auto; }.button-light { background:#fff; border-color:#fff; color:var(--tomato-deep); box-shadow:none; }.button-light:hover,.button-light:focus-visible { background:var(--cream); }
.hero { overflow:hidden; padding:84px 0 66px; background:radial-gradient(circle at 81% 32%,rgba(236,255,228,.95),transparent 28%),linear-gradient(180deg,#fffdf9 0%,#f6fbf7 100%); }.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:56px; }.eyebrow { margin:0 0 15px; color:var(--tomato-deep); letter-spacing:.13em; font-size:12px; font-weight:800; }.eyebrow-light { color:#a9e6c7; }.hero h1 { max-width:700px; margin:0; font-size:clamp(44px,6vw,76px); line-height:.98; letter-spacing:-.055em; }.hero h1 em { color:var(--tomato); font-style:normal; }.lede { max-width:615px; margin:26px 0; color:var(--muted); font-size:20px; line-height:1.55; }.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }.text-link { color:var(--ink); font-weight:750; text-decoration-thickness:2px; text-underline-offset:4px; }.fine-print { margin:22px 0 0; color:#748077; font-size:13px; }
.phone-stage { display:grid; place-items:center; min-height:510px; }.phone { position:relative; width:min(100%,350px); padding:16px 15px 18px; border:9px solid #26363a; border-radius:43px; background:#ebf7ed; box-shadow:0 35px 60px rgba(37,58,49,.23); transform:rotate(3deg); }.phone::after { content:""; position:absolute; left:50%; top:10px; width:92px; height:22px; border-radius:16px; background:#26363a; transform:translateX(-50%); }.phone-bar { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:12px 5px 24px; font-size:10px; }.phone-bar strong { font-size:12px; }.analysis-card { padding:19px; border:1px solid #cde5d4; border-radius:23px; background:#fff; }.status { color:var(--tomato-deep); font-size:10px; font-weight:800; letter-spacing:.12em; }.analysis-card h2 { margin:7px 0 18px; font-size:26px; letter-spacing:-.04em; }.analysis-card p { margin:0; color:var(--muted); font-size:12px; }.money { display:block; margin:2px 0 18px; color:#19754b; font-size:39px; letter-spacing:-.05em; }.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.metric-grid div { padding:9px; border-radius:12px; background:#f3f8f4; }.metric-grid span { display:block; color:#718076; font-size:9px; font-weight:750; }.metric-grid b { font-size:13px; }.phone-note { margin:14px 2px; padding:10px; color:#44534a; font-size:11px; }.phone-tabs { display:flex; justify-content:space-around; color:#718076; font-size:10px; }.phone-tabs .active { color:var(--tomato-deep); font-weight:800; }
.proof-strip { background:var(--ink); color:#fff; }.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:24px 0; }.proof-grid p { display:flex; flex-direction:column; margin:0; padding:0 24px; border-left:1px solid #405055; }.proof-grid p:first-child { padding-left:0; border:0; }.proof-grid b { font-size:16px; }.proof-grid span { color:#b8c5c0; font-size:14px; }
.section { padding:102px 0; }.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:45px; align-items:end; max-width:970px; margin-bottom:50px; }.section-heading h2,.dark-section h2,.faq-layout h2,.cta-box h2 { margin:0; font-size:clamp(32px,4vw,52px); line-height:1.05; letter-spacing:-.047em; }.section-heading p,.dark-section p { margin:0; color:var(--muted); font-size:17px; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0; list-style:none; counter-reset:none; }.steps li { min-height:245px; padding:27px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }.steps span,.guide-card>span { color:var(--tomato-deep); font-size:14px; font-weight:850; }.steps h3,.guide-card h3 { margin:35px 0 10px; font-size:22px; letter-spacing:-.035em; }.steps p,.guide-card p { color:var(--muted); margin:0; }
.dark-section { background:var(--night); color:#fff; }.feature-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:start; }.dark-section h2 { margin-bottom:19px; }.dark-section p { color:#bdc9c2; }.feature-list { display:grid; gap:22px; }.feature-list article { display:grid; grid-template-columns:38px 1fr; gap:16px; padding-bottom:21px; border-bottom:1px solid #405054; }.feature-list article>span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#294135; color:#a9e6c7; }.feature-list h3 { margin:0 0 4px; font-size:19px; }.feature-list p { font-size:14px; }
.guides { background:#f5f9f5; }.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.guide-card { display:flex; min-height:300px; flex-direction:column; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }.guide-card:hover,.guide-card:focus-visible { transform:translateY(-5px); box-shadow:0 18px 32px rgba(30,51,40,.12); }.guide-card h3 { margin-top:35px; }.guide-card b { margin-top:auto; color:var(--tomato-deep); font-size:14px; }.guide-card i { font-style:normal; }
.faq-section { padding-bottom:80px; }.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:76px; }.faq-layout h2 { max-width:450px; }.faq-list details { border-top:1px solid var(--line); padding:21px 0; }.faq-list details:last-child { border-bottom:1px solid var(--line); }.faq-list summary { cursor:pointer; font-size:18px; font-weight:760; list-style:none; padding-right:28px; position:relative; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary::after { content:"+"; position:absolute; right:2px; color:var(--tomato-deep); font-size:23px; line-height:1; }.faq-list details[open] summary::after { content:"−"; }.faq-list p { max-width:680px; margin:12px 0 2px; color:var(--muted); }
.cta-section { padding:0 0 84px; }.cta-box { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:50px 58px; color:#fff; background:linear-gradient(135deg,#f4513f,#d34034); border-radius:30px; }.cta-box .eyebrow { color:#ffe0c7; }.cta-box h2 { max-width:650px; }
.site-footer { padding:26px 0; border-top:1px solid var(--line); }.footer-wrap { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:22px; }.footer-wrap div { display:flex; gap:18px; }.footer-wrap a:not(.brand) { color:var(--muted); font-size:14px; }.footer-wrap p { margin:0; color:#748077; font-size:12px; text-align:right; }
.article-hero { padding:73px 0 55px; background:#f4f9f5; }.breadcrumbs { margin:0 0 25px; color:#68766d; font-size:14px; }.breadcrumbs a { color:inherit; }.article-hero h1 { max-width:850px; margin:0; font-size:clamp(38px,5vw,65px); line-height:1.04; letter-spacing:-.052em; }.article-hero .lede { max-width:760px; font-size:19px; }.article-layout { display:grid; grid-template-columns:minmax(0,720px) 220px; justify-content:space-between; gap:50px; padding:70px 0 100px; }.article-content h2 { margin:48px 0 13px; font-size:30px; letter-spacing:-.035em; }.article-content p,.article-content li { color:#405056; }.article-content ul,.article-content ol { padding-left:22px; }.article-content li { margin:8px 0; }.formula { margin:25px 0; padding:20px 22px; border-left:4px solid var(--tomato); border-radius:0 14px 14px 0; background:var(--cream); font-size:19px; font-weight:750; }.article-aside { align-self:start; position:sticky; top:100px; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; }.article-aside p { margin:0 0 9px; font-weight:750; }.article-aside a { display:block; margin:8px 0; color:var(--tomato-deep); font-size:14px; }.article-cta { margin-top:45px; padding:28px; border-radius:20px; background:#ecf7ef; }.article-cta h2 { margin-top:0; }
@media (max-width:850px) { .nav-wrap { gap:14px; }.nav-wrap nav { display:none; }.hero { padding-top:56px; }.hero-grid,.feature-grid,.faq-layout,.article-layout { grid-template-columns:1fr; }.phone-stage { min-height:450px; }.proof-grid,.steps,.guide-grid { grid-template-columns:1fr; }.proof-grid { gap:0; }.proof-grid p,.proof-grid p:first-child { padding:14px 0; border-left:0; border-top:1px solid #405055; }.proof-grid p:first-child { border-top:0; }.section-heading { grid-template-columns:1fr; gap:17px; }.feature-grid { gap:42px; }.faq-layout { gap:32px; }.article-aside { display:none; }.footer-wrap { grid-template-columns:1fr; }.footer-wrap p { text-align:left; }.cta-box { align-items:flex-start; flex-direction:column; padding:36px; } }
@media (max-width:520px) { .container { width:min(100% - 32px,1120px); }.button-small { display:none; }.hero h1 { font-size:47px; }.lede { font-size:18px; }.phone { transform:none; }.section { padding:74px 0; }.phone-stage { min-height:430px; }.guide-card { min-height:255px; }.cta-section { padding-bottom:48px; }.cta-box { padding:30px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }