/* =====================================================================
   ti-cards-v14.css — the reveal-card pattern + ambient background.
   Brief (OT, 2026-08-12): cards show the headline only; hover or click turns
   them turquoise and reveals the detail. Plus a subtle drifting dot/glow
   background that shifts character between sections.
   Loads after ti-dark-v13.css.
   ===================================================================== */

/* ---------- ambient background ----------------------------------------
   One fixed layer behind everything. Two slow-drifting turquoise glows and
   a dot grid. The hue and position shift as sections scroll past, so the
   page feels alive without anything moving fast enough to distract. */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  transition:opacity .8s ease}
.ambient::before,.ambient::after{content:"";position:absolute;border-radius:50%;
  filter:blur(90px);opacity:.5;
  transition:background 1.2s ease, transform 1.6s cubic-bezier(.4,0,.2,1)}
.ambient::before{width:52vw;height:52vw;left:var(--amb-x1,-8vw);top:var(--amb-y1,4vh);
  background:radial-gradient(circle, rgba(53,201,164,.20), transparent 66%)}
.ambient::after{width:44vw;height:44vw;right:var(--amb-x2,-6vw);top:var(--amb-y2,52vh);
  background:radial-gradient(circle, rgba(53,201,164,.13), transparent 66%)}
.ambient .dots{position:absolute;inset:0;
  background-image:radial-gradient(rgba(150,205,225,.16) 1px, transparent 1.5px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 78%)}
@media (prefers-reduced-motion:no-preference){
  .ambient::before{animation:amb-drift-a 26s ease-in-out infinite alternate}
  .ambient::after{animation:amb-drift-b 32s ease-in-out infinite alternate}
  .ambient .dots{animation:amb-dots 40s linear infinite}
}
@keyframes amb-drift-a{to{transform:translate3d(6vw,8vh,0) scale(1.12)}}
@keyframes amb-drift-b{to{transform:translate3d(-7vw,-6vh,0) scale(1.08)}}
@keyframes amb-dots{to{background-position:30px 30px}}
/* every real section sits above the ambient layer */
body > header,body > main,body > section,body > footer,.site-head{position:relative;z-index:1}
@media (max-width:700px){.ambient::before,.ambient::after{filter:blur(70px);opacity:.42}}

/* per-section character: set by JS as sections scroll through */
body[data-amb="calm"]   .ambient::before{background:radial-gradient(circle, rgba(53,201,164,.16), transparent 66%)}
body[data-amb="warm"]   .ambient::before{background:radial-gradient(circle, rgba(95,224,191,.22), transparent 66%)}
body[data-amb="warm"]   .ambient::after{background:radial-gradient(circle, rgba(120,180,220,.12), transparent 66%)}
body[data-amb="deep"]   .ambient::before{background:radial-gradient(circle, rgba(31,143,118,.24), transparent 66%)}
body[data-amb="deep"]   .ambient .dots{opacity:.6}
body[data-amb="alert"]  .ambient::after{background:radial-gradient(circle, rgba(226,140,120,.14), transparent 66%)}

/* ---------- the reveal card -------------------------------------------
   Resting: an eyebrow, a big statement, and a quiet "more" affordance.
   Hover (pointer) or tap/click (touch, and for keyboards) flips it turquoise
   and slides the detail in. Nothing is hidden from screen readers or search:
   the detail is always in the DOM, only visually collapsed. */
.rcard{position:relative;overflow:hidden;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;min-height:210px;
  transition:background .45s cubic-bezier(.2,.7,.2,1),border-color .45s,
             transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.rcard::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(150deg,var(--green-bright),var(--green));
  transition:opacity .45s cubic-bezier(.2,.7,.2,1)}
.rcard > *{position:relative;z-index:1}
.rcard .r-eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);transition:color .45s;display:flex;
  align-items:center;gap:.5rem}
.rcard .r-ico{width:26px;height:26px;flex:none}
.rcard .r-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.rcard h3,.rcard .r-title{font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:1.24rem;letter-spacing:-.02em;line-height:1.22;margin-top:.9rem;
  transition:color .45s}
.rcard .r-body{margin-top:.85rem;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease,margin .4s;
  font-size:.92rem;line-height:1.62;color:var(--ink-dim)}
.rcard .r-body p + p{margin-top:.6rem}
.rcard .r-more{margin-top:auto;padding-top:1.1rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.45rem;transition:color .45s,opacity .35s}
.rcard .r-more svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .45s}

/* open state — hover on a real pointer, or .is-open from a tap/keyboard */
@media (hover:hover){
  .rcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.45)}
  .rcard:hover::after{opacity:1}
  .rcard:hover .r-eyebrow,.rcard:hover .r-title,.rcard:hover h3,
  .rcard:hover .r-body,.rcard:hover .r-more{color:#06121b}
  .rcard:hover .r-body{max-height:22rem;opacity:1}
  .rcard:hover .r-more svg{transform:translateX(3px)}
}
.rcard.is-open{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.rcard.is-open::after{opacity:1}
.rcard.is-open .r-eyebrow,.rcard.is-open .r-title,.rcard.is-open h3,
.rcard.is-open .r-body,.rcard.is-open .r-more{color:#06121b}
.rcard.is-open .r-body{max-height:22rem;opacity:1}
.rcard:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px}

/* on touch the hover state never fires, so show a clearer tap affordance */
@media (hover:none){
  .rcard .r-more::after{content:"tap";margin-left:.2rem}
}

/* grid wrappers */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem}
.rgrid-3{grid-template-columns:repeat(3,1fr)}
.rgrid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.rgrid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.rgrid-3{grid-template-columns:1fr}}
@media (max-width:600px){.rgrid-4{grid-template-columns:1fr}}

/* step-numbered variant (the build weeks) */
.rcard .r-step{font-family:var(--serif);font-weight:800;font-size:2.1rem;line-height:1;
  color:var(--green);letter-spacing:-.03em;transition:color .45s}
.rcard.is-open .r-step{color:#06121b}
@media (hover:hover){.rcard:hover .r-step{color:#06121b}}
.rcard .r-step small{display:block;font-family:var(--mono);font-size:.6rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;margin-top:.35rem;opacity:.85}

/* verdict variant (when not to buy) keeps a coloured tag at rest */
.rcard .r-tag{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.3rem .65rem;border-radius:999px;font-weight:600;
  background:rgba(53,201,164,.14);color:var(--green-bright);border:1px solid var(--line-green);
  transition:background .45s,color .45s,border-color .45s}
.rcard.is-open .r-tag{background:rgba(6,18,27,.16);color:#06121b;border-color:rgba(6,18,27,.28)}
@media (hover:hover){.rcard:hover .r-tag{background:rgba(6,18,27,.16);color:#06121b;border-color:rgba(6,18,27,.28)}}
.rcard.warn .r-tag{background:rgba(226,140,120,.16);color:#e2917c;border-color:rgba(226,140,120,.34)}

@media (prefers-reduced-motion:reduce){
  .rcard,.rcard::after,.rcard .r-body{transition:none}
}

/* ---------- dashboards page specifics (v14.1) -------------------------- */
/* the door label deserved more presence */
.eyebrow-lg{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:.01em;
  text-transform:none;color:var(--green);display:inline-flex;align-items:center;gap:.6rem;
  margin-bottom:1.2rem}
.eyebrow-lg::before{content:"";width:26px;height:2px;background:var(--green);border-radius:2px}

/* the qualifier under the lede: present but quiet */
.lede-note{margin-top:.9rem;max-width:50ch;font-size:.9rem;line-height:1.6;
  color:var(--muted);padding-left:.9rem;border-left:2px solid var(--line-green)}

/* the tool row now spans the price strip below it, no label, bigger marks */
.tools-wide{margin-top:1.8rem;display:flex;gap:.6rem;width:100%}
.tools-wide .tool{flex:1 1 0;justify-content:center;padding:.7rem .6rem;font-size:.9rem;
  border-radius:12px}
.tools-wide .tool img{width:22px;height:22px}
@media (max-width:520px){.tools-wide{flex-wrap:wrap}.tools-wide .tool{flex:1 1 40%}}

/* closing CTA: serif scale-up plus a slow breathing glow behind it */
.cta-band h2{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.025em}
.cta-band h2 em{color:var(--green-bright)}
@media (prefers-reduced-motion:no-preference){
  .cta-band::after{content:"";position:absolute;left:50%;top:38%;width:44vw;height:44vw;
    transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(53,201,164,.14), transparent 62%);
    filter:blur(60px);animation:cta-breathe 7s ease-in-out infinite alternate}
}
@keyframes cta-breathe{from{opacity:.55;transform:translate(-50%,-50%) scale(.94)}
                       to{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.cta-band .cta{position:relative;z-index:1}

/* mock: two small charts side by side, deliberately not a wall of them */
.dash-charts{display:grid;grid-template-columns:1.35fr 1fr;gap:.55rem;margin-top:.7rem}
.dash-charts .dc{background:var(--navy2);border:1px solid #223146;border-radius:8px;padding:.55rem .6rem}
.dash-charts .dc-lbl{display:block;font-family:var(--mono);font-size:.46rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7787a0;margin-bottom:.4rem}
.dash-charts .dc-lbl b{color:#8fd0ac;font-weight:700}
.dash-charts .dash-bars{margin-top:0;height:44px}
.dc-line{width:100%;height:44px;display:block}
.dc-line .f{fill:url(#dcfill)}
.dc-line .l{fill:none;stroke:#5fe0bf;stroke-width:2;stroke-linecap:round}
.dc-line circle{fill:#5fe0bf}
@media (max-width:620px){.dash-charts{grid-template-columns:1fr}}
/* cards look better slightly shorter at rest */
.rcard{min-height:196px}

/* ── MOBILE AUDIT 2026-08-20 ───────────────────────────────────────────────
   The reveal lived only in @media (hover:hover), so on a phone all eleven
   cards rendered as near-empty boxes and 1,653 characters — the entire
   argument of the dashboards page — were invisible until tapped, cued by
   9.92px grey text. Nobody taps eleven boxes to read a services page.
   On a touch device there is no reason to hide it: show the body, drop the
   cue. The tap-to-open handler still works, it just has nothing left to do. */
@media (hover:none){
  .rcard .r-body{max-height:none;opacity:1;overflow:visible}
  .rcard .r-more{display:none}
}