/* ============================================================
   Turtle Labs group site: components

   Sits on top of tl-system.css, which carries the palette, the glow, the
   type scale, the 1240px measure and the 96px rhythm ported from BrandOS.
   Only what is genuinely the parent site's own belongs here.
   ============================================================ */

:root { --accent-line: #00A86B; --bullet: #00A86B; }

/* ---- hero ------------------------------------------------------------- */

.hero { padding: clamp(56px, 9vw, 116px) 24px clamp(40px, 6vw, 72px); position: relative; z-index: 4; }
.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 56ch; }

/* The four ventures as marks, so the first screen states the portfolio. */
.ventures-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; }
.vmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
         padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line2);
         background: var(--bg2); color: var(--muted); font-size: 13px; font-weight: 600;
         transition: color .25s ease, border-color .25s ease; }
.vmark i { width: 7px; height: 7px; border-radius: 50%; background: var(--vc); flex-shrink: 0;
           box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc) 22%, transparent); }
.vmark em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .09em;
            text-transform: uppercase; color: var(--faint); }
@media (hover: hover) { .vmark:hover { color: var(--text); border-color: rgba(var(--ink),.28); } }

/* ---- figures ------------------------------------------------------------ */

.facts { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px)  { .facts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .facts-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fact { position: relative; overflow: hidden; padding: 22px 20px; border-radius: var(--r-lg);
        background: var(--bg2); border: 1px solid var(--line2);
        transition: transform .35s ease, border-color .35s ease; }
/* No bar: the figure itself is the accent, at 42px. */
@media (hover: hover) { .fact:hover { transform: translateY(-3px); border-color: rgba(var(--ink),.24); } }
.fact b { display: block; font-family: 'Outfit', sans-serif; font-weight: 800;
          font-size: clamp(30px, 4.4vw, 42px); line-height: 1; color: var(--fc);
          letter-spacing: -0.045em; }
.fact b u { text-decoration: none; }
.fact b i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700;
            letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.fact strong { display: block; font-size: 13.5px; line-height: 1.35; margin-top: 14px; color: var(--text); }
.fact > span { display: block; font-size: 12.5px; line-height: 1.45; margin-top: 6px; color: var(--faint); }
.fact-n { font-variant-numeric: tabular-nums; }

.fact-notes { margin-top: 24px; border: 1px solid var(--line2); border-radius: var(--r-md);
              background: var(--bg2); overflow: hidden; max-width: var(--measure); }
.fact-notes summary { cursor: pointer; padding: 16px 22px; font-weight: 700; font-size: 14.5px;
                      color: var(--text); list-style: none; }
.fact-notes summary::-webkit-details-marker { display: none; }
.fact-notes summary::after { content: ' +'; color: var(--muted); }
.fact-notes[open] summary::after { content: ' -'; }
.fact-notes dl { margin: 0; padding: 0 22px 22px; }
.fact-notes dt { font-weight: 700; font-size: 13.5px; color: var(--text); margin-top: 16px; }
.fact-notes dd { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ---- venture cards -------------------------------------------------------- */

.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .home-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

.card { position: relative; overflow: hidden; display: flex; flex-direction: column;
        border-radius: var(--r-xl); background: var(--bg2); border: 1px solid var(--line2);
        transition: transform .35s ease, border-color .35s ease; }
@media (hover: hover) { .card:hover { transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent); } }
.card-art { display: grid; place-items: center; height: 128px; background: var(--grad); }
.card-art span { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 40px;
                 color: var(--accent); letter-spacing: .04em; }
.card > *:not(.card-art) { margin-left: 24px; margin-right: 24px; }
.card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.card .eyebrow { margin: 0; padding: 0; font-size: 10px; }
.card .eyebrow::before { display: none; }
.status { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
          padding: 5px 11px; border-radius: 999px; }
/* A label on a tinted panel of its own colour is the easiest contrast mistake
   to make and the hardest to see coming: it looks deliberate, and it measures
   at 1.3:1. These use the ink tokens, which the theme resolves to a value
   readable against its own tint rather than a fixed hex that only ever suited
   one theme. */
.status.is-live { color: var(--tone-green-ink); background: color-mix(in srgb, var(--tone-green) 14%, transparent); }
.status.is-soon { color: var(--tone-amber-ink); background: color-mix(in srgb, var(--tone-amber) 14%, transparent); }
.card-verb { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12px;
             letter-spacing: .07em; text-transform: uppercase; color: var(--accent-ink, var(--accent));
             margin: 16px 0 6px; }
.card h3 { font-size: 21px; margin-bottom: 10px; }
.sum { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.aud { margin-top: auto; padding: 14px 0 0; font-size: 12.5px; color: var(--faint); }
.aud span { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.card-cta { padding: 16px 0 24px; font-size: 14.5px; font-weight: 700; color: var(--text);
            text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.card-cta:hover { color: var(--accent); }

/* ---- the sequence ------------------------------------------------------------ */

.steps { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 34px; }
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; overflow: hidden; display: flex; flex-direction: column;
        padding: 26px 24px; border-radius: var(--r-lg); background: var(--bg2);
        border: 1px solid var(--line2); transition: transform .35s ease, border-color .35s ease; }
.step::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
                background: linear-gradient(90deg, var(--sc), transparent 78%); opacity: .85; }
@media (hover: hover) { .step:hover { transform: translateY(-4px); border-color: rgba(var(--ink),.24); } }
.step header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.step-n { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 30px; line-height: 1;
          letter-spacing: -0.05em; color: var(--sc); opacity: .6; }
.step-yr { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
           color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.step-v { margin: 18px 0 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
          text-transform: uppercase; color: var(--sc); }
.step h3 { font-size: 19px; margin: 0 0 9px; }
.step p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; max-width: none; }
.step-cta { margin-top: auto; padding-top: 20px; font-size: 13.5px; font-weight: 700;
            color: var(--text); text-decoration: none; }
.step-cta:hover { color: var(--sc); }

/* ---- the commons ---------------------------------------------------------------- */

.commons { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px;
           grid-template-columns: 1fr; }
@media (min-width: 640px)  { .commons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .commons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.commons li { position: relative; overflow: hidden; padding: 28px 24px; border-radius: var(--r-lg);
              background: var(--bg2); border: 1px solid var(--line2);
              transition: transform .35s ease, border-color .35s ease; }
@media (hover: hover) { .commons li:hover { transform: translateY(-4px); border-color: rgba(var(--ink),.24); } }
.commons-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md);
               color: var(--cc); background: color-mix(in srgb, var(--cc) 16%, transparent);
               border: 1px solid color-mix(in srgb, var(--cc) 32%, transparent); }
.commons-ico svg { width: 23px; height: 23px; display: block; }
.commons li strong { display: block; margin: 18px 0 9px; font-family: 'Outfit', sans-serif;
                     font-size: 17.5px; line-height: 1.22; letter-spacing: -0.02em; }
.commons-body { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; }
.commons-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 30px; }
.commons-foot p { color: var(--muted); font-size: 14.5px; margin: 0; flex: 1 1 320px; }

/* ---- reading ---------------------------------------------------------------------- */

.reading { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 32px 0 26px; }
@media (min-width: 760px) { .reading { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.read-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
             padding: 26px 24px; border-radius: var(--r-lg); background: var(--bg2);
             border: 1px solid var(--line2); color: var(--text); text-decoration: none;
             transition: transform .35s ease, border-color .35s ease; }
.read-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px;
                     background: linear-gradient(180deg, var(--rc), transparent 78%); opacity: .85; }
@media (hover: hover) { .read-card:hover { transform: translateY(-4px); border-color: rgba(var(--ink),.26); } }
.read-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
            color: var(--rc-ink, var(--rc)); margin-bottom: 14px; }
.read-card strong { font-family: 'Outfit', sans-serif; font-size: 19px; line-height: 1.22;
                    letter-spacing: -0.02em; }
.read-body { color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 11px; }
.read-foot { margin-top: auto; padding-top: 20px; font-size: 12.5px; font-weight: 700; color: var(--faint); }
.read-card:hover .read-foot { color: var(--text); }

/* ---- the pathfinder ------------------------------------------------------------------- */

.pf { position: relative; margin-top: 34px; padding: clamp(26px, 3.4vw, 44px);
      border: 1px solid var(--line2); border-radius: var(--r-xl); overflow: hidden; background: var(--bg2); }
.pf-bar { height: 3px; border-radius: 999px; background: rgba(var(--ink),.10);
          margin-bottom: 32px; overflow: hidden; }
.pf-bar i { display: block; height: 100%; width: var(--w, 33%); border-radius: 999px;
            background: var(--tl-rainbow);
            transition: width .45s cubic-bezier(.4,0,.2,1); }
.pf-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.pf-step legend { display: flex; align-items: center; gap: 13px; padding: 0;
                  font-family: 'Outfit', sans-serif; font-weight: 700;
                  font-size: clamp(20px, 2.6vw, 28px); line-height: 1.2; color: var(--text);
                  letter-spacing: -0.03em; }
.pf-num { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
          border-radius: 50%; font-size: 12px; font-weight: 800;
          background: rgba(var(--ink),.08); color: var(--muted); }
.pf-hint { color: var(--faint); font-size: 13.5px; margin: 12px 0 0 43px; }
.pf-opts { display: grid; gap: 11px; grid-template-columns: 1fr; margin: 24px 0 0; }
@media (min-width: 620px) { .pf-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pf-opts.is-multi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-opt { position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
          padding: 18px 20px; border: 1px solid var(--line2); border-radius: var(--r-md);
          background: rgba(var(--ink),.02);
          transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.pf-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pf-opt-label { font-weight: 600; font-size: 15px; color: var(--text); }
.pf-opt-note { font-size: 13px; color: var(--muted); }
@media (hover: hover) { .pf-opt:hover { transform: translateY(-2px); border-color: rgba(var(--ink),.28); } }
.pf-opt:has(input:checked) { background: rgba(var(--ink),.05); border-color: var(--oc, var(--greent)); }
.pf-opt:has(input:focus-visible) { outline: 2px solid var(--greent); outline-offset: 2px; }
.pf-opt:has(input:checked)::after { content: ''; position: absolute; top: 15px; right: 15px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--oc, var(--greent)); }
.pf-nav { display: flex; gap: 10px; margin-top: 28px; }
.pf-nav button { font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
                 padding: 13px 26px; border-radius: 999px; border: 1px solid var(--line);
                 background: transparent; color: var(--text); transition: all .25s ease; }
.pf-nav .pf-next { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.pf-nav .pf-next:hover { filter: brightness(1.08); }
.pf-nav .pf-back:hover { border-color: rgba(var(--ink),.32); }
.pf-result-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
                     color: var(--faint); margin: 0 0 20px; }
.pf-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-card { position: relative; overflow: hidden; padding: 26px 24px; border: 1px solid var(--line2);
           border-radius: var(--r-lg); background: var(--bg); display: flex; flex-direction: column; }
.pf-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--tc), transparent 78%); opacity: .85; }
.pf-rank { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
           color: var(--tc); }
.pf-card h3 { font-size: 21px; margin: 11px 0 7px; }
.pf-card p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; max-width: none; }
.pf-card .pf-why { color: var(--tc); font-size: 13.5px; font-weight: 600; margin-top: 11px; }
.pf-card a { margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 700;
             color: var(--text); text-decoration: none; }
.pf-card a:hover { color: var(--tc); }
.pf-capture { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line2); }
.pf-capture > p { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px;
                  margin: 0 0 16px; letter-spacing: -0.02em; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pf-actions button { font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
                     padding: 13px 26px; border-radius: 999px; border: 1px solid var(--line); }
.pf-actions button[type=submit] { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.pf-actions .pf-restart { background: transparent; color: var(--muted); }
.pf-actions .pf-restart:hover { color: var(--text); border-color: rgba(var(--ink),.32); }
.no-js .pf-nav, .no-js .pf-bar { display: none; }
.no-js .pf-step[hidden] { display: block; }
.no-js .pf-step { margin-bottom: 36px; }
.pf-step legend[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ---- two column, bands, forms ------------------------------------------------------------ */

.two-col { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; margin-top: 30px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.05fr 1fr; gap: 56px; } }
.two-col .lede { color: var(--text); }

.cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 48px 40px;
            max-width: calc(var(--maxw) - 48px); margin: 0 auto var(--gap-section);
            background: var(--bg2); border: 1px solid var(--line2); }
.cta-band::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--tl-rainbow); }

.interest, .contactform { background: var(--bg2); border: 1px solid var(--line2);
                          border-radius: var(--r-xl); padding: 34px; max-width: 720px; margin-inline: auto; }
/* A panel carrying a form and its aside needs the width for two columns. The
   measure is there for a form on its own, and it squeezed the aside into a
   column too narrow to read. */
.interest:has(.tl-aside) { max-width: 1000px; }
.interest h3 { font-family: 'Outfit', sans-serif; font-size: 21px; margin: 0 0 10px; }
.interest-pair { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 940px) { .interest-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.interest-pair .interest { max-width: none; margin: 0; display: flex; flex-direction: column;
                           padding: 28px; height: 100%; }
.interest-pair .interest .lede { font-size: 14.5px; }
.interest-pair form { margin-top: auto; }
/* The status banner.
   It was a 999px pill, which only works while the content is one line. It
   wraps to two at every desktop width and three on a phone, and a pill radius
   on a 139px-tall box is a 69px corner: the curve eats into the text and the
   thing reads as a lozenge rather than as a notice. It takes the radius scale
   like every other block, so it is the same corner as the cards near it and
   it scales with the viewport. The badge inside it stays a pill, because that
   is one line and always will be. */
.soonbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px;
           border-radius: var(--r-md); background: color-mix(in srgb, var(--tone-amber) 10%, transparent);
           border: 1px solid color-mix(in srgb, var(--tone-amber) 24%, transparent);
           color: var(--tone-amber-ink); font-size: 14px; margin: 0 0 22px; max-width: var(--measure); }

.explore { --bullet: var(--greent); }
.offers { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 700px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offer { padding: 24px; border-radius: var(--r-lg); background: var(--bg2); border: 1px solid var(--line2); }
.offer h3 { font-size: 17px; margin: 12px 0 7px; }
.offer p { color: var(--muted); font-size: 14px; margin: 0; max-width: none; }
.kind { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
        padding: 5px 11px; border-radius: 999px; background: rgba(var(--ink),.06); color: var(--muted); }

/* ---- footer ventures --------------------------------------------------------------------- */

.foot-ventures { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
                 margin-bottom: 36px; }
@media (min-width: 860px) { .foot-ventures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fv { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 20px;
      border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--bg2);
      text-decoration: none; transition: transform .3s ease, border-color .3s ease; }
@media (hover: hover) { .fv:hover { transform: translateY(-3px); border-color: var(--fc); } }
.fv-mark { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px;
           letter-spacing: .08em; color: var(--fc-ink, var(--fc)); }
.fv-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px;
           color: var(--text); margin-top: 9px; line-height: 1.18; letter-spacing: -0.02em; }
.fv-verb { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.fv-status { margin-top: 16px; align-self: flex-start; font-size: 9.5px; font-weight: 800;
             letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.fv-status.is-live { color: var(--tone-green-ink); background: color-mix(in srgb, var(--tone-green) 14%, transparent); }
.fv-status.is-soon { color: var(--tone-amber-ink); background: color-mix(in srgb, var(--tone-amber) 14%, transparent); }

/* ---- long documents ------------------------------------------------------------------------ */

.doc { display: grid; gap: 44px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .doc { grid-template-columns: 240px 1fr; } }
.doc-nav { position: sticky; top: 92px; }
.doc-nav p { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
             color: var(--faint); margin: 0 0 12px; }
.doc-nav a { display: block; color: var(--muted); text-decoration: none; font-size: 13.5px;
             padding: 7px 14px; border-left: 2px solid var(--line2); }
.doc-nav a:hover { color: var(--text); border-color: var(--greent); }
.doc-body h2 { margin-top: 44px; }
.doc-body h2:first-child { margin-top: 0; }
.principle { padding: 28px; border-radius: var(--r-lg); background: var(--bg2);
             border: 1px solid var(--line2); margin-bottom: 14px; display: flex; gap: 24px; }
/* These were drawn at 16% of the ink, which measured 1.4:1 and read as a
   smudge rather than as a number. They carry the spectrum now: legible, and
   the colour is doing the work the opacity was failing to do. */
.num { font-family: 'Outfit', sans-serif; font-size: 34px; line-height: 1; color: var(--num-c, var(--muted));
       min-width: 52px; letter-spacing: -0.04em; }
.principle:nth-of-type(6n+1) { --num-c: var(--tone-red-ink); }
.principle:nth-of-type(6n+2) { --num-c: var(--tone-orange-ink); }
.principle:nth-of-type(6n+3) { --num-c: var(--tone-amber-ink); }
.principle:nth-of-type(6n+4) { --num-c: var(--tone-green-ink); }
.principle:nth-of-type(6n+5) { --num-c: var(--tone-cyan-ink); }
.principle:nth-of-type(6n+6) { --num-c: var(--tone-blue-ink); }
.principle h2 { font-size: 21px; margin-bottom: 9px; }
.principle p { color: var(--muted); font-size: 15px; margin: 0; }
.principles { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.principles li { padding: 20px 24px; border-radius: var(--r-md); background: var(--bg2);
                 border: 1px solid var(--line2); }
.principles strong { display: block; font-family: 'Outfit', sans-serif; font-size: 16.5px;
                     margin-bottom: 7px; letter-spacing: -0.02em; }
.principles span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.promise-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.promise-num { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12px;
               color: var(--faint); letter-spacing: .08em; }
/* A quieter block of text. It was setting the colour on the whole section,
   so a heading inside one inherited the faint grey and rendered as a grey
   headline at full size: "Challenge this" on the Useful Store Standard and
   "Cookies and tracking" on the policies. The quiet applies to the prose, not
   to the heading above it. */
.note { color: var(--faint); font-size: 13.5px; }
.note :is(h1, h2, h3, h4) { color: var(--text); font-size: revert; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

@media (max-width: 430px) {
  .interest, .contactform { padding: 22px; border-radius: var(--r-lg); }
  .cta-band { padding: 30px 22px; border-radius: var(--r-lg); }
  .pf { padding: 22px 18px; border-radius: var(--r-lg); }
  .pf-nav { flex-direction: column; }
  .pf-nav button { width: 100%; }
  .foot-call { padding: 28px 20px; }
  .foot-call .btn { width: 100%; justify-content: center; }
  .card > *:not(.card-art) { margin-left: 20px; margin-right: 20px; }
}


/* ---- the hero artwork ---------------------------------------------------
   Growth rings, which is what the headline describes. The right half of the
   hero was empty; this fills it with the one idea the page is about.

   Only transform and opacity move. A blur, a width or a box-shadow animating
   here would repaint a large element every frame, which is exactly the fault
   that halved the frame rate on the ambient layer. */

.hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; }
}
.hero-copy { min-width: 0; }

.hero-art {
  position: relative; display: none; place-items: center;
  aspect-ratio: 1; width: 100%; max-width: 350px; margin-inline: auto;
}
@media (min-width: 940px) { .hero-art { display: grid; } }

.rings { position: absolute; inset: 0; display: grid; place-items: center; }

/* Each ring carries the whole spectrum rather than one colour of it, and
   thins as it widens, so the outer rings read as the faint edge of something
   rather than six equal circles.

   A border cannot take a gradient, so the ring is a conic gradient masked to
   an annulus. The mask is static: only transform and opacity animate, which
   keeps the whole thing on the compositor. */
.rings i {
  position: absolute; display: block; width: 100%; height: 100%;
  border-radius: 50%; border: 0;
  background: conic-gradient(from 210deg,
    #C80018, #FF8C00, #FFA500, #00A86B, #0066B2, #00A3E0, #C80018);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.6px));
          mask: radial-gradient(closest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.6px));
  opacity: 0;
  transform: scale(.1);
  animation: tl-grow 14s cubic-bezier(.22,.65,.3,1) infinite;
  animation-delay: calc(var(--i) * -4.67s);
  will-change: transform, opacity;
}

/* Bright and tight at the centre, faint and wide at the edge. The fade starts
   early and keeps going, so size and faintness track each other the whole way
   rather than only at the end. */
@keyframes tl-grow {
  0%   { transform: scale(.1);  opacity: 0; }
  10%  { opacity: .9; }
  35%  { opacity: .55; }
  65%  { opacity: .26; }
  85%  { opacity: .1; }
  100% { transform: scale(1);  opacity: 0; }
}

/* A shoot at the centre: the other half of what the headline says. */
.hero-seed { position: relative; width: 58px; height: 58px; color: var(--text); opacity: .8; }

/* Motion is the point, so with it off the rings hold at staggered radii,
   still fading outward. A cross section of something that grew. */
@media (prefers-reduced-motion: reduce) {
  .rings i {
    animation: none;
    transform: scale(calc(.2 + var(--i) * .34));
    opacity: calc(.5 - var(--i) * .13);
  }
}

/* On a bright ground the same lines need to sit back a little. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rings i { filter: saturate(1.1) brightness(.92); }
}
:root[data-theme="light"] .rings i { filter: saturate(1.1) brightness(.92); }

/* The Useful Store Standard numbers its four requirements. The number is an
   ornament in its own hue rather than a character in the heading, so the
   sequence is visible before any of it is read. */
.std-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 14px; }
.std-head h2 { margin: 0; }
.std-n { font-family: 'Outfit', system-ui, sans-serif; font-weight: 900;
  font-size: clamp(26px, 3vw, 38px); line-height: 1; color: var(--tone, var(--muted)); }
.tl-spectrum-at-1 { --tone: var(--tl-crimson-ink); }
.tl-spectrum-at-2 { --tone: var(--tl-amber-ink); }
.tl-spectrum-at-3 { --tone: var(--tl-green-ink); }
.tl-spectrum-at-4 { --tone: var(--tl-blue-ink); }

/* A venture's products, on its card. Same shape as the audience line, so the
   card reads as one list of facts rather than two. */
.card-prods a { color: var(--accent-ink, var(--accent)); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.card-prods a:hover { border-bottom-color: currentColor; }