/* Coach Vault — the public site.
   The same palette, the same face and the same restraint as the vault itself,
   so the door and the room behind it are plainly the same building. */
:root{
  --teal:#013B53; --navy:#143D5A; --mid:#2E5C7E; --gold:#C9A85C; --gold-doc:#A67C00;
  --wash:#F3F6FA; --pale:#E4EAEE; --cream:#F7F4EC; --sand:#D9D2BE;
  --ink:#1F2A44; --muted:#52717F; --line:#EDE6DA; --warm:#FBF7EF; --ground:#FCFAF6;
  --clay:#C4664B;
  --r:18px; --shadow:0 1px 2px rgba(16,44,66,.04), 0 18px 44px -20px rgba(16,44,66,.20);
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
html[data-lang="ar"] body{font-family:'Noto Kufi Arabic','Geeza Pro',Tahoma,'Segoe UI',sans-serif}
img,svg{max-width:100%}
a{color:var(--mid)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 26px}

/* ---------------------------------------------------------- the top bar */
.top{
  position:sticky; top:0; z-index:50; background:rgba(252,250,246,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.topin{display:flex; align-items:center; gap:22px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto}
.brand .bmark{flex:0 0 30px; line-height:0}
.brand .btext{display:flex; flex-direction:column; gap:1px}
.brand b{font-size:16.5px; font-weight:700; color:var(--teal); letter-spacing:2.1px}
.brand .btext span{font-size:8.5px; letter-spacing:3.4px; text-transform:uppercase;
  color:#C3B79E; font-weight:400}
.nav{display:flex; gap:4px; margin-inline-start:auto; align-items:center; flex-wrap:wrap}
.nav a{
  font-size:14.5px; color:var(--muted); text-decoration:none; padding:8px 13px;
  border-radius:10px; white-space:nowrap;
}
.nav a:hover{background:var(--warm); color:var(--teal)}
.nav a.on{color:var(--teal); font-weight:700}
.langs{display:flex; gap:5px; margin-inline-start:10px}
.lang{
  font:inherit; font-size:11.5px; font-weight:700; letter-spacing:.4px; padding:6px 11px;
  border-radius:999px; border:1px solid var(--pale); background:#fff; color:var(--muted); cursor:pointer;
}
.lang.on{background:var(--teal); border-color:var(--teal); color:#fff}
.btn{
  display:inline-block; font:inherit; font-size:14.5px; font-weight:700; text-decoration:none;
  color:#fff; background:var(--teal); border:0; border-radius:999px; padding:11px 22px;
  cursor:pointer; transition:background .15s, transform .05s; text-align:center;
}
.btn:hover{background:#01506F} .btn:active{transform:translateY(1px)}
.btn.gold{background:var(--gold)} .btn.gold:hover{background:#b8963f}
.btn.ghost{background:#fff; color:var(--teal); border:1px solid var(--pale)}
.btn.ghost:hover{background:var(--warm)}
.btn.lg{font-size:16px; padding:15px 30px}
.btn[disabled],.btn.off{opacity:.45; pointer-events:none}

/* ---------------------------------------------------------- the hero */
.hero{padding:86px 0 70px; position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:2}
.kicker{
  font-size:11.5px; font-weight:700; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--gold-doc); margin:0 0 18px;
}
h1{font-size:clamp(34px,5vw,56px); line-height:1.1; margin:0 0 20px; color:var(--teal);
   letter-spacing:-1px; max-width:16ch}
.lede{font-size:clamp(17px,2vw,21px); color:var(--muted); margin:0 0 34px; max-width:52ch; line-height:1.55}
.cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.cta .note{font-size:13.5px; color:var(--muted)}
.heroart{
  position:absolute; inset-block-start:-40px; inset-inline-end:-80px; width:min(46vw,560px);
  opacity:.42; z-index:1; pointer-events:none;
}

/* ---------------------------------------------------------- sections */
section{padding:74px 0}
section.warm{background:var(--warm); border-block:1px solid var(--line)}
section.deep{background:var(--teal); color:#E7EFF2; border-block:0}
section.deep h2, section.deep h3{color:#fff}
section.deep .muted{color:#A9C2CC}
h2{font-size:clamp(26px,3.2vw,38px); line-height:1.2; margin:0 0 14px; color:var(--teal);
   letter-spacing:-.6px; max-width:20ch}
h3{font-size:19px; margin:0 0 8px; color:var(--teal); letter-spacing:-.2px}
.sub{font-size:17px; color:var(--muted); margin:0 0 40px; max-width:58ch; line-height:1.6}
.muted{color:var(--muted)}

.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px;
}
.card p{margin:0; font-size:15.5px; color:var(--muted); line-height:1.6}
.card .ic{
  width:38px; height:38px; border-radius:11px; background:var(--warm); display:flex;
  align-items:center; justify-content:center; margin-bottom:16px; color:var(--teal);
  font-size:17px; border:1px solid var(--line);
}
section.deep .card{background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.14)}
section.deep .card p{color:#A9C2CC}
section.deep .card .ic{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.14); color:var(--gold)}

/* a numbered run of steps */
.steps{counter-reset:s; display:grid; gap:2px}
.step{display:flex; gap:20px; padding:24px 0; border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{
  flex:0 0 40px; height:40px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
.step .b{min-width:0}
.step h3{margin:6px 0 6px}
.step p{margin:0; color:var(--muted); font-size:15.5px}

/* the price table */
.tiers{display:grid; gap:22px; grid-template-columns:repeat(3,1fr); align-items:start}
.tier{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px;
      display:flex; flex-direction:column; min-height:100%}
.tier.pick{border-color:var(--gold); box-shadow:var(--shadow); position:relative}
.tier.pick:before{
  content:attr(data-flag); position:absolute; inset-block-start:-11px; inset-inline-start:30px;
  background:var(--gold); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; padding:4px 12px; border-radius:999px;
}
.tier .nm{font-size:21px; font-weight:700; color:var(--teal); letter-spacing:-.2px}
.tier .who{font-size:14px; color:var(--muted); margin:6px 0 18px; min-height:42px}
.tier .amt{font-size:32px; font-weight:700; color:var(--teal); letter-spacing:-1px}
.tier .per{font-size:13.5px; color:var(--muted); margin-bottom:22px}
.tier ul{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px}
.tier li{font-size:14.5px; color:var(--ink); display:flex; gap:10px; line-height:1.5}
.tier li:before{content:"✓"; color:var(--gold-doc); font-weight:700; flex:0 0 auto}
.tier li.no{color:var(--muted)} .tier li.no:before{content:"—"; color:var(--sand)}
.tier .go{margin-block-start:auto}

/* pull quotes and plain statements */
.say{font-size:clamp(20px,2.6vw,27px); line-height:1.4; color:var(--teal); max-width:26ch;
     letter-spacing:-.4px; margin:0}
section.deep .say{color:#fff}
.lines{display:grid; gap:16px; margin:0; padding:0; list-style:none}
.lines li{display:flex; gap:13px; font-size:16px; line-height:1.55}
.lines li b{color:var(--teal); font-weight:700}
section.deep .lines li b{color:#fff}
.lines .dot{flex:0 0 8px; height:8px; border-radius:50%; background:var(--gold); margin-top:9px}

/* ---------------------------------------------------------- the foot */
footer{background:#fff; border-top:1px solid var(--line); padding:54px 0 40px; font-size:14.5px}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
footer h4{font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-doc);
          margin:0 0 14px; font-weight:700}
footer a{display:block; color:var(--muted); text-decoration:none; padding:4px 0}
footer a:hover{color:var(--teal)}
.legal{border-top:1px solid var(--line); margin-top:34px; padding-top:22px; color:var(--muted);
       font-size:13px; display:flex; gap:18px; flex-wrap:wrap}

/* ---------------------------------------------------------- bilingual */
.only-ar{display:none !important}
html[data-lang="ar"] .only-en{display:none !important}
html[data-lang="ar"] .only-ar{display:inline !important}
html[data-lang="ar"] .blk.only-ar{display:block !important}
html[data-lang="ar"] .heroart{transform:scaleX(-1)}

@media (max-width:900px){
  .g3,.tiers{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr; gap:26px}
  .heroart{display:none}
  .nav a{padding:7px 9px; font-size:13.5px}
  section{padding:54px 0}
  .hero{padding:56px 0 46px}
}

/* ---------------------------------------------------------------- pricing v2
   Four columns instead of three, a monthly/yearly switch, and the packs.
   16 Sep 2026. */
.cycle{display:flex;justify-content:center;gap:6px;margin:0 0 26px;
  background:var(--warm);border:1px solid var(--line);border-radius:999px;
  padding:5px;width:max-content;margin-inline:auto}
.cycle .cy{font:inherit;font-size:13.5px;font-weight:700;padding:9px 18px;
  border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.cycle .cy.on{background:var(--teal);color:#fff}

.tiers.t4{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);align-items:stretch}
@media (max-width:1180px){ .tiers.t4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){  .tiers.t4{grid-template-columns:1fr} }

/* The line that says what Raed does here. It sits between the price and the
   list because it is the thing that separates one tier from the next. */
.tier .raedline{margin:14px 0 4px;padding:9px 12px;border-radius:12px;
  background:#FDFBF4;border:1px solid #EDE3C8;color:#8A6D1F;
  font-size:13px;font-weight:700;line-height:1.45}

/* Corporate is not a price, so it should not look like one. */
.tier.talk{background:linear-gradient(180deg,#FBF7EF,#fff);border-color:var(--sand)}
.tier.talk .raedline{background:#F3F6FA;border-color:#DCE6EE;color:var(--mid)}

.packs{margin-top:54px;padding-top:34px;border-top:1px solid var(--line);text-align:center}
.packrow{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin-top:20px}
@media (max-width:720px){ .packrow{grid-template-columns:repeat(2,1fr)} }
.pack{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:18px 14px}
.pack .pn{font-size:26px;font-weight:800;color:var(--teal);line-height:1}
.pack .pl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:4px 0 10px}
.pack .pp{font-size:17px;font-weight:800;color:var(--ink)}
.pack .pp.soonp{color:var(--muted);font-weight:600;font-size:14px}
.pack .btn.sm{margin-top:10px;font-size:13px;padding:7px 14px}

/* ================================================================
   VIBRANCY PASS — site.css v2, 17 Sep 2026
   His instruction: "make the pages somehow more vibrant."
   His standing rule: the Transcend palette is the standard and no palette is
   ever invented. So NOT ONE NEW COLOUR is introduced here. Every value below
   is either one of the six brand tokens or a tint of one. What changes is how
   hard they work: gold stops being a hairline and becomes an accent, the deep
   band gains depth, cards lift, and the page gets a third background tone so
   five sections in a row stop looking like one long sheet.
   These rules sit last on purpose — they override the originals above without
   editing them, so reverting is deleting this block.
   ================================================================ */

/* A third section tone. Warm / white / wash / deep now alternate, instead of
   warm and white alone. */
section.wash{background:var(--wash); border-block:1px solid var(--pale)}

/* The hero gets light behind it — a gold bloom in the corner the art sits in,
   and a cream floor fading to the page. */
.hero{
  background:
    radial-gradient(70% 90% at 82% 8%, rgba(201,168,92,.16), rgba(201,168,92,0) 62%),
    linear-gradient(180deg, var(--cream) 0%, var(--ground) 78%);
}
.hero .heroart{opacity:.52}

/* The kicker earns a rule. A short gold bar in front of it, which is the one
   piece of furniture that repeats on every page and ties them together. */
.kicker{display:flex; align-items:center; gap:10px}
.kicker:before{
  content:""; inline-size:26px; block-size:2px; background:var(--gold);
  flex:0 0 26px; border-radius:2px;
}
section.deep .kicker:before{background:var(--gold)}

/* Cards lift. Flat white on white was the austerity he is asking me to relieve. */
.card{
  box-shadow:0 1px 2px rgba(16,44,66,.04);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover{
  box-shadow:0 2px 4px rgba(16,44,66,.05), 0 22px 46px -26px rgba(1,59,83,.32);
  transform:translateY(-2px); border-color:var(--sand);
}
/* The little glyph beside a card heading turns gold instead of grey. */
.card .ic{
  background:linear-gradient(180deg,#FDF8EA,#F7EFDC);
  border-color:#EDE3C8; color:var(--gold-doc);
}

/* The numbered steps: a teal that has somewhere to go, and a gold ring. */
.step .n{
  background:linear-gradient(160deg, var(--mid), var(--teal));
  box-shadow:0 0 0 3px rgba(201,168,92,.22);
}

/* The deep band gains depth and a breath of gold. */
section.deep{
  background:
    radial-gradient(58% 80% at 88% 4%, rgba(201,168,92,.20), rgba(201,168,92,0) 60%),
    linear-gradient(165deg, #01486A 0%, var(--teal) 46%, #002B3E 100%);
}

/* Buttons stop being flat fills. */
.btn{box-shadow:0 1px 2px rgba(16,44,66,.10)}
.btn.gold{
  background:linear-gradient(180deg,#D5B468,var(--gold));
  box-shadow:0 2px 4px rgba(166,124,0,.20), 0 10px 22px -12px rgba(166,124,0,.55);
}
.btn.gold:hover{background:linear-gradient(180deg,#C9A85C,#B8963F)}
.btn.ghost:hover{border-color:var(--sand)}

/* The dot in a list of lines gets a ring, so it reads as a marker rather than
   a speck. */
.lines .dot{box-shadow:0 0 0 3px rgba(201,168,92,.20)}

/* The chosen tier should look chosen. */
.tier{transition:box-shadow .18s ease, transform .18s ease}
.tier:hover{box-shadow:0 2px 4px rgba(16,44,66,.05), 0 22px 46px -26px rgba(1,59,83,.30)}
.tier.pick{
  background:linear-gradient(180deg,#FFFDF7,#fff);
  border-width:2px;
  box-shadow:0 2px 6px rgba(166,124,0,.10), 0 26px 54px -28px rgba(166,124,0,.55);
}
.tier.pick .amt{color:var(--gold-doc)}

/* A gold hairline under the top bar, so the header has an edge. */
.top{box-shadow:0 1px 0 rgba(201,168,92,.28)}

/* ================================================================
   THE DETAILED COMPARISON — pricing page only, 17 Sep 2026
   Four columns, categories, a tick or a cross in every cell, and the chosen
   column tinted the whole way down so the eye never loses it.
   ================================================================ */
.cmpwrap{margin-block-start:14px; overflow-x:auto; -webkit-overflow-scrolling:touch;
         border:1px solid var(--line); border-radius:var(--r); background:#fff}
table.cmp{border-collapse:collapse; inline-size:100%; min-inline-size:840px}
table.cmp th, table.cmp td{padding:14px 16px; text-align:center; font-size:14.5px;
                           border-block-start:1px solid var(--line)}
table.cmp thead th{position:sticky; inset-block-start:0; z-index:3; background:var(--warm);
                   border-block-start:0; border-block-end:1px solid var(--line)}
table.cmp th.feat, table.cmp td.feat{text-align:start; inline-size:38%; color:var(--ink);
                                     font-weight:400; line-height:1.45}
table.cmp thead .tn{display:block; font-size:15px; font-weight:800; color:var(--teal);
                    letter-spacing:-.2px}
table.cmp thead .tp{display:block; font-size:13px; color:var(--gold-doc); font-weight:700;
                    margin-block-start:3px}
table.cmp thead .btn.sm{margin-block-start:10px; font-size:12.5px; padding:7px 15px}
/* the chosen column, top to bottom */
table.cmp .hot{background:#FFFCF3}
table.cmp thead th.hot{background:linear-gradient(180deg,#FBF3DF,#F9EFD6)}
table.cmp tbody tr:nth-child(even):not(.cat) td{background:rgba(247,244,236,.55)}
table.cmp tbody tr:nth-child(even):not(.cat) td.hot{background:#FDF8EC}
/* a category band */
table.cmp tbody tr.cat td{
  background:var(--teal) !important; color:#fff !important; text-align:start; font-size:11.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; padding:11px 16px;
  border-inline-start:4px solid var(--gold);
}
html[data-lang="ar"] table.cmp tr.cat td{letter-spacing:0}
table.cmp .yes{color:var(--gold-doc); font-weight:800; font-size:17px}
table.cmp .no{color:var(--sand); font-weight:700; font-size:17px}
table.cmp .val{color:var(--teal); font-weight:700; font-size:13.5px; line-height:1.35}
.cmphint{font-size:13px; color:var(--muted); margin-block-start:12px; text-align:center}
@media (max-width:760px){
  table.cmp th, table.cmp td{padding:11px 10px; font-size:13.5px}
  table.cmp th.feat, table.cmp td.feat{inline-size:44%}
}