/* Homepage sections carried over from the original landing page: the
   early-access form, the partner logo strip, the trip-plan pricing and the
   reviews wall. Styles are the originals, de-indented from index.html, with
   three renames where they collided with store.css (.badge -> .launch-badge,
   and h1/.sub/form scoped to .signup). */
:root { --border: rgba(255,255,255,.10); --radius: 18px; --maxw: 460px; }
.launch-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent);
  background: rgba(53,228,163,.10);
  border: 1px solid rgba(53,228,163,.28);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 20px;
}
.launch-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
              box-shadow: 0 0 0 0 rgba(53,228,163,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(53,228,163,.55);} 70%{box-shadow:0 0 0 8px rgba(53,228,163,0);} 100%{box-shadow:0 0 0 0 rgba(53,228,163,0);} }

.signup h1 {
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: clamp(28px, 8.5vw, 40px);
  line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px;
}
.signup h1 .grad {
  background: linear-gradient(100deg, var(--accent) 10%, #7ef0c6 50%, #5cc8ff 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.signup .sub { color: var(--muted); font-size: clamp(15px, 4.1vw, 17px);
       max-width: 34ch; margin: 0 auto 30px; }

/* ---------- Form ---------- */
.signup form { width: 100%; }
.field { text-align: left; margin-bottom: 12px; }
.field label { display: block; font-size: 13px; font-weight: 500;
               color: var(--muted); margin: 0 0 6px 3px; }
.field label .opt { color: rgba(154,166,178,.6); font-weight: 400; }

.control, .submit {
  width: 100%; height: 54px; border-radius: 14px;
  font-size: 16px; font-family: inherit;
}
.control {
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  appearance: none; -webkit-appearance: none;
}
.control::placeholder { color: rgba(154,166,178,.7); }
.control:focus {
  outline: none; border-color: var(--accent);
  background: rgba(53,228,163,.05);
  box-shadow: 0 0 0 3px rgba(53,228,163,.18);
}
select.control { color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa6b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
select.control:invalid { color: rgba(154,166,178,.7); }
option { background: #11151c; color: var(--text); }

/* phone: country-code + number */
.phone-row { display: flex; gap: 8px; }
.phone-number { flex: 1; min-width: 0; }

/* country-code field - typeable, with a list that filters as you type so any
   country is reachable, not just the ones we happened to list */
.phone-code-dd { position: relative; flex: 0 0 104px; }
.phone-code-input { width: 100%; padding: 0 28px 0 14px; }
.phone-code-dd .chev {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; opacity: .7; color: var(--muted); pointer-events: none;
}
.phone-code-empty { padding: 9px 11px; font-size: 13px; color: var(--muted); }
.phone-code-item.hide, .phone-code-empty.hide { display: none; }
.phone-code-list {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: 280px; max-width: 80vw; max-height: 264px; overflow-y: auto;
  background: #11151c; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6); padding: 5px; display: none;
}
.phone-code-list.open { display: block; }
.phone-code-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px;
  font-size: 14px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.phone-code-item:hover, .phone-code-item.active { background: rgba(53,228,163,.12); }
.phone-code-item .dc { color: var(--accent); font-weight: 600; min-width: 48px; }
.phone-code-item .cn { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

/* delivery preference segmented control */
.pref-toggle { display: flex; gap: 10px; }
.pref-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pref-toggle .pref-pill {
  flex: 1; height: 52px; margin: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pref-toggle .pref-pill svg { width: 18px; height: 18px; flex: none; }
.pref-toggle .pref-radio:checked + .pref-pill {
  border-color: var(--accent); color: var(--accent);
  background: rgba(53,228,163,.10); box-shadow: 0 0 0 3px rgba(53,228,163,.15);
}
.pref-toggle .pref-radio:focus-visible + .pref-pill { outline: 2px solid var(--accent); outline-offset: 2px; }
.pref-hint { display: none; color: var(--muted); font-size: 13px;
             text-align: center; margin: 14px 3px 0; }
.pref-hint.show { display: block; }

.submit {
  margin-top: 6px; border: none; cursor: pointer;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px;
  color: #04130d;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 28px -8px rgba(53,228,163,.55);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.submit:hover { box-shadow: 0 14px 34px -8px rgba(53,228,163,.7); }
.submit:active { transform: scale(.985); }
.submit:disabled { opacity: .6; cursor: progress; }
.submit svg { width: 18px; height: 18px; }

.error { display: none; color: var(--danger); font-size: 13.5px;
         margin: 8px 3px 0; text-align: left; }
.error.show { display: block; }

/* step 2 reveal */
#step2 { max-height: 0; overflow: hidden; opacity: 0;
         transition: max-height .5s ease, opacity .4s ease, margin .4s ease; }
#step2.open { max-height: 860px; opacity: 1; margin-top: 4px; }
.step2-head { text-align: left; margin: 6px 3px 14px;
              display: flex; align-items: center; gap: 9px; }
.step2-head .ic { color: var(--accent); flex: none; }
.step2-head b { font-family:'Sora',sans-serif; font-weight:700; font-size:15px; display:block; }
.step2-head span { color: var(--muted); font-size: 13px; }

/* success */
#success { display: none; flex-direction: column; align-items: center;
           text-align: center; animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
#success.show { display: flex; }
.check { width: 64px; height: 64px; border-radius: 50%;
         background: rgba(53,228,163,.12); border: 1px solid rgba(53,228,163,.35);
         display: grid; place-items: center; margin-bottom: 18px; color: var(--accent); }
.check svg { width: 30px; height: 30px; animation: pop .5s .15s both; }
@keyframes pop { from{transform:scale(.4);opacity:0;} to{transform:scale(1);opacity:1;} }
#success h2 { font-family:'Sora',sans-serif; font-weight:800; font-size:24px; margin:0 0 10px; }
#success p { color: var(--muted); font-size: 15px; max-width: 32ch; margin: 0 0 6px; }

.trust { display: flex; align-items: center; gap: 6px; justify-content: center;
         color: var(--muted); font-size: clamp(11.2px, 8px + 1.2vw, 12.5px);
         margin-top: 18px; white-space: nowrap; max-width: 100%; }
.trust svg { width: 13px; height: 13px; color: var(--accent); flex: none; }
.trust span { overflow: hidden; text-overflow: ellipsis; }

/* brands / collabs */
.collab { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border);
          width: 100%; text-align: center; }
.collab p { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.collab a { display: inline-flex; align-items: center; gap: 7px;
            color: var(--text); font-weight: 600; font-size: 13.5px;
            text-decoration: none; padding: 10px 18px; border-radius: 999px;
            border: 1px solid var(--border); background: var(--surface);
            transition: border-color .18s ease, color .18s ease, background .18s ease; }
.collab a:hover { border-color: var(--accent); color: var(--accent); background: rgba(53,228,163,.06); }
.collab a svg { width: 15px; height: 15px; flex: none; }



/* ---------- pricing ----------
   Value-stacked tiers. The struck-through total is the whole point: it
   prices the work against the effort it saves, not against a competitor,
   which is the only comparison that makes a EUR119 plan feel cheap.
   No billing toggle - these are one-off purchases, not a subscription. */
.pr { position: relative; z-index: 1; width: 100%; padding: 54px 22px 64px; }
.pr-head { text-align: center; max-width: 46ch; margin: 0 auto 34px; }
.pr-head h2 { font-family: 'Sora', sans-serif; font-weight: 800;
              font-size: clamp(21px, 5.6vw, 30px); letter-spacing: -.01em;
              color: var(--text); margin: 0 0 9px; text-wrap: balance; }
/* Wider than the heading so the sentence lands on two lines rather than
   three. Overflows .pr-head deliberately - the negative margins keep it
   centred without loosening the heading's own measure. */
.pr-head p { color: var(--muted); font-size: clamp(13px, 3.6vw, 14.5px);
             line-height: 1.55; margin: 0 -8ch; text-wrap: balance; }
@media (max-width: 700px) { .pr-head p { margin: 0; } }

/* Social proof sits above the prices, not below them: it is the reason to
   keep reading, and it is worthless once someone has already decided.
   Quiet by design - a figure stated plainly is more believable than the
   same figure in a badge. */
.pr-stats { display: flex; flex-wrap: wrap; justify-content: center;
            align-items: center; gap: 8px 18px; margin: 20px -8ch 0;
            font-size: 13px; color: var(--muted); }
.pr-stats b { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 15px;
              color: var(--text); font-variant-numeric: tabular-nums; }
.pr-sep { width: 4px; height: 4px; border-radius: 50%;
          background: var(--accent); opacity: .5; }
@media (max-width: 700px) { .pr-stats { margin: 20px 0 0; } }
.pr-cur { font-size: 11.8px; color: var(--muted); opacity: .8; margin: 10px 0 0; }

/* The reason the prices are struck through. Deliberately not a box: a
   bordered panel between the heading and the cards reads as a separate
   component and competes with the tiers it is meant to explain. As a line
   of type it can sit in the header instead. It leads the header rather than
   trailing it: below the heading it was a fourth centred line in a stack of
   same-sized text, which is what read as cramped. As a kicker above the
   heading it has its own line, its own size and its own colour, so nothing
   else is competing with it. */
.pr-head p.pr-kick { display: block; margin: 0 0 12px;
           font-family: 'Sora', sans-serif; font-size: 11.5px; font-weight: 700;
           letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.pr-head p.pr-kick span { font-weight: 600; color: var(--muted); letter-spacing: .08em; }
/* Separator in CSS, not in the markup, so the two halves can stack on a
   narrow screen without a dot orphaned at the start of the second line. */
.pr-head p.pr-kick span::before { content: "\00b7\00a0"; }
/* Balanced rather than allowed to run edge-to-edge: at 360px the line only
   just fits, and a one-word orphan on the second line looks worse than an
   even two-line break. */
@media (max-width: 700px) {
  .pr-head p.pr-kick { font-size: 10.5px; letter-spacing: .08em; line-height: 1.55; }
  .pr-head p.pr-kick span { display: block; }
  .pr-head p.pr-kick span::before { content: none; }
}

.pr-grid { display: grid; gap: 16px; max-width: 1100px; margin: 0 auto;
           grid-template-columns: 1fr; align-items: start; }
/* Three explicit rows so the two outer cards can share one auto row: that row
   sizes to the taller of the pair and both stretch into it, which is what
   makes them identical in height without hard-coding one. The popular card
   spans all three rows, so the 1fr spacers above and below split whatever
   height is left over equally - the outer pair ends up centred against it.
   This replaces the old translateY lift; the middle card is now taller than
   its neighbours on both edges, which reads as the lift on its own. */
@media (min-width: 900px) {
  .pr-grid { grid-template-columns: repeat(3, 1fr);
             grid-template-rows: 1fr auto 1fr;
             gap: 0 18px; align-items: stretch; }
  .pr-card.budget { grid-column: 1; grid-row: 2; }
  .pr-card.pop    { grid-column: 2; grid-row: 1 / -1; padding: 44px 26px 38px; }
  .pr-card.soon   { grid-column: 3; grid-row: 2; }
}

.pr-card { position: relative; display: flex; flex-direction: column;
           border: 1px solid var(--border); background: var(--surface);
           border-radius: var(--radius); padding: 26px 22px 22px; }
.pr-card.pop { border-color: rgba(53,228,163,.42);
               background: linear-gradient(180deg, rgba(53,228,163,.07), rgba(255,255,255,.03));
               box-shadow: 0 18px 46px rgba(0,0,0,.45); }
.pr-card.soon { opacity: .82; }

/* Centred on the card's top border line, not hung below it: top:0 plus a
   -50% translate puts the chip's midline exactly on the border whatever the
   text does, and because the chip's padding is symmetrical the text centres
   on that line too.
   Every variant is fully opaque. A translucent chip lets the card's own
   1px border run visibly straight through the tag, which is the one detail
   that makes the whole thing look unfinished - hence the flat colour laid
   over var(--bg) rather than a tint over the card surface. */
.pr-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
          font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
          text-transform: uppercase; white-space: nowrap;
          padding: 5px 13px; border-radius: 999px;
          background: var(--accent); color: #06281c; }
.pr-card.budget .pr-tag { background: linear-gradient(rgba(53,228,163,.13), rgba(53,228,163,.13)), var(--bg);
                          color: var(--accent); border: 1px solid rgba(53,228,163,.34); }
.pr-card.soon .pr-tag { background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)), var(--bg);
                        color: var(--muted); border: 1px solid var(--border); }

.pr-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px;
           color: var(--text); margin: 4px 0 4px; }
.pr-sub { color: var(--muted); font-size: 12.8px; line-height: 1.5; margin: 0 0 18px; }

.pr-price { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.pr-price b { font-family: 'Sora', sans-serif; font-weight: 800;
              font-size: 38px; line-height: 1; color: var(--text); }
.pr-price s { color: var(--muted); font-size: 15px; text-decoration-thickness: 1.5px; }
/* The local-currency approximation. Subordinate to the euro figure on
   purpose - euros are what the card is actually charged in. */
.pr-approx { color: var(--muted); font-size: 12.5px; margin: 5px 0 0;
             font-variant-numeric: tabular-nums; }
.pr-once { color: var(--muted); font-size: 12px; margin: 6px 0 18px; }

/* The value stack. Deliberately quiet type - it is arithmetic the reader
   checks, not a claim shouted at them. */
.pr-stack { border: 1px dashed var(--border); border-radius: 12px;
            padding: 13px 14px; margin-bottom: 18px; background: rgba(0,0,0,.18); }
.pr-stack li { display: flex; justify-content: space-between; gap: 12px;
               font-size: 12.4px; color: var(--muted); padding: 5px 0; }
/* Direct-child selectors throughout: a line item now nests spans for its
   label and description, and a bare span:last-child would grab the
   description instead of the price. */
.pr-stack li > span:last-child { color: #c4cdd6; font-variant-numeric: tabular-nums; flex: none; }
/* Label over description. The label is what makes the tiers comparable - 
   the same three anchors appear in both cards, so the only thing that
   changes down the column is how much of each you get. */
.pr-it { display: flex; flex-direction: column; gap: 2px; }
.pr-it b { font-weight: 600; font-size: 12.4px; color: #dbe3ea; }
.pr-it span { font-size: 11.4px; line-height: 1.42; color: var(--muted); }
.pr-stack .tot { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 9px;
                 font-weight: 700; color: var(--text); }
.pr-stack .tot > span:last-child { color: var(--text); }
.pr-stack .pay { color: var(--accent); font-weight: 700; }
.pr-stack .pay > span:last-child { color: var(--accent); }

.pr-feat { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.pr-feat li { display: flex; gap: 9px; align-items: flex-start;
              font-size: 13.2px; line-height: 1.5; color: #d7dee5; }
.pr-feat svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent); }

.pr-cta { margin-top: auto; display: block; text-align: center; text-decoration: none;
          font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px;
          padding: 13px 18px; border-radius: 12px;
          border: 1px solid var(--border); background: var(--surface); color: var(--text);
          transition: background .18s ease, border-color .18s ease, transform .12s ease; }
.pr-cta:hover { border-color: var(--accent); color: var(--accent);
                background: rgba(53,228,163,.07); }
.pr-cta:active { transform: translateY(1px); }
.pr-cta.solid { background: var(--accent); border-color: var(--accent); color: #06281c; }
.pr-cta.solid:hover { background: var(--accent-2); border-color: var(--accent-2); color: #06281c; }
.pr-cta[aria-disabled="true"] { pointer-events: none; opacity: .55; }

/* Guarantee + free-guide anchor. Both sit under the grid rather than inside
   a card because they apply to every tier - and both are reasons to buy, not
   footnotes, so they carry the accent tint and a filled icon rather than the
   quiet grey they started with. */
.pr-under { max-width: 1100px; margin: 30px auto 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .pr-under { grid-template-columns: 1fr 1fr; } }
.pr-note { display: flex; gap: 14px; align-items: center;
           border: 1px solid rgba(53,228,163,.30);
           background: linear-gradient(180deg, rgba(53,228,163,.075), rgba(255,255,255,.03));
           border-radius: 16px; padding: 19px 20px; }
.pr-note-ic { flex: none; display: grid; place-items: center;
              width: 40px; height: 40px; border-radius: 12px;
              background: rgba(53,228,163,.14);
              border: 1px solid rgba(53,228,163,.26); }
.pr-note svg { width: 19px; height: 19px; color: var(--accent); }
.pr-note b { display: block; font-family: 'Sora', sans-serif; font-weight: 700;
             font-size: 15px; line-height: 1.35; color: var(--text); margin-bottom: 5px; }
.pr-note b s { color: var(--muted); font-weight: 600;
               text-decoration-thickness: 1.5px; margin-left: 2px; }
.pr-note p { margin: 0; font-size: 13.4px; line-height: 1.55; color: #c3ccd4; }
/* The guides note is an <a>. Only the border and the arrow move on hover - 
   the card already carries an accent tint, so lifting the whole thing would
   make it compete with the Bespoke card two rows up. */
.pr-note-link { color: inherit; text-decoration: none;
                transition: border-color .18s ease, background-color .18s ease; }
.pr-note-link:hover, .pr-note-link:focus-visible { border-color: rgba(53,228,163,.62); }
.pr-note-go { color: var(--accent); font-weight: 600; white-space: nowrap; }
.pr-note-link:hover .pr-note-go { text-decoration: underline; }

.tm-screen { position: relative; z-index: 1; height: min(100dvh, 880px);
             display: flex; flex-direction: column; align-items: center;
             padding: clamp(28px, 4.5vh, 64px) 22px
                      max(clamp(28px, 4.5vh, 64px), env(safe-area-inset-bottom)); }
.tm { width: 100%; flex: 1 1 auto; min-height: 0;
      display: flex; flex-direction: column; align-items: center; }
.tm-head { text-align: center; max-width: 40ch; flex: none;
           margin-bottom: clamp(18px, 3vh, 36px); }
.tm-head h2 { font-family: 'Sora', sans-serif; font-weight: 800;
              font-size: clamp(24px, 6.6vw, 34px); line-height: 1.14;
              letter-spacing: -.02em; margin: 0 0 12px; }
.tm-head p { color: var(--muted); font-size: clamp(14px, 3.8vw, 15.5px); margin: 0; }

.tm-cols {
  display: flex; gap: 18px; justify-content: center;
  width: 100%; max-width: 1200px; flex: 1 1 auto; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
}
.tm-col { flex: 1 1 0; min-width: 0; max-width: 360px; }
.tm-col.md, .tm-col.lg { display: none; }
/* Same rAF treatment as the logo strip - see the note above. The track holds
   TM_REPEATS copies and is shifted by exactly one of them, so the loop is
   seamless as long as the visible column is under (TM_REPEATS - 1) sets. */
.tm-track { display: flex; flex-direction: column; gap: 18px; padding-bottom: 18px;
            will-change: transform; }

.tm-card { background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--radius); padding: 22px 20px; text-align: left; }
.tm-stars { display: flex; gap: 3px; margin-bottom: 11px; }
.tm-stars svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.tm-stars svg.off { color: rgba(255,255,255,.16); }
.tm-card p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.55; }
.tm-who { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.tm-av { width: 38px; height: 38px; border-radius: 50%; flex: none;
         background: #151b24; border: 1px solid rgba(255,255,255,.09);
         display: grid; place-items: center; font-family: 'Sora', sans-serif;
         font-weight: 700; font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.tm-nm { font-weight: 600; font-size: 14px; line-height: 1.32; }
.tm-ct { color: var(--muted); font-size: 13px; line-height: 1.32; }

@media (min-width: 760px)  { .tm-col.md { display: block; } }
@media (min-width: 1040px) { .tm-col.lg { display: block; } }

/* End-of-page actions. The header's are quiet text links by design; here,
   after the proof, they are the point of the screen - so they take real
   button shapes. Same two destinations. */
.tm-cta { flex: none; display: flex; flex-wrap: wrap; justify-content: center;
          align-items: center; gap: 12px;
          margin: clamp(16px, 2.6vh, 28px) 0 0; }
.tm-cta a { display: inline-flex; align-items: center; justify-content: center;
            height: 48px; padding: 0 26px; border-radius: 999px;
            font-family: 'Sora', sans-serif; font-size: 14.5px; font-weight: 700;
            text-decoration: none; white-space: nowrap;
            transition: transform .18s ease, box-shadow .18s ease,
                        border-color .18s ease, color .18s ease, background .18s ease; }
.tm-cta .solid { color: #05261b; border: 1px solid transparent;
                 background: linear-gradient(180deg, var(--accent), var(--accent-2));
                 box-shadow: 0 8px 22px rgba(53,228,163,.24); }
.tm-cta .solid:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(53,228,163,.32); }
.tm-cta .ghost { color: var(--text); border: 1px solid rgba(255,255,255,.17);
                 background: rgba(255,255,255,.04); }
.tm-cta .ghost:hover { border-color: rgba(53,228,163,.5); color: var(--accent);
                       background: rgba(53,228,163,.07); }
.tm-cta a:focus-visible { outline: 2px solid rgba(53,228,163,.75); outline-offset: 3px; }
@media (max-width: 520px) {
  .tm-cta { gap: 10px; }
  .tm-cta a { height: 44px; padding: 0 18px; font-size: 13.6px; flex: 1 1 0; }
}

/* ── Trip-planning enquiry ────────────────────────────────────────────────
   Replaced the three priced tiers (still in index.html behind
   TRIP_PLANS_PUBLIC). Two columns: the argument on the left, the form on the
   right, so the reader has the reason in view while they fill it in.

   It deliberately does not look like the early-access card further down the
   page. Two near-identical centred email boxes on one page read as one form
   shown twice, and the visitor decides they have already done this. This one
   is wide, left-aligned and asks about their trip; that one stays a narrow
   centred card asking for an email. */
.tp { padding-block: clamp(56px, 8vw, 104px); }
.tp-inner { display: grid; gap: clamp(28px, 4vw, 60px); align-items: start;
            grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .tp-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 5vw, 80px); }
  /* Sticks while the form is scrolled through, so the reason to fill it in
     does not slide away halfway down the fields. */
  .tp-copy { position: sticky; top: calc(var(--header-h, 72px) + 28px); }
}

.tp-copy h2 { font-family: var(--font-display); font-size: clamp(30px, 4.6vw, 52px);
              font-weight: 500; line-height: 1.06; letter-spacing: -.015em; margin: 0; }
/* The one line of the page that is a promise rather than a description, so it
   gets the accent and nothing else on the page does at this size. */
.tp-lead { font-family: var(--font-display); font-size: clamp(17px, 2.1vw, 22px);
           font-weight: 500; color: var(--accent); margin: clamp(14px, 1.8vw, 20px) 0 0; }
.tp-sub { color: var(--muted); font-size: clamp(15px, 1.5vw, 16.5px); max-width: 44ch;
          margin: 10px 0 0; line-height: 1.6; }

.tp-points { list-style: none; margin: clamp(26px, 3.2vw, 38px) 0 0; padding: 0;
             display: grid; gap: 14px; max-width: 48ch; }
.tp-points li { display: flex; gap: 12px; align-items: flex-start;
                color: var(--soft); font-size: 14.5px; line-height: 1.55; }
.tp-points svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent); }

.tp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
           padding: clamp(20px, 3vw, 30px); }
.tp-card .field { margin-bottom: 14px; }
/* Two fields per row where the pair is genuinely one question (when + how
   many, name + email). Collapses at phone width, where side-by-side inputs
   are too narrow to read their own placeholder. */
.tp-row { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .tp-row { grid-template-columns: 1fr 1fr; } }
.tp-notes { min-height: 84px; resize: vertical; line-height: 1.55; padding-top: 12px; }
.tp-card select.control { appearance: none; cursor: pointer;
  /* Chevron drawn in the background so the control keeps the same border,
     height and focus ring as every input beside it. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397a3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 40px; }
.tp-card select.control option { background: var(--surface-2); color: var(--text); }
.tp-card .submit { margin-top: 4px; }
.tp-card .trust { margin-top: 14px; }

.tp-success { text-align: center; padding: clamp(14px, 2.4vw, 26px) 0; }
.tp-success .check { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
                     display: grid; place-items: center;
                     background: var(--accent-wash); border: 1px solid var(--accent-line); }
.tp-success .check svg { width: 26px; height: 26px; color: var(--accent); }
.tp-success h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 10px; }
.tp-success p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 auto; max-width: 42ch; }
.tp-success__ps { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--line); }

/* ── Follow band ── replaced the early-access sign-up on the home page. Two
   columns on a desktop, stacked on a phone; no new colours or radii. */
.ig-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
           gap: clamp(18px, 3vw, 40px); }
.ig-band > div { max-width: 56ch; }
.ig-band h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; margin: 10px 0 0; }
.ig-band p { color: var(--soft); margin: 14px 0 0; }
.ig-band .button { flex: none; }
@media (max-width: 720px) { .ig-band .button { width: 100%; justify-content: center; } }