/* auroracomposable.com v2 — shared stylesheet
   ------------------------------------------------------------------
   Modelled on fanhalo.net's sheet: system font stack, :root tokens, big
   low-weight statement type with <b> at 900 for emphasis, generous white
   space, thin hairline rules instead of boxes wherever a box is avoidable.

   PALETTE — single source of truth
     --red is THE brand value. Every other colour in this file is
     derived from it with color-mix(), so changing that one line
     restyles the entire site. Static fallbacks precede each derived
     value for engines without color-mix() support.

     Sampled reds from v1, kept here for reference only:
       #b71824  darkest red in v1's compiled CSS (its :active state)
       #ce1b28  v1's brand red
       #e2212f  v1's hover red
       #321214  darkest-decile red sampled from v1's cta01.jpg

   NO MULTIMEDIA. No video, no photography, no icon font, no JS, no
   webfonts — every page is HTML plus this one stylesheet, so it opens
   correctly from the filesystem with no server and no network.        */

:root{
  /* ══ THE ONE VALUE ══════════════════════════════════════════════
     Change --red and the entire site follows: accents, hovers, rules,
     table headers, buttons, the dark panels and every tint used on
     them. Nothing else in this file hardcodes a brand colour.        */
  --red:#411D1E;

  /* Everything below is DERIVED from --red. The first declaration in
     each pair is a static fallback for engines without color-mix();
     the second overrides it everywhere modern. Do not hand-edit the
     derived values — change --red instead.                          */
  --red-deep:#2E1415;
  --red-deep:color-mix(in srgb, var(--red) 78%, #000);
  --red-bright:#7A3033;
  --red-bright:color-mix(in srgb, var(--red) 82%, #fff);

  --ink:#241315;                                    /* body copy, dark panels */
  --ink:color-mix(in srgb, var(--red) 78%, #0B0708);
  --ink-soft:#5B4A4C;                               /* paragraphs             */
  --ink-soft:color-mix(in srgb, var(--red) 62%, #9A8F90);
  --muted:#8C7A7C;                                  /* labels, captions       */
  --muted:color-mix(in srgb, var(--red) 38%, #B9AEAF);

  --line:#E9DFE0;                                   /* hairlines              */
  --line:color-mix(in srgb, var(--red) 11%, #fff);
  --line-strong:#D8C7C9;
  --line-strong:color-mix(in srgb, var(--red) 20%, #fff);
  --tint:#FBF6F6;                                   /* section wash           */
  --tint:color-mix(in srgb, var(--red) 4%, #fff);

  /* tints for text sitting ON the dark panels */
  --on-accent:#E8A0A6;
  --on-accent:color-mix(in srgb, var(--red) 34%, #fff);
  --on-accent-hi:#F0B8BD;
  --on-accent-hi:color-mix(in srgb, var(--red) 22%, #fff);
  --on-body:#E4D6D7;
  --on-body:color-mix(in srgb, var(--red) 15%, #fff);
  --on-muted:#C9AEB0;
  --on-muted:color-mix(in srgb, var(--red) 28%, #fff);
  --on-dim:#A98C8F;
  --on-dim:color-mix(in srgb, var(--red) 44%, #fff);

  --white:#FFFFFF;
  --maxw:1100px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-gutter:stable;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;
  color:var(--ink);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:24px;}

/* ── nav ─────────────────────────────────────────────────────── */
.nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.94);
     backdrop-filter:saturate(180%) blur(10px);z-index:50;}
.nav .row{height:66px;}
.brand{font-size:19px;font-weight:900;letter-spacing:-.6px;color:var(--ink);white-space:nowrap;}
.brand b{color:var(--red);}
.navlinks{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.navlink{font-size:14.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;}
.navlink:hover,.navlink.on{color:var(--red);}
@media(max-width:820px){
  .nav .row{height:auto;padding:14px 0;flex-direction:column;align-items:flex-start;gap:12px;}
  .navlinks{gap:18px;}
  .navlink{font-size:13.5px;}
}

/* ── hero ────────────────────────────────────────────────────── */
.hero{padding:96px 0 76px;border-bottom:1px solid var(--line);}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
         color:var(--red);margin-bottom:20px;}
h1{font-size:68px;font-weight:300;letter-spacing:-2.4px;line-height:1.0;margin-bottom:24px;}
h1 b{font-weight:900;}
h1 .r{color:var(--red);font-weight:900;}
.lead{font-size:20px;color:var(--ink-soft);max-width:660px;}
.lead b{color:var(--ink);font-weight:800;}
@media(max-width:900px){
  .hero{padding:56px 0 44px;}
  h1{font-size:40px;letter-spacing:-1.2px;}
  .lead{font-size:17px;}
}

/* ── sections ────────────────────────────────────────────────── */
.section{padding:88px 0;border-bottom:1px solid var(--line);}
.section.tint{background:var(--tint);}
.section.last{border-bottom:none;}
.kicker{font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
        color:var(--red);margin-bottom:16px;}
h2{font-size:44px;font-weight:300;letter-spacing:-1.5px;line-height:1.06;margin-bottom:18px;}
h2 b{font-weight:900;}
h2 .r{color:var(--red);font-weight:900;}
.section-head{max-width:800px;margin-bottom:52px;}
.section-head p{font-size:18px;color:var(--ink-soft);}
@media(max-width:900px){
  .section{padding:52px 0;}
  h2{font-size:30px;letter-spacing:-.8px;}
  .section-head{margin-bottom:34px;}
}

/* ── the big statement type that carries this design ─────────── */
.mega{font-size:118px;font-weight:900;letter-spacing:-5px;line-height:.9;color:var(--ink);}
.mega.r{color:var(--red);}
.megasub{font-size:21px;font-weight:700;color:var(--muted);letter-spacing:.3px;margin-top:10px;}
.punch{font-size:40px;font-weight:300;letter-spacing:-1.4px;line-height:1.14;max-width:900px;}
.punch b{font-weight:900;display:block;}
.punch .r{color:var(--red);font-weight:900;}
.statement{font-size:46px;font-weight:300;letter-spacing:-1.5px;line-height:1.1;
           max-width:920px;margin:0 auto;text-align:center;}
.statement b{font-weight:900;}
.statement .r{color:var(--red);font-weight:900;}
@media(max-width:900px){
  .mega{font-size:62px;letter-spacing:-2.4px;}
  .megasub{font-size:16px;}
  .punch{font-size:26px;letter-spacing:-.6px;}
  .statement{font-size:28px;letter-spacing:-.7px;}
}

/* ── THE TWO TRACKS — the homepage's main event ──────────────── */
/* Two large side-by-side blocks. Deliberately NOT cards-in-a-grid of six:
   there are exactly two techniques and the layout should say so.        */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;}
.track{
  border:1px solid var(--line-strong);border-radius:22px;padding:44px 40px 40px;
  display:flex;flex-direction:column;background:var(--white);
  transition:border-color .18s ease, transform .18s ease;
}
.track:hover{border-color:var(--red);transform:translateY(-3px);}
/* the second track inverts, so the pair reads as one decision with two
   halves rather than two unrelated cards */
.track.dark{background:var(--ink);border-color:var(--ink);color:var(--white);}
.track-num{font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
           color:var(--red);margin-bottom:18px;}
.track.dark .track-num{color:var(--on-accent);}
.track h3{font-size:38px;font-weight:900;letter-spacing:-1.4px;line-height:1.02;margin-bottom:6px;}
.track .sub{font-size:17px;font-weight:700;color:var(--muted);margin-bottom:22px;}
.track.dark .sub{color:var(--on-muted);}
.track p{font-size:16.5px;color:var(--ink-soft);margin-bottom:16px;}
.track.dark p{color:var(--on-body);}
.track ul{list-style:none;margin:6px 0 26px;padding:0;}
.track li{font-size:15.5px;color:var(--ink-soft);padding:11px 0 11px 22px;position:relative;
          border-top:1px solid var(--line);}
.track li:first-child{border-top:none;}
.track li:before{content:'';position:absolute;left:0;top:19px;width:9px;height:2px;background:var(--red);}
.track.dark li{color:var(--on-body);border-top-color:rgba(255,255,255,.14);}
.track.dark li:before{background:var(--on-accent);}
.track .go{margin-top:auto;font-size:15px;font-weight:800;color:var(--red);letter-spacing:.2px;}
.track.dark .go{color:var(--on-accent-hi);}
.track:hover .go{color:var(--red-deep);}
.track.dark:hover .go{color:var(--white);}
@media(max-width:900px){
  .tracks{grid-template-columns:1fr;gap:20px;}
  .track{padding:32px 26px 30px;}
  .track h3{font-size:29px;letter-spacing:-.9px;}
}

/* ── old-way / new-way comparison ────────────────────────────── */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;}
.way{border:1px solid var(--line);border-radius:20px;background:var(--white);
     padding:34px 32px 36px;display:flex;flex-direction:column;}
.way.new{background:var(--ink);border-color:var(--ink);color:var(--white);}
.way-label{font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
           color:var(--muted);margin-bottom:12px;}
.way.new .way-label{color:var(--on-accent);}
.way h3{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1.06;margin-bottom:16px;}
.way p{font-size:16px;color:var(--ink-soft);}
.way.new p{color:var(--on-body);}
.way ul{list-style:none;margin-top:16px;padding:0;}
.way li{font-size:15.5px;color:var(--ink-soft);padding:10px 0;border-top:1px solid var(--line);}
.way.new li{color:var(--on-body);border-top-color:rgba(255,255,255,.14);}
@media(max-width:900px){.versus{grid-template-columns:1fr;gap:18px;}}

/* ── numbered rows ───────────────────────────────────────────── */
.benefit{display:flex;gap:28px;align-items:flex-start;padding:34px 0;border-top:1px solid var(--line);}
.benefit:first-of-type{border-top:none;}
.bnum{font-size:52px;font-weight:900;color:var(--line-strong);line-height:1;min-width:70px;letter-spacing:-2px;}
.benefit h3{font-size:32px;font-weight:800;letter-spacing:-1px;line-height:1.1;margin-bottom:8px;}
.benefit p{font-size:17px;color:var(--ink-soft);max-width:740px;}
@media(max-width:900px){
  .benefit{gap:16px;padding:24px 0;}
  .benefit h3{font-size:23px;}
  .bnum{font-size:34px;min-width:44px;}
}

/* ── three-across cards ──────────────────────────────────────── */
.chain{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.chainstep{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px 28px;}
.section.tint .chainstep{background:var(--white);}
.chainstep .cn{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--red);margin-bottom:14px;
                text-transform:uppercase;}
.chainstep h3{font-size:24px;font-weight:800;letter-spacing:-.6px;line-height:1.14;margin-bottom:10px;}
.chainstep p{font-size:15.5px;color:var(--ink-soft);}
@media(max-width:900px){.chain{grid-template-columns:1fr;}}

/* ── key collections list ────────────────────────────────────── */
.keys{border-top:1px solid var(--line);}
.keyrow{display:grid;grid-template-columns:300px 1fr;gap:36px;padding:32px 0;
        border-bottom:1px solid var(--line);align-items:start;}
.keyrow h3{font-size:27px;font-weight:900;letter-spacing:-.8px;color:var(--red);line-height:1.1;}
.keyrow .kdesc{font-size:13px;font-weight:700;color:var(--muted);margin-top:6px;letter-spacing:.2px;}
.keyrow p{font-size:16.5px;color:var(--ink-soft);}
@media(max-width:820px){
  .keyrow{grid-template-columns:1fr;gap:12px;padding:24px 0;}
  .keyrow h3{font-size:22px;}
}

/* ── table ───────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;}
table{border-collapse:collapse;width:100%;min-width:640px;}
th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);font-size:15.5px;
      vertical-align:top;}
th{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);
   border-bottom:2px solid var(--red);white-space:nowrap;}
td{color:var(--ink-soft);}
td strong{color:var(--ink);font-weight:800;}
tr:last-child td{border-bottom:none;}

/* ── buttons ─────────────────────────────────────────────────── */
.btn{display:inline-block;background:var(--red);color:var(--white);font-size:15px;font-weight:800;
     padding:13px 26px;border-radius:999px;letter-spacing:.2px;transition:background .18s ease;}
.btn:hover{background:var(--red-deep);}
.btn.ghost{background:transparent;color:var(--red);box-shadow:inset 0 0 0 2px var(--red);}
.btn.ghost:hover{background:var(--red);color:var(--white);}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}

/* ── footer ──────────────────────────────────────────────────── */
.footer{background:var(--ink);color:var(--on-body);padding:64px 0 40px;}
.footcols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;}
.footer h4{font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
           color:var(--on-accent);margin-bottom:16px;}
.footer .fbrand{font-size:24px;font-weight:900;letter-spacing:-.8px;color:var(--white);margin-bottom:12px;}
.footer .fbrand b{color:var(--on-accent);}
.footer p{font-size:15px;color:var(--on-muted);max-width:420px;}
.footer ul{list-style:none;}
.footer li{margin-bottom:10px;font-size:15px;}
.footer li a:hover{color:var(--white);}
.footnote{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
          font-size:13px;color:var(--on-dim);}
@media(max-width:820px){.footcols{grid-template-columns:1fr;gap:30px;}}

/* ══════════════════════════════════════════════════════════════════
   THE COMPOSABLE STACK — reusable animated diagram
   ------------------------------------------------------------------
   Drawn from the whiteboard: an app framework on top, the platform at
   the base, and COMPOSABLE TECH as the layer between them.

   PALETTE — deliberately NOT the site's red.
   This block runs on the fanhalo palette (darknight + dried lavendar +
   light grays), lifted verbatim from codebase/websites/fanhalo.net.
   That is why it declares its own --a-* tokens instead of deriving from
   --red like everything else in this sheet: the diagram is a distinct
   visual object, and mixing the two palettes inside it looked like an
   accident. Change these six values to retheme the whole diagram.

   TYPE — one face throughout. Every label uses the display treatment of
   the h2 above it: weight 900 with tight negative tracking, sentence
   case. The chip label relaxes the tracking only because it renders at
   about 10px, where -0.03em closes the letters up.

   FIVE STEPS. The chip matrix is its own step, after the key cards have
   landed, so the chips read as filling the cards rather than arriving
   with them.

   TO REUSE: copy the whole <section class="stackanim"> block. The JS is
   scoped to its own element, so two copies on a page do not collide.
   Reduced-motion users get the finished diagram with no movement.   */

.stackanim{
  /* fanhalo palette — see note above */
  --a-ink:#0C242C;            /* darknight — dark blocks and all dark type   */
  --a-lav:#7988A5;            /* dried lavendar — chips, card borders        */
  --a-lav-light:#99A4B8;
  --a-lav-lighter:#D1D6E0;    /* band borders                                 */
  --a-lav-lightest:#F2F3F6;   /* section wash, pill fills                     */
  --a-line:#E2E5EB;
  --a-body:#46535c;           /* fanhalo's body gray                          */

  padding:88px 0;border-bottom:1px solid var(--a-line);
}
.stackanim.tint{background:var(--a-lav-lightest);}

/* the section's own heading takes the diagram's palette too, so the block
   reads as one coherent object rather than red type over a gray field */
.stackanim .kicker{color:var(--a-lav);}
.stackanim h2{color:var(--a-ink);}
.stackanim .section-head p{color:var(--a-body);}

.stackanim .stagelabel{
  display:flex;align-items:center;gap:12px;margin-bottom:26px;
  font-size:12px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;color:var(--a-lav);
}
.stackanim .stagelabel .dots{display:flex;gap:6px;}
.stackanim .stagelabel i{
  width:22px;height:3px;border-radius:2px;background:var(--a-lav-lighter);
  transition:background .3s cubic-bezier(.22,.85,.25,1);
}
.stackanim .stagelabel i.lit{background:var(--a-ink);}
.stackanim .stagelabel .what{color:var(--a-ink);}
.stackanim svg{width:100%;height:auto;display:block;overflow:visible;}

/* ── type: one display face for every label in the diagram ── */
.stackanim svg text{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;
  font-weight:900;letter-spacing:-0.03em;
}

/* ── fills ── */
.stackanim .fill-deep {fill:var(--a-ink);}                                   /* platform      */
.stackanim .fill-card {fill:var(--white);stroke:var(--a-lav);stroke-width:4;} /* the 3 cards  */
.stackanim .fill-band {fill:var(--white);stroke:var(--a-lav-lighter);stroke-width:4;}
.stackanim .fill-pill {fill:var(--a-lav-lightest);stroke:var(--a-lav-lighter);stroke-width:2;}
.stackanim .on-deep   {fill:var(--white);}
.stackanim .on-card   {fill:var(--a-ink);}
/* the five key-collection names: same face, unbolded, so the card title
   above them stays the emphatic thing in the card */
.stackanim .on-pill   {fill:var(--a-ink);font-weight:400;letter-spacing:-0.01em;}
.stackanim .on-band   {fill:var(--a-ink);}
.stackanim .on-soft   {fill:var(--a-body);}
.stackanim .bracket   {fill:none;stroke:var(--a-ink);stroke-width:5;}
.stackanim .phoneframe{fill:none;stroke:var(--a-ink);stroke-width:4;}
.stackanim .brklabel  {fill:var(--a-ink);}
/* the "key" chips — dried lavendar ground, darknight label */
.stackanim .chip      {fill:var(--a-lav);}
.stackanim .chiptext  {fill:var(--white);letter-spacing:-0.01em;}

/* ── motion: each group flies in from a different edge ── */
.stackanim .g{
  opacity:0;
  transition:transform 1.0s cubic-bezier(.22,.85,.25,1), opacity .6s cubic-bezier(.22,.85,.25,1);
  will-change:transform,opacity;
}
.stackanim .from-top   {transform:translateY(-320px);}
.stackanim .from-bottom{transform:translateY(320px);}
.stackanim .from-left  {transform:translateX(-900px);}
.stackanim .from-right {transform:translateX(900px);}
.stackanim .from-scale {transform:scale(.6);transform-origin:center;transform-box:fill-box;}

/* Each chip animates on its own short transition with an inline delay, so the
   30 of them stack into the matrix instead of arriving as one slab. */
.stackanim .chipwrap{
  opacity:0;transform:translateX(-140px);
  transition:transform .5s cubic-bezier(.22,.85,.25,1), opacity .3s ease;
}
.stackanim svg[data-step="4"] .chipwrap,
.stackanim svg[data-step="5"] .chipwrap{opacity:1;transform:none;}

/* Cumulative reveal: at step N everything up to .sN is in place. */
.stackanim svg[data-step="1"] :is(.s1),
.stackanim svg[data-step="2"] :is(.s1,.s2),
.stackanim svg[data-step="3"] :is(.s1,.s2,.s3),
.stackanim svg[data-step="4"] :is(.s1,.s2,.s3,.s4),
.stackanim svg[data-step="5"] :is(.s1,.s2,.s3,.s4,.s5){opacity:1;transform:none;}

/* stagger within a step so the boxes arrive one after another */
.stackanim .d1{transition-delay:0s}    .stackanim .d2{transition-delay:.10s}
.stackanim .d3{transition-delay:.20s}  .stackanim .d4{transition-delay:.30s}

@media(prefers-reduced-motion:reduce){
  .stackanim .g,.stackanim .chipwrap{transition:none;opacity:1;transform:none;}
  .stackanim .from-scale{transform:none;}
}
@media(max-width:900px){ .stackanim{padding:52px 0;} }