/* ================================================================
   sections/inner-annual.css
   The dark "Pricing" section shared by the five inner pages
   (/about, /solutions, /projects, /legal/privacy-policy,
    /legal/terms-of-service).

   SOURCES
   - DOM: research/fragments/<page>/desktop-inner-annual.html
          research/raw/tablet/about.html  (data-framer-name="Tablet inner - Annual")
          research/raw/phone/about.html   (data-framer-name="Phone - Annual")
   - CSS: *** NOT _stylesheet.css *** — that file only carries the HOME
     page's generated rules. Every value below was extracted from the
     inline <style> blocks of research/raw/<bp>/about.html with
     scratchpad/pagecss.mjs, or read off an inline style on the element
     (those are called out with "inline" in a comment).
   - Colours come from tokens.css. Framer's inline var() fallbacks are
     STALE and are never used.

   ------------------------------------------------------------------
   THREE VARIANTS -> THREE SLUGS
   ------------------------------------------------------------------
     .annual__v--desktop  data-section="desktop-inner-annual"
     .annual__v--tablet   data-section="tablet-inner-annual"
     .annual__v--phone    data-section="phone-annual"

   Default ranges (about / solutions / projects):
     desktop >=1440 | tablet 810..1439.98 | phone <=809.98
   `.annual--legal` moves the desktop/tablet boundary to 1200px, which
   is the only difference between the two page groups.

   ------------------------------------------------------------------
   HEIGHT MATH
   ------------------------------------------------------------------
   DESKTOP variant — the reference sets NO height on the component; the
   page container does:  .framer-zrtat1-container { height: 100vh }
   and the component is height:100% inside it. So:
       height: 100vh
         @1440x900  -> 900   == reference-heights.json ✔
         @1280x832  -> 832   == legal laptop value      ✔  (never hard-coded)
   Its own bands are percentages of that box and deliberately overflow
   by ~1% (the component clips them with overflow:hidden):
       subheader        15%   135.0 @900
       hairline          1px    1.0
       header+toggle    15%   135.0
       descriptions     21%   189.0
       prices           25%   225.0  (min 200)
       cta              25%   225.0  (min 200)
                            --------
                             910.0  -> clipped to the 900px box

   TABLET variant — the reference DOES fix it:
     .framer-v-1cloj21.framer-1rkyy8v { width:810px; height:1000px }
       subheader        150
       hairline           1
       header+toggle    150
       descriptions     210   (.framer-vnnb8j / .framer-1w3mj11 = 210)
       prices           250   (.framer-fol8n)
       cta              239   (.framer-t7o224)
                       -----
                        1000  == reference-heights.json ✔

   PHONE variant — also fixed:
     .framer-v-1uu5kgk.framer-1rkyy8v { width:390px; height:704px }
       header+toggle    150   (.framer-xckj5g height:150, band min-height 140)
       prices           396.4 = left 132.8 + right 263.6, where one tier is
                               1px hairline + 130.8 numbers
                               (12*1.6 + 16 gap + 48*0.9 + 4 gap + 16*1.4
                                + 26 padding-bottom = 130.8; min-height 120
                                never binds)
       cta              157   (40 pad-top + 57 button + 60 pad-bottom,
                               max-height 160)
                       -----
                        703.4 of content inside the 704px box ✔

   ------------------------------------------------------------------
   REFERENCE CLASS MAP  (framer-* -> mine)
   ------------------------------------------------------------------
     1rkyy8v (header root)                     -> .annual__v
     1nah8ke-container                         -> .annual__noise
     fb8kh6 / 78n1rc / 1bfn140 / fol8n / t7o224-> .annual__band--sub / --head
                                                  / --desc / --tiers / --cta
     xqnafu / xckj5g / 1iq2abc / hb3hr / mziw2d -> .annual__inner
     5yf42a / 1tu63wu / 1mcd7k7 / jnezbv / zz20oe -> .annual__hr
     ius4tx 1ofdluq l08u7f 6gjma8 4ufzbw uzkvxr tt13rf aci4oi viqmoh
       8dm3cp u9q9s8 1xyg3vk 1lzqeyw 79us8u 1hhf17m 2ms5wm 1hcd1r0
       1qerr69 1nw3pht                         -> .vline.annual__line--solid
     1p1ztxh y5ve1a 1lwlcap 18nnvf5 beht9k 4refqb -> .annual__line--dash
     1iq6neq 15ragek 8mjxjv o3lcru 176casu     -> .annual__line--peach
     6gjma8 (200px tall)                       -> .annual__line--200
     1kompkm                                   -> .annual__sub
     e9d2ql                                    -> .annual__badge-wrap
     m1kzbt-container                          -> .annual__badge-slot
     b0u62f («End» / «Start»)                  -> .annual__badge / --start
     1foe6yk                                   -> .annual__badge-chip
     1xl96v2                                   -> .annual__badge-text
     1tfw7ah / y02iln                          -> .annual__two
     1bt10vg / 1bb12g4                         -> .annual__cell--topsplit
     226gws                                    -> .annual__head
     p585ml                                    -> .annual__title
     1n5dvhm                                   -> .annual__title-rtc
     1nlbs5q                                   -> .annual__headinfo
     q0kiiu ay9a17 izsngs vconzl 1irh4sa 1sopwfm lrrohw 17w35ec
       1v2amt6 pl0jwr                          -> .annual__cell
     33uezp / 1415jwp / 1jr1jez                -> .annual__cell--split
     1e7ydjh                                   -> .annual__cell--start
     11sii4f                                   -> .annual__nav
     1ijq0jd                                   -> .annual__pills
     1lula4-container / 18v7fil-container      -> .annual__pill-slot--annual
                                                  / --monthly
     97ybt0 («Small active» / «Small white»)   -> .annual__pill (+ .is-active)
     uir41j                                    -> .annual__pill-edge
     wczuex                                    -> .annual__pill-face
     1mijxxk                                   -> .annual__pill-box
     or8lqq                                    -> .annual__pill-text
     1dgtxb8 («+»)                             -> .annual__plus
     vnnb8j                                    -> .annual__desc-first
     1w3mj11 / 1ossp1z                         -> .annual__stack
     k8hgt2 / hq4hed / dbe4v7                  -> .annual__row
     1wmc4yi                                   -> .annual__colstack
     s57m6z                                    -> .annual__cta-left
     zs1kov / 1jxa1x7 / 1q18syp                -> .annual__tier-head
     12jkdc/n6pys8/s6l8rz-container            -> .annual__icon-slot
     1sarcq7 («Basic»/«Grouth»/«Extended»)     -> .annual__icon
     wyukh7                                    -> .annual__icon-box
     cndxxt / 1u7gz9z / 1qpgsbw                -> .annual__icon-svg--basic
                                                  / --growth / --extended
     era1mn / 1mohozf / 1hrv88z                -> .annual__tier-desc
     fn4v8z / fnmeem / 1bi96h3                 -> .annual__tier-desc-rtc
     1lsar0t / 3e4wc3 / 14vyggz                -> .annual__numbers
     m1fy8 / cauc96                            -> .annual__pkg
     jh1gzh                                    -> .annual__pkg--tagged
     8h3mv0 / pfzde                            -> .annual__pkg-name
     1wbcrbn                                   -> .annual__pkg-name--auto
     vmr5q3                                    -> .annual__pkg-tag
     mzdjnx / ngxopb / wfpomj («Ann»)          -> .annual__price[annual]
     1oh6p09 / 1a97qq / 1dt5d3y («Mon»)        -> .annual__price--mon[monthly]
     j3t6qk 1tk0pg0 j7b4ns dyy1k8 b0jhwa 1e1tbop -> .annual__price-amount
     xdvqwe dhrhxa 1vpm8bl 1p4it8j 19tsj0x 17o5tuj -> .annual__price-per
     61jozr / x2plwx / 14wd5ym                 -> .annual__list
     7f5l5s 1mkmrre 1wae0zx hzcbpl o8a2re …    -> .annual__li
     bqfmn0 1j9e8s9 jphpbs 12kfhi3 …           -> .annual__li-chev
     4r7dmf 4hbzsr fkvgd9 1qzmp0q …            -> .annual__li-text
     v8ybhj xcaz0m 17iz0qq 1t27xx4 …           -> .annual__li-rtc
     nciot4 / 1ampzix                          -> .annual__btn-cell
     32w4c3 / 1jqsbb0 / 11fg0bd                -> .annual__btn-slot
     rvcf2n/aqdcdp/1e2fzzr-container           -> .annual__btn-wrap
     dmce0u («White» / «Orange»)               -> .annual__btn--white / --orange
     arvcc7                                    -> .annual__btn-edge
     11s5zvh                                   -> .annual__btn-face
     1bvuks0                                   -> .annual__btn-box
     1u59t22                                   -> .annual__btn-icon
     o6g4ji                                    -> .annual__btn-text

   DELIBERATE DEVIATIONS (both layout-neutral)
   1. The monthly price block («Mon», .framer-1oh6p09) is parked
      off-canvas in the reference (position:absolute; bottom:26px;
      left:-416px) so it is out of flow. We use `display:none` instead —
      also out of flow, identical geometry — because it has to be
      swappable by the toggle.
   2. On phone the reference puts the inner hairline after the price cell
      and pulls it back with `order:0`. We emit it in visual order and
      drop the `order`. Same rendering.
   ================================================================ */

/* ---------------------------------------------------------------
   0. Outer wrapper + variant visibility
   --------------------------------------------------------------- */
.annual {
  width: 100%;
  flex: none;
}

.annual__v {
  /* display is set per breakpoint below — never here */
  flex-flow: column;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: 100%;                              /* inline style on <header> */
  padding: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--c-graphite);      /* inline: --token-75803f96 */
}

.annual__v { display: none; }

/* .framer-zrtat1-container { height:100vh } x header{height:100%} */
.annual__v--desktop { height: 100vh; }
/* .framer-v-1cloj21.framer-1rkyy8v { height:1000px } */
.annual__v--tablet  { height: 1000px; }
/* .framer-v-1uu5kgk.framer-1rkyy8v { height:704px } */
.annual__v--phone   { height: 704px; }

@media (min-width: 1440px)                           { .annual__v--desktop { display: flex; } }
@media (min-width: 810px) and (max-width: 1439.98px) { .annual__v--tablet  { display: flex; } }
@media (max-width: 809.98px)                         { .annual__v--phone   { display: flex; } }

/* legal pages keep the desktop variant down to 1200px */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .annual--legal .annual__v--desktop { display: flex; }
  .annual--legal .annual__v--tablet  { display: none; }
}

/* ---------------------------------------------------------------
   1. Grain overlay — the only animated element (preset "zoom")
   --------------------------------------------------------------- */
.annual__noise {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  z-index: 7;
  flex: none;
  position: absolute;
  inset: 0;
}
/* inline: width:100%;height:100%;position:relative;overflow:hidden */
.annual__noise-clip {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
/* inline: background url(...); opacity:.05; inset:-200%; 400%x400%;
   transform: translateX(-6%) translateY(23.5%) */
.annual__noise-img {
  background-image: url("/assets/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png");
  opacity: .05;
  inset: -200%;
  width: 400%;
  height: 400%;
  position: absolute;
  /* Frozen capture transform = reduced-motion / paused rest state. Live
     (probed 2026-08-19 on /legal/privacy-policy): this layer DRIFTS in hard
     ~90ms steps (34 distinct transforms in 3s) — the shared 90-step/8s
     grain walk from footer.css. */
  transform: translateX(-6%) translateY(23.5%);
  animation: grain-drift 8s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .annual__noise-img { animation: none; }
}

/* ---------------------------------------------------------------
   2. Bands + content container
   --------------------------------------------------------------- */
.annual__band {
  z-index: 10;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 0 var(--page-pad-desktop);       /* 32px */
  position: relative;
  overflow: visible;
}
.annual__band--sub   { z-index: 4; height: 15%; }
.annual__band--head  { height: 15%; }
.annual__band--desc  { height: 21%; }
.annual__band--tiers,
.annual__band--cta   { height: 25%; min-height: 200px; }

.annual__inner {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  max-width: var(--page-max);               /* 1520px */
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* ---------------------------------------------------------------
   3. Rules (vertical + horizontal). `.vline` (base.css) paints the
      border from the --border-* custom properties.
   --------------------------------------------------------------- */
.annual__line {
  height: 100%;
  width: 1px;
  flex: none;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__line--200 { height: 200px; }       /* .framer-6gjma8 */

.annual__hr {
  height: 1px;
  width: 100%;
  z-index: 3;
  flex: none;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}

.annual__line--solid {
  --border-top-width: 1px;  --border-right-width: 1px;
  --border-bottom-width: 1px; --border-left-width: 1px;
  --border-style: solid;
  --border-color: var(--c-graphite-lt);     /* #3d3b3b, token 4ee0dd8d */
}
.annual__line--dash {
  --border-top-width: 3px;  --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-graphite-lt);
}
.annual__line--peach {
  --border-top-width: 3px;  --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-peach-75);        /* #e68c55bf, token 776822a6 */
}

/* ---------------------------------------------------------------
   4. Generic flex cells
   --------------------------------------------------------------- */
.annual__cell {
  height: 100%;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-end flex-start;
  align-items: flex-end;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__cell--split    { place-content: flex-end space-between; }
.annual__cell--topsplit { place-content: flex-start space-between; align-items: flex-start; }
.annual__cell--start    { place-content: flex-start; align-items: flex-start; overflow: visible; }

.annual__two {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.annual__stack {
  display: flex;
  flex-flow: column;
  flex: 2 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.annual__colstack {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.annual__row {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 1px;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* ---------------------------------------------------------------
   5. Subheader band — the orange "cost" badge
   --------------------------------------------------------------- */
.annual__sub {
  height: 100%;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 8px;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__badge-wrap {
  height: min-content;
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  position: absolute;
  bottom: 24px;
  left: 0;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__badge-slot { flex: none; width: auto; height: auto; position: relative; }
.annual__badge {
  height: min-content;
  display: flex;
  flex-flow: row;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: min-content;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__badge-chip {
  height: 31px;
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  padding: 0 10px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  background-color: var(--c-orange);        /* inline: --token-42ebc297 */
}
.annual__badge-text {
  justify-content: center;
  white-space: pre;
  flex: none;
  width: auto;
  height: auto;
  position: relative;
}
/* tablet variant «Start»: the chip is parked off-canvas and clipped */
.annual__badge--start { min-width: 65px; min-height: 31px; }
.annual__badge--start .annual__badge-chip {
  height: unset;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -124px;
}

/* ---------------------------------------------------------------
   6. Header band — "Pricing" + the annual/monthly pills
   --------------------------------------------------------------- */
.annual__head {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-end flex-start;
  align-items: flex-end;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
.annual__title {
  z-index: 2;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 370px;
  height: min-content;
  padding: 0;
  position: absolute;
  top: -7px;
  left: -1px;
  overflow: visible;
}
.annual__title-rtc {
  z-index: 1;
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
}

.annual__headinfo {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.annual__nav {
  height: min-content;
  z-index: 2;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: flex-end flex-start;
  align-items: flex-end;
  gap: 10px;
  width: 50%;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__pills {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start flex-end;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__pill-slot {
  z-index: 1;
  flex: 1 0 0;
  width: 1px;
  height: 45px;
  position: relative;
}
.annual__pill {
  cursor: pointer;
  height: 100%;                             /* inline height:100%;width:100% */
  width: 100%;
  display: flex;
  flex-flow: row;
  place-content: center;
  align-items: center;
  gap: 10px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
/* the reference marks the ACTIVE pill's container pointer-events:none */
.annual__pill.is-active { pointer-events: none; }
.annual__pill-edge {
  z-index: 1;
  flex: none;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  overflow: visible;
  background-color: var(--c-orange);        /* inline on both variants */
  transition: width .25s var(--ease-spring0), left .25s var(--ease-spring0);
}
.annual__pill-face {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 1px;
  height: 100%;
  padding: 0 16px;                          /* .framer-v-j6239o .framer-wczuex */
  position: relative;
  overflow: visible;
}
/* «Small active» = graphite face, «Small white» = white face (inline) */
.annual__pill.is-active .annual__pill-face      { background-color: var(--c-graphite); }
.annual__pill:not(.is-active) .annual__pill-face { background-color: var(--c-white); }
/* only the inactive (white) variant has a hover in the reference */
.annual__pill:not(.is-active):hover .annual__pill-edge,
.annual__pill:not(.is-active):focus-visible .annual__pill-edge { width: 100%; left: 0; }

.annual__pill-box {
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: visible;
}
.annual__pill-text {
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  white-space: pre;
  flex: none;
  width: auto;
  height: auto;
  position: relative;
}

.annual__plus {
  z-index: 3;
  flex: none;
  width: 15px;
  height: 15px;
  position: absolute;
  top: -8px;
  left: -7px;
}
.annual__plus svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------
   7. Descriptions band — icon + one-line tier blurb
   --------------------------------------------------------------- */
.annual__desc-first {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
.annual__tier-head {
  height: 100%;
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 26px;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__icon-slot { flex: none; width: auto; height: auto; position: relative; }
.annual__icon {
  height: min-content;
  display: flex;
  flex-flow: row;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__icon-box {
  aspect-ratio: 1;
  height: var(--framer-aspect-ratio-supported, 57px);
  width: 57px;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  background-color: var(--c-graphite-lt);   /* inline: --token-4ee0dd8d */
}
.annual__icon-svg { position: relative; flex: none; }
.annual__icon-svg svg { width: 100%; height: 100%; }
.annual__icon-svg--basic    { width: 25px; height: 21px; }  /* .framer-cndxxt  */
.annual__icon-svg--growth   { width: 35px; height: 14px; }  /* .framer-1u7gz9z */
.annual__icon-svg--extended { width: 37px; height:  8px; }  /* .framer-1qpgsbw */

.annual__tier-desc {
  max-width: 170px;
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__tier-desc-rtc {
  z-index: 1;
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
  text-wrap: balance;                       /* --framer-text-wrap-override */
}

/* Framer splits these headings into per-word inline-block spans; keeping
   them preserves the measured line breaks. */
.annual .split-words > span { display: inline-block; }

/* ---------------------------------------------------------------
   8. Prices band
   --------------------------------------------------------------- */
.annual__numbers {
  height: 100%;
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start flex-end;
  align-items: flex-start;
  gap: 16px;
  width: 1px;
  padding: 0 0 26px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__pkg {
  max-width: 180px;
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__pkg--tagged { gap: 8px; }          /* .framer-jh1gzh */
.annual__pkg-name,
.annual__pkg-tag {
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
}
.annual__pkg-name--auto { white-space: pre; flex: none; width: auto; }
.annual__pkg-name p { color: var(--c-white); }   /* inline: --token-5c6d233d */
.annual__pkg-tag  p { color: var(--c-orange); }  /* inline: --token-42ebc297 */

.annual__price {
  height: min-content;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__price--mon { z-index: 1; }
.annual__price-amount,
.annual__price-per {
  justify-content: center;
  flex: none;
  width: 100%;
  height: auto;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
}
.annual__price-amount p,
.annual__price-per p { color: var(--c-white); }  /* inline: --token-5c6d233d */

/* --- toggle: slide the period that is not selected out of frame ---------
   `data-price-state` is written by js/main.js onto [data-price-group]
   (the outer .annual). The captured DOM ships in the annual state.

   MEASURED live 2026-08-18 (Playwright, real mouse click on the "monthly"
   pill, computed style sampled every rAF on the home pricing section, which
   is the same Framer component as this one): the swap is a SLIDE, not a
   cross-fade or an instant swap. The outgoing «Ann» panel travels out to the
   right by one panel width (416px at 1440) while «Mon» comes in from the
   left, over ~423ms with a ~1.5% overshoot; the dark chip in the pill pair
   slides one pill width over ~438ms. Both clips already exist in this file —
   `.annual__numbers` and `.annual__price` are both overflow:clip, exactly as
   the reference's "Numbers" / "Ann" boxes are.

   The old instant `display: none` swap is replaced by putting BOTH price
   panels in the SAME grid cell of `.annual__numbers`. They stay in flow, so
   the column is still exactly one price panel high — the display:none
   height, unchanged — and nothing is absolutely positioned. The flex column
   is restated as an equivalent grid: `place-content: flex-start flex-end` on
   a column is "pack rows at the bottom" (`align-content: end`) and the 16px
   gap and 26px bottom padding are untouched.

   Pure CSS off the existing attribute swap: projects/index.html shares this
   markup and belongs to another agent, so nothing here may need a wrapper. */
.annual__numbers {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: min-content;
  align-content: end;
}
.annual__pkg   { grid-row: 1; grid-column: 1; }
.annual__price {
  grid-row: 2; grid-column: 1;
  transition: transform 423ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-price-state="annual"]  .annual__price[data-price-period="monthly"] { transform: translateX(-100%); }
[data-price-state="monthly"] .annual__price[data-price-period="annual"]  { transform: translateX(100%); }
[data-price-state="annual"]  [data-price-period="monthly"],
[data-price-state="monthly"] [data-price-period="annual"]  { pointer-events: none; }

/* The dark chip becomes a sliding indicator on the pill track instead of a
   per-button background swap, so it can travel between the two slots. Rest
   state is pixel-identical: the track carries the white the inactive face
   used to paint, `::before` carries the graphite of the active face, and both
   faces go transparent. `.annual__pill-slot` is z-index 1, so the indicator
   (z-index auto on the track) stays behind both faces and behind the orange
   `.annual__pill-edge` hover, which is left exactly as it was. */
.annual__pills { background-color: var(--c-white); }
.annual__pills::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
  background-color: var(--c-graphite);
  transition: transform 438ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-price-state="monthly"] .annual__pills::before { transform: translateX(100%); }
.annual__pill.is-active .annual__pill-face,
.annual__pill:not(.is-active) .annual__pill-face { background-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .annual__price, .annual__pills::before { transition: none; }
}

/* ---------------------------------------------------------------
   9. Feature lists (desktop variant only)
   --------------------------------------------------------------- */
.annual__list {
  height: min-content;
  z-index: 1;
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  width: 1px;
  padding: 0 0 26px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__li {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__li-chev {
  justify-content: center;
  flex: none;
  width: 13px;
  height: 20px;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
}
/* inline on the <p>: Geist Mono 500 / 15px / line-height 64px / uppercase */
.annual__li-chev p {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  line-height: 64px;
  text-transform: uppercase;
  color: var(--c-orange);                   /* inline: --token-42ebc297 */
}
.annual__li-text {
  max-width: 180px;
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__li-rtc {
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
}
.annual__li-rtc p { color: var(--c-grey); } /* inline: --token-5635c8bc #9e9e9e */

/* ---------------------------------------------------------------
   10. CTA band
   --------------------------------------------------------------- */
.annual__cta-left {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 10px;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
.annual__btn-cell {
  height: 100%;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__btn-slot {
  height: 50%;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-end center;
  align-items: flex-end;
  gap: 10px;
  width: 1px;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__btn-wrap { z-index: 1; flex: 1 0 0; width: 1px; height: 57px; position: relative; }

.annual__btn {
  cursor: pointer;
  height: 100%;                             /* inline height:100%;width:100% */
  width: 100%;
  display: flex;
  flex-flow: row;
  place-content: center;
  align-items: center;
  gap: 10px;
  padding: 0;
  text-decoration: none;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__btn-edge {
  z-index: 1;
  flex: none;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  overflow: visible;
}
.annual__btn-face {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
/* inline background-colors on «White» / «Orange» */
.annual__btn--white  .annual__btn-edge { background-color: var(--c-orange); }
.annual__btn--white  .annual__btn-face { background-color: var(--c-white); }
.annual__btn--orange .annual__btn-edge { background-color: var(--c-white); }
.annual__btn--orange .annual__btn-face { background-color: var(--c-orange); }

.annual__btn-box {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.annual__btn-icon { width: 12px; height: 12px; position: absolute; top: 3px; left: -26px; }
.annual__btn-icon svg { width: 100%; height: 100%; }
.annual__btn-text {
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  white-space: pre;
  flex: none;
  width: auto;
  height: auto;
  position: relative;
}
/* ---- hover (mouse only) — .framer-v-dmce0u.hover / .framer-v-1oeudqr.hover
   Same component and same spring as .btn-dark (see the long note in
   help.css and the timing measurement in base.css § 5b): the `-edge`
   sliver sweeps across as a scaleX, the centred `-box` grows 22px on
   its left so the label slides 11px right, and the `-icon` rides out
   of its parked left:-26px slot.

   Per-variant label swap, measured on the live reference:
     «White»  face white,  fill orange — label black -> WHITE
     «Orange» face orange, fill white  — label white -> BLACK
   The swap is instantaneous on the reference (the sampler's very first
   frame after pointerenter already reports the new colour), so no
   colour transition is declared here.
   ------------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .annual__btn-edge {
    width: calc(100% + 1px);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .annual__btn:hover .annual__btn-edge,
  .annual__btn:focus-visible .annual__btn-edge {
    transform: scaleX(1);
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }

  .annual__btn-box {
    z-index: 1;
    transition: padding-left var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .annual__btn:hover .annual__btn-box,
  .annual__btn:focus-visible .annual__btn-box {
    padding-left: 22px;
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }

  .annual__btn-icon {
    transition: transform var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .annual__btn:hover .annual__btn-icon,
  .annual__btn:focus-visible .annual__btn-icon {
    transform: translateX(26px);
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }

  /* The label is `<span class="rtc annual__btn-text"><span class="t-mono">`,
     and `.t-mono` carries its own `color`, so colouring the outer span alone
     does nothing — the swap has to reach the `.t-mono` itself. */
  .annual__btn--white:hover  .annual__btn-text,
  .annual__btn--white:focus-visible  .annual__btn-text,
  .annual__btn--white:hover  .annual__btn-text .t-mono,
  .annual__btn--white:focus-visible  .annual__btn-text .t-mono { color: var(--c-white); }
  .annual__btn--orange:hover .annual__btn-text,
  .annual__btn--orange:focus-visible .annual__btn-text,
  .annual__btn--orange:hover .annual__btn-text .t-mono,
  .annual__btn--orange:focus-visible .annual__btn-text .t-mono { color: var(--c-black); }
}

/* ================================================================
   TABLET VARIANT — .framer-v-1cloj21 overrides
   ================================================================ */
.annual__v--tablet .annual__band--sub,
.annual__v--tablet .annual__band--head            { height: 150px; }
.annual__v--tablet .annual__title                 { max-width: 250px; }
.annual__v--tablet .annual__nav                   { width: 100%; }

.annual__v--tablet .annual__band--desc,
.annual__v--tablet .annual__band--desc .annual__inner,
.annual__v--tablet .annual__band--tiers .annual__inner,
.annual__v--tablet .annual__cell--start,
.annual__v--tablet .annual__cell--start .annual__tier-head { height: min-content; }

.annual__v--tablet .annual__desc-first,
.annual__v--tablet .annual__band--desc .annual__stack,
.annual__v--tablet .annual__cell--start > .annual__line    { height: 210px; }

.annual__v--tablet .annual__band--tiers           { height: 250px; min-height: unset; }
.annual__v--tablet .annual__colstack              { align-self: stretch; height: auto; }
/* .framer-hq4hed only — the LEFT part's row; .framer-dbe4v7 stays a row */
.annual__v--tablet .annual__colstack .annual__row { flex-direction: column; }
.annual__v--tablet .annual__colstack .annual__cell   { width: 100%; height: 1px; }
.annual__v--tablet .annual__band--tiers .annual__stack { height: 250px; }

.annual__v--tablet .annual__band--cta             { height: 239px; min-height: unset; }

/* ================================================================
   PHONE VARIANT — .framer-v-1uu5kgk overrides
   ================================================================ */
.annual__v--phone .annual__band--head {
  height: min-content;
  min-height: 140px;
  padding: 0 var(--page-pad-phone);         /* 26px */
}
.annual__v--phone .annual__band--head .annual__inner { height: 150px; }
/* top from CSS; the translateY is an inline style on .framer-p585ml in the
   phone fragment ("transform: translateY(-50%)") — it centres the 32px
   heading on the 47% line. Transform-only, so it cannot move a height. */
.annual__v--phone .annual__title      { top: 47%; transform: translateY(-50%); }
.annual__v--phone .annual__headinfo   { flex: 1 0 0; }
.annual__v--phone .annual__cell--split {
  place-content: center flex-end;
  align-items: center;
  gap: 0;
  height: min-content;
}
/* .framer-4ufzbw { order:2; height:150px } */
.annual__v--phone .annual__line--200  { order: 2; height: 150px; }
.annual__v--phone .annual__nav {
  right: unset;
  top: unset;
  flex: 1 0 0;
  order: 1;
  justify-content: center;
  width: 1px;
  position: relative;
}

.annual__v--phone .annual__band--tiers {
  height: min-content;
  min-height: unset;
  padding: 0 var(--page-pad-phone);
}
.annual__v--phone .annual__band--tiers .annual__inner {
  height: min-content;
  max-width: unset;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
}
.annual__v--phone .annual__colstack,
.annual__v--phone .annual__stack { flex: none; width: 100%; height: min-content; }
.annual__v--phone .annual__row   { flex-direction: column; flex: none; height: min-content; }
.annual__v--phone .annual__band--tiers .annual__cell {
  flex: none;
  width: 100%;
  height: min-content;
  min-height: 120px;                        /* .framer-pl0jwr */
}
.annual__v--phone .annual__numbers { height: min-content; min-height: 120px; }

/* every rule in the stacked tiers / CTA stretches to its cell */
.annual__v--phone .annual__band--tiers .annual__line,
.annual__v--phone .annual__band--cta .annual__line { align-self: stretch; height: auto; }

.annual__v--phone .annual__band--cta {
  height: min-content;
  max-height: 160px;
  min-height: unset;
  padding: 0 var(--page-pad-phone);
}
.annual__v--phone .annual__band--cta .annual__inner {
  height: min-content;
  max-width: unset;
  align-content: flex-start;
  align-items: flex-start;
}
.annual__v--phone .annual__band--cta .annual__two      { flex: 1 0 0; height: min-content; }
.annual__v--phone .annual__btn-cell                    { height: min-content; }
.annual__v--phone .annual__btn-slot                    { height: min-content; padding: 40px 0 60px; }

/* phone draws every dashed rule at 2px instead of 3px */
.annual__v--phone .annual__line--dash,
.annual__v--phone .annual__line--peach {
  --border-top-width: 2px;  --border-right-width: 2px;
  --border-bottom-width: 2px; --border-left-width: 2px;
}

/* ================================================================
   Reduced motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .annual__pill-edge,
  .annual__btn-edge { transition: none !important; }
}