/* ============================================================
   Stay Integrator — shared design system
   Direct Vacation Rental marketing site
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root{
	/* --- surfaces --- */
	--paper:        #F5F7FA;
	--surface:      #FFFFFF;
	--surface-sunk: #EDF1F6;
	--ink:          #10192B;
	--ink-soft:     #4E5A70;
	--ink-faint:    #8993A6;
	--line:         #E1E6EE;
	--line-strong:  #C8D0DD;

	/* --- brand: pulled from the Stay Integrator mark --- */
	--blue:       #0677FF;
	--blue-deep:  #053B72;
	--blue-soft:  #E8F1FF;
	--amber:      #FF9900;
	--amber-deep: #C67306;
	--amber-soft: #FFF3E0;

	--good:      #147A4E;
	--good-soft: #E5F5EC;
	--alert:     #B23A22;
	--alert-soft:#FBEAE5;

	--shadow-sm: 0 1px 2px rgba(16,24,40,.06);
	--shadow-lg: 0 20px 44px -22px rgba(9,26,58,.28);
	--radius: 14px;

	--display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--body:    "Inter", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
	--mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--wrap: 1440px;
	--pad: clamp(20px, 5vw, 64px);
}

html { scroll-behavior: smooth; }

body{
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:var(--body);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	text-transform: capitalize;
	overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); }

.eyebrow{
	font-family:var(--mono);
	font-size:12px;
	font-weight:500;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--blue-deep);
	display:inline-flex;
	align-items:center;
	gap:8px;
}
.eyebrow::before{
	content:"";
	width:16px; height:1px;
	background:var(--amber);
}

h1,h2,h3{ font-family:var(--display); font-weight:600; text-wrap:balance; color:var(--ink); }
h1{ font-size:clamp(36px,5.4vw,60px); line-height:1.04; letter-spacing:-.01em; }
h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.12; letter-spacing:-.005em; }
h3{ font-size:20px; line-height:1.25; }

.lede{ font-size:clamp(17px,1.7vw,20px); line-height:1.6; color:var(--ink-soft); max-width:62ch; }
p{ color:var(--ink-soft); max-width:66ch; }
.center{ text-align:center; margin-inline:auto; }

/* ---------------- buttons ---------------- */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:13px 24px;
	border-radius:999px;
	font-family:var(--body); font-weight:600; font-size:14.5px;
	text-decoration:none; border:1px solid transparent; cursor:pointer;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
	white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ background:var(--blue-deep); }
.btn--amber { background: #FFFFFF; color: #000; border: 1px solid #FFFFFF; }
.btn--amber:hover{ background:transparent; color:#FFFFFF; border: 1px solid #FFFFFF; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--sm{ padding:9px 18px; font-size:13.5px; }
.btn--block{ width:100%; }

/* ---------------- header / nav ---------------- */
.site-header{
	position:sticky; top:0; z-index:40;
	background:rgba(245,247,250,.86);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--line);
}
.nav{
	display:flex; align-items:center; justify-content:space-between;
	padding-block:14px;
	gap:24px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:60px; width:100px; }
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{
	font-size:14.5px; font-weight:500; color:var(--ink-soft); text-decoration:none;
	padding-block:4px; border-bottom:1px solid transparent;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a[aria-current="page"]{ color:var(--ink); border-color:var(--amber); }
.nav__cta{ display:flex; align-items:center; gap:12px; }
.nav__toggle{ display:none; }

@media (max-width: 860px) {
    .nav__links {
        position: fixed;
        inset: 64px 0 auto 0;
        background: var(--surface);
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 12px var(--pad) 24px;
        border-bottom: 1px solid var(--line);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .nav__links a {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
    }

    body.nav-open .nav__links {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        border: 1px solid var(--line-strong);
        background: var(--surface);
        cursor: pointer;
    }

    .nav__cta .btn--ghost {
        display: none;
    }

    .site-header .nav .brand {
        order: 1;
    }

    .site-header .nav .nav__cta {
        order: 2;
    }

    .site-header .nav .nav__links {
        order: 3;
    }
}
/* ---------------- footer ---------------- */
.site-footer{ border-top:1px solid var(--line); margin-top:clamp(64px,9vw,120px); }
.footer-grid{
	display:grid; gap:40px;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	padding-block:56px 32px;
}
.footer-grid h4{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:14px; }
.footer-grid ul{ display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ font-size:14.5px; color:var(--ink-soft); text-decoration:none; }
.footer-grid a:hover{ color:var(--ink); }
.footer-brand p{ font-size:14px; margin-top:12px; max-width:32ch; }
.footer-bottom{
	display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px;
	border-top:1px solid var(--line); padding-block:20px; font-size:13px; color:var(--ink-faint);
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------------- sections ---------------- */
section{ padding: 50px 20px 50px 20px; }
.section--sunk{ background:var(--surface-sunk); }
.section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(32px,5vw,56px); max-width:720px; }
.section-head.center{ margin-inline:auto; align-items:center; text-align:center; }

/* ---------------- hero ---------------- */
.hero{ padding-top:clamp(48px,7vw,88px); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,56px); align-items:center; }
.hero__copy{ display:flex; flex-direction:column; gap:22px; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.hero__facts{ display:flex; flex-wrap:wrap; gap:22px; margin-top:8px; }
.hero__facts div{ font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); }
.hero__facts strong{ display:block; font-family:var(--display); font-size:20px; color:var(--ink); font-weight:600; }
@media (max-width:920px){ .hero__grid{ grid-template-columns:1fr; } }

/* ---------------- quote ticket (signature element) ---------------- */
.quote-card{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:20px;
	box-shadow:var(--shadow-lg);
	position:relative;
	max-width:400px;
	margin-inline:auto;
}
.quote-card__band{
	background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%);
	color:#fff; padding:20px 22px; display:flex; flex-direction:column; gap:4px;
	border-radius:20px 20px 0 0;
}
.quote-card__band .code{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; opacity:.8; }
.quote-card__band .name{ font-family:var(--display); font-size:22px; font-weight:600; }
.quote-card__dates{ display:flex; justify-content:space-between; font-size:12.5px; opacity:.9; margin-top:6px; }
.quote-card__perf{
	height:0; position:relative; border-top:2px dashed rgba(16,25,43,.18);
	margin:0 22px;
}
.quote-card__perf::before,.quote-card__perf::after{
	content:""; position:absolute; top:-11px; width:22px; height:22px; border-radius:50%;
	background:var(--paper); border:1px solid var(--line);
}
.quote-card__perf::before{ left:-33px; }
.quote-card__perf::after{ right:-33px; }
.quote-card__body{ padding:22px; display:flex; flex-direction:column; gap:10px; }
.quote-card__line{ display:flex; justify-content:space-between; font-size:14px; color:var(--ink-soft); }
.quote-card__line.total{ font-size:17px; color:var(--ink); font-weight:700; padding-top:10px; border-top:1px solid var(--line); }
.quote-card__badge{
	align-self:flex-start; margin-top:4px;
	background:var(--good-soft); color:var(--good);
	font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.03em;
	padding:5px 11px; border-radius:999px;
}

/* ---------------- flow steps ---------------- */
.flow{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.flow__step{ background:var(--surface); padding:22px 18px; display:flex; flex-direction:column; gap:10px; }
.flow__num{ font-family:var(--mono); font-size:11px; color:var(--amber-deep); font-weight:600; }
.flow__step h4{ font-family:var(--display); font-size:16px; font-weight:600; }
.flow__step p{ font-size:13px; max-width:none; }
@media (max-width:960px){ .flow{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .flow{ grid-template-columns:1fr 1fr; } }

/* ---------------- feature grid ---------------- */
.grid{ display:grid; gap:20px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--4{ grid-template-columns:repeat(2,2fr); }
@media (max-width:960px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:26px; display:flex; flex-direction:column; gap:12px;
}
.card__icon{
	width:40px; height:40px; border-radius:11px;
	background:var(--blue-soft); color:var(--blue-deep);
	display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:16px;
}
.card p{ font-size:14.5px; }
.card a.more{ font-size:13.5px; font-weight:600; color:var(--blue-deep); text-decoration:none; margin-top:auto; }

/* ---------------- plan / ticket cards ---------------- */
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
@media (max-width:1040px){ .plans{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .plans{ grid-template-columns:1fr; } }

.ticket{
	background:var(--surface); border:1px solid var(--line); border-radius:18px;
	display:flex; flex-direction:column; position:relative;
	box-shadow:var(--shadow-sm);
}
.ticket--feature{ border-color:var(--ink); box-shadow:var(--shadow-lg); }
.ticket__head{ padding:24px 22px 18px; display:flex; flex-direction:column; gap:6px; }
.ticket__rung{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--amber-deep); font-weight:600; text-transform:uppercase; }
.ticket__name{ font-family:var(--display); font-size:25px; font-weight:600; }
.ticket__for{ font-size:13.5px; color:var(--ink-soft); min-height:52px; }
.ticket__price{ display:flex; align-items:baseline; gap:6px; margin-top:6px; }
.ticket__price .amt{ font-family:var(--display); font-size:34px; font-weight:600; }
.ticket__price .per{ font-size:13px; color:var(--ink-faint); }
.ticket__perf{
	position:relative; height:0; border-top:2px dashed var(--line-strong); margin:0;
}
.ticket__perf::before,.ticket__perf::after{
	content:""; position:absolute; top:-10px; width:20px; height:20px; border-radius:50%; background:var(--paper);
}
.ticket__perf::before{ left:-10px; }
.ticket__perf::after{ right:-10px; }
.ticket__body{ padding:20px 22px 26px; display:flex; flex-direction:column; gap:14px; flex:1; }
.ticket__includes{ font-size:12.5px; color:var(--ink-faint); font-weight:600; }
.ticket__includes em{ font-style:normal; color:var(--blue-deep); }
.ticket__list{ display:flex; flex-direction:column; gap:9px; flex:1; }
.ticket__list li{ display:flex; gap:9px; font-size:13.5px; color:var(--ink-soft); align-items:flex-start; }
.ticket__list li::before{ content:"+"; color:var(--amber-deep); font-weight:700; font-family:var(--mono); }

.ticket__more{ border-top:1px dashed var(--line); margin-top:-4px; }
.ticket__more summary{
	cursor:pointer; list-style:none; padding:12px 0; font-size:13px; font-weight:600; color:var(--blue-deep);
	display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.ticket__more summary::-webkit-details-marker{ display:none; }
.ticket__more summary::after{ content:"+"; font-family:var(--mono); color:var(--ink-faint); font-size:16px; }
.ticket__more[open] summary::after{ content:"\2212"; }
.ticket__more .ticket__list{ padding-bottom:6px; }

/* ---------------- stat blocks ---------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.stat{ background:var(--surface); padding:26px 20px; text-align:center; }
.stat .num{ font-family:var(--display); font-size:clamp(26px,3vw,36px); font-weight:600; color:var(--blue-deep); }
.stat .label{ font-size:12.5px; color:var(--ink-faint); margin-top:6px; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } }

/* ---------------- table (comparison / matrix) ---------------- */
.scroller{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
table{ border-collapse:collapse; width:100%; min-width:760px; font-size:14px; }
th,td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
thead th{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; border-bottom:1px solid var(--line-strong); white-space:nowrap; }
tbody tr:last-child td{ border-bottom:none; }
th[scope="row"]{ font-weight:600; }
th[scope="row"] span{ display:block; font-family:var(--mono); font-weight:400; font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.cell{ text-align:center; font-variant-numeric:tabular-nums; }
.yes{ color:var(--good); font-weight:700; }
.no{ color:var(--line-strong); }

/* ---------------- category / feature list blocks ---------------- */
.feat-cat{ display:flex; flex-direction:column; gap:20px; padding-block:36px; border-top:1px solid var(--line); }
.feat-cat:first-of-type{ border-top:none; }
.feat-cat__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }

/* ---- screenshot frames (features page) ---- */
.shot{ margin:22px 0 28px; }
.shot-frame{
	border:1px solid var(--line); border-radius:12px; overflow:hidden;
	box-shadow:var(--shadow-sm); background:var(--surface); max-width:720px;
}
.shot-frame__bar{ display:flex; gap:6px; padding:10px 14px; background:var(--surface-sunk); border-bottom:1px solid var(--line); }
.shot-frame__bar span{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.shot-frame img{ display:block; width:100%; height:auto; }
.shot__caption{ margin-top:10px; font-size:12.5px; color:var(--ink-faint); font-family:var(--mono); max-width:720px; }
.shot--wide .shot-frame{ max-width:100%; }
.gallery-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0 8px; }
.gallery-strip figcaption{ margin-top:10px; font-size:13px; color:var(--ink-soft); text-align:center; }
@media (max-width:820px){ .gallery-strip{ grid-template-columns:1fr; } }

/* ---- integration cards (integrations page) ---- */
.integration-card{
	background:var(--surface); border:1px solid var(--line); border-radius:14px;
	padding:22px; display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.integration-card__mark{
	width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
	font-family:var(--display); font-weight:700; font-size:17px; color:#fff; flex:none;
}
.integration-card h3{ font-size:20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.integration-card p{ font-size:13.5px; }
.integration-cat{ margin-bottom:10px; }
.integration-cat h4{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; }
.integration-card__mark img{ width:100%; height:100%; display:block; }

/* ---- add-on logo library (integrations page) ---- */
.addon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.addon-tile{
	background:var(--surface); border:1px solid var(--line); border-radius:14px;
	padding:20px; display:flex; flex-direction:column; gap:12px;
}
.addon-tile img{ width:52px; height:52px; border-radius:14px; }
.addon-tile h3{ font-size:20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.addon-tile p{ font-size:13px; }
.feat-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 28px; }
@media (max-width:760px){ .feat-list{ grid-template-columns:1fr; } }
.feat{ display:flex; gap:12px; align-items:flex-start; }
.feat__dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); margin-top:7px; flex:none; }
.feat__title{ font-weight:600; font-size:14.5px; display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
.feat__body p{ font-size:13.5px; margin-top:2px; }
.tag{
	font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
	padding:2px 8px; border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-faint);
}
.tag--starter{ color:var(--good); border-color:var(--good-soft); background:var(--good-soft); }
.tag--pro{ color:var(--blue-deep); border-color:var(--blue-soft); background:var(--blue-soft); }
.tag--business{ color:var(--amber-deep); border-color:var(--amber-soft); background:var(--amber-soft); }
.tag--agency{ color:#5b3aa0; border-color:#EFE9FA; background:#EFE9FA; }

/* ---------------- CTA band ---------------- */
.cta-band{
	background:linear-gradient(135deg,var(--ink) 0%,#1a2740 100%);
	color:#fff; border-radius:24px; padding:clamp(36px,6vw,64px);
	display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:#C4CCDC; }
@media (max-width:760px){ .cta-band{ flex-direction:column; text-align:center; } }

/* ---------------- testimonial ---------------- */
.quote-block{ display:flex; flex-direction:column; gap:18px; max-width:820px; }
.quote-block blockquote{ font-family:var(--display); font-size:clamp(20px,2.6vw,28px); line-height:1.4; color:var(--ink); font-weight:500; }
.quote-block cite{ font-style:normal; font-size:14px; color:var(--ink-soft); display:block; }
.quote-block cite strong{ color:var(--ink); }

/* ---------------- forms ---------------- */
.form{ display:flex; flex-direction:column; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink); }
.field input, .field select, .field textarea{
	font:inherit; font-size:14.5px; padding:12px 14px; border-radius:10px;
	border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); }
.form-note{ font-size:12.5px; color:var(--ink-faint); }
.form-success{
	display:none; background:var(--good-soft); border:1px solid #CFEBDB; color:var(--good);
	padding:16px 18px; border-radius:12px; font-size:14px; font-weight:600;
}
.form-success.show{ display:block; }

/* ---------------- accordion / faq ---------------- */
.faq{ display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:last-child{ border-bottom:none; }
.faq summary{ cursor:pointer; list-style:none; padding:18px 22px; font-weight:600; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--ink-faint); font-size:18px; }
.faq details[open] summary::after{ content:"–"; }
.faq .faq-a{ padding:0 22px 20px; font-size:14.5px; color:var(--ink-soft); }

/* ---------------- support cards ---------------- */
.support-cta{
	display:flex; align-items:center; gap:16px; background:var(--surface);
	border:1px solid var(--line); border-radius:16px; padding:22px 24px;
}
.support-cta .icon{
	width:44px; height:44px; border-radius:12px; background:var(--amber-soft); color:var(--amber-deep);
	display:grid; place-items:center; font-size:19px; flex:none;
}

/* ---------------- misc ---------------- */
.divider{ height:1px; background:var(--line); border:none; margin-block:0; }
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{
	font-size:13px; padding:7px 14px; border:1px solid var(--line); border-radius:999px;
	color:var(--ink-soft); background:var(--surface); font-weight:500;
}
.pill-note{
	display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-faint);
	background:var(--surface-sunk); border:1px solid var(--line); padding:8px 14px; border-radius:999px;
}
.legal h2{ margin-top:44px; }
.legal h2:first-of-type{ margin-top:0; }
.legal ol, .legal ul{ list-style:decimal; padding-left:22px; display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.legal ul{ list-style:disc; }
.legal p + p{ margin-top:12px; }
.legal p{ max-width:none; }
.toc{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.toc a{ font-size:13.5px; text-decoration:none; color:var(--blue-deep); }

/* ============================================================
   HOMEPAGE ONLY — travel-document motif.
   A booking is a travel document: this borrows the vocabulary of
   boarding passes, luggage tags and postcards instead of generic
   SaaS cards. Everything here is additive — no page but index.html
   uses these classes.
   ============================================================ */

.hero--pass{
	position:relative;
	background-image:radial-gradient(var(--line) 1px, transparent 1px);
	background-size:24px 24px;
}

/* ---- boarding pass / live-quote card ---- */
.pass{
	position:relative;
	max-width:420px;
	margin-inline:auto;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:20px;
	box-shadow:var(--shadow-lg);
	transform:rotate(-2deg);
}
.pass__main{ padding:24px 26px 20px; display:flex; flex-direction:column; gap:16px; }
.pass__toprow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.pass__code{ font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--ink-faint); }
.pass__title .name{ font-family:var(--display); font-size:25px; font-weight:600; color:var(--ink); display:block; }
.pass__title .place{ font-size:12.5px; color:var(--ink-faint); }
.pass__fields{ display:flex; border-top:1px solid var(--line); padding-top:14px; }
.pass__fields > div{ flex:1; padding-right:12px; }
.pass__fields > div + div{ border-left:1px solid var(--line); padding-left:12px; }
.pass__label{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
.pass__value{ font-size:14px; font-weight:600; color:var(--ink); }

.pass__perf{ position:relative; height:0; border-top:2px dashed var(--line-strong); margin:0 24px; }
.pass__notch{ position:absolute; top:-11px; width:22px; height:22px; border-radius:50%; background:var(--paper); border:1px solid var(--line); z-index:2; }
.pass__notch--l{ left:-35px; }
.pass__notch--r{ right:-35px; }

.pass__stub{ padding:18px 26px 24px; display:flex; flex-direction:column; gap:9px; background:var(--surface-sunk); border-radius:0 0 20px 20px; }
.pass__stubtop{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:2px; }
.pass__stublabel{ font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); padding-top:8px; }
.pass__row{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-soft); }
.pass__row--total{ font-size:16px; font-weight:700; color:var(--ink); padding-top:8px; border-top:1px solid var(--line-strong); }
.pass__stamp{
	flex:none; width:58px; height:58px; border-radius:50%;
	border:2px dashed var(--alert); color:var(--alert); background:var(--alert-soft);
	display:flex; align-items:center; justify-content:center; text-align:center;
	font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.02em; line-height:1.25;
	transform:rotate(-12deg);
}
.pass__barcode{
	height:24px; margin-top:6px; border-radius:2px;
	background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px, var(--ink) 13px 14px, transparent 14px 18px);
}
.pass__footcode{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-top:2px; }

@media (max-width:520px){ .pass{ transform:none; max-width:100%; } }

/* ---- route / flow timeline ---- */
.route{ position:relative; display:flex; justify-content:space-between; gap:6px; padding-top:8px; }
.route::before{ content:""; position:absolute; top:32px; left:34px; right:34px; border-top:2px dashed var(--line-strong); z-index:0; }
.route__stop{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; flex:1; max-width:180px; }
.route__node{
	width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff;
	display:grid; place-items:center; font-family:var(--mono); font-size:12.5px; font-weight:600;
	border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line-strong); flex:none;
}
.route__stop h4{ font-family:var(--display); font-size:15px; font-weight:600; }
.route__stop p{ font-size:12.5px; max-width:none; }

@media (max-width:860px){
	.route{ flex-direction:column; align-items:flex-start; gap:26px; padding-left:22px; }
	.route::before{ top:0; bottom:0; left:21px; right:auto; border-top:none; border-left:2px dashed var(--line-strong); }
	.route__stop{ flex-direction:row; text-align:left; max-width:none; width:100%; gap:16px; }
	.route__node{ margin-left:-22px; }
}

/* ---- postcard feature cards ---- */
.postcard{ position:relative; transition:transform .18s ease, box-shadow .18s ease; }
.postcard::after{
	content:""; position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
	border:1.5px dashed var(--line-strong);
}
.postcard:nth-child(6n+1){ transform:rotate(-1deg); }
.postcard:nth-child(6n+2){ transform:rotate(.8deg); }
.postcard:nth-child(6n+4){ transform:rotate(-.8deg); }
.postcard:nth-child(6n+5){ transform:rotate(1deg); }
.postcard:hover{ transform:rotate(0deg) translateY(-3px); box-shadow:var(--shadow-lg); }

/* ---- luggage-tag plan teaser ---- */
.tag-card{ position:relative; transition:transform .18s ease; }
.tag-card::before{
	content:""; position:static; top:14px; left:50%; transform:translateX(-50%);
	width:13px; height:13px; border-radius:50%; background:var(--paper); border:1px solid var(--line-strong);
}
.tag-card:nth-child(odd){ transform:rotate(-1.2deg); }
.tag-card:nth-child(even){ transform:rotate(1deg); }
.tag-card:hover{ transform:rotate(0deg); }

/* ---- airmail postcard testimonial ---- */
.airmail{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:38px clamp(24px,4vw,48px); }
.airmail::before{
	content:""; position:absolute; top:0; left:0; right:0; height:7px; border-radius:8px 8px 0 0;
	background:repeating-linear-gradient(-45deg, var(--blue) 0 12px, #fff 12px 16px, var(--amber) 16px 28px, #fff 28px 32px);
}
.airmail__stamp{
	position:absolute; top:30px; right:clamp(20px,4vw,44px);
	width:54px; height:66px; border:2px solid var(--line-strong); border-radius:2px;
	display:flex; align-items:center; justify-content:center; text-align:center;
	font-family:var(--mono); font-size:10px; color:var(--ink-faint); transform:rotate(6deg);
	background-image:repeating-linear-gradient(135deg, var(--surface-sunk) 0 3px, transparent 3px 7px);
}
@media (max-width:820px){ .airmail__stamp{ display:none; } }

/* ---- ink-stamp integration badges ---- */
.stamp-row{ display:flex; flex-wrap:wrap; gap:30px; justify-content:center; }
.stamp-badge{
	width:120px; height:120px; border-radius:50%; border:2px dashed var(--line-strong); color:var(--ink-soft);
	display:flex; align-items:center; justify-content:center; text-align:center;
	font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; padding:8px;
}
.stamp-badge:nth-child(odd){ transform:rotate(-6deg); }
.stamp-badge:nth-child(even){ transform:rotate(5deg); }
.stamp-badge:nth-child(3n){ border-color:var(--blue); color:var(--blue-deep); }
.stamp-badge:nth-child(3n+1){ border-color:var(--amber-deep); color:var(--amber-deep); }

/* ---- cta band ticket notches ---- */
.cta-band::before,.cta-band::after{
	content:""; position:absolute; top:50%; transform:translateY(-50%);
	width:26px; height:26px; border-radius:50%; background:var(--paper); z-index:2;
}
.cta-band::before{ left:-13px; }
.cta-band::after{ right:-13px; }
@media (max-width:760px){ .cta-band::before,.cta-band::after{ display:none; } }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } html{ scroll-behavior:auto; } }

a.btn.btn--ghost:hover {
    background-color: #ffffff;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
}

.feat-cat .shot {
    display: flex;
    flex-direction: column;
    align-items: center;
}