/* ==========================================================================
   TradeFluent — training division of QuantQAlgo Technologies Pvt Ltd

   A sibling of the QuantQAlgo "Folio" look, not a clone. The palette now
   shares the parent brand's navy (#17224A, taken straight from the logo);
   three other axes keep the two apart:

     QuantQAlgo                    TradeFluent
     ----------------------------  ----------------------------------
     warm cream ground (#FAF8F3)   cool paper ground (#F6F7FA)
     Newsreader serif headings     Space Grotesk — geometric sans
     navy ink + orange accent      navy ink + blue accent
     hairline rules, square edges  rounded cards, pill eyebrows, badges

   The accent is the logo navy's own hue (227°) lifted to a lightness that
   can carry white text — the navy itself is far too dark to use as a fill,
   so it does the ink job and the brighter blue does the accent job. Every
   text pair below is at or above WCAG AA: white on accent 7.07:1, accent
   on its wash 6.16:1, ink on paper 14.4:1, ink-soft on paper 5.2:1.
   ========================================================================== */

:root{
  --paper:#F6F7FA;
  --paper-deep:#ECEFF5;
  --card:#FFFFFF;
  --ink:#17224A;
  --ink-mid:#414862;
  --ink-soft:#606780;
  --accent:#254AD0;
  --accent-deep:#1C379C;
  --accent-wash:#EBEFFC;
  --line:#DCE1EC;
  /* Hero wash tint: accent cooled toward the ink so the ground does not read warm.
     Raise the accent percentage for more colour, lower it for more grey. */
  --wash-tint:color-mix(in srgb, var(--accent) 45%, var(--ink));
  --white:#FFFFFF;

  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1120px;
  --gut:clamp(20px,5vw,48px);
  --r-card:12px;
  --r-btn:7px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- type ----------
   Space Grotesk is tightened at display sizes; it opens up badly otherwise. */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,3.7rem)}
h2{font-size:clamp(1.8rem,3.8vw,2.6rem)}
h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--ink-soft);max-width:60ch}

/* Pill eyebrow — replaces QuantQAlgo's ruled line entirely. */
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-wash);
  border-radius:100px;padding:6px 14px;margin:0 0 22px;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(246,247,250,.9);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand-mark{width:30px;height:30px;flex:0 0 auto}
.wordmark{
  font-family:var(--display);font-weight:700;font-size:1.22rem;
  letter-spacing:-.04em;color:var(--ink);
}
.wordmark em{font-style:normal;color:var(--accent)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink-soft)}
.nav a:hover{color:var(--accent)}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:13px 24px;border-radius:var(--r-btn);text-decoration:none;
  font-weight:600;font-size:.94rem;border:1px solid transparent;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn-accent{background:var(--accent);color:var(--white)}
.btn-primary:hover,.btn-accent:hover{background:var(--accent-deep)}
.btn-outline{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- sections ---------- */
section{padding:clamp(64px,9vw,116px) 0}
.section-alt{background:var(--paper-deep)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(52px,7vw,88px)}
.hero h1{max-width:15ch;margin-bottom:24px}
.hero .lead{margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-note{
  font-size:.86rem;color:var(--ink-soft);margin-top:28px;
  display:inline-block;border:1px dashed var(--line);border-radius:var(--r-btn);padding:9px 14px;
}

/* ---------- premise ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:start}

/* ---------- curriculum ---------- */
.course{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(24px,3.5vw,38px);margin-bottom:20px;
  box-shadow:0 1px 2px rgba(19,22,31,.04),0 8px 24px rgba(19,22,31,.045);
}
.course-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:12px}
/* Filled badge, not an orange rule. */
.course-index{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);background:var(--accent);border-radius:5px;padding:5px 11px;
}
.course h3{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.7rem);font-weight:700}
.course-meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px;padding:0;list-style:none}
.course-meta li{
  font-size:.79rem;font-weight:500;color:var(--ink-mid);background:var(--paper);
  border:1px solid var(--line);border-radius:100px;padding:5px 13px;
}
.modules{list-style:none;margin:0;padding:0;counter-reset:m}
.modules li{
  padding:11px 0 11px 40px;border-top:1px solid var(--line);position:relative;font-size:.95rem;
}
.modules li:first-child{border-top:0}
.modules li::before{
  content:counter(m,decimal-leading-zero);counter-increment:m;
  position:absolute;left:0;top:10px;font-size:.68rem;font-weight:700;
  color:var(--accent);background:var(--accent-wash);border-radius:5px;
  padding:3px 6px;font-variant-numeric:tabular-nums;
}
.outcome{
  margin-top:24px;padding:18px 20px;background:var(--accent-wash);
  border-radius:9px;font-size:.93rem;color:var(--ink-mid);
}
.outcome strong{color:var(--accent-deep)}

/* ---------- how it works ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.steps li{
  counter-increment:s;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:28px 26px;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);display:inline-block;
  font-family:var(--display);font-size:.78rem;font-weight:700;color:var(--white);
  background:var(--ink);border-radius:6px;padding:4px 9px;margin-bottom:16px;
}
.steps h3{margin-bottom:8px}
.steps p{font-size:.94rem;color:var(--ink-soft);margin:0}

/* ---------- instructor ---------- */
.instructor{background:var(--ink);color:rgba(255,255,255,.78)}
.instructor h2{color:var(--white)}
.instructor .eyebrow{color:color-mix(in srgb, var(--accent) 40%, white);background:rgba(169,182,255,.13)}
.instructor a{color:var(--white)}

/* ---------- the disclosure box ---------- */
.not-box{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r-card);padding:clamp(26px,4vw,44px);
  box-shadow:0 8px 24px rgba(19,22,31,.045);
}
.not-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.not-list li{position:relative;padding-left:30px;font-size:.95rem;color:var(--ink-mid)}
/* A struck-through dot reads as "we don't do this" more clearly than a dash. */
.not-list li::before{
  content:"\00D7";position:absolute;left:4px;top:-1px;
  color:var(--accent);font-weight:700;font-size:1.05rem;
}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:30px 28px;display:flex;flex-direction:column;
}
.price-featured{border-color:var(--accent);box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 11%, transparent)}
.price .amount{font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:-.03em;color:var(--ink);margin:12px 0 3px}
.price .gst{font-size:.79rem;color:var(--ink-soft)}
.price ul{list-style:none;margin:20px 0;padding:0;flex:1}
.price li{font-size:.91rem;padding:7px 0 7px 24px;position:relative;color:var(--ink-soft)}
.price li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--accent-wash);border:1.5px solid var(--accent);
}

/* ---------- faq ---------- */
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;
}
.faq summary{
  cursor:pointer;padding:18px 52px 18px 22px;font-weight:600;font-size:1rem;
  position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;line-height:22px;text-align:center;font-size:1.05rem;
  color:var(--accent);background:var(--accent-wash);border-radius:6px;font-weight:600;
}
.faq details[open] summary::after{content:"\2212"}
.faq .answer{padding:0 24px 22px;color:var(--ink-soft);font-size:.95rem;max-width:74ch}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:rgba(255,255,255,.62);padding:62px 0 32px;font-size:.89rem}
.site-foot a{color:rgba(255,255,255,.88)}
.site-foot a:hover{color:color-mix(in srgb, var(--accent) 40%, white)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:38px}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin-bottom:9px}
.disclaimer{
  border-top:1px solid rgba(255,255,255,.13);padding-top:26px;
  font-size:.79rem;line-height:1.6;color:rgba(255,255,255,.45);
}
.disclaimer strong{color:rgba(255,255,255,.72)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .two-col,.steps,.price-grid,.not-list,.foot-grid{grid-template-columns:1fr}
  .nav{
    display:none;position:absolute;top:74px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:8px var(--gut) 18px;
  }
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:14px;text-align:center}
  .nav-toggle{display:block}
}

/* ==========================================================================
   MOVEMENT LAYER
   Added after the base styles so it is easy to tone down or remove wholesale.
   Everything here is decoration: the page must read correctly without it, and
   all of it is disabled under prefers-reduced-motion at the end of this block.
   ========================================================================== */

/* ---- hero: a soft accent wash and a faint grid, so the ground is not flat --- */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;
  background:
    radial-gradient(60% 55% at 18% 12%, color-mix(in srgb, var(--wash-tint) 15%, transparent), transparent 62%),
    radial-gradient(45% 45% at 88% 4%, color-mix(in srgb, var(--wash-tint) 10%, transparent), transparent 60%);
  pointer-events:none;
  animation:drift 22s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(19,22,31,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(19,22,31,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 70% at 30% 20%, #000, transparent 75%);
          mask-image:radial-gradient(80% 70% at 30% 20%, #000, transparent 75%);
}
.hero .wrap{position:relative;z-index:1}

@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(-3%,2%,0) scale(1.08)}
}

/* ---- nav: underline that draws in from the left ---- */
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .24s ease;
}
.nav a:not(.btn):hover::after{transform:scaleX(1)}

/* ---- cards lift on hover ---- */
.course,.steps li,.price{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.course:hover,.price:hover{
  transform:translateY(-3px);border-color:color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow:0 2px 4px rgba(19,22,31,.05),0 18px 40px rgba(19,22,31,.09);
}
.steps li:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(19,22,31,.07);
}
.price-featured:hover{border-color:var(--accent)}

/* A gradient cap on the featured plan, so the eye lands there first. */
.price-featured{position:relative;overflow:hidden}
.price-featured::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb, var(--accent) 55%, white),var(--accent));
  background-size:200% 100%;
  animation:slide 4.5s linear infinite;
}
@keyframes slide{from{background-position:0 0}to{background-position:200% 0}}

/* ---- module rows respond to the cursor ---- */
.modules li{transition:background .16s ease,padding-left .16s ease;border-radius:6px}
.modules li:hover{background:var(--accent-wash);padding-left:44px}

/* ---- buttons ---- */
.btn{will-change:transform}
.btn-accent:hover,.btn-primary:hover{transform:translateY(-1px)}
.btn-accent,.btn-primary{box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 24%, transparent)}
.btn-accent:hover,.btn-primary:hover{box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent)}

/* ---- instructor band gets depth ---- */
.instructor{position:relative;overflow:hidden}
.instructor::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 78% 20%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 65%);
}
.instructor .wrap{position:relative;z-index:1}

/* ---- FAQ ---- */
.faq details{transition:border-color .2s ease,box-shadow .2s ease}
.faq details:hover{border-color:color-mix(in srgb, var(--accent) 28%, var(--line))}
.faq details[open]{border-color:var(--accent);box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 8%, transparent)}
.faq summary::after{transition:background .2s ease,color .2s ease}
.faq details[open] summary::after{background:var(--accent);color:#fff}

/* ---- staggered reveals: children arrive in sequence, not all at once ---- */
.course:nth-of-type(1){transition-delay:0s}
.course:nth-of-type(2){transition-delay:.08s}
.course:nth-of-type(3){transition-delay:.16s}

/* ---- the opt-out ---- */
@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .price-featured::before{animation:none}
  .course,.steps li,.price,.btn,.faq details,.modules li{transition:none}
  .course:hover,.price:hover,.steps li:hover,
  .btn-accent:hover,.btn-primary:hover{transform:none}
  .modules li:hover{padding-left:40px}
  .nav a:not(.btn)::after{transition:none}
}

/* ---- instructor portrait ------------------------------------------------
   The photo is monochrome, which suits the near-black band; the grayscale
   filter is belt-and-braces in case a colour headshot replaces it later. */
.instructor-grid{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(28px,5vw,64px);align-items:start;
}
.portrait{margin:0;position:relative}
.portrait img{
  position:relative;z-index:1;width:100%;height:auto;display:block;
  border-radius:var(--r-card);filter:grayscale(1) contrast(1.03);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
/* A burgundy frame offset behind the photo — the one spot of accent on the band. */
.portrait::before{
  content:"";position:absolute;left:16px;top:16px;right:-16px;bottom:-16px;
  border:1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius:var(--r-card);
}
.instructor .role{
  font-family:var(--display);font-weight:700;font-size:1.05rem;
  color:var(--white);letter-spacing:-.01em;margin:12px 0 2px;
}
.instructor .role-sub{font-size:.88rem;color:rgba(255,255,255,.55);margin:0 0 24px}

@media (max-width:860px){
  .instructor-grid{grid-template-columns:1fr}
  .portrait{max-width:280px}
  .portrait::before{left:12px;top:12px;right:-12px;bottom:-12px}
}

/* ===========================================================================
   Cheatsheet capture page + download page
   Added for /cheatsheet and /cheatsheet-thanks. Everything below reuses the
   tokens above, so it follows the site if the palette changes.
   ========================================================================= */

/* Fix: `.nav a` (0,1,1) outranks `.btn-primary` (0,1,0), so the nav button was
   getting --ink-soft text on an --accent background — dark purple on purple,
   effectively unreadable. This selector is specific enough to win it back. */
.nav a.btn-primary,.nav a.btn-accent{color:var(--white)}
.nav a.btn-primary:hover,.nav a.btn-accent:hover{color:var(--white)}

/* A narrower measure than the main wrap: a single-purpose page reads better
   when the text column is not as wide as a three-column section. */
.wrap-narrow{max-width:880px}

.small{font-size:.88rem;color:var(--ink-soft);max-width:70ch;line-height:1.65}

/* Two columns: what you get on the left, the form on the right. */
.grab{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);
  align-items:start;margin-top:clamp(30px,4vw,46px);
}
.grab h2{font-size:1.15rem;margin:0 0 4px}

/* Long explanatory items need the full width each, unlike the two-up list
   used in the "what this is not" box. */
.grab-what .not-list{grid-template-columns:1fr;gap:14px}
.grab-what .not-list li{line-height:1.6}
/* These are things you DO get, so the struck-through cross the list normally
   carries would say the opposite of what is meant. */
.grab-what .not-list li::before{content:"\2713";font-size:1rem;top:0}
.grab-what .small{margin-top:22px}

.grab-form{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(22px,3vw,30px);
  box-shadow:0 1px 2px rgba(19,22,31,.04),0 8px 24px rgba(19,22,31,.055);
  position:sticky;top:96px;
}
.grab-form h2{margin-bottom:16px}

.fld{display:block;font-size:.83rem;font-weight:600;color:var(--ink-mid);margin-bottom:7px}

.inp{
  width:100%;box-sizing:border-box;font-family:var(--sans);font-size:1rem;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-btn);padding:12px 14px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.inp::placeholder{color:var(--ink-soft);opacity:.75}
.inp:focus{
  outline:none;background:var(--white);border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.inp:user-invalid{border-color:#B3261E}

.btn-block{display:block;width:100%;text-align:center;margin-top:14px}

.consent{font-size:.79rem;line-height:1.6;color:var(--ink-soft);margin:16px 0 0}
.consent a{color:var(--accent-deep)}

/* The honeypot: a real field that no human sees, so anything filling it is a bot.
   Kept off-screen rather than display:none, which some bots detect and skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- the download page ---------------------------------------------------- */
.dl-row{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  margin-top:clamp(26px,4vw,38px);
}
.dl{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r-card);padding:22px 24px;
  box-shadow:0 1px 2px rgba(19,22,31,.04),0 8px 24px rgba(19,22,31,.045);
  transition:transform .14s,box-shadow .18s,border-color .18s;
}
.dl:hover,.dl:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(19,22,31,.05),0 14px 32px rgba(19,22,31,.09);
}
.dl-kind{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-deep);
}
.dl-name{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink)}
.dl-note{font-size:.88rem;color:var(--ink-soft);line-height:1.5}

@media (max-width:860px){
  .grab{grid-template-columns:1fr;gap:28px}
  /* Unpin the form once it is stacked — sticky in one column just makes it
     hover awkwardly over the text below it. */
  .grab-form{position:static;top:auto}
  .dl-row{grid-template-columns:1fr}
}

/* ==========================================================================
   The second accent - the logo orange (#E8752A).

   ONE RULE: orange marks the free cost model. Its buttons and its card, and
   nothing else. Break that rule and the orange stops meaning anything.

   Orange is fills ONLY here, never words, and the contrast maths is why:
     - white on any of these oranges fails (3.0:1 or worse). Labels are navy:
       on this button fill that is 6.29:1.
     - the logo orange as TEXT on paper = 2.80:1. FAILS badly. If you ever do
       need orange words, use #A64C12 - same hue, darker, 5.35:1 on paper.
     - the logo orange as a thin rule on paper = 2.80:1, under the 3:1 floor
       for graphics. Only use it against a white card, as the card border is.
   ========================================================================== */
:root{
  --brand-orange:#ED8E50;        /* fills only, navy on top       */
  --brand-orange-deep:#E07B39;   /* fill hover - a shade deeper   */
  --brand-orange-edge:#D8763A;   /* 1px rim, see the note below   */
}

/* The free-cost-model CTAs: in the nav, the hero, its card, the signup page. */
/* The rim matters more than it looks. A filled button is only told apart
   from the page by its own colour, and this lighter orange sits at 2.04:1
   against the paper ground - soft enough that the button edge goes vague on
   a dim laptop screen. The 1px darker rim redraws that edge without making
   the fill itself any heavier. */
.btn-accent,.nav a.btn-primary{
  background:var(--brand-orange);color:var(--ink);
  border-color:var(--brand-orange-edge);
  box-shadow:0 2px 8px color-mix(in srgb, var(--brand-orange) 34%, transparent);
}
.btn-accent:hover,.nav a.btn-primary:hover{
  background:var(--brand-orange-deep);color:var(--ink);
  border-color:var(--brand-orange-deep);
  box-shadow:0 6px 18px color-mix(in srgb, var(--brand-orange) 42%, transparent);
}

/* The featured card is the cost model, so it is outlined in the same colour.
   Three rules earlier in this file paint it with --accent: the border, the
   hover border, and the animated gradient cap along its top edge. All three
   have to move together or the card ends up half blue, half orange. */
.price-featured{
  border-color:var(--brand-orange);
  box-shadow:0 10px 30px color-mix(in srgb, var(--brand-orange) 14%, transparent);
}
.price-featured:hover{border-color:var(--brand-orange)}
.price-featured::before{
  background:linear-gradient(90deg,
    var(--brand-orange),
    color-mix(in srgb, var(--brand-orange) 55%, white),
    var(--brand-orange));
  background-size:200% 100%;
}