@charset "UTF-8";
/* ==========================================================================
   TRAVELNEST — Visa & insurance
   Loaded after style.css and destination.css: tokens, top bar, breadcrumb,
   page hero, the "Four answers" enquiry block and the footer come from those
   two. A documents page: no photography anywhere on it by design.
   The argument is that we take no commission, which is what licenses the
   page to say a cheap policy is enough — so the fee cells carry the accent.
   --------------------------------------------------------------------------
   01. Page tokens and shared section furniture
   02. Paperwork, answered — the numbers band
   03. Find your country — the requirement table
   04. Two policies we would buy
   05. We explain it, you sign it
   06. Responsive — 1500 / 1200 / 1000 / 760 / 430
   --------------------------------------------------------------------------
   Authored in fixed pixels at any width (only the nav and footer scale).
   ========================================================================== */

/* ==========================================================================
   01. Page tokens and shared section furniture
   ========================================================================== */

.page-visa {
  /* the ink panels: the numbers band, the "yours" column, the closing strip */
  --v-panel: #17435A;
  --v-panel-ink: #FBF6EC;
  --v-panel-rgb: 251, 246, 236;
  /* the terracotta "ours" column */
  --v-ours: #C0521B;
  --v-ours-ink: #FFFFFF;
  --v-ours-rgb: 255, 255, 255;
  /* the pale strip behind "Right for you if" */
  --v-tint: rgba(23, 67, 90, 0.06);
  /* the unprotected part of a risk bar */
  --v-risk-grey: rgba(23, 67, 90, 0.28);
}

[data-theme="dark"] .page-visa {
  --v-panel: rgba(16, 16, 16, 0.72);
  --v-panel-ink: #EDE3D3;
  --v-panel-rgb: 237, 227, 211;
  --v-ours: #E2661F;
  --v-ours-ink: #1A1A1A;
  --v-ours-rgb: 26, 26, 26;
  --v-tint: rgba(237, 227, 211, 0.08);
  --v-risk-grey: rgba(237, 227, 211, 0.28);
  /* on the terracotta column every rule sits one notch softer on dark */
  --v-ours-tab-a: 0.35;
  --v-ours-dash-a: 0.4;
  --v-ours-rule-a: 0.45;
}

.page-visa { --v-panel-rule-rgb: 251, 246, 236; }

/* on dark paper the structural ink rules soften to 45% */
[data-theme="dark"] .pstrip,
[data-theme="dark"] .railnote--top { border-top-color: rgba(var(--ink-rgb), 0.45); }

[data-theme="dark"] .vcard,
[data-theme="dark"] .polcard { border-color: rgba(var(--ink-rgb), 0.45); }

[data-theme="dark"] .polcard--hot { border-color: var(--accent); }
[data-theme="dark"] .vcard--hot { border-color: var(--accent); }
[data-theme="dark"] .vregion__head { border-bottom-color: rgba(var(--ink-rgb), 0.45); }
[data-theme="dark"] .polmetrics { border-top-color: rgba(var(--ink-rgb), 0.45); }

/* the enquiry block is the Europe planner frozen at the 1920 reference */
.page-visa .planner { --u: 19.2px; }

@media (max-width: 1500px) {
  .page-visa .planner { --u: 1.28vw; }
}

/* every section opens the same way: heading pair, script, right-hand note */
.secthead {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 34px 0 24px;
}

.secthead__stack {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  min-width: 0;
}

.secthead .display--about { font-size: 92px; }

.secthead .script--about {
  font-size: 66px;
  padding-top: 0;
  padding-bottom: 18px;
}

.secthead__note {
  margin: 0 0 0 auto;
  max-width: 380px;
  padding-bottom: 10px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  opacity: 0.8;
  text-wrap: pretty;
}

/* the figures under each heading */
.pstrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 var(--gutter) 24px;
  padding: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.22);
  list-style: none;
}

.pcell2 {
  flex: 1 1 180px;
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 13px 20px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.22);
}

.pcell2:first-child { padding-left: 0; border-left: 0; }
.pcell2:last-child { padding-right: 0; }

.pcell2__value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
}

.pcell2__label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* the sentence + CTA that closes a section */
.railnote {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 26px var(--gutter) 0;
}

.railnote--solid { margin-top: 28px; }

.railnote--top {
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}

.railnote__text {
  max-width: 700px;
  font-size: 21px;
  font-weight: 500;
  opacity: 0.78;
  text-wrap: pretty;
}

.railnote__cta {
  margin-left: auto;
  border: 2px solid var(--accent);
  padding: 15px 32px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.railnote__cta:hover,
.railnote__cta:focus-visible {
  background: var(--accent);
  color: var(--cta-label);
}

.railnote__cta--solid {
  border: 0;
  background: var(--accent);
  padding: 15px 34px;
  color: var(--ab-on-accent-deep);
}

.railnote__cta--solid:hover,
.railnote__cta--solid:focus-visible {
  background: var(--ink);
  color: var(--ab-on-accent);
}

/* ==========================================================================
   02. Paperwork, answered — the numbers band
   ========================================================================== */

.vband-sec { padding: 34px var(--gutter) 46px; }

.vband {
  background: var(--v-panel);
  color: var(--v-panel-ink);
}

.vband__head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 30px;
  border-top: 4px solid var(--ab-panel-accent);
  border-bottom: 1px solid rgba(var(--v-panel-rgb), 0.25);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.vband__place {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ab-panel-accent);
}

.vband__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentcolor;
}

.vband__note { opacity: 0.6; }

.vband__tag {
  margin-left: auto;
  border: 1px solid rgba(var(--v-panel-rgb), 0.5);
  padding: 5px 13px;
  letter-spacing: 0.16em;
}

.vcells {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vcell {
  flex: 1 1 250px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 30px;
  border-left: 1px solid rgba(var(--v-panel-rgb), 0.3);
}

.vcell:first-child { border-left: 0; }

/* the fee cell is the answer the page exists to give */
.vcell--hot {
  flex: 1 1 300px;
  background: var(--accent);
  border-left: 0;
  color: var(--ab-on-accent-deep);
}

/* the question sits above the figure, so the number reads as an answer */
.vcell__q {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

.vcell--hot .vcell__q { opacity: 0.85; }

.vcell__figure {
  margin: 0;
  color: var(--ab-panel-accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 62px;
  font-weight: 600;
  line-height: 0.9;
}

.vcell--hot .vcell__figure { color: inherit; }

.vcell__label {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vcell__sub {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.7;
  text-wrap: pretty;
}

.vcell--hot .vcell__sub { opacity: 0.92; }

.vband__foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0;
  padding: 16px 30px;
  border-top: 1px solid rgba(var(--v-panel-rgb), 0.3);
}

.vband__text {
  max-width: 820px;
  font-size: 20px;
  font-weight: 500;
  opacity: 0.85;
  text-wrap: pretty;
}

.vband__cta {
  margin-left: auto;
  border: 2px solid var(--ab-panel-cta);
  padding: 13px 28px;
  color: var(--ab-panel-cta);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.vband__cta:hover,
.vband__cta:focus-visible {
  background: var(--ab-panel-cta);
  color: var(--ab-panel-cta-ink);
}

/* ==========================================================================
   03. Find your country — the requirement table
   ========================================================================== */

.table-sec { padding: 0 0 60px; }

.vregions {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0 var(--gutter);
}

.vregion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vregion__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  font-weight: 400;
}

.vregion__tag {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
}

.vregion__name {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 26px;
  font-weight: 600;
}

.vregion__line {
  font-size: 16px;
  font-weight: 600;
  opacity: 0.5;
}

.vregion__count {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
}

.vgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vcard {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
}

/* terracotta means start the application the week you book */
.vcard--hot {
  border: 3px solid var(--accent);
  background: rgba(192, 82, 27, 0.05);
}

/* every card opens with a status tab: type left, timing right */
.vcard__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  background: var(--ink);
  padding: 9px 16px;
  color: var(--ab-panel-ink);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.vcard--hot .vcard__tab {
  background: var(--accent);
  color: var(--ab-on-accent-deep);
}

.vcard__when { margin-left: auto; }

.vcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px 16px;
}

.vcard__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.vcard__name {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}

.vcard__fee {
  margin-left: auto;
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 500;
}

.vcard__rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.3);
}

.vcard__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.vcard__key {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

.vcard__val {
  margin-left: auto;
  font-size: 18px;
  font-weight: 600;
}

/* on the start-early card the processing time is the whole point */
.vcard--hot .vcard__val {
  color: var(--accent);
  font-weight: 700;
}

.vcard__val--soft { opacity: 0.75; }

.vcard--hot .vcard__val--soft {
  color: inherit;
  font-weight: 600;
}

.vcard--hot .vcard__rows { border-top-color: rgba(192, 82, 27, 0.45); }

.vcard__note {
  margin: auto 0 0;
  padding-top: 9px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.62;
  text-wrap: pretty;
}

/* ==========================================================================
   04. Two policies we would buy
   ========================================================================== */

.pol-sec { padding: 0 0 60px; }

.polgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin: 0 var(--gutter);
  padding: 0;
  list-style: none;
}

.polcard {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
}

/* the one we would actually buy carries the accent */
.polcard--hot {
  border: 3px solid var(--accent);
  background: rgba(192, 82, 27, 0.05);
}

.polcard__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  background: var(--ink);
  padding: 12px 22px;
  color: var(--ab-panel-ink);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.polcard--hot .polcard__tab {
  background: var(--accent);
  color: var(--ab-on-accent-deep);
}

.polcard__badge {
  margin-left: auto;
  color: var(--ab-panel-accent);
}

.polcard--hot .polcard__badge { color: inherit; }

.polcard__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 0;
}

.polcard--hot .polcard__title { color: var(--accent); }

.polcard__title {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}

.polcard__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

.polcard__amount {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
}

.polcard__per {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

.polcard__lead {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.82;
  text-wrap: pretty;
}

.polcard__fit {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 0;
  background: var(--v-tint);
  padding: 9px 14px;
}

.polcard--hot .polcard__fit { background: rgba(192, 82, 27, 0.12); }

.polcard__fit-label {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

.polcard--hot .polcard__fit-label { color: var(--accent); opacity: 1; }

.polcard__fit-text {
  font-size: 19px;
  font-weight: 600;
}

.polmetrics {
  display: flex;
  align-items: stretch;
  margin: 16px 24px 0;
  padding: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.3);
  list-style: none;
}

.polmetric {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.3);
}

.polmetric:first-child { padding-left: 0; border-left: 0; }
.polmetric:last-child { padding-right: 0; }

/* on the accent card every rule inside it is accent-tinted too */
.polcard--hot .polmetrics {
  border-top-color: rgba(192, 82, 27, 0.5);
  border-bottom-color: rgba(192, 82, 27, 0.45);
}

.polcard--hot .polmetric { border-left-color: rgba(192, 82, 27, 0.45); }
.polcard--hot .cover { border-bottom-color: rgba(192, 82, 27, 0.45); }

.polmetric__value {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.polmetric__label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.5;
}

.covblock { padding: 14px 24px 0; }

/* the dotted rule is what separates what is covered from what is not */
.exclblock {
  margin: 14px 24px 0;
  padding-top: 13px;
  border-top: 2px dotted rgba(var(--ink-rgb), 0.4);
}

.polcard--hot .exclblock { border-top-color: rgba(192, 82, 27, 0.5); }

.polcard__sub {
  margin: 0;
  padding-bottom: 4px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.polcard__sub--muted {
  color: inherit;
  opacity: 0.5;
}

.covers,
.excls {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* every covered line carries what it would cost without the cover */
.cover {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(var(--ink-rgb), 0.3);
}

.cover:last-child { border-bottom: 0; }

.cover__row {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 0;
}

.cover__tick {
  color: var(--accent);
  font-weight: 700;
}

.cover__label {
  font-size: 19px;
  font-weight: 600;
}

.cover__limit {
  margin-left: auto;
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 18px;
}

.cover__cost {
  margin: 0;
  padding-left: 25px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.58;
  text-wrap: pretty;
}

.excl {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 6px 0;
}

.excl__dash { opacity: 0.35; }

.excl__text {
  font-size: 19px;
  font-weight: 500;
  opacity: 0.7;
}

/* the two bars are the argument: whole trip at risk against flights only */
.risk {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 16px 24px 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.3);
}

.risk__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

.polcard--hot .risk { border-top-color: rgba(192, 82, 27, 0.45); }

.polcard--hot .risk__title {
  color: var(--accent);
  opacity: 1;
}

.riskbar {
  display: flex;
  height: 16px;
  margin: 0;
}

.riskbar__grey { background: var(--v-risk-grey); }
.riskbar__accent { background: var(--accent); }

.riskbar--all .riskbar__grey { width: 100%; }
.riskbar--split .riskbar__grey { width: 8%; }
.riskbar--split .riskbar__accent { width: 92%; }

.risk__line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.risk__text { opacity: 0.7; }

.risk__value {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 20px;
  opacity: 0.7;
}

.polcard--hot .risk__text { opacity: 0.75; }

.polcard--hot .risk__value {
  color: var(--accent);
  opacity: 1;
}

.claim {
  margin: 16px 24px 0;
  background: rgba(192, 82, 27, 0.12);
  padding: 13px 16px;
}

.claim__title {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.claim__text {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.82;
  text-wrap: pretty;
}

.polcard__buy {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: auto 24px 22px;
  padding-top: 15px;
}

.polcard__buy-label {
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.polcard__buy-text {
  font-size: 19px;
  font-weight: 600;
  opacity: 0.75;
  text-wrap: pretty;
}

.inkstrip {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 26px var(--gutter) 0;
  background: var(--v-panel);
  padding: 24px 30px;
  color: var(--v-panel-ink);
}

.inkstrip__label {
  flex: none;
  color: var(--ab-panel-accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.inkstrip__text {
  max-width: 700px;
  font-size: 21px;
  font-weight: 500;
  opacity: 0.9;
  text-wrap: pretty;
}

.inkstrip__cta {
  margin-left: auto;
  background: var(--ab-panel-cta);
  padding: 15px 32px;
  color: var(--ab-panel-cta-ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.inkstrip__cta:hover,
.inkstrip__cta:focus-visible { background: var(--ab-panel-accent); }

/* ==========================================================================
   05. We explain it, you sign it
   ========================================================================== */

.split-sec { padding: 0 0 58px; }

.panels {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
}

.spanel {
  flex: 1 1 48%;
  min-width: min(540px, 100%);
  padding: 0 0 26px;
}

.spanel--ours {
  background: var(--v-ours);
  color: var(--v-ours-ink);
}

.spanel--yours {
  background: var(--v-panel);
  color: var(--v-panel-ink);
}

.spanel__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 26px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.spanel--ours .spanel__tab { border-bottom: 1px solid rgba(var(--v-ours-rgb), var(--v-ours-tab-a, 0.4)); }
.spanel--yours .spanel__tab { border-bottom: 1px solid rgba(var(--v-panel-rule-rgb), 0.3); }

.spanel__who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.spanel--yours .spanel__who { color: var(--ab-panel-accent); }

.spanel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentcolor;
}

.spanel__count { margin-left: auto; }

.spanel--ours .spanel__count { opacity: 0.85; }
.spanel--yours .spanel__count { opacity: 0.6; }

.spanel__head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding: 24px 26px 0;
}

.spanel__title {
  margin: 0;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 58px;
  font-weight: 600;
  line-height: 0.94;
}

.spanel__title--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--v-panel-ink);
}

.spanel__script {
  margin-left: auto;
  padding-bottom: 12px;
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: 52px;
  line-height: 0.5;
  opacity: 0.9;
  white-space: nowrap;
}

.spanel__starts {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  margin: 18px 26px 0;
  padding: 9px 14px;
}

.spanel--ours .spanel__starts { background: rgba(var(--v-ours-rgb), 0.16); }
.spanel--yours .spanel__starts { background: rgba(var(--v-panel-rgb), 0.12); }

.spanel__starts-label {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.spanel--ours .spanel__starts-label { opacity: 0.85; }
.spanel--yours .spanel__starts-label { color: var(--ab-panel-accent); }

.spanel__starts-text {
  font-size: 19px;
  font-weight: 600;
}

.tasks {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 14px 26px 0;
  list-style: none;
}

.task {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 0;
}

.spanel--ours .task { border-bottom: 1px dashed rgba(var(--v-ours-rgb), var(--v-ours-dash-a, 0.45)); }
.spanel--yours .task { border-bottom: 1px dashed rgba(var(--v-panel-rule-rgb), 0.4); }

.task:last-child { border-bottom: 0; }

.task__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

/* a tick on our side, a plain dash on theirs — and the dash keeps body size */
.spanel--ours .task__mark {
  font-size: 19px;
  font-weight: 700;
}

.spanel--yours .task__mark { opacity: 0.5; }

.task__title {
  font-size: 22px;
  font-weight: 700;
}

.task__when {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 19px;
  white-space: nowrap;
}

.spanel--yours .task__when { color: var(--ab-panel-accent); }

.task__sub {
  margin: 0;
  padding-left: 31px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.spanel--ours .task__sub { opacity: 0.9; }
.spanel--yours .task__sub { opacity: 0.8; }

.spanel__metrics {
  display: flex;
  align-items: stretch;
  margin: 16px 26px 0;
  padding: 16px 0 0;
  list-style: none;
}

.spanel--ours .spanel__metrics { border-top: 2px solid rgba(var(--v-ours-rgb), var(--v-ours-rule-a, 0.5)); }
.spanel--yours .spanel__metrics { border-top: 2px solid rgba(var(--v-panel-rule-rgb), 0.45); }

.spanel__metric {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  padding-left: 16px;
}

.spanel--ours .spanel__metric { border-left: 1px solid rgba(var(--v-ours-rgb), var(--v-ours-tab-a, 0.4)); }
.spanel--yours .spanel__metric { border-left: 1px solid rgba(var(--v-panel-rule-rgb), 0.35); }

.spanel__metric:first-child {
  padding-left: 0;
  padding-right: 16px;
  border-left: 0;
}

.spanel__metric-value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}

.spanel--yours .spanel__metric-value { color: var(--ab-panel-accent); }

.spanel__metric-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.spanel--ours .spanel__metric-label { opacity: 0.85; }
.spanel--yours .spanel__metric-label { opacity: 0.7; }

/* ==========================================================================
   06. Responsive
   ========================================================================== */

@media (max-width: 1500px) {
  .secthead .display--about { font-size: 74px; }
  .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .polgrid { grid-template-columns: minmax(0, 1fr); }
  .vcell { flex: 1 1 220px; padding: 20px 22px; }
  .vcell--hot { flex: 1 1 240px; }
  .vcell__figure { font-size: 50px; }
  .polcard__title { font-size: 34px; }
  .polcard__amount { font-size: 44px; }
  .spanel__title { font-size: 46px; }
}

@media (max-width: 1000px) {
  .vband-sec { padding: 24px var(--gutter) 32px; }
  .table-sec,
  .pol-sec,
  .split-sec { padding-bottom: 40px; }

  .secthead { padding: 26px 0 20px; gap: 14px; }

  .secthead__note {
    margin-left: 0;
    padding-bottom: 0;
    text-align: left;
    font-size: 18px;
  }

  .pcell2 { flex: 1 1 150px; padding: 10px 14px; }
  .pcell2__label { font-size: 14px; }

  .vband__head { gap: 12px; padding: 12px 20px; font-size: 14px; }
  .vband__tag { margin-left: 0; }
  .vcell { padding: 18px 20px; }
  .vcell__label { font-size: 17px; }
  .vcell__sub { font-size: 16px; }

  .vband__foot { gap: 14px; padding: 14px 20px; }
  .vband__text { font-size: 18px; }
  .vband__cta { margin-left: 0; padding: 12px 22px; font-size: 15px; }

  .vregion__head { gap: 8px 12px; }
  .vregion__count { margin-left: 0; }

  .polcard__tab { gap: 8px 12px; padding: 12px 18px; }
  .polcard__badge { margin-left: 0; }

  /* ours first, then yours — the two columns become two blocks */
  .spanel {
    flex: 1 1 100%;
    min-width: 0;
  }

  .spanel__head { gap: 12px; }
  .spanel__script { margin-left: 0; }

  .inkstrip { gap: 14px; padding: 18px 20px; }
  .inkstrip__cta { margin-left: 0; padding: 13px 24px; font-size: 16px; }

  .railnote { gap: 14px; }
  .railnote__text { font-size: 18px; }

  .railnote__cta,
  .railnote__cta--solid {
    margin-left: 0;
    padding: 13px 24px;
    font-size: 16px;
  }
}

@media (max-width: 760px) {
  .vgrid { grid-template-columns: minmax(0, 1fr); }

  /* stacked cells are divided top to bottom, never by a stray left rule */
  .pstrip { display: block; }

  .pcell2 {
    padding: 10px 0;
    border-left: 0;
    border-top: 1px solid rgba(var(--ink-rgb), 0.22);
  }

  .pcell2:first-child { border-top: 0; }

  .vcell {
    flex: 1 1 100%;
    border-left: 0;
    border-top: 1px solid rgba(var(--v-panel-rgb), 0.3);
  }

  .vcell:first-child { border-top: 0; }
  .vcell--hot { flex: 1 1 100%; border-top: 0; }
  .vcell__figure { font-size: 46px; }

  .polcard__title { font-size: 30px; }
  .polcard__amount { font-size: 38px; }
  .spanel__title { font-size: 38px; }
  .spanel__script { font-size: 42px; }
  .task__title { font-size: 20px; }
  .task__sub { font-size: 17px; }

  /* the timing drops under the task rather than squeezing beside it */
  .task__row { flex-wrap: wrap; gap: 2px 12px; }
  .task__when { margin-left: 0; padding-left: 31px; }
}

@media (max-width: 430px) {
  .secthead .display--about { font-size: clamp(30px, 8.5vw, 48px); }
  .secthead .script--about { font-size: clamp(30px, 9vw, 46px); }
  .vband__tag { align-self: flex-start; }
  .vcard__tab { gap: 6px 10px; flex-wrap: wrap; }
  .vcard__when { margin-left: 0; }
  .polcard__price { flex-wrap: wrap; gap: 4px 12px; }
  .cover__row { flex-wrap: wrap; gap: 2px 11px; }
  .cover__limit { margin-left: 0; padding-left: 25px; }
  .spanel__metrics { flex-wrap: wrap; gap: 12px; }

  .spanel--ours .spanel__metric,
  .spanel--yours .spanel__metric {
    flex: 1 1 100%;
    padding-left: 0;
    border-left: 0;
  }

  .spanel__metric:first-child { padding-right: 0; }
}