/* ===================================================================
   CLASSIC — storefront template

   Loaded after app.css and scoped to .tpl-classic. The conventional
   shape a customer already knows: a light top bar with tabs, a
   two-column hero with the quote card on the right, and a grid of
   destinations below.

   Every colour is one of the licensee's own tokens. There is no hex
   value in this file beyond plain white, which is surface rather than
   brand.
   =================================================================== */

.tpl-classic{ --radius:10px; --radius-sm:7px; }

/* ---------------------------- top bar ----------------------------
   Light rather than ink: the shipped header is dark, and a template
   whose only difference was the nav order would not be a different
   template. */
.tpl-classic .cl-topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.tpl-classic .cl-bar{
  display:flex; align-items:center; gap:18px;
  padding-top:12px; padding-bottom:12px;
}
/* app.css sets .logo to white, because the shipped top bar is ink.
   This one is not, so the brand name would be white on white — the
   mark tile has its own background and was the only thing visible.
   The tenant's own ink colour, not a literal. */
.tpl-classic .cl-brand{ flex:0 0 auto; margin-right:6px; color:var(--ink); }
.tpl-classic .cl-nav{
  display:flex; align-items:center; gap:4px;
  flex:1 1 auto; min-width:0;
  /* Tabs scroll rather than wrap when there is no room: a nav that
     wraps to two lines pushes the hero down the page on exactly the
     screens with least of it. */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tpl-classic .cl-nav::-webkit-scrollbar{ display:none; }
.tpl-classic .cl-nav a{
  padding:8px 12px;
  border-radius:var(--radius-sm);
  color:var(--ink);
  text-decoration:none;
  font-size:.94rem;
  font-weight:500;
  white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.tpl-classic .cl-nav a:hover{ background:var(--pine-tint); color:var(--pine-dark); }
.tpl-classic .cl-nav a.on{ color:var(--pine-dark); font-weight:650; }
.tpl-classic .cl-account{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
}
.tpl-classic .cl-account a:not(.btn){
  color:var(--ink); text-decoration:none; font-size:.94rem; font-weight:500; white-space:nowrap;
}
.tpl-classic .cl-account a:not(.btn):hover{ color:var(--pine-dark); }

/* ---------------------------- hero ----------------------------
   THE ONLY PHOTOGRAPHIC HERO ON THE PLATFORM. A full-bleed image, a
   wash over it built from the tenant's own ink, and the copy and the
   quote card sitting on top. Everything below is about keeping text
   legible over an image nobody has seen yet — the licensee uploads
   their own, and it might be bright, busy or both. */
.tpl-classic .cl-hero{
  position:relative;
  isolation:isolate;
  padding:clamp(38px,6vw,86px) 0 clamp(42px,7vw,96px);
  overflow:hidden;
}
.tpl-classic .cl-hero-media{
  position:absolute; inset:0; z-index:-1;
  /* A colour behind the image, so the hero is never a white flash
     while the photograph loads. */
  background:var(--ink);
}
.tpl-classic .cl-hero-img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
/* THE WASH. Two layers: a flat tint of the tenant's ink for contrast,
   and a gradient that deepens towards the copy side so the headline
   has something solid under it whatever the image does there. Without
   this, white text over a licensee's bright photograph is a legibility
   problem that only shows up after they upload one. */
.tpl-classic .cl-hero-wash{
  position:absolute; inset:0;
  /* ONE layer, not two. An earlier version put this gradient over a
     flat 30% ink fill; the two composite, and 62% over 30% is 73%,
     which made a licensee's photograph almost invisible — a
     photographic hero that shows no photograph. The gradient alone
     carries the contrast, heavy where the headline is and clearing to
     almost nothing on the side where the card sits. */
  /* THE STOPS ARE A CONTRAST BUDGET, not a taste.

     A licensee can upload anything, including a near-white photograph,
     and white text over that needs about 81% ink behind it to clear
     4.5:1. So the wash HOLDS at 86% across the whole half the copy
     occupies and only then falls away — the photograph reads in the
     right-hand third and around the card, which is where a hero image
     does its work anyway, and no text ever sits over the part that
     has cleared. Widen the copy column and this budget has to be
     re-cut with it. */
  background:linear-gradient(100deg,
      color-mix(in srgb, var(--ink) 88%, transparent) 0%,
      color-mix(in srgb, var(--ink) 86%, transparent) 50%,
      color-mix(in srgb, var(--ink) 28%, transparent) 74%,
      color-mix(in srgb, var(--ink) 10%, transparent) 100%);
}
/* Browsers without color-mix get a plain ink tint rather than no wash
   at all — the fallback is legible, just less shaped. */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .tpl-classic .cl-hero-wash{ background:var(--ink); opacity:.66; }
}

.tpl-classic .cl-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(22px,4vw,52px);
  align-items:center;
}
.tpl-classic .cl-eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin:0 0 .7rem;
}
.tpl-classic .cl-h1{
  color:#fff;
  font-size:clamp(2rem,4.6vw,3.15rem);
  line-height:1.09;
  letter-spacing:-.028em;
  margin:0 0 .8rem;
  text-wrap:balance;
  /* A soft shadow, not a hard one: it buys contrast over a busy
     photograph without the text looking embossed on a plain one. */
  text-shadow:0 1px 24px rgba(0,0,0,.42);
}
.tpl-classic .cl-em{ color:var(--pine-tint); }
.tpl-classic .cl-sub{
  font-size:clamp(1rem,1.9vw,1.14rem);
  line-height:1.55;
  color:rgba(255,255,255,.86);
  /* 42ch, not 48: measured, not guessed. At 48 the tail of the longest
     line reached the part of the hero where the wash has cleared for
     the photograph, and white text over a bright image there fell to
     about 1.5:1. The dark band and the text column now end together. */
  max-width:42ch;
  margin:0 0 1.3rem;
  text-shadow:0 1px 16px rgba(0,0,0,.38);
}
/* A ghost button on a photograph: app.css's is drawn for a light
   background and disappears here. */
.tpl-classic .cl-ghost{
  border:1px solid rgba(255,255,255,.42);
  color:#fff;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(3px);
}
.tpl-classic .cl-ghost:hover{ background:rgba(255,255,255,.16); }

/* trust pills */
.tpl-classic .cl-pills{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
/* Translucent on the photograph rather than solid white: a row of
   opaque chips over an image reads as a strip of stickers. */
.tpl-classic .cl-pills li{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(4px);
  border-radius:var(--radius-pill);
  padding:6px 13px;
  font-size:.83rem;
  color:#fff;
}
.tpl-classic .cl-tick{
  width:14px; height:14px; border-radius:50%;
  background:var(--pine);
  position:relative; flex:0 0 auto;
}
.tpl-classic .cl-tick::after{
  content:""; position:absolute; left:4px; top:3.5px;
  width:3.5px; height:6px;
  border:solid #fff; border-width:0 1.6px 1.6px 0;
  transform:rotate(42deg);
}
.tpl-classic .cl-ctas{ display:flex; flex-wrap:wrap; gap:10px; }
/* THE CARD, LIFTED OFF THE IMAGE. This is the other half of what
   makes the template photographic: a quote card that reads as sitting
   ON the photograph rather than in a column beside it. A deeper
   shadow than app.css gives it, a white edge to separate it from
   whatever is behind, and a slight lift on hover. */
.tpl-classic .cl-hero-calc .receipt{
  margin:0;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:
    0 2px 6px rgba(0,0,0,.16),
    0 24px 60px -20px rgba(0,0,0,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tpl-classic .cl-hero-calc .receipt:hover{
  transform:translateY(-2px);
  box-shadow:
    0 2px 8px rgba(0,0,0,.18),
    0 30px 70px -22px rgba(0,0,0,.6);
}

/* ---------------------------- global reach ----------------------------
   An auto-fitting grid: as many tiles per row as the width allows,
   down to one. No breakpoint decides the column count — the content
   width does. */
.tpl-classic .cl-reach{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}
.tpl-classic .cl-tile{
  display:flex; flex-direction:column; gap:3px;
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:inherit;
  text-decoration:none;
  transition:border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.tpl-classic a.cl-tile:hover{
  border-color:var(--pine);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.tpl-classic a.cl-tile:focus-visible{ outline:2px solid var(--pine); outline-offset:2px; }
.tpl-classic .cl-flag{ font-size:1.6rem; line-height:1; margin-bottom:4px; }
.tpl-classic .cl-country{ font-weight:650; font-size:.97rem; }
.tpl-classic .cl-amt{
  font-size:1.2rem; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.tpl-classic .cl-basis{ font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.tpl-classic .cl-eta{ font-size:.76rem; color:var(--pine-dark); margin-top:2px; }
.tpl-classic .cl-reach-note{ margin:16px 0 0; max-width:70ch; }

/* ---------------------------- steps and claims ---------------------------- */
.tpl-classic .cl-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(18px,3vw,32px);
}
.tpl-classic .cl-n{
  display:grid; place-items:center;
  width:30px; height:30px; margin-bottom:12px;
  border-radius:50%;
  background:var(--pine); color:#fff;
  font-size:.85rem; font-weight:700;
}
.tpl-classic .cl-steps h3{ font-size:1.02rem; margin:0 0 .35rem; }
.tpl-classic .cl-steps p{ font-size:.9rem; line-height:1.6; margin:0; }
.tpl-classic .cl-claims{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(16px,3vw,30px);
  margin-bottom:26px;
}
.tpl-classic .cl-claims h3{ font-size:1.02rem; margin:0 0 .35rem; }
.tpl-classic .cl-claims p{ font-size:.9rem; line-height:1.6; margin:0; }

/* ---------------------------- Solutions page ---------------------------- */
.tpl-classic .sol-list{ list-style:none; margin:0; padding:0; }
.tpl-classic .sol-list li{
  display:flex; align-items:center; gap:13px;
  padding:13px 2px;
  border-bottom:1px solid var(--line);
}
.tpl-classic .sol-list li > span:nth-child(2),
.tpl-classic .sol-list li > span:first-child:not(.sol-flag){ flex:1 1 auto; min-width:0; }
.tpl-classic .sol-list strong{ display:block; font-size:.97rem; }
.tpl-classic .sol-list .small{ display:block; }
.tpl-classic .sol-flag{ font-size:1.5rem; line-height:1; flex:0 0 auto; }
.tpl-classic .sol-fee{ margin-left:auto; white-space:nowrap; color:var(--ink); font-weight:600; }
.tpl-classic .sol-plain{ margin:0; padding-left:1.1rem; line-height:1.7; }
.tpl-classic .sol-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6rem; }
.tpl-classic .sol-sr{
  position:absolute !important;
  width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------------------------- narrow ----------------------------
   One column, and the calculator moves below the copy — which is why
   "Check rates" is an anchor: on this width it is a real jump. */
@media (max-width: 900px){
  .tpl-classic .cl-hero-grid{ grid-template-columns:1fr; }

  /* THE BUDGET IS RE-CUT WHEN THE COLUMNS COLLAPSE.

     Wide, the wash is horizontal: heavy across the half the copy
     occupies, clear across the half it does not. Stacked, the copy
     spans the FULL width and runs straight into the part that had
     cleared — so on a phone the same gradient would put white text
     over a bright photograph at about 1.4:1.

     Below this width the wash is uniform instead: 86% ink everywhere,
     the same figure the horizontal one holds behind the copy, so the
     contrast guarantee is identical and only its shape changed. The
     photograph still shows through, evenly, at 14%. */
  .tpl-classic .cl-hero-wash{
    background:color-mix(in srgb, var(--ink) 86%, transparent);
  }
  .tpl-classic .cl-sub{ max-width:none; }
}
@media (max-width: 620px){
  .tpl-classic .cl-topbar{ position:static; }
  .tpl-classic .cl-bar{ flex-wrap:wrap; gap:10px; }
  .tpl-classic .cl-nav{ order:3; width:100%; margin:0 -2px; }
  .tpl-classic .cl-account{ margin-left:auto; }
  .tpl-classic .cl-pills li{ font-size:.8rem; padding:5px 11px; }
  .tpl-classic .sol-list li{ flex-wrap:wrap; }
  .tpl-classic .sol-fee{ margin-left:0; width:100%; }
}