/* =========================================================
   StayForge Landing — "Boarding Pass" editorial theme
   Paper cream base, forest-green ink, botanical-green action,
   a single terracotta postmark-stamp accent used sparingly.
   Display: Instrument Serif · Body: Work Sans · Data: Space Mono
   ========================================================= */

:root{
  --paper:#F5F1E6;
  --paper-2:#EDE6D3;
  --ink:#1B3B2E;
  --forest:#16302A;
  --botanical:#2F6B4F;
  --meadow:#6FAE8C;
  --stamp:#C1502E;
  --line:#C9BFA0;
  --line-soft:#DDD5BC;
  --cream:#FBF9F2;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Work Sans',sans-serif; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Instrument Serif',serif; font-weight:400; margin:0 0 .4em; color:var(--forest); line-height:1.05;}
p{color:#4C5C52; line-height:1.7; margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
.mono{font-family:'Space Mono',monospace;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}

/* -------- perforation divider -------- */
.perf{
  height:1px; background-image:linear-gradient(to right, var(--line) 60%, transparent 0%);
  background-size:14px 1px; background-repeat:repeat-x;
}
.perf-v{
  width:1px; background-image:linear-gradient(to bottom, var(--line) 60%, transparent 0%);
  background-size:1px 14px; background-repeat:repeat-y;
}

/* -------- nav -------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(245,241,230,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:1180px; margin:0 auto;}
.stamp-mark{
  width:32px; height:32px; border-radius:50%; border:1.5px dashed var(--botanical);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--botanical); flex-shrink:0;
}
.nav-brand{display:flex; align-items:center; gap:10px; font-family:'Instrument Serif',serif; font-size:22px; letter-spacing:.02em; color:var(--forest);}
.nav-links{display:flex; gap:0; align-items:center; font-size:13px; font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.04em;}
.nav-links a{color:var(--ink); opacity:.75; padding:8px 16px; border-left:1px solid var(--line-soft);}
.nav-links a:first-child{border-left:none;}
.nav-links a:hover{opacity:1; color:var(--botanical);}
.nav-cta{background:var(--forest); color:var(--cream)!important; opacity:1!important; border-radius:2px; margin-left:10px;}
.nav-toggle{display:none; background:none; border:none; font-size:20px; color:var(--forest); cursor:pointer;}
@media(max-width:960px){
  .nav-links{position:fixed; inset:60px 0 auto 0; background:var(--cream); flex-direction:column; align-items:stretch; padding:6px 24px 16px; border-bottom:1px solid var(--line); transform:translateY(-120%); transition:transform .25s ease;}
  .nav-links.open{transform:translateY(0);}
  .nav-links a{border-left:none; border-top:1px solid var(--line-soft); padding:14px 0;}
  .nav-toggle{display:block;}
}

/* -------- buttons -------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; font-size:14.5px; font-weight:600; border-radius:2px; cursor:pointer; border:1px solid transparent; font-family:'Work Sans',sans-serif;}
.btn-primary{background:var(--forest); color:var(--cream);}
.btn-primary:hover{background:var(--botanical);}
.btn-ghost{background:transparent; color:var(--forest); border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--cream);}
.eyebrow{font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--stamp); display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.eyebrow::before{content:"✦"; }

/* -------- hero -------- */
.hero{padding:70px 0 40px;}
.hero-inner{display:grid; grid-template-columns:1fr; gap:56px; align-items:center;}
@media(min-width:1000px){.hero-inner{grid-template-columns:1.1fr .9fr;}}
.hero h1{font-size:clamp(38px,5.6vw,64px); letter-spacing:-0.01em;}
.hero h1 .accent{color:var(--botanical); font-style:italic;}
.hero-sub{font-size:17.5px; max-width:480px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 34px;}
.route-strip{display:flex; gap:0; font-family:'Space Mono',monospace; font-size:11.5px; color:var(--ink); border-top:1px solid var(--line); padding-top:16px; flex-wrap:wrap;}
.route-strip div{padding:4px 18px 4px 0; border-right:1px solid var(--line-soft); margin-right:18px;}
.route-strip div:last-child{border-right:none;}
.route-strip b{display:block; color:var(--forest); font-size:13px;}
.route-strip span{color:#7C8A80; text-transform:uppercase; letter-spacing:.06em; font-size:10px;}

/* -------- boarding pass ticket -------- */
.ticket{
  position:relative; background:var(--cream); border:1px solid var(--ink); border-radius:6px;
  display:grid; grid-template-columns:1fr 92px; box-shadow:10px 10px 0 var(--line-soft);
}
.ticket-main{padding:26px 24px;}
.ticket-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px dashed var(--line); padding-bottom:14px; margin-bottom:14px; flex-wrap:wrap; gap:6px;}
.ticket-head .brand{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--botanical);}
.ticket-head .code{font-family:'Space Mono',monospace; font-size:11px; color:#7C8A80;}
.ticket-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.ticket-field span{display:block; font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#8A9A8F; margin-bottom:3px;}
.ticket-field b{font-size:16px; color:var(--forest); font-weight:600; font-family:'Work Sans',sans-serif;}
.ticket-note{background:var(--paper-2); border-radius:4px; padding:10px 12px; font-size:12px; color:var(--ink); display:flex; gap:8px; align-items:flex-start; margin-top:4px;}
.ticket-note .tag{background:var(--stamp); color:#fff; font-family:'Space Mono',monospace; font-size:9px; padding:2px 6px; border-radius:2px; flex-shrink:0; margin-top:1px;}
.ticket-stub{
  border-left:1px dashed var(--ink); padding:18px 10px; display:flex; flex-direction:column;
  align-items:center; justify-content:space-between; background:var(--paper-2);
}
.ticket-stub .stamp-circle{
  width:56px; height:56px; border-radius:50%; border:2px solid var(--stamp); color:var(--stamp);
  display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Space Mono',monospace;
  font-size:9px; line-height:1.3; transform:rotate(-12deg); letter-spacing:.03em;
}
.ticket-stub .barcode{width:16px; height:100px; background:repeating-linear-gradient(to bottom, var(--ink) 0 3px, transparent 3px 6px);}
.ticket-stub .vertical-text{writing-mode:vertical-rl; font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.15em; color:#8A9A8F; text-transform:uppercase;}
/* notches */
.ticket::before, .ticket::after{
  content:""; position:absolute; width:18px; height:18px; background:var(--paper); border:1px solid var(--ink);
  border-radius:50%; top:50%; transform:translateY(-50%); right:92px; margin-right:-9px;
}
.ticket::after{ right:auto; left:calc(100% - 92px - 9px); }
@media(max-width:520px){
  .ticket{grid-template-columns:1fr;}
  .ticket-stub{border-left:none; border-top:1px dashed var(--ink); flex-direction:row; justify-content:space-around; padding:14px;}
  .ticket-stub .barcode{width:100px; height:16px; background:repeating-linear-gradient(to right, var(--ink) 0 3px, transparent 3px 6px);}
  .ticket-stub .vertical-text{writing-mode:horizontal-tb;}
  .ticket::before, .ticket::after{display:none;}
}

/* -------- receipt strip (logos) -------- */
.receipt{padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.receipt-inner{display:flex; flex-wrap:wrap; gap:0; justify-content:center; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.04em; color:var(--ink); text-transform:uppercase;}
.receipt-inner span{padding:0 18px; border-right:1px solid var(--line-soft);}
.receipt-inner span:last-child{border-right:none;}
.receipt-inner .lbl{color:#8A9A8F;}

/* -------- section shells -------- */
.section{padding:100px 0;}
.section-head{max-width:600px; margin-bottom:44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(28px,4vw,42px);}

/* -------- departure-board feature list -------- */
.board{border-top:1px solid var(--ink);}
.board-row{
  display:grid; grid-template-columns:64px 1fr 100px; gap:18px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--line-soft);
}
.board-row .gate{font-family:'Space Mono',monospace; font-size:13px; color:var(--stamp); font-weight:700;}
.board-row h3{font-size:19px; margin-bottom:4px; font-family:'Work Sans',sans-serif; font-weight:600; color:var(--forest);}
.board-row p{margin:0; font-size:14px;}
.board-row .tag{
  justify-self:end; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--ink); border-radius:2px; padding:5px 10px; color:var(--forest); white-space:nowrap;
}
@media(max-width:700px){
  .board-row{grid-template-columns:40px 1fr; }
  .board-row .tag{grid-column:2; justify-self:start; margin-top:6px;}
}

/* -------- AI concierge panel -------- */
.section.concierge{background:var(--forest); color:var(--cream);}
.section.concierge h2, .section.concierge h3{color:var(--cream);}
.section.concierge p{color:#A9C2B4;}
.concierge-head{display:flex; gap:32px; align-items:flex-start; flex-wrap:wrap; margin-bottom:50px;}
.wax-seal{
  width:96px; height:96px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--meadow), var(--botanical) 70%);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 8px 0 -2px rgba(0,0,0,.25);
  font-family:'Space Mono',monospace; color:var(--forest); font-size:10px; text-align:center; line-height:1.3; letter-spacing:.04em;
  border:3px solid #F5F1E6;
}
.menu-cols{display:grid; grid-template-columns:1fr; gap:0;}
@media(min-width:900px){.menu-cols{grid-template-columns:1fr 1fr;}}
.menu-col{padding:0 28px;}
.menu-col:first-child{border-right:none;}
@media(min-width:900px){.menu-col:first-child{border-right:1px dashed rgba(255,255,255,.25);}}
.menu-label{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--meadow); margin-bottom:18px;}
.menu-item{display:flex; justify-content:space-between; gap:14px; padding:16px 0; border-bottom:1px dashed rgba(255,255,255,.18);}
.menu-item:last-child{border-bottom:none;}
.menu-item h4{color:var(--cream); font-family:'Work Sans',sans-serif; font-size:15px; font-weight:600; margin-bottom:4px;}
.menu-item p{color:#9FBAAA; font-size:13px; margin:0; max-width:320px;}
.menu-item .price{font-family:'Space Mono',monospace; font-size:11px; color:var(--meadow); white-space:nowrap; padding-top:2px;}

/* -------- luggage tags (panels) -------- */
.tags-wrap{display:grid; grid-template-columns:1fr; gap:60px;}
@media(min-width:980px){.tags-wrap{grid-template-columns:1fr 1fr;}}
.luggage-tag{
  background:var(--cream); border:1px solid var(--ink); border-radius:8px; padding:30px 26px 26px;
  position:relative; box-shadow:8px 8px 0 var(--line-soft);
}
.luggage-tag.tilt-l{transform:rotate(-1.4deg);}
.luggage-tag.tilt-r{transform:rotate(1.4deg);}
.luggage-tag .punch{
  position:absolute; top:-11px; left:28px; width:22px; height:22px; border-radius:50%;
  background:var(--paper); border:1px solid var(--ink);
}
.luggage-tag .tag-label{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--stamp); margin-bottom:10px;}
.luggage-tag h3{font-size:24px; margin-bottom:14px;}
.tag-list{list-style:none; margin:0; padding:0;}
.tag-list li{display:flex; gap:10px; font-size:14px; color:var(--ink); padding:9px 0; border-top:1px dashed var(--line-soft);}
.tag-list li:first-child{border-top:none;}
.tag-list li::before{content:"›"; color:var(--botanical); font-weight:700;}

/* -------- demo / check-in confirmation -------- */
.checkin-card{
  background:var(--cream); border:1px solid var(--ink); border-radius:6px; padding:26px;
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center;
}
.checkin-card .stamp-circle{
  width:70px; height:70px; border-radius:50%; border:2px solid var(--botanical); color:var(--botanical);
  display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:10px;
  text-align:center; transform:rotate(-8deg); flex-shrink:0;
}
.checkin-rows{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;}
.checkin-rows div span{display:block; font-family:'Space Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:#8A9A8F;}
.checkin-rows div b{font-family:'Space Mono',monospace; font-size:14px; color:var(--forest);}

/* -------- setup / packing list -------- */
.code-block{
  background:var(--forest); color:#DCEFE3; border-radius:6px; padding:26px 28px; font-family:'Space Mono',monospace;
  font-size:13px; line-height:1.95; overflow-x:auto;
}
.code-block .c{color:var(--meadow);}

.check-cols{display:grid; grid-template-columns:1fr; gap:24px;}
@media(min-width:800px){.check-cols{grid-template-columns:1fr 1fr;}}
.check-card{border:1px solid var(--ink); border-radius:6px; padding:26px; background:var(--cream);}
.check-list{list-style:none; margin:16px 0 0; padding:0;}
.check-list li{font-size:14px; padding:8px 0; display:flex; gap:10px; border-top:1px dashed var(--line-soft);}
.check-list li:first-child{border-top:none;}
.check-list li.ok::before{content:"☑"; color:var(--botanical);}
.check-list li.info::before{content:"☐"; color:var(--stamp);}

/* -------- FAQ -------- */
.faq-item{border-bottom:1px dashed var(--line);}
.faq-item summary{list-style:none; cursor:pointer; padding:22px 0; font-family:'Instrument Serif',serif; font-size:19px; color:var(--forest); display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"＋"; font-size:16px; color:var(--stamp); font-family:'Space Mono',monospace;}
.faq-item[open] summary::after{content:"－";}
.faq-item p{padding-bottom:20px; margin:0; font-size:14.5px; max-width:640px;}

/* -------- final stamp CTA -------- */
.final{background:var(--forest); border-radius:8px; padding:70px 40px; text-align:center; color:var(--cream); position:relative; overflow:hidden;}
.final .big-stamp{
  width:120px; height:120px; border-radius:50%; border:3px solid var(--meadow); color:var(--meadow);
  display:flex; align-items:center; justify-content:center; margin:0 auto 24px; font-family:'Space Mono',monospace;
  font-size:12px; letter-spacing:.06em; text-align:center; line-height:1.4; transform:rotate(-6deg);
}
.final h2{color:var(--cream); font-size:clamp(28px,4vw,42px);}
.final p{color:#A9C2B4; max-width:480px; margin:0 auto 30px;}

/* -------- footer -------- */
footer{background:var(--ink); color:#9FB3A6; padding:50px 0 26px;}
.footer-top{display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; margin-bottom:32px;}
.footer-brand{font-family:'Instrument Serif',serif; color:var(--cream); font-size:20px;}
.footer-links{display:flex; gap:24px; flex-wrap:wrap; font-family:'Space Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em;}
.footer-links a:hover{color:var(--cream);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:18px; font-size:11.5px; text-align:center; font-family:'Space Mono',monospace; letter-spacing:.04em;}