/* The sales site. One light theme, big type, real product screens. */
/* Colors: the 1947-59 Chevrolet 3100 factory paints (brand/STYLE-GUIDE.md). forest = Juniper Green (the green sections, the footer and green text), green = Ocean Green 735 (round step markers, selected filters, the glow), omaha = Omaha Orange 730
   (terra = its button shade, terra2 = its text shade), sage = the Seacrest Green pill tint, cream = Bombay Ivory 748, golden = Golden Yellow 727, cardinal = Cardinal Red 725 */
:root{--green:#4f6e5b;--forest:#35503a;--forest2:#4f6e5b;--forest-deep:#283c2c;--ocean:#4f6e5b;--omaha:#d2521f;--golden:#d9a527;--cardinal:#8f1d22;--cream:#ece4cb;--paper:#fffdf8;--ink:#1b241f;--muted:#55605a;--terra:#bd4a1c;--terra2:#a84219;--sage:#dbe6de;--line:#e6dcc7;
  --bg:var(--paper);--fg:var(--ink);--card:#fff;--accent:var(--terra);--accent-fg:#fff;--soft:var(--sage);--band:var(--cream)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:var(--terra2)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}.narrow{max-width:760px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.08;margin:0 0 .45em;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.5rem,7vw,4.6rem);font-weight:700}h2{font-size:clamp(1.9rem,4.6vw,3rem)}h3{font-size:1.35rem}
section{padding:84px 0}
/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(255,253,248,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px}
/* the Ranch Pickup logo; the link text (the site name) stays for screen readers */
.brand{display:inline-block;width:171px;height:52px;background:url(/brand/ranch-pickup-logo.webp) left center/contain no-repeat;font-size:0;color:transparent;overflow:hidden;text-decoration:none}
nav{display:flex;gap:4px 22px;align-items:center}nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;padding:8px 2px;min-height:44px;display:inline-flex;align-items:center}nav a:hover{color:var(--terra2)}
/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.28em;background:var(--terra);color:#fff;border:2px solid var(--terra);border-radius:999px;padding:14px 28px;font-weight:700;font-size:1.02rem;text-decoration:none;min-height:52px;cursor:pointer;transition:transform .12s,background .12s}
.btn:hover{background:var(--terra2);border-color:var(--terra2);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}.btn.ghost:hover{background:rgba(127,127,127,.12)}
.btn.small{padding:9px 20px;min-height:44px;font-size:.96rem;color:#fff!important}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
/* hero */
.hero{background:radial-gradient(1200px 520px at 80% -10%,var(--ocean) 0,transparent 60%),linear-gradient(180deg,var(--forest) 0,var(--forest-deep) 100%);color:#fff;padding:74px 0 0;overflow:hidden}
.hero .eyebrow{display:inline-block;background:var(--sage);color:var(--forest);border-radius:999px;padding:6px 16px;font-weight:600;font-size:.92rem;margin-bottom:18px}
.hero h1{max-width:9em;margin-bottom:.4em}.hero .lead{font-size:clamp(1.15rem,2.2vw,1.35rem);color:#e6efe4;max-width:20em;margin:0 0 28px}.herogrid>div:first-child{position:relative;z-index:3}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}.hero .btn.ghost{color:#fff}.note{color:#e6efe4;font-size:.95rem;margin:0}
.herogrid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end}
.herovis{position:relative;height:480px}.herovis .laptop{position:absolute;right:-6%;bottom:0;width:100%;max-width:600px}.herovis .phone{position:absolute;left:6%;bottom:-38px;width:200px;z-index:2}
/* device frames */
.phone{background:#0e1512;border-radius:38px;padding:9px;box-shadow:0 30px 60px -18px rgba(0,0,0,.55),0 0 0 2px #2a3a31 inset}
.phone img{border-radius:30px;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top}
.laptop{background:#0e1512;border-radius:14px 14px 4px 4px;padding:10px 10px 12px;box-shadow:0 30px 60px -18px rgba(0,0,0,.5)}
.laptop img{border-radius:6px;width:100%;height:auto;aspect-ratio:16/9.5;object-fit:cover;object-position:top}
.laptop::after{content:"";display:block;height:10px;margin:12px -26px -12px;background:linear-gradient(#c9ccc6,#9da39b);border-radius:0 0 18px 18px}
/* feature rows */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.feat+.feat{margin-top:90px}.feat.flip .text{order:2}
.feat .text p{color:var(--muted);font-size:1.18rem;max-width:26em}.feat .tag{display:inline-block;background:var(--sage);color:var(--forest);font-weight:700;font-size:.85rem;border-radius:999px;padding:5px 14px;margin-bottom:14px}
.stage{background:var(--cream);border-radius:28px;padding:34px 20px 0;display:flex;justify-content:center;align-items:flex-end;gap:18px;overflow:hidden;min-height:430px}
.stage .phone{width:210px;margin-bottom:-60px}.stage .phone.b{margin-bottom:-90px}.stage.wide{padding:34px 34px 0}.stage .laptop{width:100%;margin-bottom:-22px}
/* the quick-setup picture: a laptop on wide screens, a phone on phones (the laptop shrank to a sliver under a tall empty card) */
.stage.qs{min-height:0}.stage.qs .phone{display:none}
@media(max-width:700px){.stage.qs{padding:28px 20px 0;height:420px;min-height:0;align-items:flex-start}.stage.qs .laptop{display:none}.stage.qs .phone{display:block;width:240px;margin:0}}
/* chips */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:22px 0 0}.chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-weight:700;font-size:1.02rem}
.band{background:var(--cream)}.dark{background:var(--forest);color:#fff}
/* steps */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;list-style:none;padding:0;counter-reset:s}
.steps3 li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px 28px}
.steps3 li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;font:700 1.15rem Georgia,serif;margin-bottom:14px}
.steps3 b{display:block;font:700 1.35rem Georgia,serif;margin-bottom:4px}.steps3 span{color:var(--muted)}
/* money band */
.money{display:flex;flex-wrap:wrap;gap:22px 48px;align-items:center;justify-content:space-between}.money h2{margin:0;max-width:14em}.money p{margin:6px 0 0;color:#e6efe4;font-size:1.15rem}
.money .btn:not(.ghost){background:#fff;color:var(--forest);border-color:#fff}.money .btn:not(.ghost):hover{background:var(--cream)}.money .btn.ghost{color:#fff}
/* faq */
details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 22px;margin:12px 0}summary{cursor:pointer;font-weight:700;font-size:1.08rem;padding:18px 0;min-height:56px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--terra)}details[open] summary::after{content:"\2212"}details p{margin:0 0 18px;color:var(--muted)}
.final{background:linear-gradient(180deg,var(--omaha) 0,var(--terra) 100%);color:#fff;text-align:center;padding:88px 0}.final .lead{font-size:1.3rem;opacity:.95}.final .btn:not(.ghost){background:#fff;color:var(--terra2);border-color:#fff}.final .btn.ghost{background:transparent;color:#fff}
footer{background:var(--forest);color:#c8d6cb;padding:36px 0 46px}footer a{color:#fff}footer p{margin:6px 0}.small{font-size:.92rem}.sub{color:var(--muted)}
/* forms, pricing and legal pages (shared) */
.formwrap{max-width:580px;margin:0 auto;padding:48px 22px 80px}.formwrap h1{font-size:clamp(2rem,5.5vw,2.8rem);color:var(--forest)}
.fcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 24px;margin:20px 0;box-shadow:0 14px 40px -24px rgba(53,80,58,.35)}
.fld{margin:16px 0}.fld label.t{display:block;font-weight:700;margin-bottom:5px}.fld .h{font-size:.9rem;color:var(--muted);margin:4px 0 0}
.fld input[type=text],.fld input[type=email],.fld input[type=password],.fld select{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;min-height:50px}
.fld input:focus-visible,.fld select:focus-visible{outline:3px solid var(--terra);outline-offset:1px;border-color:var(--terra)}
.addr{display:flex;align-items:center;gap:6px}.addr input{min-width:0}.addr span{white-space:nowrap;color:var(--muted)}
.ok{color:var(--forest)}.bad{color:var(--cardinal)}.cb{display:flex;gap:10px;align-items:flex-start;min-height:44px}.cb input{width:22px;height:22px;margin-top:3px;flex:none}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.errbox{background:#fdecea;color:var(--cardinal);border-radius:12px;padding:12px 16px;margin:12px 0}.donebox{background:var(--sage);border-radius:18px;padding:22px;margin:20px 0}
button.btn{font:inherit;font-weight:700;width:100%}button.btn:disabled{opacity:.6}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:26px}.plan{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:26px;display:flex;flex-direction:column}
.plan.pick{border:2px solid var(--terra);box-shadow:0 20px 50px -28px rgba(189,74,28,.6)}.plan h3{margin:0}.plan .price{font:700 1.7rem Georgia,serif;margin:12px 0;color:var(--forest)}.plan ul{padding-left:1.1em;margin:8px 0 20px;flex:1;color:var(--muted)}.plan li{margin:.35em 0}
.tag2{display:inline-block;background:var(--sage);color:var(--forest);border-radius:999px;padding:4px 14px;font-size:.85rem;font-weight:700}
.legal{max-width:760px;margin:0 auto;padding:44px 22px 80px}.legal h2{font-size:1.4rem;margin-top:1.6em}.draft{background:#fff4d6;color:#5a4300;border:1px solid var(--golden);border-radius:12px;padding:12px 16px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px}.card p{margin:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
@media(max-width:900px){.brand{width:144px;height:44px}.btn.small{padding:8px 16px;min-height:42px;font-size:.92rem}.bar{min-height:58px}section{padding:56px 0}.herogrid,.feat{grid-template-columns:1fr;gap:34px}.herovis{height:300px;margin-top:-6px}.herovis .laptop{width:100%;max-width:440px;right:-12%}.herovis .phone{width:140px;left:2%;bottom:-30px}.feat.flip .text{order:0}.stage{min-height:380px}
  .steps3,.plans,.grid{grid-template-columns:1fr}.hero{padding-top:44px}nav a:not(.btn){display:none}.money{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.tag{display:inline-block;background:var(--sage);color:var(--forest);font-weight:700;font-size:.85rem;border-radius:999px;padding:5px 14px;margin-bottom:6px}
.plan .tag{align-self:flex-start}
.demos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}.demo{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.demo h3{margin:6px 0 0;font-size:1.6rem}.demo p{margin:0 0 14px;color:var(--muted);font-size:1.1rem}.demo .btn{margin-top:auto}.demos.three{grid-template-columns:repeat(3,1fr)}@media(max-width:900px){.demos,.demos.three{grid-template-columns:1fr}}

.demo-group{margin:34px 0 4px;font-size:1.5rem}
/* ten looks: a row of phones, scrolls sideways on a phone */
.looks{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 22px;margin-top:30px}.looks figure{margin:0;min-width:0;scroll-snap-align:start}
.looks .phone.tall{aspect-ratio:390/844;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:9px 9px 0}.looks .phone.tall::-webkit-scrollbar{display:none}
.looks .phone.tall img{aspect-ratio:auto;object-fit:fill;border-radius:30px 30px 0 0;display:block}
.looks figcaption{text-align:center;margin-top:12px;display:grid;gap:2px}.looks figcaption b{font-weight:700}.looks figcaption span{color:var(--muted);font-size:.9rem;line-height:1.3}
@media(max-width:900px){.looks{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-inline:-22px;padding-inline:22px;scroll-padding-inline:22px}}
.custom{margin:26px 0 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 22px;max-width:44em}
/* who it's for */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}.who article{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}.who h3{font-size:1.25rem}.who p{margin:0;color:var(--muted);font-size:1rem}
@media(max-width:1000px){.who{grid-template-columns:1fr 1fr}}@media(max-width:600px){.who{grid-template-columns:1fr}}
@media(min-width:901px){.swipe{display:none}}
/* proof strip under the hero: four plain numbers */
.why{padding:26px 0 0}.proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.proof li{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.proof b{font:700 1.7rem Georgia,serif;color:var(--forest)}.proof span{color:var(--muted);font-size:.98rem}
@media (max-width:760px){.proof{grid-template-columns:1fr 1fr}.proof b{font-size:1.4rem}.proof span{font-size:.9rem}}
/* pricing: the ladder (every price on one screen) and the folded plan lists on phones */
.ladder{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.ladder a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:1.5px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink)}.ladder a span{font-size:.9rem;color:var(--muted)}.ladder a strong{font:700 1.15rem Georgia,serif;color:var(--forest)}.ladder a strong small{font:600 .75rem system-ui;color:var(--muted)}
.plan details.more summary{cursor:pointer;font-weight:700;color:var(--forest);padding:8px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}.plan details.more summary::after{content:"+";font-size:1.3rem;color:var(--terra)}.plan details.more[open] summary::after{content:"\2212"}.plan details.more summary::-webkit-details-marker{display:none}
@media(min-width:900px){.plan details.more summary{display:none}}
@media(max-width:900px){.ladder{grid-template-columns:repeat(3,1fr)}.ladder li:nth-child(n+4){grid-column:span 1}.ladder a{padding:9px 4px}.ladder a span{font-size:.82rem}}
.card.others p{margin:0 0 10px}
/* the comparison table (compare.html): rules, stripes, our row first and marked, short cells with a second line in gray */
.cmpwrap{overflow-x:auto;margin-top:18px;border:1.5px solid var(--line);border-radius:18px;background:#fff}
.cmp{width:100%;min-width:720px;border-collapse:collapse;font-size:.95rem;line-height:1.35}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.cmp thead th{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#faf8f3;font-weight:700}
.cmp tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
.cmp tbody tr:nth-child(even) td,.cmp tbody tr:nth-child(even) th{background:#fbfaf7}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tr.us th,.cmp tr.us td{background:var(--sage)!important;color:var(--forest);font-weight:700}
.cmp td small{display:block;font-size:.8rem;color:var(--muted);font-weight:400;margin-top:2px}
.cmp td.good{color:var(--forest);font-weight:600}.cmp td.bad{color:var(--cardinal)}
.cmp tr.us td.good::before{content:"\2713\00a0"}

/* phone menu (menu.js adds the button): the links open as a list under the top bar */
.menubtn{display:none}
@media(max-width:900px){.menubtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;margin-left:auto;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer}.menubtn:focus-visible{outline:3px solid var(--terra);outline-offset:2px}.top.open .bar{flex-wrap:wrap}.top.open nav{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 16px}.top.open nav a:not(.btn){display:flex;min-height:52px;padding:12px 4px;border-top:1px solid var(--line);font-size:1.08rem}.top.open nav .btn{margin-top:12px}}
@media(max-width:400px){.brand{width:118px;height:36px}.bar{gap:8px}.menubtn{padding:8px 12px}nav .btn.small{white-space:normal;line-height:1.15;padding:6px 12px;font-size:.88rem;text-align:center}}
.brand{flex-shrink:0}