/* ==========================================================
   Happy Ranch Pool · Guest Guide
   Palette pulled from the listing photos:
   pool turquoise, cedar siding, golden-hour sun, sage garden,
   charcoal trim, warm cream.
   ========================================================== */
:root{
  --pool:#0b6f93;        /* deep pool blue: text-safe on cream (5.6:1) */
  --pool-2:#1597bf;
  --pool-soft:#d6f0f6;
  --lagoon:#084d67;
  --cedar:#a4531f;       /* cedar siding (4.9:1 on cream) */
  --cedar-soft:#f6e3d2;
  --sun:#f7c04a;
  --sun-2:#ffd978;
  --sage:#5b7a4c;
  --sage-soft:#e6eedf;
  --ink:#1d2a31;
  --ink-2:#475a63;
  --cream:#fdf8ee;
  --sand:#f5ead6;
  --white:#fff;
  --radius:22px;
  --radius-s:14px;
  --shadow:0 1px 2px rgba(29,42,49,.06),0 10px 30px -12px rgba(29,42,49,.22);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --script:"Caveat","Comic Sans MS",cursive;
  --nav-h:108px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--pool);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--lagoon)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0 0 .5em;font-variation-settings:"SOFT" 100;letter-spacing:-.01em}
h2{font-size:clamp(2rem,6.5vw,3.25rem);font-weight:700}
h3{font-size:1.25rem;font-weight:650}
p{margin:0 0 1em}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.muted{color:var(--ink-2)}
.small{font-size:.9rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;background:var(--pool-soft);padding:.05em .4em;border-radius:6px}
.big{font-size:1.18rem;line-height:1.55}
.script{font-family:var(--script);font-weight:600}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cedar);margin-bottom:.6rem}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:currentColor}
.eyebrow--light{color:var(--sun-2)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;border-radius:999px;padding:.8rem 1.25rem;min-height:48px;transition:transform .15s ease,box-shadow .15s ease}
.btn svg{width:1.1em;height:1.1em;stroke-width:2.2}
.btn--sun{background:var(--sun);color:var(--ink);box-shadow:0 6px 18px -8px rgba(164,83,31,.7)}
.btn--sun:hover{color:var(--ink);transform:translateY(-1px);background:var(--sun-2)}

/* ---------- Top bar + quick nav ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(253,248,238,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(29,42,49,.08)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(1160px,100% - 2rem);margin-inline:auto;height:56px}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:750;font-size:1.3rem;letter-spacing:-.01em}
.brand em{font-style:italic;color:var(--pool);font-weight:600}
.brand__sun{width:28px;height:28px;color:var(--cedar);stroke-width:2;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.topbar__cta{font-weight:700;font-size:.9rem;text-decoration:none;color:var(--ink);background:var(--sun);padding:.5rem .95rem;border-radius:999px;min-height:40px;display:inline-flex;align-items:center}
.topbar__cta:hover{background:var(--sun-2);color:var(--ink)}
.quicknav ul{list-style:none;margin:0 auto;padding:.1rem 1rem .7rem;display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;width:min(1160px,100%);scroll-snap-type:x proximity}
.quicknav ul::-webkit-scrollbar{display:none}
.quicknav li{flex:none;scroll-snap-align:start}
.quicknav a{display:inline-flex;align-items:center;min-height:38px;padding:.35rem .9rem;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;background:var(--white);border:1px solid rgba(29,42,49,.1);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.quicknav a:hover{border-color:var(--pool);color:var(--pool)}
.quicknav a[aria-current]{background:var(--pool);color:#fff;border-color:var(--pool)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(82svh,760px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;isolation:isolate;background:var(--lagoon)}
.hero__img,.hero__img img{position:absolute;inset:0;width:100%;height:100%}
.hero__img img{object-fit:cover;object-position:52% 60%}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,40,54,.05) 0%,rgba(8,40,54,.05) 30%,rgba(8,40,54,.55) 62%,rgba(8,40,54,.85) 100%)}
.hero__content{position:relative;z-index:1;padding:5rem 0 5.2rem}
.hero__kicker{font-size:1.05rem;font-weight:600;margin:0 0 .2rem;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hero__kicker .script{font-size:1.8rem;color:var(--sun-2);margin-right:.35rem;display:inline-block;transform:rotate(-4deg)}
.hero h1{font-size:clamp(3.1rem,13vw,6.6rem);font-weight:800;line-height:.95;letter-spacing:-.025em;margin:0 0 .9rem;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.hero__lede{max-width:34rem;font-size:1.12rem;margin-bottom:1.4rem;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hero__facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;max-width:36rem}
.hero__facts li{display:flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.6rem .8rem;border-radius:14px;font-size:.98rem}
.hero__facts svg{width:1.35rem;height:1.35rem;color:var(--sun-2)}
.hero__wave{position:absolute;left:0;bottom:-1px;width:100%;height:46px;fill:var(--cream);z-index:1}

/* ---------- Prep checklist ---------- */
.prep{position:relative;z-index:2;margin-top:-1.2rem;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem 1.25rem 1.3rem;border-top:6px solid var(--sun)}
.prep__title{display:flex;align-items:center;gap:.5rem;font-size:1.45rem;margin-bottom:1rem}
.prep__title svg{color:var(--cedar)}
.prep__list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.prep__list li{display:flex;gap:.9rem;align-items:flex-start}
.prep__list h3{font-family:var(--body);font-size:1.05rem;font-weight:700;margin:.1rem 0 .2rem}
.prep__list p{margin:0 0 .6rem;color:var(--ink-2)}
.prep__num{flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--pool-soft);color:var(--pool);font-family:var(--display);font-weight:800;font-size:1.1rem}

/* ---------- Sections ---------- */
.section{padding:4.5rem 0}
.cards{display:grid;gap:1rem;margin-top:1.6rem}
.card{background:var(--white);border-radius:var(--radius);padding:1.4rem 1.3rem;box-shadow:var(--shadow)}
.card h3{margin-bottom:.45rem}
.card address{font-style:normal;margin-bottom:.8rem;line-height:1.55}
.card p:last-child{margin-bottom:0}
.card__icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--pool-soft);color:var(--pool);margin-bottom:.9rem}
.card__icon svg{width:26px;height:26px}


/* Welcome */
.welcome__grid{display:grid;gap:2rem;align-items:center}
.welcome__quote{margin:1.6rem 0 0;padding:1.3rem 1.3rem 1.1rem;background:var(--sage-soft);border-radius:var(--radius);position:relative;font-size:1rem}
.welcome__quote::before{content:"\201C";position:absolute;top:-.25em;left:.35em;font-family:var(--display);font-size:4.2rem;color:var(--sage);line-height:1}
.welcome__quote p{margin:.4rem 0 .6rem}
.welcome__quote footer{font-family:var(--script);font-size:1.45rem;color:var(--sage)}
.welcome__photo{margin:0;position:relative}
.welcome__photo img{border-radius:var(--radius);box-shadow:var(--shadow);transform:rotate(1.5deg);border:8px solid #fff}
.welcome__photo figcaption{display:flex;gap:.5rem;align-items:center;margin-top:1rem;font-size:.95rem;color:var(--ink-2);justify-content:center;text-align:center}
.welcome__photo figcaption svg{width:1.4rem;height:1.4rem;color:var(--cedar)}

/* Arrival */
.arrival{background:var(--sand)}

/* Entry */
.entry__grid{display:grid;gap:2rem;align-items:center}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.checks li{display:flex;gap:.85rem;align-items:flex-start}
.checks svg{width:2.4rem;height:2.4rem;padding:.5rem;border-radius:12px;background:var(--cedar-soft);color:var(--cedar)}
.entry__photo{margin:0}
.entry__photo img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}

/* Rules */
.rules{background:linear-gradient(180deg,var(--lagoon),#0a5d7c);color:#eaf6fa;position:relative}
.rules h2{color:#fff}
.rules__intro{font-size:1.1rem;color:#cfe8f0}
.rules__important{display:grid;gap:.9rem;margin:1.6rem 0}
.imp{display:flex;gap:.9rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:1.1rem 1.1rem}
.imp>svg{width:2.4rem;height:2.4rem;color:var(--sun);padding:.1rem}
.imp h3{color:#fff;font-size:1.15rem;margin-bottom:.3rem}
.imp p{margin:0;color:#d5eaf1;font-size:.98rem}
.rules__cols{display:grid;gap:1rem}
.rulebox{background:var(--white);color:var(--ink);border-radius:var(--radius);padding:1.3rem}
.rulebox h3{display:flex;align-items:center;gap:.5rem;font-size:1.3rem}
.rulebox h3 svg{width:1.8rem;height:1.8rem;padding:.3rem;border-radius:50%;stroke-width:2.6}
.rulebox--yes h3 svg{background:var(--sage-soft);color:var(--sage)}
.rulebox--no h3 svg{background:#fde4dc;color:#b33a1a}
.rulebox ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.rulebox li{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;border-top:1px solid rgba(29,42,49,.08)}
.rulebox li:first-child{border-top:0}
.rulebox li svg{width:1.35rem;height:1.35rem;margin-top:.12rem}
.rulebox--yes li svg{color:var(--sage)}
.rulebox--no li svg{color:#b33a1a}
.rules__note{display:flex;gap:.7rem;align-items:flex-start;margin:1.4rem 0 0;padding:1rem 1.1rem;background:rgba(247,192,74,.14);border-radius:var(--radius-s);color:#fff3d6}
.rules__note svg{width:1.6rem;height:1.6rem;color:var(--sun)}

/* Amenities */
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1.6rem 0 2rem}
.mosaic figure{margin:0;overflow:hidden;border-radius:var(--radius-s)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic__a{grid-column:1/-1;aspect-ratio:16/9}
.mosaic__b,.mosaic__c{aspect-ratio:1}
.mosaic__d{grid-column:1/-1;aspect-ratio:16/8}
.amen-groups{display:grid;gap:1rem}
.amen{background:var(--white);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow)}
.amen h3{display:flex;align-items:center;gap:.55rem}
.amen h3 svg{width:2.1rem;height:2.1rem;padding:.4rem;border-radius:10px;background:var(--pool-soft);color:var(--pool)}
.amen ul{margin:0;padding:0;list-style:none}
.amen li{position:relative;padding:.42rem 0 .42rem 1.3rem;border-top:1px dashed rgba(29,42,49,.12)}
.amen li:first-child{border-top:0}
.amen li::before{content:"";position:absolute;left:0;top:1rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--sun)}
.tech{display:grid;gap:1rem;margin-top:1rem}
.tech__card{display:flex;gap:1rem;align-items:flex-start;background:var(--pool-soft);border-radius:var(--radius);padding:1.2rem 1.3rem}
.tech__card>svg{width:2.6rem;height:2.6rem;padding:.55rem;border-radius:12px;background:var(--pool);color:#fff}
.tech__card h3{margin-bottom:.25rem}
.tech__card p{margin:0 0 .3rem}
.addons{margin-top:1rem;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.addons summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;font-family:var(--display);font-weight:650;font-size:1.2rem}
.addons summary::-webkit-details-marker{display:none}
.addons summary>span:first-child{display:flex;gap:.5rem;align-items:center}
.addons summary svg{color:var(--cedar)}
.addons summary::after{content:"+";font-family:var(--body);font-size:1.6rem;color:var(--pool);line-height:1}
.addons[open] summary::after{content:"–"}
.addons__hint{margin-left:auto;font-family:var(--body);font-size:.8rem;font-weight:600;color:var(--ink-2)}
.addons table{width:100%;border-collapse:collapse;font-size:.95rem}
.addons th,.addons td{text-align:left;vertical-align:top;padding:.7rem 1.3rem;border-top:1px solid rgba(29,42,49,.08)}
.addons thead th{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.addons tbody th{font-weight:700}
.addons td:nth-child(2){white-space:nowrap;color:var(--cedar);font-weight:700}
@media (max-width:640px){
  .addons thead{display:none}
  .addons tr{display:grid;grid-template-columns:1fr auto;padding:.7rem 1.3rem;border-top:1px solid rgba(29,42,49,.08)}
  .addons th,.addons td{padding:0;border:0}
  .addons td:last-child{grid-column:1/-1;color:var(--ink-2);font-size:.9rem;margin-top:.2rem}
  .addons td:last-child:empty{display:none}
}

/* What to bring */
.bring{background:var(--sage-soft)}
.bring__grid{display:grid;gap:1.6rem}
.bag{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.bag li{display:flex;gap:.8rem;align-items:center;background:var(--white);border-radius:var(--radius-s);padding:.85rem 1rem;box-shadow:0 1px 2px rgba(29,42,49,.06)}
.bag svg{width:2.2rem;height:2.2rem;padding:.45rem;border-radius:10px;background:var(--sage-soft);color:var(--sage)}
.bag__key{border:2px solid var(--cedar);background:var(--cedar-soft)!important}
.bag__key svg{background:#fff!important;color:var(--cedar)!important}

/* Checkout */
.checkout__grid{display:grid;gap:2rem;align-items:center}
.checkout__photo{margin:0}
.checkout__photo img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.checkout__ig{display:flex;gap:.5rem;align-items:center;font-weight:600}
.checkout__ig svg{width:1.4rem;height:1.4rem;color:var(--cedar)}

/* Help */
.help{background:radial-gradient(120% 90% at 100% 0%,#1597bf 0%,var(--lagoon) 55%,#073f55 100%);color:#e6f4f8}
.help h2{color:#fff}
.card--glass{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);box-shadow:none;color:#e6f4f8}
.card--glass h3{color:#fff}
.card--glass .card__icon{background:var(--sun);color:var(--ink)}
.card--glass .btn{margin-top:.3rem}
.biglink{color:#fff;font-weight:700;font-size:1.1rem;word-break:break-all}
.biglink:hover{color:var(--sun-2)}
.emergency{display:flex;gap:1rem;margin-top:1.2rem;background:#fff;color:var(--ink);border-radius:var(--radius);padding:1.2rem 1.3rem;border-left:8px solid #d94a26}
.emergency>svg{width:2.4rem;height:2.4rem;color:#c23d1b}
.emergency h3{margin-bottom:.3rem}
.emergency p{margin:0}
.hours{display:grid;gap:1rem;margin-top:1.4rem;padding:1.2rem 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.hours>div{display:flex;flex-direction:column;gap:.25rem}
.hours__label{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sun-2);font-weight:700}
.hours__val{font-weight:600;color:#fff}
.social{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}
.social a{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-weight:600;text-decoration:none;min-height:40px}
.social a:hover{color:var(--sun-2)}
.social svg{width:1.3rem;height:1.3rem}
.sauna{margin-top:1.6rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;background:rgba(247,192,74,.14);border:1px dashed rgba(247,192,74,.6);border-radius:var(--radius);padding:1rem 1.3rem}
.sauna .script{font-size:1.7rem;color:var(--sun)}
.sauna p{margin:0;color:#fff4d9}

/* Footer */
.footer{background:#062f40;color:#b9d6df;padding:2.2rem 0 calc(2.2rem + env(safe-area-inset-bottom))}
.footer a{color:#fff}
.footer__inner{display:grid;gap:.3rem;text-align:center}
.footer__inner p{margin:0}
.footer__brand{display:flex;gap:.5rem;justify-content:center;align-items:center;font-family:var(--display);font-weight:750;font-size:1.3rem;color:#fff}
.footer__brand svg{color:var(--sun)}

/* ---------- Tablet / desktop ---------- */
@media (min-width:700px){
  :root{--nav-h:112px}
  .hero__facts{grid-template-columns:repeat(4,auto);max-width:none;justify-content:start}
  .prep{padding:1.8rem 2rem}
  .prep__list{grid-template-columns:repeat(3,1fr);gap:1.6rem}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .rules__important{grid-template-columns:repeat(3,1fr)}
  .rules__cols{grid-template-columns:1fr 1.25fr}
  .mosaic{grid-template-columns:2fr 1fr 1fr;grid-template-rows:260px 260px}
  .mosaic__a{grid-column:1;grid-row:1/3;aspect-ratio:auto}
  .mosaic__b{grid-column:2/4;grid-row:1;aspect-ratio:auto}
  .mosaic__c{grid-column:2;grid-row:2;aspect-ratio:auto}
  .mosaic__d{grid-column:3;grid-row:2;aspect-ratio:auto}
  .amen-groups{grid-template-columns:repeat(3,1fr)}
  .tech{grid-template-columns:1fr 1fr}
  .bag{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  .section{padding:6rem 0}
  .topbar__inner{height:62px}
  .quicknav ul{justify-content:center}
  .hero{min-height:min(86vh,820px)}
  .hero__content{padding-bottom:6.5rem}
  .hero__shade{background:linear-gradient(90deg,rgba(8,40,54,.72) 0%,rgba(8,40,54,.35) 45%,rgba(8,40,54,0) 70%),linear-gradient(0deg,rgba(8,40,54,.55) 0%,rgba(8,40,54,0) 45%)}
  .prep{margin-top:-2.5rem}
  .welcome__grid{grid-template-columns:1.2fr .9fr;gap:4rem}
  .entry__grid{grid-template-columns:1.1fr 1fr;gap:4rem}
  .bring__grid{grid-template-columns:.9fr 1.3fr;gap:4rem;align-items:start}
  .checkout__grid{grid-template-columns:1fr 1.1fr;gap:4rem}
  .mosaic{grid-template-rows:300px 300px}
}

/* ---------- fixes after screenshot review ---------- */
.nowrap{white-space:nowrap}
.rules__cols{align-items:start}
@media (max-width:520px){.addons__hint{display:none}}

/* ---------- second pass ---------- */
.appnote{display:flex;gap:.8rem;align-items:flex-start;margin:1rem 0 1.6rem;padding:1rem 1.15rem;background:var(--pool-soft);border-left:6px solid var(--pool);border-radius:var(--radius-s)}
.appnote svg{width:1.8rem;height:1.8rem;color:var(--pool);margin-top:.1rem}
.appnote p{margin:0}
.towel-callout{display:flex;gap:.6rem;align-items:flex-start;background:#fff;border-radius:var(--radius-s);padding:.85rem 1rem;border-left:6px solid var(--cedar)}
.towel-callout svg{width:1.4rem;height:1.4rem;color:var(--cedar);margin-top:.15rem}
.checkout__list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.6rem}
.checkout__list li{display:flex;gap:.8rem;align-items:center;font-weight:600;background:#fff;border-radius:var(--radius-s);padding:.8rem 1rem;box-shadow:0 1px 2px rgba(29,42,49,.06)}
.checkout__list svg{width:2.2rem;height:2.2rem;padding:.45rem;border-radius:10px;background:var(--pool-soft);color:var(--pool)}
.hours--single{grid-template-columns:1fr!important}

/* ---------- third pass: featured add-ons ---------- */
.extras{margin-top:1.4rem;background:linear-gradient(135deg,#fff6e3,#fdebd6);border:1px solid rgba(164,83,31,.18);border-radius:var(--radius);padding:1.4rem 1.2rem}
.extras__head h3{display:flex;align-items:center;gap:.5rem;font-size:1.45rem;margin-bottom:.2rem}
.extras__head h3 svg{color:var(--cedar)}
.extras__lede{font-weight:700;color:var(--cedar);margin:0 0 1rem}
.extras__grid{display:grid;gap:.8rem}
.extra{background:#fff;border-radius:var(--radius-s);padding:1rem 1.1rem;box-shadow:0 1px 2px rgba(29,42,49,.06)}
.extra__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.extra__top svg{width:2.4rem;height:2.4rem;padding:.5rem;border-radius:12px;background:var(--cedar-soft);color:var(--cedar)}
.extra__price{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--ink)}
.extra__price small{font-size:.55em;font-weight:600;color:var(--ink-2)}
.extra h4{font-family:var(--display);font-size:1.15rem;margin:0 0 .3rem}
.extra p{margin:0;font-size:.95rem;color:var(--ink-2)}
.extras__more{margin:1rem 0 0;font-size:.9rem;color:var(--ink-2)}
@media (min-width:700px){.extras{padding:1.8rem 2rem}.extras__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.extras__grid{grid-template-columns:repeat(4,1fr)}}
.imp .btn{margin-top:.8rem}