/* editorial.css
 *
 * The shared visual system for Concerto's standalone content pages:
 * About, FAQ, Partners, Premium, Investors.
 *
 * One stylesheet rather than the same 200 lines pasted into five
 * files. That is the whole reason this exists: the pages drifted
 * apart in the first place because each carried its own copy of a
 * slightly different system.
 *
 * Assumes the host page already defines the brand variables
 * (--navy, --gold, --ink, --line, --display, --body). Anything not
 * guaranteed to exist site-wide is defined here with a fallback.
 */

:root{
  /* Every variable this stylesheet uses is declared here, including
     ones the host page also defines. That is deliberate: this file
     loads BEFORE each page's inline <style> block, and CSS custom
     properties do not resolve retroactively. Relying on the page to
     define --display and --body meant every headline silently fell
     back to the browser default font. Declaring them here fixes it
     regardless of load order, and the values are identical to
     concerto.css so nothing drifts. */
  --display:'Playfair Display',Georgia,serif;
  --body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --navy:#121E36;
  --navy-2:#182744;
  --navy-deep:#0D172B;
  --gold:#C9A84C;
  --gold-pale:#F0E7CC;
  --gold-deep:#9B7B29;
  --ink:#121E36;
  --ink-muted:#5A6478;
  --ink-faint:#8A91A3;
  --line:rgba(18,30,54,.14);
  --surface:#FFFFFF;
}

.ed-shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}

/* Section labels. Monospace, gold, wide tracking. These are what
   make a page read as documented rather than decorated, and they
   are the single most missing element on the pages that were never
   brought up to the system. */
.ed-label{margin:0;color:var(--gold-deep);font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.ed-label-light{color:#D4B867}

/* Hero: two columns on desktop, stacked on mobile, with the gold
   circles bleeding off the right edge. The circles are the one piece
   of pure decoration in the system and they earn it by giving the
   composition a focal point that is not another block of text. */
.ed-hero{min-height:520px;display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);
  gap:clamp(56px,8vw,120px);align-items:center;
  padding-block:clamp(64px,8vw,92px) clamp(64px,8vw,104px);position:relative}
.ed-hero-solo{grid-template-columns:1fr;min-height:auto}
.ed-hero::before,.ed-hero::after{content:"";position:absolute;
  border:1px solid rgba(201,168,76,.23);border-radius:50%;pointer-events:none}
.ed-hero::before{width:420px;height:420px;right:-140px;top:34px}
.ed-hero::after{width:300px;height:300px;right:-80px;top:94px;opacity:.65}
.ed-hero-copy{position:relative;z-index:1}
.ed-hero h1{max-width:20ch;margin:22px 0 28px;color:var(--navy);font-family:var(--display);
  font-size:clamp(42px,5.2vw,68px);font-weight:600;letter-spacing:-.045em;line-height:1.04;
  text-wrap:balance}
.ed-hero h1 em{display:block;color:var(--gold-deep);font-weight:600;font-style:italic}
.ed-lead{max-width:60ch;margin:0;color:var(--ink-muted);font-size:clamp(17px,2vw,20px);
  font-weight:300;line-height:1.65;text-wrap:pretty}

/* Card that sits beside the hero. Asymmetric radius is deliberate:
   one soft corner keeps it from reading as a generic box. */
.ed-card{position:relative;z-index:1;background:var(--navy);color:#fff;
  border-radius:4px 4px 40px 4px;padding:38px 34px 32px;
  box-shadow:0 28px 70px rgba(18,30,54,.18)}
.ed-card::before{content:"";position:absolute;inset:12px;
  border:1px solid rgba(255,255,255,.08);border-radius:2px 2px 31px 2px;pointer-events:none}
.ed-card-kicker{margin:0;color:#D9BD73;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.ed-card-title{max-width:16ch;margin-top:16px;font-family:var(--display);font-size:33px;
  line-height:1.12}
.ed-card-list{display:grid;gap:0;margin:30px 0 0;padding:0;list-style:none}
.ed-card-list li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:15px 0;
  border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.82);font-size:13px}
.ed-check{color:#DFC77F}
.ed-card-note{margin:16px 0 0;color:rgba(255,255,255,.5);font-size:12px;font-style:italic}

/* Proof strip. Real numbers only, rounded counts only, and never a
   third stat invented to fill the row. */
.ed-proof{background:var(--surface,#fff);border-block:1px solid var(--line)}
.ed-proof-grid{display:grid;grid-template-columns:1.08fr repeat(3,1fr)}
.ed-proof-intro,.ed-stat{min-height:150px;display:flex;flex-direction:column;
  justify-content:center;padding:26px 30px;border-left:1px solid var(--line)}
.ed-proof-intro{padding-left:0;border-left:0}
.ed-proof-intro span{color:var(--gold-deep);font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ed-proof-intro p,.ed-stat p{margin:7px 0 0;color:var(--ink-muted);font-size:12px}
.ed-stat-line{display:flex;align-items:baseline;gap:9px}
.ed-stat strong{color:var(--navy);font-family:var(--display);font-size:36px;font-weight:600;
  letter-spacing:-.04em;line-height:1}
.ed-stat-line span{color:var(--navy);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase}

/* Standard content section. */
.ed-sec{padding-block:clamp(64px,8vw,110px)}
.ed-sec h2{margin:0;color:var(--navy);font-family:var(--display);
  font-size:clamp(32px,4.2vw,54px);font-weight:600;letter-spacing:-.038em;line-height:1.1;
  max-width:20ch;text-wrap:balance}
.ed-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.85fr);
  gap:clamp(56px,10vw,140px);margin-top:42px}
.ed-body p{margin:0 0 22px;color:var(--ink-muted);font-size:17px;font-weight:300;
  line-height:1.8;max-width:62ch;text-wrap:pretty}
.ed-quote{margin:36px 0;padding:8px 0 8px 26px;border-left:2px solid var(--gold);
  color:var(--navy);font-family:var(--display);font-size:25px;font-style:italic;
  line-height:1.4;max-width:none}

/* Dark full-bleed section. Every page gets at most one: it is for
   the single strongest thing the page has to say, and it stops
   working the moment there are two. */
.ed-dark{padding-block:clamp(72px,9vw,112px);background:var(--navy);color:#fff;
  position:relative;overflow:hidden}
.ed-dark::after{content:"";position:absolute;width:720px;height:720px;right:-250px;
  bottom:-520px;border:1px solid rgba(201,168,76,.23);border-radius:50%}
.ed-dark-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(56px,9vw,120px);align-items:start;position:relative;z-index:1}
.ed-dark h2{margin-top:42px;color:#fff}
.ed-dark-card{position:relative;z-index:1;padding:42px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045)}
.ed-dark-card p{color:rgba(255,255,255,.62);font-size:15px;font-weight:300;line-height:1.75}
.ed-dark-lead{margin:0 0 22px;color:#fff;font-family:var(--display);font-size:25px;
  line-height:1.48}
.ed-topline{display:flex;align-items:center;gap:10px;margin-bottom:28px;color:#DFC77F;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase}
.ed-pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 6px rgba(201,168,76,.13)}

/* Numbered fact list. */
.ed-facts{border-top:1px solid var(--line)}
.ed-fact{display:grid;grid-template-columns:45px 1fr;gap:18px;padding:24px 0;
  border-bottom:1px solid var(--line)}
.ed-fact>span{color:var(--gold-deep);font-family:var(--mono);font-size:11px;padding-top:3px}
.ed-fact p{margin:0;color:var(--ink-muted);font-size:15px}
.ed-fact strong{color:var(--navy);font-weight:600}

/* Three-step loop with arrows between. */
.ed-loop{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:26px;align-items:center}
.ed-loop article{min-height:230px;padding:30px;background:var(--surface,#fff);
  border:1px solid var(--line);border-radius:2px 2px 26px 2px;
  box-shadow:0 14px 35px rgba(18,30,54,.055)}
.ed-step{color:var(--gold-deep);font-family:var(--display);font-size:14px;font-style:italic}
.ed-loop h3{margin:44px 0 12px;color:var(--navy);font-family:var(--display);font-size:23px;
  font-weight:600}
.ed-loop p{margin:0;color:var(--ink-muted);font-size:13px;line-height:1.7}
.ed-arrow{color:var(--gold-deep);font-size:20px}

/* Gold-pale callout for a single highlighted statement. */
.ed-note{display:grid;grid-template-columns:170px 1fr;gap:30px;margin-top:34px;
  padding:28px 32px;background:var(--gold-pale);color:var(--navy)}
.ed-note span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase}
.ed-note p{margin:0;font-family:var(--display);font-size:18px;line-height:1.5}

/* Closing call to action, dark and centered. */
.ed-cta{background:var(--navy-2);color:#fff;text-align:center;position:relative;overflow:hidden}
.ed-cta::before,.ed-cta::after{content:"";position:absolute;
  border:1px solid rgba(201,168,76,.14);border-radius:50%}
.ed-cta::before{width:600px;height:600px;left:-390px;top:-270px}
.ed-cta::after{width:520px;height:520px;right:-340px;bottom:-280px}
.ed-cta-inner{position:relative;z-index:1;padding-block:clamp(72px,9vw,112px) clamp(64px,8vw,96px)}
.ed-cta h2{max-width:22ch;margin:28px auto 24px;color:#fff}
.ed-cta-copy{max-width:62ch;margin:0 auto;color:rgba(255,255,255,.62);font-size:17px;
  font-weight:300;line-height:1.75}

.ed-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;
  padding:0 26px;border-radius:999px;font-family:var(--body);font-size:14px;font-weight:600;
  text-decoration:none;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.ed-btn:hover{transform:translateY(-2px)}
.ed-btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 12px 30px rgba(136,104,23,.16)}
.ed-btn-gold:hover{background:#DAB85E;box-shadow:0 16px 34px rgba(136,104,23,.24)}
.ed-btn-lg{min-height:62px;margin-top:38px;padding-inline:32px}
.ed-textlink{color:var(--ink-muted);font-size:13px;font-weight:500;text-decoration:none}
.ed-textlink span{display:inline-block;margin-left:7px;color:var(--gold-deep);
  transition:transform .18s ease}
.ed-textlink:hover span{transform:translateY(3px)}
.ed-actions{display:flex;align-items:center;gap:28px;margin-top:38px;flex-wrap:wrap}

.ed-rule{height:1px;background:var(--line)}

@media(max-width:900px){
  .ed-hero{min-height:auto;grid-template-columns:1fr;gap:48px}
  .ed-hero h1 em{display:inline}
  .ed-card{max-width:560px}
  .ed-proof-grid{grid-template-columns:repeat(3,1fr)}
  .ed-proof-intro{grid-column:1/-1;min-height:auto;padding:24px 0}
  .ed-grid,.ed-dark-grid{grid-template-columns:1fr;gap:40px}
  .ed-loop{grid-template-columns:1fr}
  .ed-arrow{transform:rotate(90deg);justify-self:center}
  .ed-loop article{min-height:190px}
  .ed-loop h3{margin-top:32px}
}
@media(max-width:640px){
  .ed-shell{width:min(100% - 32px,1180px)}
  .ed-card,.ed-dark-card{padding:30px 25px}
  .ed-proof-grid{grid-template-columns:1fr}
  .ed-stat{min-height:110px;padding-inline:0;border-left:0;border-top:1px solid var(--line)}
  .ed-note{grid-template-columns:1fr;gap:12px;padding:25px}
  .ed-btn-lg{width:100%;padding-inline:16px}
  .ed-actions{align-items:flex-start;flex-direction:column;gap:20px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* FAQ accordion. Same visual language as the rest of the system:
   surface cards, hairline borders, gold accent on the open state. */
.ed-faq{display:grid;gap:12px;margin-top:40px}
.ed-faq-item{background:var(--surface,#fff);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:border-color .2s ease}
.ed-faq-item[open]{border-color:rgba(201,168,76,.45)}
.ed-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 24px;cursor:pointer;list-style:none;font-family:var(--body);font-size:16px;
  font-weight:600;color:var(--ink)}
.ed-faq-item summary::-webkit-details-marker{display:none}
.ed-faq-item summary::after{content:"+";font-family:var(--mono);font-size:20px;
  color:var(--gold-deep);flex-shrink:0;transition:transform .2s ease}
.ed-faq-item[open] summary::after{content:"\2212"}
.ed-faq-body{padding:0 24px 22px;color:var(--ink-muted);font-size:15px;font-weight:300;
  line-height:1.8;max-width:64ch}
.ed-faq-body a{color:var(--gold-deep);border-bottom:1px solid rgba(201,168,76,.4);
  text-decoration:none}
.ed-faq-group{margin-top:56px}
.ed-faq-group:first-of-type{margin-top:0}

/* Legal pages: long prose that has to stay readable. Narrower
   measure, clear heading hierarchy, no decoration. The goal is
   "same company" through type and spacing, not through adding
   flourishes to a document nobody reads for pleasure. */
/* Left aligned, not centered. margin-inline:auto centered the whole
   legal block in the viewport while the hero above it aligned to
   ed-shell's left edge, so on a wide screen the page visibly split
   into two different alignments at the effective date. */
.ed-legal{max-width:74ch}
.ed-legal h2{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);font-weight:600;
  color:var(--navy);letter-spacing:-.02em;line-height:1.2;margin:48px 0 14px;max-width:none}
.ed-legal h3{font-family:var(--display);font-size:19px;font-weight:600;color:var(--navy);
  margin:32px 0 10px}
.ed-legal p,.ed-legal li{color:var(--ink-muted);font-size:15.5px;font-weight:300;
  line-height:1.85;text-wrap:pretty}
.ed-legal p{margin:0 0 16px;max-width:none}
.ed-legal ul,.ed-legal ol{margin:0 0 20px;padding-left:1.3rem}
.ed-legal li{margin-bottom:8px}
.ed-legal li::marker{color:var(--gold)}
.ed-legal strong{color:var(--ink);font-weight:600}
.ed-legal a{color:var(--gold-deep);border-bottom:1px solid rgba(201,168,76,.4);
  text-decoration:none}
.ed-legal-meta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding-bottom:20px;
  border-bottom:1px solid var(--line);margin-bottom:8px}

/* Pricing row, used on Premium. */
.ed-price{display:flex;gap:2.5rem;flex-wrap:wrap;margin:28px 0 8px}
.ed-price-v{font-family:var(--display);font-size:2.1rem;font-weight:600;color:var(--navy);
  line-height:1;letter-spacing:-.03em}
.ed-price-p{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:8px}

/* Feature list for Premium's three pillars. */
.ed-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.ed-pillar{padding:30px;background:var(--surface,#fff);border:1px solid var(--line);
  border-radius:2px 2px 26px 2px;box-shadow:0 14px 35px rgba(18,30,54,.055)}
.ed-pillar h3{margin:14px 0 10px;color:var(--navy);font-family:var(--display);font-size:22px;
  font-weight:600}
.ed-pillar p{margin:0;color:var(--ink-muted);font-size:14px;line-height:1.75}
@media(max-width:900px){.ed-pillars{grid-template-columns:1fr}}