/* =========================================================================
   Carreh website, light theme (10 Nov 2026).
   Matches the app: ground #F3F5EF, ink #0F1F17, brand green #1E6B3C,
   Outfit Light for display, DM Sans for text, 28px cards, tone icon tiles.

   Two jobs:
   1. Base rules for the rebuilt pages (body.v3), whose layout is inline.
   2. A re-skin for the older pages that keep their own markup: their font
      variables and shared classes are pointed at the new type and colours.
   Loaded statically by rebuilt pages and injected by carreh-public-nav.js
   everywhere else.
   ========================================================================= */

:root{
  --v3-ink:#0F1F17;--v3-muted:#56655B;--v3-ground:#F3F5EF;--v3-line:#DFE4D8;
  --v3-brand:#1E6B3C;--v3-deep:#123F26;--v3-amber:#855600;--v3-ondeep:#C3D6C8;
  --v3-display:'Outfit','Outfit Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --v3-text:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Older pages read these. */
  --rd-font-display:var(--v3-display);
  --rd-font-serif:var(--v3-display);
  --rd-font-body:var(--v3-text);
  --serif:var(--v3-display);
  --sans:var(--v3-text);
  --cw-serif:var(--v3-display);
  --cw-sans:var(--v3-text);
  --vf-body:var(--v3-text);
  --av-sans:var(--v3-text);
  --av-serif:var(--v3-display);
}

/* ---- 1. Rebuilt pages ------------------------------------------------- */
body.v3{
  margin:0;background:var(--v3-ground);color:var(--v3-ink);
  font-family:var(--v3-text);font-weight:400;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.v3 *,body.v3 *::before,body.v3 *::after{box-sizing:border-box}
body.v3 main{display:block}
body.v3 main a{color:var(--v3-brand)}
body.v3 main a:hover{color:var(--v3-deep)}
body.v3 main img{max-width:100%}
body.v3 main h1,body.v3 main h2,body.v3 main h3{font-family:var(--v3-display);font-weight:300}
body.v3 main a:focus-visible,body.v3 main button:focus-visible,body.v3 main summary:focus-visible{
  outline:2px solid var(--v3-brand);outline-offset:3px;border-radius:12px}
body.v3 main summary{list-style:none;cursor:pointer}
body.v3 main summary::-webkit-details-marker{display:none}
body.v3 [id]{scroll-margin-top:104px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Buttons and cards lift a little on hover, on devices that hover. */
@media (hover:hover){
  body.v3 main a.v3-btn{transition:transform .18s ease,box-shadow .18s ease}
  body.v3 main a.v3-btn:hover{transform:translateY(-1px)}
  body.v3 main a.v3-card{transition:transform .2s ease,box-shadow .2s ease}
  body.v3 main a.v3-card:hover{transform:translateY(-2px);box-shadow:0 24px 50px -36px rgba(15,31,23,.45)}
}
/* Phones in a mockup pair overlap less on small screens. */
@media (max-width:560px){
  body.v3 .v3-phones>*{margin-top:0!important;transform:none!important}
  body.v3 .v3-tilt{transform:none!important}
}
/* Right-to-left: mirror the arrows and the plane glyphs. */
[dir="rtl"] body.v3 .v3-flip{transform:scaleX(-1)}

/* Copy and mockup swap sides on wide screens; the copy still comes first on phones. */
@media (min-width:900px){body.v3 .v3-rev>:first-child{order:2}}

body.v3 main h3 a{color:inherit;text-decoration:none}
body.v3 main h3 a:hover{color:var(--v3-brand)}

/* FAQ rows on rebuilt pages. */
body.v3 details.v3-faq{background:#FFFFFF;border:1px solid var(--v3-line);border-radius:22px;padding:0 22px}
body.v3 details.v3-faq>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;font-size:17px;font-weight:500;color:var(--v3-ink)}
body.v3 details.v3-faq>summary::after{content:"+";font-family:var(--v3-display);font-size:26px;color:var(--v3-brand);flex:none}
body.v3 details.v3-faq[open]>summary::after{content:"\2212"}
body.v3 details.v3-faq>div{padding:0 0 20px;font-size:15.5px;line-height:1.6;color:var(--v3-muted);max-width:760px}

/* ---- 2. Older pages: new type, lighter headings ------------------------ */
body:not(.v3){font-family:var(--v3-text)}
body:not(.v3) h1,body:not(.v3) h2,
body:not(.v3) .rd-h1,body:not(.v3) .rd-h2,body:not(.v3) .rd-display{
  font-family:var(--v3-display);font-weight:300;letter-spacing:-.02em}
body:not(.v3) h3,body:not(.v3) h4{font-family:var(--v3-display);font-weight:400;letter-spacing:-.01em}
body:not(.v3) p,body:not(.v3) li,body:not(.v3) label,body:not(.v3) input,
body:not(.v3) select,body:not(.v3) textarea,body:not(.v3) button{font-family:var(--v3-text)}

/* Older pages: the app's ground, ink, lines and card shape. Each page keeps
   its markup; its own colour variables are pointed at the new palette. */
body:not(.v3){
  background:var(--v3-ground);color:var(--v3-ink);
  --rd-ink:#0F1F17;--rd-forest:#123F26;--rd-deep:#123F26;--rd-terracotta:#1E6B3C;
  --rd-paper:#F3F5EF;--rd-sand:#FFFFFF;--rd-card-border:#DFE4D8;--rd-muted:#56655B;
  --rd-dark-grad:linear-gradient(#123F26,#123F26);--rd-cta-grad:linear-gradient(#1E6B3C,#1E6B3C);
  --rd-card-shadow:none;
  --pm-ink:#0F1F17;--pm-muted:#56655B;--pm-line:#DFE4D8;--pm-page:#F3F5EF;
  --pm-green:#1E6B3C;--pm-deep:#123F26;--pm-mint:#E4EEE2;
  --faq-ink:#0F1F17;--faq-ink-soft:#3C4A41;--faq-muted:#56655B;--faq-green:#123F26;
  --faq-green-mid:#1E6B3C;--faq-green-bright:#1E6B3C;--faq-paper:#F3F5EF;
  --faq-line:#DFE4D8;--faq-tint:#F3F5EF;--faq-radius:24px;--faq-shadow:none;
  --pine:#123F26;--pine-deep:#0F1F17;--cream:#F3F5EF;--cream-2:#FFFFFF;--ink:#0F1F17;
  --line:#DFE4D8;
  --bdk:#123F26;--b:#1E6B3C;--td:#0F1F17;--cd:#DFE4D8;--cm:#DFE4D8;--cl:#F3F5EF;
}
body:not(.v3) .rd-card{border-radius:28px;box-shadow:none}

/* Deep bands are a rounded panel inside the light page, as on the rebuilt
   pages, never a full-width block. */
body:not(.v3) .rd-section--dark{width:calc(100% - 40px);max-width:1180px;margin:28px auto 56px;border-radius:36px;overflow:hidden}
@media (max-width:640px){body:not(.v3) .rd-section--dark{width:calc(100% - 24px);border-radius:28px;margin:20px auto 40px}}
body:not(.v3) .rd-section--dark .rd-h1,body:not(.v3) .rd-section--dark .rd-h2,
body:not(.v3) .rd-section--dark .rd-h3{color:#FFFFFF}
body:not(.v3) .rd-section--dark .rd-kicker,body:not(.v3) .rd-section--dark .rd-em{color:var(--v3-ondeep)}
body:not(.v3) .rd-section--dark .rd-glow{display:none}
body:not(.v3) .rd-btn--terracotta,body:not(.v3) .crsr-btn--terra{background:var(--v3-brand);color:#FFFFFF}
body:not(.v3) .rd-section--dark .rd-btn--terracotta{background:#FFFFFF;color:var(--v3-deep)}
body:not(.v3) .rw-tier--plat .t{color:#FFFFFF}

/* The page hero is light. */
body:not(.v3) .rd-section--dark#top{width:auto;max-width:none;margin:0;border-radius:0;background:var(--v3-ground);color:var(--v3-ink)}
body:not(.v3) .rd-section--dark#top .rd-h1,body:not(.v3) .rd-section--dark#top .rd-h2,body:not(.v3) .rd-section--dark#top .rd-h3,body:not(.v3) .rd-section--dark#top .rd-pill{color:var(--v3-ink)}
body:not(.v3) .rd-section--dark#top .rd-kicker,body:not(.v3) .rd-section--dark#top .rd-em,body:not(.v3) .rd-section--dark#top .rd-pill--active{color:var(--v3-brand)}
body:not(.v3) .rd-section--dark#top .rd-lead,body:not(.v3) .rd-section--dark#top .rd-body,body:not(.v3) .rd-section--dark#top .rd-card p,body:not(.v3) .rd-section--dark#top p{color:var(--v3-muted)}
body:not(.v3) .rd-section--dark#top .rd-card{background:#FFFFFF;border:1px solid var(--v3-line);color:var(--v3-ink)}
body:not(.v3) .rd-section--dark#top .rd-btn--ghost{color:var(--v3-deep);border-color:var(--v3-line)}
body:not(.v3) .rd-section--dark#top .rd-btn--ghost:hover{background:#FFFFFF;color:var(--v3-deep)}
body:not(.v3) .rd-section--dark#top .rd-btn--terracotta{background:var(--v3-brand);color:#FFFFFF}

/* eSIM store. */
body:not(.v3) .esim-hero{background:var(--v3-ground)}
body:not(.v3) .esim-hero::before{display:none}
body:not(.v3) .esim-hero h1{color:var(--v3-ink)}
body:not(.v3) .esim-hero h1 em{color:var(--v3-brand);font-style:normal}
body:not(.v3) .esim-hero-sub,body:not(.v3) .esim-hstat-l,body:not(.v3) .esim-how p{color:var(--v3-muted)}
body:not(.v3) .esim-hstat-n{color:var(--v3-ink)}
body:not(.v3) .esim-search-box{border:1px solid var(--v3-line);border-radius:20px}
body:not(.v3) .esim-search-btn{border-radius:14px;background:var(--v3-brand)}
body:not(.v3) .esim-tabs-wrap{border-bottom-color:var(--v3-line)}
body:not(.v3) .esim-guarantee{background:var(--v3-deep)}

/* Help Centre. */
body.faq-page .faq-hero{background:var(--v3-ground);color:var(--v3-ink)}
body.faq-page .faq-hero::after{display:none}
body.faq-page .faq-hero h1,body.faq-page .faq-hero .faq-hero-h{color:var(--v3-ink)}
body.faq-page .faq-hero p.faq-lede{color:var(--v3-muted)}
body.faq-page .faq-search input{background:#FFFFFF;border-color:var(--v3-line);color:var(--v3-ink)}
body.faq-page .faq-search input::placeholder{color:var(--v3-muted)}
body.faq-page .faq-search input:focus{background:#FFFFFF;border-color:var(--v3-brand)}
body.faq-page .faq-search button{background:var(--v3-brand);color:#FFFFFF}
body.faq-page .faq-search button:hover{background:var(--v3-deep)}
body:not(.v3) .rd-section--dark#top [class$="-hero-dots"]{display:none}
body:not(.v3) .rd-section--dark#top em{color:var(--v3-brand)!important}
body:not(.v3) .ct-search{border:1px solid var(--v3-line)}
body:not(.v3) .rd-btn--terracotta,body:not(.v3) .crsr-btn--terra{background-image:none}
body:not(.v3) .rd-section--dark#top p{color:var(--v3-muted)!important}
body:not(.v3) .rd-section--dark#top .rd-btn--ghost{color:var(--v3-deep)!important}

/* Legal pages. */
body:not(.v3) .legal-hero{background:var(--v3-ground);color:var(--v3-ink);border-bottom:1px solid var(--v3-line)}
body:not(.v3) .legal-hero h1{color:var(--v3-ink);font-weight:300}
body:not(.v3) .legal-hero h1 em{color:var(--v3-brand);font-style:normal}
body:not(.v3) .legal-hero p{color:var(--v3-muted)}
body:not(.v3) .esim-guarantee{width:calc(100% - 40px);max-width:1180px;margin:28px auto 56px;border-radius:36px}
@media (max-width:640px){body:not(.v3) .esim-guarantee{width:calc(100% - 24px);border-radius:28px}}

/* ---- Contact page (rebuilt) ---- */
.ct-ico{width:44px;height:44px;flex:none;border-radius:15px;background:#DFEFE2;color:var(--v3-brand);display:inline-flex;align-items:center;justify-content:center}
body.v3 .ct-btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;background:var(--v3-brand);color:#fff;border-radius:999px;padding:13px 24px;font:500 15px/1 var(--v3-text);text-decoration:none}
.ct-btn:hover{background:var(--v3-deep)}
.ct-btn--wide{width:100%;padding:17px 24px;font-size:16px}
.ct-search{display:flex;align-items:center;gap:12px;width:100%;max-width:580px;box-sizing:border-box;background:#fff;border:1px solid var(--v3-line);border-radius:999px;padding:8px 8px 8px 22px;margin-top:10px}
.ct-search:focus-within,.ct-input:focus{border-color:var(--v3-brand);outline:2px solid rgba(30,107,60,.18);outline-offset:0}
.ct-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 16px/1.3 var(--v3-text);color:var(--v3-ink)}
.ct-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
body.v3 .ct-topic{display:flex;flex-direction:column;gap:8px;text-align:left;background:#fff;border:0;border-radius:28px;padding:26px;cursor:pointer;color:var(--v3-ink);font-family:var(--v3-text);text-decoration:none;transition:transform .2s}
.ct-topic:hover{transform:translateY(-2px)}
.ct-topic-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.ct-topic small{font-size:13px;color:var(--v3-muted)}
.ct-topic b{font:400 22px/1.2 var(--v3-display);letter-spacing:-.01em}
.ct-topic-body{font-size:15px;line-height:1.5;color:var(--v3-muted)}
body.v3 .ct-topic--deep{background:var(--v3-deep);color:#fff}
.ct-topic--deep .ct-topic-body{color:var(--v3-ondeep)}
.ct-topic--deep .ct-ico{background:rgba(255,255,255,.12);color:#fff}
.ct-faq{margin-top:28px;border-top:1px solid var(--v3-line)}
.ct-faq-row{border-bottom:1px solid var(--v3-line)}
.ct-faq-row>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;background:transparent;border:0;cursor:pointer;padding:22px 0;color:var(--v3-ink);font:500 17px/1.35 var(--v3-text)}
.ct-faq-plus{flex:none;font:300 26px/1 var(--v3-display);color:var(--v3-brand);transition:transform .3s}
.ct-faq-a{padding:0 40px 24px 0;color:var(--v3-muted);font-size:16px;line-height:1.6}
.ct-contact{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ct-ways{display:flex;flex-direction:column;gap:6px;margin-top:6px}
body.v3 .ct-way{display:flex;align-items:center;gap:14px;padding:10px 0;color:var(--v3-ink);text-decoration:none}
.ct-way b{display:block;font:500 16px/1.3 var(--v3-text)}
.ct-way small{display:block;font-size:13.5px;color:var(--v3-muted);margin-top:2px}
.ct-form{display:flex;flex-direction:column;gap:18px;background:#fff;border-radius:32px;padding:32px;box-sizing:border-box}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-label{display:block;font-size:13px;color:var(--v3-muted);margin-bottom:8px}
.ct-input{width:100%;box-sizing:border-box;background:var(--v3-ground);border:1px solid transparent;border-radius:16px;padding:14px 16px;color:var(--v3-ink);font:400 16px/1.4 var(--v3-text)}
.ct-input::placeholder,.ct-search input::placeholder{color:#7C897F}
.ct-chips{display:flex;gap:8px;flex-wrap:wrap}
.ct-chip{border:1px solid var(--v3-line);background:#fff;color:var(--v3-ink);cursor:pointer;padding:9px 16px;border-radius:999px;font:400 14px/1 var(--v3-text)}
.ct-chip.is-on{background:var(--v3-brand);border-color:var(--v3-brand);color:#fff}
@media(max-width:960px){.ct-topics{grid-template-columns:1fr 1fr}.ct-contact{grid-template-columns:1fr;gap:40px}}
@media(max-width:620px){.ct-topics{grid-template-columns:1fr}.ct-row{grid-template-columns:1fr}.ct-form{padding:22px;border-radius:28px}.ct-search .ct-btn{padding:13px 18px}}

/* Country, feature, guide and compare pages (rendered by the Worker): the same light hero. */
header.hero:has(.hwrap) { background: #F3F5EF; background-image: none; color: #0F1F17; border-radius: 0; border-bottom: 1px solid #E3E8DD; }
header.hero:has(.hwrap) h1 { color: #0F1F17; font-family: Outfit, 'Avenir Next', system-ui, sans-serif; font-weight: 300; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
header.hero:has(.hwrap) p { color: #56655B; }
header.hero:has(.hwrap) .crumbs, header.hero:has(.hwrap) .crumbs a { color: #56655B; }
header.hero:has(.hwrap) .crumbs a:hover { color: #1E6B3C; }
header.hero:has(.hwrap) .cta-row .btn { font-weight: 500; font-size: 15px; background: #1E6B3C; background-image: none; color: #FFFFFF; }
header.hero:has(.hwrap) .cta-row .btn:not(.btn-gold) { background: transparent; border: 1px solid #C9D1C2; color: #0F1F17; }