/* GetAwayyy site. Tokens from the Figma file. Soft 8pt grid: 4 8 12 16 24 32 40 48 56 64 80. */
:root{--navy:#15243c;--mint:#56d6c4;--palemint:#e7faf6;--paper:#fffdf6;--berry:#9b2857;--muted:#4f5a6b;--rule:#e1e5e4;
--display:'Calistoga',Georgia,serif;--body:'DM Sans',Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--navy);font:16px/24px var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}header.wrap{width:100%;box-sizing:border-box}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:900px){.wrap{padding-left:80px;padding-right:80px}}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:48px;line-height:56px}h2{font-size:32px;line-height:40px}h3{font-size:24px;line-height:32px}h2.h40{font-size:32px;line-height:40px}
@media(min-width:900px){h1{font-size:72px;line-height:80px}h2{font-size:48px;line-height:56px}h2.h40{font-size:40px;line-height:48px}}
.lead{font-size:20px;line-height:32px}
.eyebrow{font-size:12px;line-height:16px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--berry)}
.mint{color:var(--mint)}.muted{color:var(--muted)}p{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;height:64px;padding:0 24px;border-radius:12px;border:0;font:700 20px/24px var(--body);text-decoration:none;cursor:pointer;color:var(--navy);background:var(--mint)}
.btn.navy{background:var(--navy);color:var(--paper)}.btn.outline{background:var(--paper);border:2px solid var(--navy)}.btn.wide{width:100%;height:72px;font-size:20px}.btn.small{height:48px;padding:0 24px;border-radius:8px;font-size:16px;gap:6px}.btn .arrow{display:block}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;height:128px}
.logo{font:700 28px/32px var(--body);text-decoration:none;letter-spacing:-.02em}.logo img{height:56px;width:auto}
.nav-links{display:flex;align-items:center;gap:32px;font:700 16px/24px var(--body)}.nav-links a{text-decoration:none}
@media(max-width:700px){.nav{height:80px}.logo img{height:40px}}
/* hero */
.hero{display:grid;gap:40px;padding-block:40px 64px}
@media(min-width:900px){.hero{grid-template-columns:1fr 1fr;gap:64px;padding-block:56px 80px;align-items:start}}
.hero-copy{display:grid;gap:32px}.hero-heading{display:grid;gap:16px}.hero .promise{font-size:20px;line-height:32px;max-width:60ch}
.hero-eyebrow{font-size:14px;letter-spacing:.14em}
.hero-form>.btn{min-width:320px;justify-self:start}.hero-form .help{font:700 16px/24px var(--body);color:var(--navy)}
@media(max-width:700px){.hero-form>.btn{min-width:0;width:100%}}
.hero-form{display:grid;gap:12px}.hero-form .row{display:flex;gap:8px;flex-wrap:wrap}
.hero-form input{flex:1 1 220px;min-width:0;height:56px;border:2px solid var(--navy);border-radius:8px;padding:0 16px;font:16px/24px var(--body);background:var(--paper);color:var(--navy)}
.hero-art{display:grid;gap:0;border-radius:16px;overflow:hidden;background:var(--navy);color:var(--paper)}
.hero-art .photo{aspect-ratio:608/410;background:linear-gradient(160deg,#1f3558,#56d6c4 140%);display:grid;place-items:center;color:var(--palemint);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.hero-art .photo img{width:100%;height:100%;object-fit:cover}
.hero-art .cap{padding:32px}.hero-art .cap .eyebrow{color:var(--mint)}.hero-art .cap h3{margin-top:8px;color:var(--paper)}
/* bands */
.band{padding-block:32px}.band.navy{background:var(--navy);color:var(--paper)}.band.palemint{background:var(--palemint)}.band.mint{background:var(--mint);color:var(--navy)}
.trio{display:grid;gap:24px}@media(min-width:900px){.trio{grid-template-columns:repeat(3,1fr);gap:24px}}
.trio>div{display:grid;gap:4px}.trio h3{color:var(--mint);font-size:40px;line-height:48px;letter-spacing:-2px}.band.navy .trio p{font-size:16px;line-height:24px;color:var(--paper)}
section.block{padding-block:64px}@media(min-width:900px){section.block{padding-block:80px}}
.how{background:#fff;padding-block:64px}@media(min-width:900px){.how{padding-block:80px}}
.stack{display:grid;gap:16px;align-content:start}.stack-lg{display:grid;gap:40px;align-content:start}
.steps{display:grid;gap:40px}@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}}
.steps>div{display:grid;gap:16px}.steps .num{font:400 64px/72px var(--display);letter-spacing:-2px;color:var(--berry)}.step-text{display:grid;gap:8px}.steps h3{font:400 24px/32px var(--display)}.steps p{font-size:16px;line-height:24px}
.cards{display:grid;gap:16px}@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr);gap:16px}}
.card{display:grid;grid-template-rows:240px 1fr;background:var(--palemint);border-radius:16px;overflow:hidden}
.card .photo{height:240px;background:linear-gradient(160deg,#15243c,#2b4c86)}.card .photo img{width:100%;height:100%;object-fit:cover}
.card-body{display:grid;gap:24px;padding-top:24px;align-content:start;justify-items:start}
.card-text{display:grid;gap:12px}.card-copy{display:grid;gap:4px}
.card h3{font:400 28px/32px var(--display)}.card-copy p{font-size:16px;line-height:24px}.card .note{font-size:14px;line-height:24px;color:var(--berry)}
.split{display:grid;gap:40px;align-items:start}@media(min-width:900px){.split{grid-template-columns:480px 1fr;gap:80px}.faq-section{grid-template-columns:416px 1fr;gap:64px}}
.checks{display:grid;gap:24px}.checks>div{display:grid;gap:8px}.checks h3{font-family:var(--display);color:var(--mint);font-size:24px;line-height:32px}.checks p{font-size:16px;line-height:24px}
.faq{display:grid}.faq div{display:grid;gap:8px;padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--mint)}.faq div:first-child{padding-top:0}.faq h3{font:700 20px/24px var(--body)}.faq p{font-size:16px;line-height:24px}
.final{text-align:center;display:grid;gap:24px;justify-items:center}.final h2{color:var(--navy)}.final .btn{width:320px;max-width:100%}
.site-footer{background:var(--navy);color:var(--palemint)}.site-footer .wrap{padding-block:40px;display:grid;gap:16px;font-size:16px;line-height:24px;justify-items:start}.site-footer .logo img{height:53px;width:auto}.site-footer .fine{font-size:12px;line-height:16px;opacity:.7}.site-footer a{color:inherit}
/* forms */
.form-page{max-width:800px;margin:0 auto;padding-block:40px 80px;display:grid;gap:24px;align-content:center;width:100%;box-sizing:border-box}
.field{display:grid;gap:8px}.field label{font:700 16px/24px var(--body)}
.field input,.field select{height:56px;border:2px solid var(--navy);border-radius:8px;padding:0 16px;font:16px/24px var(--body);background:var(--paper);color:var(--navy);width:100%}
.grid-2{display:grid;gap:16px}@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;gap:16px}@media(min-width:700px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.help{font-size:14px;line-height:20px;color:var(--muted)}
.notice{background:var(--palemint);border-radius:8px;padding:16px;font-size:14px;line-height:20px}
.hidden{display:none}
/* deal page */
.deal{max-width:720px;margin:0 auto;padding-block:40px 80px;display:grid;gap:16px}
.deal .photo{aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#15243c,#2b4c86)}.deal .photo img{width:100%;height:100%;object-fit:cover}
.deal .price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.deal .now{background:var(--palemint);border-radius:8px;padding:8px 16px;font:700 32px/40px var(--body)}
.deal .was{color:var(--muted);text-decoration:line-through}.deal .save{font:700 14px/20px var(--body);color:var(--berry)}
.deal h1{font:700 32px/40px var(--body)}.deal .where{color:var(--berry);font-size:14px;line-height:20px}
.deal ul{margin:0;padding-left:20px;color:var(--muted);font-size:14px;line-height:20px}
.deal .signup{background:var(--palemint);border-radius:16px;padding:24px;display:grid;gap:12px;margin-top:16px}
.prose{max-width:720px;margin:0 auto;padding-block:40px 80px;display:grid;gap:16px}.prose h2{font:700 24px/32px var(--body);margin-top:16px}

/* signup modal (Figma: Modal 141:548) */
dialog#signup-modal{border:0;border-radius:24px;padding:0;background:var(--paper);color:var(--navy);width:min(540px,calc(100% - 32px));box-shadow:0 24px 64px rgba(21,36,60,.3)}
dialog#signup-modal::backdrop{background:rgba(21,36,60,.55)}
.modal-form{display:grid;gap:24px;padding:24px;position:relative}
.modal-head{display:grid;gap:12px}
.modal-head .eyebrow{font-size:14px;line-height:20px;letter-spacing:.14em}
.modal-form h2{font:400 48px/56px var(--display)}
.modal-head .intro{font-size:20px;line-height:32px}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-form .field{display:grid;gap:8px}.modal-form .field span{font:700 16px/24px var(--body)}
.modal-form .field input,.modal-form .field select{height:56px;border:2px solid var(--navy);border-radius:8px;padding:0 16px;font:16px/24px var(--body);background:var(--paper);color:var(--navy);width:100%}
.modal-form .field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2315243c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.modal-foot{display:grid;gap:12px}
.modal-form .btn{width:100%}
.modal-foot .help{font-size:14px;line-height:24px;color:var(--navy)}
.modal-close{position:absolute;top:12px;right:12px;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:transparent;display:grid;place-items:center;font:400 28px/1 var(--body);color:var(--muted);cursor:pointer}.modal-close span{display:block;transform:translateY(-1px)}
@media(max-width:480px){.modal-form h2{font-size:36px;line-height:44px}}
.modal-close:hover{background:var(--palemint);color:var(--navy)}

.field.check{grid-template-columns:auto 1fr;align-items:start;gap:12px}.field.check input{width:24px;height:24px;margin:0;accent-color:var(--navy)}.field.check span{font:700 16px/24px var(--body)}.field.check small{display:block;font-weight:400}