/* ==========================================================================
   TIOO marketing — home page (public_site/mkt/home.html), v3 "wide".
   A spread layout on the wide container: split hero (words left, the
   drawn "Harbour View Hotel" dashboard + phone right, on a light-blue
   band), 01 one calendar (drawing left / hairline feature rows right),
   02 guest arrival sticky story on a warm band, 03 your own website,
   04 running the place as tabs over a words + drawing split, 05 who it's
   for wide photo grid, 06 RoomKeyPin dark band (video beside the real
   numbers), 07 how to start, 08 pricing, FAQ spread, final call to action.
   Motion is transform/opacity only and straight (no tilt anywhere, no
   bounce); html.reduced turns it all off.
   ========================================================================== */

/* ======================================================================
   HERO — split
   ====================================================================== */
.hero { position: relative; padding: 36px 0 48px; overflow: hidden; }
.hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hero { padding: 56px 0 64px; } .hero-grid { gap: 48px; } }
@media (min-width: 1100px) {
  .hero { padding: 48px 0 56px; }
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--col-gap) * 1.5); }
}
@media (min-width: 1500px) { .hero { padding: 64px 0 72px; } .hero-grid { column-gap: calc(var(--col-gap) * 2); } }
.hero-copy { max-width: 640px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); line-height: 1.3; }
.hero-kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent); flex: none; }
.hero h1 { font-size: var(--fs-h1); letter-spacing: -0.04em; line-height: 1; font-weight: 650; text-wrap: balance; }
.hero h1 .w { display: inline-block; }
.hero-sub { margin: 22px 0 0; max-width: 58ch; font-size: var(--fs-xl); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 900px) { .hero-sub { margin-top: 28px; } }
.hero-copy .actions { margin-top: 30px; }
/* trust line: items keep whole on a line; the dot between them hangs in
   the gap to the left of an item, so an item that wraps to a new line
   has its dot clipped off at the edge (never a dot starting a line) */
.hero-note { margin-top: 18px; font-size: var(--fs-s); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 22px; overflow: clip; }
.hero-note span { position: relative; display: inline-flex; align-items: center; white-space: nowrap; }
.hero-note span + span::before { content: ""; position: absolute; left: -12px; top: 50%; width: 3px; height: 3px; margin-top: -1px; border-radius: 50%; background: var(--ink-4); }
.hero-works { margin-top: 10px; font-size: var(--fs-s); color: var(--ink-3); }
.hero-works b { color: var(--ink); font-weight: 600; margin-right: 4px; }
@media (max-width: 539px) {
  .hero-note { flex-direction: column; gap: 4px; }
  .hero-note span + span::before { display: none; }
  .hero-kicker { font-size: 11px; letter-spacing: .12em; max-width: 32ch; }
  .hero-kicker::before { display: none; }
}

/* entrance: words of the headline rise one after another (home.js wraps
   them), then the rest of the copy, straight up, no bounce */
html.js-anim .hero-copy > :not(h1) { opacity: 0; transform: translateY(10px); animation: hero-up .6s var(--ease-out) forwards; }
html.js-anim .hero-copy > :nth-child(1) { animation-delay: .05s; }
html.js-anim .hero-copy > :nth-child(3) { animation-delay: .5s; }
html.js-anim .hero-copy > :nth-child(4) { animation-delay: .6s; }
html.js-anim .hero-copy > :nth-child(5) { animation-delay: .7s; }
html.js-anim .hero-copy > :nth-child(6) { animation-delay: .75s; }
html.js-anim .hero h1.is-split .w { opacity: 0; transform: translateY(.35em); animation: hero-up .55s var(--ease-out) forwards; animation-delay: calc(.12s + var(--i, 0) * 45ms); }
@keyframes hero-up { to { opacity: 1; transform: none; } }

/* ---- the drawn product: fills the right half ------------------------ */
.hero-product { position: relative; padding-bottom: 36px; min-width: 0; }
.hero-product .ui-frame { transform: translateY(var(--py, 0px)); transition: transform .25s var(--ease); will-change: transform; }
html.js-anim .hero-product { opacity: 0; transform: translateY(20px); animation: hero-up .8s var(--ease-out) .45s forwards; }


/* the phone with the guest app: straight, overlapping the frame's corner */
.hero-phone { position: absolute; z-index: 5; width: 200px; right: -12px; bottom: 0; animation: floaty 9s ease-in-out infinite; }
.hero-phone .phone-frame { padding: 6px; border-radius: 26px; }
.hero-phone .phone-frame .screen { border-radius: 20px; }
@media (min-width: 1100px) { .hero-phone { width: 180px; right: -16px; } }
@media (min-width: 1300px) { .hero-phone { width: 210px; right: -20px; } }
@media (min-width: 1500px) { .hero-phone { width: 240px; right: -28px; } .hero-product { padding-bottom: 40px; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html.reduced .hero-phone { animation: none; }

/* toast cards that appear in sequence — they come in straight */
.float-card {
  position: absolute; z-index: 4; display: none;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow-l);
  font-size: 12px; align-items: center; gap: 10px;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.float-card .ic { width: 28px; height: 28px; border-radius: var(--radius-s); display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); flex: none; }
.float-card .ic.blue { background: var(--accent-soft); color: var(--accent-ink); }
.float-card .ic svg { width: 15px; height: 15px; }
.float-card b { display: block; color: var(--ink); font-weight: 600; }
.float-card span { color: var(--ink-3); font-size: 11px; }
@media (min-width: 900px) {
  .float-card { display: flex; }
  .fc-a { left: -22px; bottom: -16px; }
  .fc-b { right: 250px; bottom: 36px; }
  .fc-c { right: 16px; top: -18px; }
  html.js-anim .float-card:not(.is-on) { opacity: 0; transform: translateY(10px); }
}

/* phones + small tablets: the calendar shows 5 days (today in the middle)
   and switches to the reservations list like on a computer; the phone
   hangs off the bottom-right corner */
@media (max-width: 899px) { .hero-phone { width: 150px; right: 0; bottom: 0; } .hero-product { padding-bottom: 48px; } }
@media (max-width: 599px) {
  .hero-product { padding-bottom: 96px; }
  .stats, #heroApp .cal-legend { display: none; }
  #heroApp .cal { --days: 5; --roomw: 62px; }
  #heroApp .cal-head > div:nth-child(n+7), #heroApp .cal-row .cell:nth-child(n+7) { display: none; }
  #heroApp .cal-row { height: 40px; }
  #heroApp .cal-row .room { padding: 0 6px 0 8px; font-size: 10.5px; }
  #heroApp .cal-row .bar { top: 7px; height: 26px; gap: 4px; padding-right: 7px; font-size: 10px; }
  #heroApp .cal-row .bar::before { width: 18px; height: 18px; font-size: 9px; }
  #heroApp .cal-sources span { padding: 3px 8px 3px 6px; font-size: 10px; }
  .rsv-mini__section:nth-child(n+2) { display: none; }
  .hero-phone { width: 120px; right: 8px; bottom: 0; }
}

/* ======================================================================
   01 ONE CALENDAR — drawing left / hairline rows right
   ====================================================================== */
.sync-wrap { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .sync-wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: calc(var(--col-gap) * 2); } }
@media (min-width: 1280px) { .sync-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--col-gap) * 3); } }
.sync-diagram { position: relative; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
@media (min-width: 1280px) { .sync-diagram { padding: 36px; } }
.sources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; position: relative; }
@media (min-width: 520px) { .sources { grid-template-columns: repeat(4, 1fr); } }
.src { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.src .logo-sq { width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.src .logo-sq svg { width: 20px; height: 20px; }
.src.booking .logo-sq { background: var(--ch-booking); }
.src.airbnb .logo-sq { background: var(--ch-airbnb); }
.src.expedia .logo-sq { background: var(--ch-expedia); }
.src.direct .logo-sq { background: var(--ch-direct); }
.src small { font-weight: 500; color: var(--ink-3); font-size: 12px; }
.pipes { position: relative; height: 56px; margin: 8px 0; }
.pipes svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 519px) { .pipes { height: 32px; } .pipes svg { display: none; } .pipes::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--line-2); } }
.pipes .flow { stroke-dasharray: 5 7; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
html.reduced .pipes .flow { animation: none; }
.sync-copy .feature-list { margin-top: 0; }

/* ======================================================================
   02 GUEST ARRIVAL — sticky scroll story (#guest-journey), warm band
   ====================================================================== */
.gj { position: relative; overflow: clip; }
.gj .mkt-container { position: relative; }

.gj-stage-wrap { display: grid; gap: 36px; }
@media (min-width: 900px) { .gj-stage-wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: calc(var(--col-gap) * 2); align-items: start; } }
@media (min-width: 1280px) { .gj-stage-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--col-gap) * 3); } }
/* the stage: phone + door clip side by side, centred in the left column
   (no dead middle on a wide screen); the clip is sized by height so the
   pair stays compact */
.gj-stage { position: relative; display: grid; grid-template-columns: minmax(0, 250px) 1fr; gap: 16px; align-items: center; justify-content: center; }
@media (min-width: 900px) { .gj-stage { position: sticky; top: calc(var(--header-h) + 32px); grid-template-columns: 280px auto; gap: 24px; } }
@media (min-width: 1280px) { .gj-stage { grid-template-columns: 300px auto; gap: 28px; } }
@media (min-width: 1500px) { .gj-stage { grid-template-columns: 330px auto; gap: 36px; } }
@media (min-width: 1800px) { .gj-stage { grid-template-columns: 380px auto; gap: 48px; } }
.gj-glow { display: none; }
.gj-door { position: relative; aspect-ratio: 9 / 16; max-height: 460px; width: 100%; border-radius: var(--radius-l); overflow: hidden; background: #000; border: 1px solid var(--line-2); align-self: center; opacity: 0; transform: translateX(-16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
@media (min-width: 900px) { .gj-door { width: auto; height: min(500px, 64vh); max-height: none; } }
@media (min-width: 1280px) { .gj-door { height: min(540px, 66vh); } }
@media (min-width: 1500px) { .gj-door { height: min(600px, 68vh); } }
@media (min-width: 1800px) { .gj-door { height: min(700px, 72vh); } }
.gj-door.is-on, html:not(.js) .gj-door, html.reduced .gj-door { opacity: 1; transform: none; }
.gj-door video, .gj-door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gj-door .cap { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 12px; color: #fff; background: rgba(10,11,15,.7); padding: 6px 9px; border-radius: var(--radius-s); }

.gj-steps { display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--line-2); }
@media (min-width: 900px) { .gj-steps { border-top: 0; } .gj-steps .gj-step { min-height: 52vh; display: flex; align-items: center; } }
.gj-step { position: relative; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; border-bottom: 1px solid var(--line-2); }
@media (min-width: 900px) { .gj-step { border-bottom: 0; } }
.gj-step__inner { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 0; transition: opacity .3s; width: 100%; }
/* the dimmed "not this step" look belongs to the sticky story on a computer;
   on phones every step reads at full strength */
@media (min-width: 900px) { .gj-step__inner { opacity: .55; } .gj-step.is-active .gj-step__inner { opacity: 1; } }
.gj-step:focus-visible { outline-color: var(--accent-ink); }
.gj-step .num { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .06em; color: var(--ink-4); padding-top: 8px; font-variant-numeric: tabular-nums; transition: color .3s; }
.gj-step .num::before { content: "0"; }
.gj-step.is-active .num { color: var(--accent-ink); }
.gj-step h3 { font-size: 28px; color: var(--ink); letter-spacing: -0.025em; }
@media (min-width: 1280px) { .gj-step h3 { font-size: 32px; } }
.gj-step p { margin-top: 10px; color: var(--ink-3); font-size: var(--fs-m); max-width: 46ch; line-height: 1.5; }
.gj-step .plan-line { margin-top: 12px; font-size: var(--fs-s); color: var(--ink-4); display: inline-flex; gap: 7px; align-items: flex-start; line-height: 1.4; }
.gj-step .plan-line svg { width: 14px; height: 14px; color: var(--accent); flex: none; margin-top: 3px; }
.gj-ctas { margin-top: 28px; }
@media (max-width: 539px) { .gj-ctas { flex-direction: column; } .gj-ctas > .btn { flex: none; width: 100%; } }
.gj-caption { margin-top: 20px; font-size: var(--fs-xs); color: var(--ink-4); }
.gj-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-2); display: none; }
@media (min-width: 900px) { .gj-steps { position: relative; padding-left: 28px; } .gj-progress { display: block; } .gj-progress i { position: absolute; left: 0; top: 0; width: 2px; margin-left: -.5px; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .3s var(--ease); } }
.works-with { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: var(--fs-s); color: var(--ink-3); }
.works-with b { color: var(--ink); font-weight: 600; }
.works-with span { display: inline-flex; align-items: center; gap: 6px; }
.works-with svg { width: 13px; height: 13px; color: var(--accent); }
.gj .btn-on-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.gj .btn-on-dark:hover { background: #26282f; border-color: #26282f; }
.gj .btn-outline-light { background: #fff; color: var(--ink); border-color: var(--line-2); }
.gj .btn-outline-light:hover { border-color: var(--ink); }

/* ======================================================================
   03 YOUR OWN WEBSITE
   ====================================================================== */
.direct-wrap { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .direct-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--col-gap) * 2); } }
@media (min-width: 1280px) { .direct-wrap { column-gap: calc(var(--col-gap) * 3); } }
.site-frame { position: relative; }
.saving-card { position: absolute; right: -8px; bottom: -24px; width: 240px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-l); padding: 14px 16px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
@media (min-width: 1280px) { .saving-card { right: -24px; bottom: -32px; width: 290px; font-size: 13.5px; } }
@media (max-width: 600px) { .saving-card { position: static; width: auto; margin-top: 12px; box-shadow: none; } .site .nav-bar span:not(.bk) { display: none; } }
.saving-card .k { color: var(--ink-3); font-weight: 500; }
.saving-card .row { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.saving-card .row span:last-child { white-space: nowrap; }
.saving-card .row.total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); font-weight: 600; color: var(--ink); }
.saving-card .row.total span:last-child { color: var(--ok-ink); }
.saving-card .note { margin-top: 6px; font-size: 11px; color: var(--ink-3); }
.band-warm .btn-secondary, .band-blue .btn-secondary { background: #fff; }

/* ======================================================================
   04 RUNNING THE PLACE — tabs over a words + drawing split
   ====================================================================== */
.run-panel { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .run-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--col-gap) * 2); } }
@media (min-width: 1280px) { .run-panel { column-gap: calc(var(--col-gap) * 3); } }
.run-copy { display: grid; gap: 14px; justify-items: start; align-content: center; }
.run-copy .plan { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--radius-s); border: 1px solid var(--line-2); color: var(--ink-3); background: #fff; }
.run-copy h3 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.025em; }
.run-copy p { color: var(--ink-3); font-size: var(--fs-l); line-height: 1.5; max-width: 46ch; }
.run-copy .text-link { margin-top: 6px; }
.run-visual { background: var(--band-blue); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 28px; display: grid; place-items: center; min-height: 300px; }
@media (min-width: 900px) { .run-visual { padding: 44px; min-height: 380px; } }
@media (min-width: 1280px) { .run-visual { padding: 56px; min-height: 440px; } }
.run-visual .ui { width: 100%; max-width: 560px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 14px; font-size: 12.5px; box-shadow: var(--shadow-l); }
@media (min-width: 900px) { .run-visual .ui { zoom: 1.25; max-width: 460px; } }
@media (min-width: 1280px) { .run-visual .ui { zoom: 1.4; } }
@media (min-width: 1500px) { .run-visual .ui { zoom: 1.55; } }

/* ======================================================================
   05 WHO IT'S FOR — wide photo grid; a swipeable row on phones
   ====================================================================== */
.who { display: grid; gap: 14px; }
@media (max-width: 599px) {
  .who { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 2px; scroll-padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .who::-webkit-scrollbar { display: none; }
  .who > .who-card { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (min-width: 600px) { .who { grid-template-columns: repeat(2, 1fr); } .who > .who-card:nth-child(odd):last-child { grid-column: span 2; } }
@media (min-width: 900px) {
  .who { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .who > .who-card:nth-child(odd):last-child { grid-column: auto; }
  /* 7 cards fill 3 rows of 3: the first and the last card are wide */
  .who:has(> :nth-child(7):last-child) > :first-child, .who:has(> :nth-child(7):last-child) > :last-child { grid-column: span 2; }
  .who > :nth-child(4):last-child { grid-column: span 3; }
}
@media (min-width: 1280px) {
  .who { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  /* 7 cards fill 2 rows of 4: the first card is wide, the rest single */
  .who:has(> :nth-child(7):last-child) > :last-child { grid-column: auto; }
  .who > :nth-child(5):last-child { grid-column: span 2; }
}
.who-card.has-photo { min-height: 320px; }
@media (min-width: 1280px) { .who-card.has-photo { min-height: 360px; } }

/* ======================================================================
   06 ROOMKEYPIN STORY — the dark band, video beside the real numbers
   ====================================================================== */
.proof { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .proof { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: calc(var(--col-gap) * 2); } }
@media (min-width: 1280px) { .proof { column-gap: calc(var(--col-gap) * 3); } }
.proof .video-frame { aspect-ratio: 16 / 10; }
.proof-copy h2 { font-size: var(--fs-h2-s); text-wrap: balance; color: #fff; }
.proof-copy .eyebrow + h2 { margin-top: 20px; }
.proof-copy > p { margin-top: 18px; font-size: var(--fs-l); color: var(--on-dark-2); line-height: 1.5; }
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin-top: 32px; border-top: 1px solid var(--on-dark-line); }
.numbers div { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--on-dark-line); }
.numbers div + div { border-left: 1px solid var(--on-dark-line); padding-left: 24px; }
.numbers b { display: block; font-family: var(--font-display); font-size: clamp(44px, 4.4vw, 72px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.numbers span { font-size: var(--fs-s); color: var(--on-dark-2); display: block; margin-top: 12px; line-height: 1.4; }
.disclosure { margin-top: 18px; font-size: var(--fs-xs); color: var(--on-dark-3); }
@media (max-width: 599px) { .numbers { grid-template-columns: 1fr 1fr; } .numbers div { padding: 16px 12px 16px 0; } .numbers div + div { padding-left: 12px; } .numbers b { font-size: clamp(34px, 10vw, 44px); } .numbers span { margin-top: 8px; font-size: 12.5px; } }
@media (max-width: 359px) { .numbers { grid-template-columns: 1fr; } .numbers div + div { border-left: 0; padding-left: 0; } }

/* ======================================================================
   07 HOW TO START — three wide columns with hairlines
   ====================================================================== */
.start-steps { display: grid; gap: 0; counter-reset: s; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .start-steps { grid-template-columns: repeat(3, 1fr); border-top: 0; } }
.start-step { position: relative; padding: 24px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .start-step { padding: 32px 32px 32px 0; border-bottom: 0; border-top: 1px solid var(--line); } .start-step + .start-step { padding-left: 32px; border-left: 1px solid var(--line); } }
.start-step .n { display: block; font-family: var(--font-display); font-size: 52px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); margin-bottom: 24px; font-variant-numeric: tabular-nums; }
.start-step .n::before { content: "0"; color: var(--line-2); }
.start-step h3 { font-size: 24px; letter-spacing: -0.02em; }
@media (min-width: 1280px) { .start-step h3 { font-size: 26px; } }
.start-step p { margin-top: 10px; color: var(--ink-3); font-size: var(--fs-m); line-height: 1.5; }


/* ---- phone-width adjustments ----------------------------------------- */
@media (max-width: 899px) {
  /* phone mock no wider than ~60% of the screen; the door clip (shown at
     step 3) no taller than ~65% of the screen */
  .gj-stage { grid-template-columns: minmax(0, min(60vw, 260px)); justify-content: center; }
  .gj-door { display: none; width: auto; height: min(65vh, 440px); max-width: min(60vw, 260px); margin: 0 auto; }
  .gj-door.is-on, html.reduced .gj-door, html:not(.js) .gj-door { display: block; }
  .gj-step .num { color: var(--ink-3); }
  .gj-step.is-active .num { color: var(--accent-ink); }
}

/* ======================================================================
   HERO — two views (Calendar / Reservations)
   ====================================================================== */
/* the frame is as tall as the calendar; the reservations view sits on top
   of it (clipped to the same height) so the hidden view never adds a blank
   strip and the switch doesn't change the frame's height */
.hero-views { position: relative; }
.hero-view { min-width: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.hero-view--rsv { position: absolute; inset: 0; overflow: hidden; }
.hero-view--rsv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; }
.hero-view:not(.is-active) { opacity: 0; transform: translateX(20px); pointer-events: none; visibility: hidden; }
.hero-view.is-leaving { transform: translateX(-20px); }
html.reduced .hero-view { transition: none; transform: none; }
.hero-view[hidden] { display: block; }



/* ======================================================================
   SWIPE ROWS (phones) — Who it's for (every phone) and pricing (under
   640px): cards ~80% wide with the next one peeking, snapping to the
   gutter, the row bleeding to the screen edge. The hint under the row
   shows an arrow + "Swipe" + a "1 / 7" counter that home.js keeps in step.
   ====================================================================== */
.swipe-hint { display: none; }
@media (max-width: 599px) {
  .who[data-swipe] > .who-card { flex: 0 0 80%; max-width: 320px; scroll-snap-align: start; scroll-snap-stop: always; min-height: 240px; padding: 16px; }
  .who[data-swipe] > .who-card.has-photo { min-height: 256px; }
  .who[data-swipe] > .who-card h3 { font-size: 20px; }
  .who[data-swipe] > .who-card p { font-size: 13.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .who[data-swipe] > .who-card.reveal { transition-delay: 0s; }
  .who[data-swipe] > :last-child { margin-right: var(--gutter); }
  .swipe-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
  .swipe-hint svg { width: 14px; height: 14px; }
  .swipe-hint .swipe-count:not(:empty)::before { content: "·"; margin: 0 4px 0 2px; }
  .swipe-hint .swipe-count:empty { display: none; }
}
@media (max-width: 639px) {
  .price-grid[data-swipe] {
    display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; border: 0; border-radius: 0; background: transparent;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-padding: 0 var(--gutter); scrollbar-width: none;
  }
  .price-grid[data-swipe]::-webkit-scrollbar { display: none; }
  .price-grid[data-swipe] > .price { flex: 0 0 82%; max-width: 320px; scroll-snap-align: start; scroll-snap-stop: always; border: 1px solid var(--line) !important; border-radius: var(--radius-l); padding: 22px 18px 18px; gap: 10px; }
  .price-grid[data-swipe] > .price.hi { border-color: var(--ink) !important; }
  .price-grid[data-swipe] > .price.reveal { transition-delay: 0s; }
  .price-grid[data-swipe] > :last-child { margin-right: var(--gutter); }
  .price .amt { font-size: 38px; }
  .price .desc { min-height: 0; font-size: 14px; }
  .price li { padding: 8px 0; font-size: 13.5px; }
  .price .tagp { top: 20px; right: 18px; }
  .price-note { margin-top: 14px; font-size: 13.5px; }
  #pricing .swipe-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
  #pricing .swipe-hint svg { width: 14px; height: 14px; }
  #pricing .swipe-hint .swipe-count:not(:empty)::before { content: "·"; margin: 0 4px 0 2px; }
  #pricing .swipe-hint .swipe-count:empty { display: none; }
}

/* ======================================================================
   STICKY CALL TO ACTION (phones): a slim bar at the bottom once the hero
   has scrolled away; gone again near the final call to action and the
   footer (home.js adds is-on and body.has-sticky-cta). Safe-area aware;
   no slide under reduced motion.
   ====================================================================== */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
    display: flex; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--line);
    transform: translateY(100%); transition: transform .3s var(--ease);
  }
  .sticky-cta[hidden] { display: flex; }
  .sticky-cta.is-on { transform: none; }
  .sticky-cta .btn { --h: 44px; flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 15px; }
  html.reduced .sticky-cta { transition: none; }
  body.has-sticky-cta { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  body.has-sticky-cta .mkt-cookie { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.menu-open .sticky-cta { display: none; }
}

/* "Your own web address" label pinned to the drawn website's address bar */
.domain-tag { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 999px; background: var(--accent, #2b5cff); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-m, 0 4px 12px rgba(0,0,0,.12)); z-index: 2; }
.domain-tag svg { width: 14px; height: 14px; }

/* ── 10 Security (2026-10-13) ─────────────────────────────────────── */
.sec-wrap { display: grid; gap: 32px; }
@media (min-width: 1000px) { .sec-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(var(--col-gap) * 2); align-items: start; } }
.sec-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 32px; }
@media (min-width: 600px) { .sec-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sec-point { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; align-content: start; }
.sec-point h3 { grid-column: 2; font-size: var(--fs-l, 18px); color: var(--ink); letter-spacing: -0.015em; line-height: 1.3; }
.sec-point p { grid-column: 2; margin-top: 6px; color: var(--ink-3); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.sec-ic { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
.sec-ic svg { width: 20px; height: 20px; }
.sec-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-l); padding: 20px; box-shadow: var(--shadow-l); display: grid; gap: 14px; max-width: 420px; width: 100%; justify-self: center; }
@media (min-width: 1000px) { .sec-card { position: sticky; top: calc(var(--header-h, 64px) + 24px); justify-self: end; } }
.sec-card__head { display: flex; align-items: center; gap: 12px; }
.sec-card__head b { display: block; color: var(--ink); font-size: 15px; }
.sec-card__head small { color: var(--ink-4); font-size: 12px; }
.sec-card__dot { width: 34px; height: 34px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-ink); display: grid; place-items: center; flex: none; }
.sec-card__dot svg { width: 18px; height: 18px; }
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.sec-sw { width: 36px; height: 20px; border-radius: 999px; background: var(--bg-3); position: relative; flex: none; }
.sec-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sec-sw.is-on { background: var(--ok); }
.sec-sw.is-on::after { left: 18px; }
.sec-code, .sec-log { border-top: 1px solid var(--line); padding-top: 12px; }
.sec-code small, .sec-log small { display: block; font-size: 12px; color: var(--ink-4); margin-bottom: 8px; }
.sec-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sec-boxes b { height: 40px; border: 1px solid var(--line-2); border-radius: 8px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 17px; color: var(--ink); }
.sec-boxes b.is-cur { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sec-log p { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 0 0 6px; min-width: 0; }
.sec-log em { margin-left: auto; font-style: normal; color: var(--ink-4); white-space: nowrap; padding-left: 8px; }
.sec-log__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.sec-log__dot.ok { background: var(--ok); }
.sec-foot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-2); display: grid; gap: 16px; }
@media (min-width: 900px) { .sec-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.sec-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sec-badges li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); font-size: var(--fs-s); color: var(--ink-2); font-weight: 500; }
.sec-badges svg { width: 15px; height: 15px; color: var(--ok); flex: none; }
.sec-links { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: var(--fs-s); }
.sec-links a { color: var(--accent-ink); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.sec-links a:hover { text-decoration: underline; }
@media (max-width: 599px) {
  .sec-point { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; }
  .sec-ic { width: 36px; height: 36px; border-radius: 10px; }
  .sec-card { padding: 16px; }
  .sec-boxes b { height: 36px; font-size: 15px; }
  .sec-badges li { font-size: 13px; padding: 6px 10px; }
}