/* ==========================================================================
   REAP INTEGRITY DESIGN KIT: "Field and Root"            v1  2026-10-12
   One stylesheet for every public page. Visual reference: /WEBSITE-DESIGN-2026/design-kit.php

   HOW TO USE
     <head>  <?php include __DIR__ . '/shared/fr-head.php'; ?>   (fonts, icons, this file)
     <body>  <?php include __DIR__ . '/shared/fr-nav.php'; ?>
             <div class="fr"> ...page content using fr-* classes... </div>
             <?php include __DIR__ . '/shared/fr-footer.php'; ?>

   RULES THAT NEVER BEND
     1. Text is >= 4.5:1 on whatever is behind it. Use only the text pairs in the table below.
     2. No rgba() or opacity on text. Solid tokens only.
     3. Light greens (spring, teal) are fills, rules and shapes. As text they are legal ONLY on forest.
     4. No sharp corners. Buttons are pills, portraits are circles, photos have curved edges.
     5. No icon-in-a-circle rows, no repeated white cards. Hairline rows and full-bleed panels.

   TEXT PAIRS (measured)                              ratio
     ink-900  #231F1B on bone  #F3EDE4                14.1
     ink-600  #4A443C on bone  #F3EDE4                 8.3
     ink-600  #4A443C on bone2 #E9DFD1                 7.3
     accent   #0A4F4B on bone  #F3EDE4                 8.1
     cream-50 #F4F0E8 on forest #0A2E2C               12.8
     cream-300 #BFD6D1 on forest #0A2E2C               9.6
     cream-300 #BFD6D1 on forest-end #0B4A45           6.6
     spring-light #5ED3CB on forest #0A2E2C            8.1
     spring-light #5ED3CB on forest-end #0B4A45        5.6
     forest-ink #0A2E2C on spring #1BAAA2              5.1
     ink-900 #231F1B on tint #D6EEEC                  12.6
   ========================================================================== */

/* ---------- TOKENS ---------- */
.fr, .fr-chrome{
  /* surfaces */
  --bone:#F3EDE4; --bone2:#E9DFD1; --paper:#FBF8F2;
  --forest:#0A2E2C; --forest-mid:#0A3A36; --forest-end:#0B4A45;
  /* text */
  --ink:#231F1B; --ink2:#4A443C; --accent:#0A4F4B;
  --cream:#F4F0E8; --cream3:#BFD6D1; --cream5:#8FB8B1;
  /* the logo's gradient: use as fills, rules, shapes */
  /* v1.1 10/12: the pastel mint (#51C8A7) read as "mint chocolate chip". Lead green is now the logo's
     own crisp teal #19A9A0 family. Token names kept so pages do not change. */
  --spring:#1BAAA2; --spring-light:#5ED3CB; --teal:#0F8C86; --deep:#0B635F;
  --tint:#D6EEEC; --tint2:#C4E6E3;
  --grad-line:linear-gradient(90deg,#0A4F4B 0%,#0B635F 40%,#1BAAA2 100%);
  --grad-forest:linear-gradient(160deg,#0A2E2C 0%,#0A3A36 55%,#0B4A45 100%);
  /* lines */
  --line:rgba(35,31,27,.16); --line-d:rgba(244,240,232,.22);
  /* type */
  --disp:'Cabinet Grotesk',sans-serif; --body:'General Sans',sans-serif;
  /* shape */
  --r-pill:999px; --r-tile:14px; --r-photo:34px; --r-panel:52px; --r-panel-m:32px;
  /* space */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
}

/* ---------- BASE ---------- */
.fr{background:var(--bone);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
.fr *,.fr *::before,.fr *::after{box-sizing:border-box}
.fr h1,.fr h2,.fr h3{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;line-height:.99;color:var(--ink)}
.fr h1{font-size:clamp(2.6rem,5vw,4.5rem)}
.fr h2{font-size:clamp(1.9rem,3.4vw,3rem);max-width:18ch}
.fr h3{font-size:1.4rem;font-weight:500}
.fr .fr-q{color:var(--accent)}                       /* the emphasised half of a headline */
.fr .fr-lede{color:var(--ink2);font-size:1.04rem;line-height:1.6;max-width:460px;margin-top:20px}
.fr .fr-eyebrow{font-family:var(--disp);font-weight:500;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.fr .fr-wrap{max-width:1340px;margin:0 auto;padding:0 44px}
.fr .fr-sec{padding:var(--s6) 0}
.fr .fr-sec-sm{padding:68px 0}
.fr .fr-alt{background:var(--bone2)}                 /* a quieter band on bone */

/* ---------- BUTTONS ---------- */
.fr .fr-btn{font-family:var(--disp);font-weight:500;font-size:.9rem;padding:13px 28px;border-radius:var(--r-pill);text-decoration:none;display:inline-block;transition:background .18s,color .18s}
.fr .fr-btn-solid{background:var(--forest);color:var(--cream)}
.fr .fr-btn-solid:hover{background:#0d3b38}
.fr .fr-btn-cream{background:var(--cream);color:var(--forest)}
.fr .fr-btn-spring{background:var(--spring);color:var(--forest)}
.fr .fr-btn-line,.fr .fr-btn-ghost{border-radius:0;padding:13px 2px;border-bottom:1px solid currentColor}
.fr .fr-btn-line{color:var(--ink)}
.fr .fr-btn-ghost{color:var(--cream)}
.fr .fr-ctas{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* ---------- CHIPS ---------- */
/* CREDITS ON THE HORIZON (replaces chips, which read as generic). Gradient line with a drop marker (the logo's leaf)
   at each milestone, labels hanging below. Wrap the logo strip in .fr-logos. Chips below are retired, kept only so
   old markup does not break. Do not use them on new pages. */
.fr .fr-credits{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0 22px;margin-top:34px}
.fr .fr-credits::before{content:"";position:absolute;left:0;right:0;top:14px;height:3px;background:var(--grad-line)}
.fr .fr-credits>div{position:relative;padding-top:42px}
.fr .fr-credits>div::before{content:"";position:absolute;left:0;top:8px;width:15px;height:15px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--forest);box-shadow:0 0 0 4px var(--bone)}
.fr .fr-credits>div::after{content:"";position:absolute;left:7px;top:23px;width:1px;height:12px;background:var(--line)}
.fr .fr-credits b{display:block;font-family:var(--disp);font-weight:500;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink)}
.fr .fr-credits span{display:block;font-size:.86rem;color:var(--ink2);margin-top:3px;line-height:1.4}
.fr .fr-logos{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.fr .fr-logos small{width:100%;font-size:.8rem;color:var(--ink2)}
.fr .fr-logos img{height:24px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(1) brightness(.25) contrast(1.2)}
@media(max-width:980px){
  .fr .fr-credits{grid-template-columns:1fr;gap:22px 0;padding-left:0}
  .fr .fr-credits::before{left:7px;right:auto;top:8px;bottom:14px;width:3px;height:auto;background:linear-gradient(180deg,#0A4F4B 0%,#0B635F 45%,#1BAAA2 100%)}
  .fr .fr-credits>div{padding:0 0 0 38px}
  .fr .fr-credits>div::before{top:3px}
  .fr .fr-credits>div::after{display:none}
}
.fr .fr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.fr .fr-chips span{display:inline-flex;align-items:center;gap:8px;font-size:.83rem;font-weight:600;color:#fff;background:var(--deep);border-radius:var(--r-pill);padding:8px 15px}
.fr .fr-chips i{color:#9FE3DC}

/* ---------- HAIRLINE ROWS (instead of cards) ---------- */
.fr .fr-rows{margin-top:46px;border-top:1px solid var(--line)}
.fr .fr-row{display:grid;grid-template-columns:.4fr 1fr auto;gap:28px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.fr .fr-row b{font-family:var(--disp);font-weight:500;font-size:1.2rem;letter-spacing:-.02em}
.fr .fr-row p{color:var(--ink2);font-size:.99rem}
.fr .fr-row i{font-style:normal;font-family:var(--disp);font-size:.72rem;color:var(--accent);letter-spacing:.1em}
.fr .fr-beats{margin-top:34px;border-top:1px solid var(--line)}
.fr .fr-beat{padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--disp);font-weight:500;font-size:1.02rem;color:var(--ink)}

/* ---------- THE HORIZON + ROOTS (signature device, from the logo) ---------- */
.fr .fr-horizon{height:3px;background:var(--grad-line);position:relative}
.fr .fr-hmark{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:32px;height:32px;display:grid;place-items:center}
.fr .fr-hmark img{width:26px;height:26px}
.fr .fr-roots{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line)}
.fr .fr-root{padding:22px 10px 26px;text-align:center;border-right:1px solid var(--line);position:relative}
.fr .fr-root:last-child{border-right:0}
.fr .fr-root::before{content:'';position:absolute;top:0;left:50%;width:1px;height:13px;background:var(--line)}
.fr .fr-root i{font-size:1.05rem;color:var(--deep);display:block;margin-bottom:9px}
.fr .fr-root b{display:block;font-family:var(--disp);font-weight:500;font-size:.86rem;letter-spacing:-.01em}
.fr .fr-root span{display:block;font-size:.73rem;color:var(--ink2);margin-top:3px}

/* ---------- HERO ---------- */
.fr .fr-hero{display:grid;grid-template-columns:1fr 1fr;min-height:74vh;background:linear-gradient(100deg,var(--bone) 0%,var(--bone) 48%,var(--tint2) 100%)}
.fr .fr-hero-copy{padding:88px 58px 88px 44px;max-width:760px;margin-left:auto;align-self:center}
.fr .fr-hero-copy .fr-lede{margin:26px 0 34px}
.fr .fr-hero-stage{position:relative;margin:30px 0}
.fr .fr-hero-stage .fr-hero-photo{margin:0;height:100%}
.fr .fr-hero-phone{position:absolute;right:6%;bottom:-70px;width:min(340px,50%);transform:rotate(3deg);filter:drop-shadow(0 30px 40px rgba(35,31,27,.4));z-index:2}
.fr .fr-hero-stage{margin-bottom:84px}
.fr .fr-hero-photo{min-height:560px;overflow:hidden;border-top-left-radius:260px;border-bottom-left-radius:260px;margin:30px 0}
.fr .fr-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:28% center;filter:saturate(.93) sepia(.08);display:block}

/* ---------- SPLIT (media beside copy) ---------- */
.fr .fr-split{display:grid;grid-template-columns:1fr 1fr;gap:66px;align-items:center}
.fr .fr-flip .fr-s-media{order:2}
.fr .fr-s-media{display:flex;justify-content:center;min-width:0}

/* ---------- STAGES (numbered mechanism band) ---------- */
.fr .fr-stages{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);position:relative}
.fr .fr-stages::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-line)}
.fr .fr-stage{padding:30px 26px 34px;border-right:1px solid var(--line)}
.fr .fr-stage:last-child{border-right:0}
.fr .fr-stage em{font-style:normal;font-family:var(--disp);font-weight:500;font-size:.78rem;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:12px}
.fr .fr-stage b{font-family:var(--disp);font-weight:500;font-size:1.5rem;display:block;letter-spacing:-.02em}
.fr .fr-stage p{color:var(--ink2);font-size:.94rem;line-height:1.5;margin-top:7px}

/* ---------- FOREST PANEL (dark, rounded, gradient) ---------- */
.fr .fr-deep{background:var(--grad-forest);color:var(--cream);padding:112px 0;border-radius:var(--r-panel);margin:0 18px}
.fr .fr-deep h2,.fr .fr-deep h3{color:var(--cream)}
.fr .fr-deep .fr-lede{color:var(--cream3)}
.fr .fr-deep .fr-eyebrow{color:var(--spring-light)}
.fr .fr-deep .fr-beats{border-top:1px solid var(--line-d)}
.fr .fr-deep .fr-beat{border-bottom:1px solid var(--line-d);color:var(--cream)}
.fr .fr-closing{background:var(--grad-forest);color:var(--cream);text-align:center;padding:118px 0;border-radius:var(--r-panel) var(--r-panel) 0 0;margin:0}
.fr .fr-closing h2{color:var(--cream);font-size:clamp(2.1rem,4.4vw,3.8rem);margin:0 auto;max-width:18ch}
.fr .fr-closing .fr-ctas{justify-content:center;margin-top:38px}
/* bezeled phone image (made with iphone-16-mockups/compose-mockup.js): transparent corners, no clipping needed */
.fr .fr-hub-stage img{width:min(360px,72vw);display:block;margin:52px auto 0}
.fr .fr-hub-beats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-d);margin-top:56px}
.fr .fr-hub-beats span{padding:20px 24px 22px;border-right:1px solid var(--line-d);border-top:2px solid var(--spring);margin-top:-1px;font-family:var(--disp);font-weight:500;font-size:1rem;color:var(--cream)}
.fr .fr-hub-beats span:last-child{border-right:0}

/* ---------- TABS (connected applications) ---------- */
.fr .fr-tabs{display:grid;grid-template-columns:.78fr 1fr;gap:56px;align-items:center;margin-top:52px}
.fr .fr-tablist{display:flex;flex-direction:column}
.fr .fr-tab{display:flex;align-items:center;gap:15px;text-align:left;background:transparent;border:0;border-top:1px solid var(--line);padding:17px 8px;cursor:pointer;font-family:var(--body);width:100%}
.fr .fr-tablist .fr-tab:last-child{border-bottom:1px solid var(--line)}
/* tab marker: the logo's leaf drop replaces the icon tile (icon tiles read as generic). Icons stay in markup but are hidden. */
.fr .fr-tab::before{content:"";flex:0 0 auto;width:13px;height:13px;margin:0 6px 0 4px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid var(--deep);background:transparent;transition:.18s}
.fr .fr-tab i{display:none}
.fr .fr-tab b{font-family:var(--disp);font-weight:500;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);display:block}
.fr .fr-tab span{display:block;font-size:.84rem;color:var(--ink2);margin-top:2px}
.fr .fr-tab:hover::before{background:var(--tint2)}
.fr .fr-tab.fr-on::before{background:var(--spring);border-color:var(--deep)}
.fr .fr-tab.fr-on b{color:var(--accent)}
.fr .fr-stage-box{display:flex;justify-content:center;align-items:center;min-height:560px}
.fr .fr-p-panel{display:none;width:100%;justify-content:center}
.fr .fr-p-panel.fr-on{display:flex;animation:frfade .4s ease}
@keyframes frfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* emulators inside a panel: show the device only */
.fr .fr-p-panel .fe-copywrap,.fr .fr-p-panel .fe-ctl,.fr .fr-p-panel .fe-dots,
.fr .fr-p-panel .be-copywrap,.fr .fr-p-panel .be-ctl,.fr .fr-p-panel .be-dots,
.fr .le-copywrap,.fr .le-ctl,.fr .le-dots{display:none!important}
.fr .fr-p-panel .fa-emu .fe-stage,.fr .fr-p-panel .book-emu .be-stage{min-height:0!important;padding:0!important;gap:0!important}
.fr .fr-p-panel .fe-phone,.fr .fr-p-panel .be-phone{width:min(300px,86vw)!important;margin:0 auto}
.fr .fr-p-panel .bud-demo{margin:0 auto}
.fr .fr-p-panel .fit-demo{margin:0 auto;background:#0a0e16;border-radius:32px;padding:22px 18px;width:300px;overflow:hidden;box-shadow:0 30px 70px rgba(16,24,40,.26)}
.fr .fr-p-panel .fit-demo *{max-width:100%}
.fr .fr-p-panel .fa-emu,.fr .fr-p-panel .fa-emu .fe-scene,.fr .fr-p-panel .fa-emu .fe-view{color:#F5F7F6}
.fr .fr-p-panel .fa-emu .ma-name,.fr .fr-p-panel .fa-emu .as-title,.fr .fr-p-panel .fa-emu .fp-title{color:#F5F7F6!important}
.fr .la-emu{margin:0 auto;max-width:100%}
.fr .la-emu .le-stage{min-height:0!important;padding:0!important;gap:0!important;flex-direction:column}
.fr .la-emu .le-phone{width:min(368px,88vw)!important;margin:0 auto}

/* ---------- PAIRED SCREENSHOTS ---------- */
.fr .fr-pair{display:grid;grid-template-columns:1fr 1fr;gap:54px;margin-top:48px}
.fr .fr-pair figure{margin:0}
.fr .fr-pair img{width:100%;max-width:270px;display:block;margin:0 auto 20px;border-radius:26px;box-shadow:0 26px 60px rgba(35,31,27,.16)}
.fr .fr-pair b{display:block;font-family:var(--disp);font-weight:500;font-size:1.1rem;text-align:center}
.fr .fr-pair p{color:var(--ink2);font-size:.95rem;text-align:center;margin-top:5px;line-height:1.5}
.fr .fr-deep .fr-pair b{color:var(--cream)}
.fr .fr-deep .fr-pair p{color:var(--cream3)}
.fr .fr-deep .fr-pair img{max-width:228px;box-shadow:0 26px 60px rgba(0,0,0,.34)}

/* ---------- FOUNDER / PORTRAIT ---------- */
.fr .fr-founder{display:grid;grid-template-columns:.62fr 1fr;gap:60px;align-items:start}
.fr .fr-founder>img{width:100%;max-width:330px;aspect-ratio:1/1;object-fit:cover;border-radius:50%;display:block}
.fr .fr-founder p{color:var(--ink2);font-size:1.03rem;line-height:1.68;margin-bottom:18px}
.fr .fr-founder p b{color:var(--ink);font-weight:600}

/* ---------- QUOTES ---------- */
.fr .fr-quotes{display:grid;grid-template-columns:1fr 1fr;gap:0 54px;margin-top:46px}
.fr .fr-quotes blockquote{margin:0;padding:30px 0;border-top:2px solid var(--spring)}
.fr .fr-quotes blockquote:nth-child(even){border-top-color:var(--teal)}
.fr .fr-quotes q{font-family:var(--disp);font-weight:400;font-size:1.3rem;line-height:1.34;letter-spacing:-.02em;color:var(--ink);quotes:"\201C" "\201D"}
.fr .fr-quotes cite{display:block;font-style:normal;margin-top:16px}
.fr .fr-quotes cite b{display:block;font-family:var(--disp);font-weight:500;font-size:.95rem;color:var(--ink)}
.fr .fr-quotes cite span{display:block;font-size:.84rem;color:var(--ink2);margin-top:2px}

/* ---------- STORIES (Option A): forest feature panel, big result tiles, marked quotes ---------- */
.fr .fr-qm{font-family:var(--disp);font-weight:700;line-height:.7;background:linear-gradient(135deg,#0B635F,#1BAAA2 60%,#5ED3CB);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.fr .fr-qm.sm{font-size:4.2rem;height:40px;margin-bottom:8px}
.fr .fr-feature{background:var(--grad-forest);border-radius:var(--r-panel);padding:60px 56px 48px;margin-top:40px;max-width:none}
.fr .fr-feature .fr-qm{font-size:9rem;height:88px;margin-bottom:-6px;background-image:linear-gradient(135deg,#1BAAA2,#5ED3CB)}
.fr .fr-quotes blockquote .fr-qm.sm + q{quotes:none}
.fr .fr-pull{font-family:var(--disp);font-weight:400;font-size:clamp(1.65rem,3.1vw,2.5rem);line-height:1.16;letter-spacing:-.03em;color:var(--cream);max-width:26ch}
.fr .fr-by{margin-top:28px;display:flex;align-items:center;gap:16px}
.fr .fr-by::before{content:"";width:46px;height:3px;border-radius:3px;background:var(--grad-line);flex:0 0 auto}
.fr .fr-by b{display:block;font-family:var(--disp);font-weight:500;font-size:1rem;color:var(--cream)}
.fr .fr-by span{display:block;font-size:.88rem;color:var(--cream3);margin-top:2px}
.fr .fr-story{margin-top:14px}
.fr .fr-story summary{cursor:pointer;list-style:none;color:var(--accent);font-family:var(--disp);font-weight:500;font-size:.95rem}
.fr .fr-story summary::-webkit-details-marker{display:none}
.fr .fr-story summary::after{content:" +"}
.fr .fr-story[open] summary::after{content:" \2212"}
.fr .fr-story p{margin-top:12px;color:var(--ink);font-size:1rem;line-height:1.65;max-width:62ch}
.fr .fr-story p b{font-weight:600}
.fr .fr-feature .fr-story{margin-top:22px}
.fr .fr-feature .fr-story summary{color:var(--spring-light);display:inline-block;border-bottom:1px solid var(--spring-light);padding-bottom:3px}
.fr .fr-feature .fr-story p{color:var(--cream);max-width:64ch}
.fr .fr-cases{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;margin-top:46px;align-items:start}
.fr .fr-case{border-top:3px solid var(--spring);padding:22px 0 14px}
.fr .fr-case:nth-child(even){border-top-color:var(--teal)}
.fr .fr-case:has(details[open]){grid-column:1/-1}
.fr .fr-big{font-family:var(--disp);font-weight:400;font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.02;letter-spacing:-.04em;color:var(--accent)}
.fr .fr-res{margin-top:10px;font-family:var(--disp);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.fr .fr-case h3{margin-top:12px;font-family:var(--body);font-size:.98rem;font-weight:400;line-height:1.45;letter-spacing:0;color:var(--ink)}
.fr .fr-quotes blockquote{border-top:0;padding-top:6px}
@media(max-width:980px){
  .fr .fr-feature{padding:44px 26px 36px;border-radius:var(--r-panel-m);margin-top:28px}
  .fr .fr-feature .fr-qm{font-size:7rem;height:66px}
  .fr .fr-cases{grid-template-columns:1fr;margin-top:30px}
  .fr .fr-case{padding:20px 0 14px}
}

/* ---------- OFFERS ---------- */
.fr .fr-offers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:50px;border-top:1px solid var(--line)}
.fr .fr-off{padding:32px 28px 28px;border-right:1px solid var(--line);border-top:3px solid transparent;margin-top:-1px}
.fr .fr-off:last-child{border-right:0}
.fr .fr-off:nth-child(1){border-top-color:var(--spring)}
.fr .fr-off:nth-child(2){border-top-color:var(--teal)}
.fr .fr-off:nth-child(3){border-top-color:var(--deep)}
/* DESCENDING OFFERS (replaces three equal columns): each option hangs from the horizon like a root, and sits
   deeper than the last. Add class fr-descend to .fr-offers. Markup is unchanged. */
.fr .fr-offers.fr-descend{position:relative;gap:0 40px;margin-top:64px;border-top:0}
.fr .fr-offers.fr-descend::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-line)}
.fr .fr-offers.fr-descend .fr-off{position:relative;border:0;margin:0;padding:48px 8px 30px 34px}
.fr .fr-offers.fr-descend .fr-off:nth-child(2){padding-top:98px}
.fr .fr-offers.fr-descend .fr-off:nth-child(3){padding-top:148px}
.fr .fr-offers.fr-descend .fr-off::before{content:"";position:absolute;left:0;top:-6px;width:15px;height:15px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--forest);box-shadow:0 0 0 4px var(--bone)}
.fr .fr-offers.fr-descend .fr-off::after{content:"";position:absolute;left:7px;top:9px;bottom:0;width:1px;background:var(--line)}
.fr .fr-offers.fr-descend .fr-off p{min-height:0}
@media(max-width:980px){
  .fr .fr-offers.fr-descend{margin-top:34px}
  .fr .fr-offers.fr-descend::before{display:none}
  .fr .fr-offers.fr-descend .fr-off,.fr .fr-offers.fr-descend .fr-off:nth-child(2),.fr .fr-offers.fr-descend .fr-off:nth-child(3){padding:2px 0 34px 34px;border-bottom:0}
  .fr .fr-offers.fr-descend .fr-off::before{top:4px}
  .fr .fr-offers.fr-descend .fr-off::after{top:18px}
}
.fr .fr-off .fr-price{font-family:var(--disp);font-size:.9rem;color:var(--accent);margin-top:7px}
.fr .fr-off p{color:var(--ink2);font-size:.94rem;line-height:1.55;margin:15px 0 24px;min-height:70px}

/* ---------- FORMS (shape rules for any page with inputs) ---------- */
.fr input[type=text],.fr input[type=email],.fr input[type=tel],.fr select,.fr textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-tile);padding:13px 16px;width:100%}
.fr input:focus,.fr select:focus,.fr textarea:focus{outline:2px solid var(--spring);outline-offset:1px}
.fr label{font-family:var(--disp);font-weight:500;font-size:.88rem;color:var(--ink)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .fr .fr-wrap{padding:0 22px}
  .fr .fr-sec,.fr .fr-deep{padding:64px 0}
  .fr .fr-hero{grid-template-columns:1fr;min-height:0}
  .fr .fr-hero-copy{padding:54px 22px 38px;margin:0;max-width:none}
  .fr .fr-hero-stage{margin:0 22px 120px}
  .fr .fr-hero-stage .fr-hero-photo{margin:0;border-radius:36px;height:56vh;min-height:360px}
  .fr .fr-hero-phone{left:auto;right:-8px;bottom:-96px;width:min(262px,70%);transform:rotate(3deg)}
  .fr .fr-roots{grid-template-columns:repeat(2,1fr)}
  .fr .fr-root{border-bottom:1px solid var(--line)}
  .fr .fr-stages{grid-template-columns:1fr}
  .fr .fr-stage{border-right:0;border-bottom:1px solid var(--line)}
  .fr .fr-split,.fr .fr-tabs,.fr .fr-pair,.fr .fr-founder{grid-template-columns:1fr;gap:34px}
  .fr .fr-flip .fr-s-media{order:-1}
  .fr .fr-stage-box{min-height:0}
  .fr .fr-row{grid-template-columns:1fr;gap:5px}
  .fr .fr-row i{display:none}
  .fr .fr-quotes{grid-template-columns:1fr}
  .fr .fr-offers{grid-template-columns:1fr}
  .fr .fr-off{border-right:0;border-bottom:1px solid var(--line)}
  .fr .fr-hub-beats{grid-template-columns:1fr}
  .fr .fr-hub-beats span{border-right:0;border-bottom:1px solid var(--line-d)}
  .fr .fr-deep{margin:0 10px}
  .fr .fr-deep{border-radius:var(--r-panel-m)}
  .fr .fr-closing{border-radius:var(--r-panel-m) var(--r-panel-m) 0 0}
  /* phone: tighter vertical rhythm */
  .fr .fr-sec{padding:48px 0}
  .fr .fr-deep{padding:52px 0}
  .fr .fr-closing{padding:68px 0}
  .fr .fr-rows,.fr .fr-quotes,.fr .fr-offers,.fr .fr-tabs{margin-top:28px}
  .fr .fr-hub-stage img{margin-top:30px}
  .fr .fr-hub-beats{margin-top:32px}
  .fr .fr-lede{margin-top:14px}
  .fr .fr-hero-copy .fr-lede{margin:18px 0 26px}
}
/* phone tabs as an accordion (build.php script moves each demo under its own tab) */
.fr .fr-tabs.fr-acc .fr-stage-box{display:none}
.fr .fr-tabs.fr-acc .fr-p-panel{padding:6px 0 30px}
.fr .fr-tabs.fr-acc .fr-tablist{border-bottom:1px solid var(--line)}
.fr .fr-tabs.fr-acc .fr-tablist .fr-tab:last-child{border-bottom:0}
.fr .fr-tabs.fr-acc .fr-tab::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:rotate(45deg);transition:transform .2s}
.fr .fr-tabs.fr-acc .fr-tab.fr-on::after{transform:rotate(-135deg)}

/* ==========================================================================
   CHROME: nav + footer (markup lives in shared/fr-nav.php and shared/fr-footer.php)
   ========================================================================== */
.fr-chrome{font-family:var(--body)}
/* the nav wrapper must not box the sticky nav in (a sticky element only sticks inside its parent) */
.fr-chrome-nav{display:contents}
.fr-nav{position:sticky;top:0;z-index:100;background:var(--bone);border-bottom:1px solid var(--line)}
.fr-nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:68px}
.fr-nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.fr-nav-logo img{width:34px;height:34px;border-radius:9px}
.fr-nav-logo span{font-family:var(--disp);font-weight:700;font-size:1.1rem;color:var(--ink)}
.fr-nav-links{display:flex;align-items:center;gap:30px}
.fr-nav-links a{font-size:.875rem;font-weight:500;color:var(--ink);text-decoration:none}
.fr-nav-links a:hover{color:var(--accent)}
.fr-nav-links a.fr-nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--forest);color:var(--cream);padding:10px 22px;border-radius:var(--r-pill);font-family:var(--disp);font-weight:500}
.fr-nav-links a.fr-nav-cta:hover{background:#0d3b38;color:var(--cream)}
.fr-nav-burger{display:none;background:none;border:0;color:var(--ink);font-size:1.25rem;padding:8px;cursor:pointer}
.fr-nav-menu{display:none;padding:18px 24px;border-top:1px solid var(--line);background:var(--bone)}
.fr-nav-menu.open{display:block}
.fr-nav-menu a{display:block;padding:12px 0;font-size:.95rem;font-weight:500;color:var(--ink);text-decoration:none}
.fr-nav-menu a.fr-nav-cta{display:flex;justify-content:center;margin-top:12px;padding:14px 24px;background:var(--forest);color:var(--cream);border-radius:var(--r-pill)}
@media(max-width:768px){.fr-nav-links{display:none}.fr-nav-burger{display:block}}

/* position+z-index lifts the footer above any fixed page-background layer (build.php has one at z-index 0) */
.fr-foot{background:var(--forest);color:var(--cream);padding:80px 0 0;position:relative;z-index:1}
.fr-foot-grid{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.fr-foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-family:var(--disp);font-weight:700;font-size:1.1rem;color:var(--cream)}
.fr-foot-brand img{width:38px;height:38px;border-radius:11px}
.fr-foot-desc{color:var(--cream3);font-size:.88rem;line-height:1.7;max-width:360px}
.fr-foot-h{font-family:var(--disp);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--cream);margin-bottom:14px}
.fr-foot-links a{display:block;color:var(--cream3);font-size:.88rem;padding:5px 0;text-decoration:none}
.fr-foot-links a:hover{color:var(--cream)}
.fr-foot-bottom{border-top:1px solid var(--line-d);padding:24px 0;text-align:center}
.fr-foot-bottom p{color:var(--cream3);font-size:.82rem}
@media(max-width:900px){.fr-foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){.fr-foot-grid{grid-template-columns:1fr}}