/* ===========================================================
   ARCHER SOLAR — editorial layer
   Section archetypes that break the "centred head + uniform grid"
   rhythm. Depth, scale contrast, asymmetry and breakout moments.
   Palette is unchanged: navy, brand blue, white, existing tints.
   =========================================================== */

:root{
  --display:clamp(44px,8vw,104px);
  --mega:clamp(90px,17vw,230px);
  --ground:#eef7fc;          /* the tinted ground panels float on */
  --ground-2:#e6f2f9;
}

/* ---------------- full-bleed band ---------------- */
.bleed{width:100vw;margin-left:calc(50% - 50vw);}

/* ---------------- tinted ground + floating panel ---------------- */
.ground{background:var(--ground);padding:88px 0;}
.ground.tight{padding:66px 0;}
.panel{
  background:#fff;border-radius:26px;padding:40px 40px 36px;
  box-shadow:0 2px 4px rgba(6,44,71,.03),0 24px 60px -30px rgba(6,44,71,.28);
}
.panel.flush{padding:0;overflow:hidden;}
@media(max-width:640px){.panel{padding:28px 24px 26px;border-radius:20px;}}
.panel-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
.panel-head h3{font-size:20px;letter-spacing:-.015em;}
.panel-head .meta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}

/* panel that lifts into the section above it */
.lift{margin-top:-78px;position:relative;z-index:3;}
@media(max-width:900px){.lift{margin-top:-46px;}}

/* ---------------- left-aligned section head with a rule ---------------- */
.head-left{
  max-width:none;margin:0 0 44px;text-align:left;position:relative;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:4px 44px;align-items:end;
  grid-template-areas:"eyebrow ." "title lede" "rule rule";
}
.head-left > .eyebrow,.head-left > .ph-eyebrow{grid-area:eyebrow;justify-self:start;margin-bottom:12px;}
.head-left h2{grid-area:title;font-size:clamp(28px,4.2vw,46px);line-height:1.08;
  letter-spacing:-.025em;max-width:19ch;}
.head-left .lede{grid-area:lede;font-size:16.5px;line-height:1.68;color:var(--ink-soft);
  max-width:48ch;margin:0 0 6px;}
.head-left .rule{grid-area:rule;height:1px;background:var(--line);margin-top:28px;}
.on-dark .head-left .lede{color:rgba(255,255,255,.7);}
.on-dark .head-left .rule{background:rgba(255,255,255,.16);}
@media(max-width:860px){
  .head-left{grid-template-columns:1fr;grid-template-areas:"eyebrow" "title" "lede" "rule";
    gap:0;align-items:start;}
  .head-left h2{margin-bottom:14px;max-width:none;}
  .head-left .lede{max-width:none;}
  .head-left .rule{margin-top:22px;}
}

/* ---------------- scale contrast ---------------- */
.display{
  font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:var(--display);
  line-height:.86;letter-spacing:-.045em;color:var(--ink);
}
.display.on-brand{background:linear-gradient(150deg,#8fdcff,var(--brand) 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.display-sub{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:16px;}
.on-dark .display{color:#fff;}
.on-dark .display-sub{color:rgba(255,255,255,.5);}

/* giant ghost numeral behind content */
.ghost{position:relative;}
.ghost > .gn{
  position:absolute;top:-.34em;left:-.06em;z-index:0;pointer-events:none;user-select:none;
  font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:var(--mega);
  line-height:1;letter-spacing:-.06em;color:var(--brand);opacity:.06;
}
.on-dark .ghost > .gn{color:#8fdcff;opacity:.09;}
.ghost > *:not(.gn){position:relative;z-index:1;}

/* ---------------- asymmetric splits ---------------- */
.split-a{display:grid;grid-template-columns:1.55fr 1fr;gap:60px;align-items:start;}
.split-b{display:grid;grid-template-columns:1fr 1.55fr;gap:60px;align-items:start;}
.split-c{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;}
@media(max-width:940px){.split-a,.split-b,.split-c{grid-template-columns:1fr;gap:34px;}
  .split-b > *:first-child{order:2;}}
.sticky-col{position:sticky;top:100px;}
@media(max-width:940px){.sticky-col{position:static;}}

/* ---------------- marquee strip ---------------- */
.strip{
  background:var(--deep-foot);color:#fff;overflow:hidden;padding:15px 0;
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
}
.strip-track{display:flex;gap:0;width:max-content;animation:stripRun 46s linear infinite;}
.strip:hover .strip-track{animation-play-state:paused;}
@keyframes stripRun{to{transform:translateX(-50%);}}
.strip-item{
  display:inline-flex;align-items:center;gap:11px;padding:0 30px;white-space:nowrap;
  font-size:13.5px;font-weight:700;color:rgba(255,255,255,.8);
}
.strip-item b{font-family:"IBM Plex Mono",monospace;color:#fff;font-size:14.5px;}
.strip-item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);margin-left:30px;}

/* ---------------- horizontal rail ---------------- */
.rail-wrap{position:relative;}
.rail{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 24px;margin:0 -4px;scrollbar-width:thin;
  scrollbar-color:var(--brand-tint-2) transparent;
}
.rail::-webkit-scrollbar{height:6px;}
.rail::-webkit-scrollbar-track{background:var(--line);border-radius:99px;}
.rail::-webkit-scrollbar-thumb{background:var(--brand-tint-2);border-radius:99px;}
.rail:hover::-webkit-scrollbar-thumb{background:var(--brand);}
.rail-card{
  flex:0 0 300px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:30px 26px 26px;position:relative;overflow:hidden;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease,border-color .24s ease;
}
@media(max-width:520px){.rail-card{flex-basis:82vw;}}
.rail-card:hover{transform:translateY(-4px);border-color:var(--brand-tint-2);box-shadow:var(--shadow-lg);}
.rail-card .rn{
  font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:60px;line-height:.8;
  letter-spacing:-.05em;color:var(--brand);opacity:.14;margin-bottom:14px;display:block;
}
.rail-card:hover .rn{opacity:.28;}
.rail-card h3{font-size:17px;line-height:1.3;margin-bottom:9px;}
.rail-card p{font-size:14px;line-height:1.66;color:var(--ink-soft);margin:0;}
.rail-nav{display:flex;gap:9px;justify-content:flex-end;margin-top:6px;}
.rail-btn{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brand-2);
  transition:all .16s ease;
}
.rail-btn:hover{border-color:var(--brand);background:var(--brand-tint);}
.rail-btn:disabled{opacity:.32;cursor:default;}

/* ---------------- document chips ---------------- */
.chiprow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
@media(max-width:900px){.chiprow{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.chiprow{grid-template-columns:repeat(2,1fr);}}
.chip{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.chip:hover{transform:translateY(-3px);border-color:var(--brand-tint-2);box-shadow:var(--shadow-sm);}
.chip svg{margin-bottom:12px;}
.chip b{display:block;font-size:13.6px;font-weight:700;line-height:1.35;color:var(--ink);}

/* ---------------- inline CTA bar ---------------- */
.ctabar{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 26px;
}
.ctabar p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:58ch;}
.ctabar p b{color:var(--ink);}
.on-dark .ctabar{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.on-dark .ctabar p{color:rgba(255,255,255,.76);}
.on-dark .ctabar p b{color:#fff;}

/* ---------------- eligibility checklist ---------------- */
.qual{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0;}
.qual li{display:flex;gap:15px;align-items:flex-start;padding:17px 0;border-top:1px solid var(--line);}
.qual li:first-child{border-top:none;padding-top:0;}
.qual .seal{
  flex:0 0 auto;width:26px;height:26px;color:var(--green);margin-top:1px;
}
.qual p{margin:0;font-size:15.4px;line-height:1.6;color:var(--ink);}
.qual p span{display:block;font-size:13.4px;color:var(--ink-soft);margin-top:4px;line-height:1.6;}

/* ---------------- eligible / not eligible strip ---------------- */
.verdict{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:820px){.verdict{grid-template-columns:repeat(2,1fr);}}
.vcard{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 22px;text-align:center;
  transition:transform .22s ease,box-shadow .22s ease;
}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.vcard .vmark{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;font-size:26px;
}
.vcard.yes .vmark{background:var(--green-tint);color:var(--green);}
.vcard.no  .vmark{background:var(--paper);color:var(--ink-faint);}
.vcard.yes{border-color:color-mix(in srgb,var(--green) 32%, #fff);}
.vcard h4{margin:0 0 7px;font-size:15.5px;font-weight:800;color:var(--ink);}
.vcard p{margin:0;font-size:13.2px;line-height:1.6;color:var(--ink-soft);}
.vcard .vtag{
  display:inline-block;margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px;
}
.vcard.yes .vtag{background:var(--green-tint);color:var(--green);}
.vcard.no .vtag{background:var(--paper);color:var(--ink-faint);}

/* ---------------- two-column FAQ ---------------- */
.faq-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start;}
@media(max-width:860px){.faq-2col{grid-template-columns:1fr;gap:0;}}

/* ---------------- staggered / directional reveals ---------------- */
.rv-l{transform:translateX(-26px) translateY(10px);}
.rv-r{transform:translateX(26px) translateY(10px);}
.rv-s{transform:scale(.965) translateY(18px);}
.rv-l.in,.rv-r.in,.rv-s.in{transform:none;}
.rv-slow{transition-duration:1s;}

@media(prefers-reduced-motion:reduce){
  .strip-track{animation:none;}
  .rv-l,.rv-r,.rv-s{transform:none;}
}

/* ---------------- spot illustration in a section head ---------------- */
.head-left{position:relative;}
.head-art{grid-row:1;grid-column:2;justify-self:end;align-self:center;margin-bottom:-8px;}
@media(max-width:820px){
  .head-art{grid-row:1;grid-column:1;justify-self:start;width:76px !important;margin:0 0 4px;}
  .head-left h2{grid-row:2;} .head-left .lede{grid-row:3;}
}
.chip .gi-sm{margin-bottom:10px;}

/* icon + copy share the left side of a CTA bar */
.ctabar > .gi-sm{margin-right:-6px;}
.ctabar{align-items:center;}
.ctabar p{flex:1 1 340px;}
.panel-head h3 .gi-sm{width:38px;}

/* rail cards inherit the step chrome, and stretch to a common height */
.rail{align-items:stretch;}
.rail-card{display:flex;flex-direction:column;}
.rail-card .chain{margin-top:auto;padding-top:12px;}
.rail-card .meta{margin-top:auto;}

/* ---------------- grid children must be allowed to shrink ----------------
   A grid item defaults to min-width:auto, so a wide child (a table at its
   min-width, a long mono string) forces the whole column wider and the page
   scrolls sideways on mobile. The tablewrap can only scroll internally if its
   parent is permitted to be narrower than it. */
.split > *,.split-a > *,.split-b > *,.split-c > *,
.formsec > *,.faq-2col > *,.head-left > *,.ph-grid > *{min-width:0;}
.tablewrap{max-width:100%;}
.rail-card{min-width:0;}

/* ===========================================================
   ON-BLUE ADJUSTMENTS
   The old backgrounds were near-black, so brand-blue chips,
   buttons and borders separated fine. On the new blue beds they
   don't — anything tinted with the brand colour disappears into
   it. Everything sitting on blue is now built from white instead.
   =========================================================== */

/* buttons ---------------------------------------------------- */
.page-hero .btn-primary,.on-dark .btn-primary{
  background:#fff;color:#0a6299;
  box-shadow:0 14px 32px -14px rgba(3,45,75,.6);
}
.page-hero .btn-primary:hover,.on-dark .btn-primary:hover{
  box-shadow:0 18px 38px -14px rgba(3,45,75,.7);
}
.page-hero .btn-primary::after,.on-dark .btn-primary::after{
  background:linear-gradient(120deg,transparent,rgba(33,178,255,.3),transparent);
}
.page-hero .btn-ghost,.on-dark .btn-ghost,.final-cta .btn-ghost{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);color:#fff;
}
.page-hero .btn-ghost:hover,.on-dark .btn-ghost:hover{background:rgba(255,255,255,.26);}

/* eyebrows --------------------------------------------------- */
.ph-eyebrow{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.34);color:#e6f6ff;}
.ph-eyebrow .dot{background:#bfeaff;box-shadow:0 0 10px rgba(191,234,255,.9);}

/* pills ------------------------------------------------------ */
.on-dark .pill,.page-hero .pill{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.34);
}

/* callouts --------------------------------------------------- */
.on-dark .callout{
  background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24);
  border-left-color:#bfeaff;color:rgba(255,255,255,.86);
}
.on-dark .callout b,.on-dark .callout strong{color:#fff;}

/* cards ------------------------------------------------------ */
.on-dark .bcard,.on-dark .icard{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);
}
.on-dark .bcard:hover,.on-dark .icard:hover{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.4);
  box-shadow:0 22px 48px -26px rgba(3,45,75,.8);
}
.on-dark .bcard .bi,.on-dark .icard .ii{background:rgba(255,255,255,.16);color:#e6f6ff;}
.on-dark .bcard .bnum{color:#bfeaff;}

/* the energy-flow diagram ------------------------------------ */
.eflow .track{stroke:rgba(255,255,255,.26);}
.eflow svg circle[fill="#0b2f4d"],.eflow svg g[fill="#0b2f4d"] circle{fill:#07456b;stroke:#bfeaff;}
.eflow svg text[fill="#8fdcff"]{fill:#dff4ff;}
.on-dark .eflow .pulse{stroke:#eaf9ff;}

/* tables, stats and rules on blue ----------------------------- */
.on-dark .tablewrap{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);}
.on-dark table.atable th{background:rgba(255,255,255,.14);color:#fff;}
.ph-stats{border-top-color:rgba(255,255,255,.24);}
.ph-stats span{color:rgba(255,255,255,.72);}
.crumb{color:rgba(255,255,255,.66);}
.crumb a{color:rgba(255,255,255,.86);}

/* the hero's decorative glow was brand blue on a blue bed ------ */
.page-hero .ph-glow.g1{background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 68%);}
.page-hero .ph-glow.g2{background:radial-gradient(circle,rgba(160,225,255,.34) 0%,transparent 70%);}

/* the scene card needs more edge on a lighter bed -------------- */
.page-hero .hero-visual-card{
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.24);
}
.hvc-top{color:#dff2ff;}
.hvc-foot{color:rgba(255,255,255,.82);border-top-color:rgba(255,255,255,.2);}
.hvc-foot i,.hvc-dot{color:#bfeaff;}
.hvc-dot{background:#bfeaff;box-shadow:0 0 10px rgba(191,234,255,.9);}

/* ===========================================================
   INFOGRAPHICS  (src/infogen.py -> src/info/*.svg)
   Charts drawn from the site's own published figures. Bars grow
   from the reveal observer, so they animate in with the section.
   =========================================================== */
.infocard{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:26px 26px 20px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.infocard .ic-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid var(--line);
}
.infocard .ic-head b{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.infocard .ic-head span{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);}
.info{width:100%;height:auto;display:block;overflow:visible;}
.info *{transform-box:fill-box;}

/* bars sweep out, columns rise, arrows draw */
.info .ig-bar{transform:scaleX(0);transform-origin:left center;
  transition:transform .85s cubic-bezier(.2,.75,.3,1);}
.info .ig-grow{transform:scaleY(0);transform-origin:bottom center;
  transition:transform .8s cubic-bezier(.2,.75,.3,1);}
.info .ig-arrow,.info .ig-fade{opacity:0;transition:opacity .6s ease;}
.infocard.drawn .ig-bar{transform:scaleX(1);}
.infocard.drawn .ig-grow{transform:scaleY(1);}
.infocard.drawn .ig-arrow,.infocard.drawn .ig-fade{opacity:1;}

/* on a blue bed the card inverts */
.on-dark .infocard{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);}
.on-dark .infocard .ic-head{border-bottom-color:rgba(255,255,255,.18);}
.on-dark .infocard .ic-head b{color:#fff;}
.on-dark .infocard .ic-head span{color:rgba(255,255,255,.55);}

@media(prefers-reduced-motion:reduce){
  .info .ig-bar{transform:scaleX(1);}
  .info .ig-grow{transform:scaleY(1);}
  .info .ig-arrow,.info .ig-fade{opacity:1;}
}

/* chart tones adapt to the bed they sit on */
.info .ig-t1{fill:var(--ink);}
.info .ig-t2{fill:var(--ink-soft);}
.info .ig-t3{fill:var(--ink-faint);}
.info .ig-t4{fill:var(--brand-2);}
.info .ig-grid{stroke:var(--line);}
.info .ig-off{fill:#c8d8e3;}
.on-dark .info .ig-t1{fill:#fff;}
.on-dark .info .ig-t2{fill:rgba(255,255,255,.8);}
.on-dark .info .ig-t3{fill:rgba(255,255,255,.58);}
.on-dark .info .ig-t4{fill:#bfeaff;}
.on-dark .info .ig-grid{stroke:rgba(255,255,255,.2);}
.on-dark .info .ig-off{fill:rgba(255,255,255,.24);}