@font-face { font-family: "IBM Plex Sans"; src: url("/landing-v5/assets/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/landing-v5/assets/fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/landing-v5/assets/fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/landing-v5/assets/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/landing-v5/assets/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* triangl.ai landing page
   The rules are in the order they were built: base layout first, then later blocks that
   refine it (light palette, Tree section, cost panels, capture box, brand kit, phone layout, motion).
   Where two rules set the same property, the later one wins. Each block starts with a comment.
   Tokens: --ink #101211, --paper #F2F3ED, --lime #DDF27E; olive #576614, olive deep #414B19. */
:root{--ink:#101211;--paper:#F2F3ED;--lime:#DDF27E;--soft:rgba(242,243,237,.72);--line:rgba(242,243,237,.16);--e:cubic-bezier(.05,.7,.1,1)}
html{scroll-behavior:smooth}
body{margin:0;background:#101211}
.pg{font-family:"IBM Plex Sans",system-ui,sans-serif;color:var(--paper);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;background:#101211;overflow-x:clip}
.pg *,.pg *::before{box-sizing:border-box}
.pg [hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-left:clamp(20px,5vw,48px);padding-right:clamp(20px,5vw,48px)}
.pg a{color:inherit}
.pg :focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar: part of the gradient, not a separate strip */
.top{position:absolute;left:0;right:0;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:500;font-size:19px;letter-spacing:-.015em;text-decoration:none;min-height:44px}
.top-cta{font-size:15px;font-weight:500;text-decoration:none;padding:10px 0;border-bottom:1px solid rgba(242,243,237,.4)}
.top-cta:hover{border-color:var(--lime);color:var(--lime)}

/* hero: fills the screen */
.hero{position:relative;min-height:min(86svh,760px);display:flex;align-items:center;background:
  radial-gradient(50% 34% at 6% 60%,rgba(87,102,20,.45) 0%,rgba(87,102,20,0) 100%),
  radial-gradient(46% 32% at 96% 48%,rgba(69,76,44,.7) 0%,rgba(69,76,44,0) 100%),
  linear-gradient(180deg,#101211 0%,#151812 34%,#2B311F 66%,#4B5530 88%,#5A6530 100%)}
.hero .wrap{width:100%;padding-top:112px;padding-bottom:72px;display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.hero h1{margin:0;font-size:clamp(34px,5vw,68px);font-weight:600;letter-spacing:-.04em;line-height:1.04;text-wrap:balance;max-width:12em}
.hero .sub{margin:0;font-size:clamp(17px,1.7vw,22px);color:var(--soft);max-width:30em}
.box{width:100%;max-width:700px;margin-top:24px;background:#FBFBF8;color:var(--ink);border-radius:14px;padding:8px;text-align:left;box-shadow:0 2px 4px rgba(0,0,0,.3),0 60px 120px -30px rgba(0,0,0,.8);transition:box-shadow .2s}
.box:focus-within{box-shadow:0 0 0 3px rgba(221,242,126,.7),0 60px 120px -30px rgba(0,0,0,.8)}
.box textarea{display:block;width:100%;border:0;background:transparent;resize:none;min-height:96px;padding:16px 16px 8px;font:18px/1.45 "IBM Plex Sans",sans-serif;color:var(--ink);outline:none}
.box textarea::placeholder{color:rgba(16,18,17,.5)}
.box-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;padding:6px 6px 6px 18px}
.box-row span{font-size:14px;color:rgba(16,18,17,.64)}
.go{height:46px;padding:0 22px;border:0;border-radius:8px;background:var(--ink);color:var(--paper);font:600 16px "IBM Plex Sans",sans-serif;cursor:pointer;transition:background .15s,transform .15s}
.go:hover{background:#2B311F}
.go:active{transform:scale(.98)}
.box button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.echo{margin:0;padding:16px 18px 0;font-size:18px;line-height:1.45}
.back{margin:0 0 6px 18px;padding:10px 0;border:0;background:none;color:#576614;font:500 14px "IBM Plex Sans",sans-serif;text-decoration:underline;cursor:pointer}
.bk-cal{border-top:1px solid rgba(16,18,17,.12);padding:18px;display:grid;gap:12px}
.bk-cal h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.bk-cal p{margin:0;font-size:14px;color:rgba(16,18,17,.7)}
.bk-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bk-day{min-height:60px;border-radius:8px;border:1px solid rgba(16,18,17,.14);background:#FBFBF8;font:13px/1.2 "IBM Plex Sans",sans-serif;color:rgba(16,18,17,.7);cursor:pointer}
.bk-day b{display:block;font-size:18px;font-weight:600;color:var(--ink)}
.bk-day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:rgba(242,243,237,.72)}
.bk-day[aria-pressed="true"] b{color:var(--paper)}
.bk-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bk-slot{min-height:46px;border-radius:8px;border:1px solid rgba(16,18,17,.14);background:#FBFBF8;font:500 15px "IBM Plex Sans",sans-serif;color:var(--ink);cursor:pointer}
.bk-slot:hover{background:#ECEEE4}
.bk-slot[aria-pressed="true"]{background:var(--lime);border-color:var(--lime)}
.bk-go{min-height:50px;border-radius:8px;border:0;background:var(--ink);color:var(--paper);font:600 16px "IBM Plex Sans",sans-serif;width:100%;cursor:pointer}
.bk-go[disabled]{opacity:.4;cursor:not-allowed}
.bk-done{display:none;gap:8px}
.bk-done.on{display:grid}
.bk-done strong{font-size:20px;font-weight:600;letter-spacing:-.02em}
.bk-frame{width:100%;height:700px;border:0;background:#FBFBF8}
.who{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:15px;line-height:1.4;color:var(--soft);text-align:left;max-width:520px}
.who strong{color:var(--paper);font-weight:600}
.tph{position:relative;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(242,243,237,.14) 0 10px,rgba(242,243,237,.05) 10px 20px),#3A4126;display:flex;align-items:flex-end;justify-content:center}
.tph span{margin:0 0 12px;padding:3px 8px;border-radius:4px;background:rgba(16,18,17,.7);font-size:12px;font-weight:500;color:var(--paper)}
.tph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.who .tph img{object-position:50% 22%;transform:scale(1.5);transform-origin:50% 30%}
.tph.has span{display:none}
.tph.ph{background:url(../assets/tree.jpg?v=2) 50% 32%/cover no-repeat}
.who .tph.ph{background-size:190%;background-position:42% 30%}
.who .tph{width:44px;height:44px;border-radius:50%;flex:none}
.who .tph span{display:none}

/* value line: the long list struck out, the short list in its place; opens to show the three */
.vp{width:100%;max-width:700px;margin:18px 0 0}
.vp summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 18px;font-size:clamp(18px,1.8vw,23px);letter-spacing:-.02em;line-height:1.25;padding:8px 4px}
.vp summary::-webkit-details-marker{display:none}
.vp-old{position:relative;color:rgba(242,243,237,.62);white-space:nowrap}
.vp-old b{font-weight:500;font-variant-numeric:tabular-nums}
.vp-old::after{content:"";position:absolute;left:-3px;right:-3px;top:54%;height:2px;background:var(--paper);transform-origin:left}
.vp-new{color:var(--paper);font-weight:600;white-space:nowrap}
.vp-new b{color:var(--lime);font-weight:600}
.vp-new i{display:inline-block;width:.5em;height:.5em;margin:0 0 .16em .55em;border-right:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(45deg);transition:transform .25s}
.vp[open] .vp-new i{transform:rotate(-135deg);margin-bottom:-.08em}
.vp summary:hover .vp-new{text-decoration:underline;text-decoration-color:rgba(221,242,126,.6);text-underline-offset:6px;text-decoration-thickness:1px}
.vp ol{list-style:none;counter-reset:vp;margin:10px 0 0;padding:0;text-align:left;border-top:1px solid var(--line)}
.vp li{counter-increment:vp;display:grid;grid-template-columns:28px minmax(0,220px) minmax(0,1fr);gap:2px 12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
.vp li::before{content:counter(vp);color:var(--lime);font-weight:600}
.vp li strong{font-weight:600}
.vp li span{color:var(--soft)}
.vp p{margin:10px 0 0;font-size:13px;color:rgba(242,243,237,.6);text-align:left}
@media (max-width:640px){.vp li{grid-template-columns:24px minmax(0,1fr)}.vp li span{grid-column:2}}
@media (prefers-reduced-motion:no-preference){
  .js .vp-old::after{transform:scaleX(0);animation:vpcut .5s var(--e) 1.5s forwards}
  .js .vp-new{opacity:0;animation:vpin .6s var(--e) 1.9s forwards}
  @keyframes vpcut{to{transform:scaleX(1)}}
  @keyframes vpin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .vp[open] li{animation:vpin .45s var(--e) both}
  .vp[open] li:nth-child(2){animation-delay:.07s}.vp[open] li:nth-child(3){animation-delay:.14s}
}

.hq{margin:28px 0 0;max-width:560px;display:grid;gap:8px}
.hq blockquote{margin:0;font-size:clamp(16px,1.4vw,18px);line-height:1.45;color:rgba(242,243,237,.86);text-wrap:balance}
.hq figcaption{font-size:14px;color:var(--soft)}
.hq b{font-weight:600;color:var(--paper)}

/* $78K: the olive opens into lime, edge to edge */
.win{color:var(--ink);background:linear-gradient(180deg,#5A6530 0,#A8B955 110px,#DDF27E 250px,#DDF27E calc(100% - 250px),#8E9D48 calc(100% - 110px),#3F4729 100%)}
.win .wrap{padding-top:clamp(250px,28vw,340px);padding-bottom:clamp(250px,28vw,340px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.win .n{white-space:nowrap;font-size:clamp(84px,12.5vw,176px);font-weight:600;letter-spacing:-.065em;line-height:.86;margin:0 0 16px -.04em}
.win p{margin:0;font-size:clamp(18px,1.7vw,22px);font-weight:500;max-width:20em}
.win blockquote{margin:0 0 20px;font-size:clamp(26px,3.2vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.win .by{font-size:16px;font-weight:400;color:rgba(16,18,17,.76)}
.win .by b{font-weight:600;color:var(--ink)}

/* forecast comparison and revenue slider, on the lime band */
.win .wrap{align-items:start}
.fc h2{margin:0;font-size:clamp(32px,4.4vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1.02;text-wrap:balance;max-width:11em}
.win .fc-sub{margin:14px 0 30px;font-size:17px;font-weight:400;color:rgba(16,18,17,.76);max-width:none}
.fc-bars{display:grid;gap:22px}
.fc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:end}
.fc-row span{grid-column:1/-1;font-size:16px;font-weight:500}
.fc-track{height:18px}
.fc-track i{display:block;height:100%;border-radius:3px;background:var(--ink);transform-origin:left}
.fc-track i.more{background:linear-gradient(90deg,rgba(16,18,17,.34) 0,rgba(16,18,17,.34) 75%,rgba(16,18,17,0) 100%)}
.fc-row b{font-size:clamp(30px,3.6vw,48px);font-weight:600;letter-spacing:-.04em;line-height:.8;white-space:nowrap;color:rgba(16,18,17,.55)}
.fc-row.me b{color:var(--ink)}
.fc-row small{font-size:15px;font-weight:500;letter-spacing:0}
.win .fc-note{margin:30px 0 0;font-size:13px;font-weight:400;line-height:1.5;color:rgba(16,18,17,.72);max-width:44em}
.rv{border-left:1px solid rgba(16,18,17,.22);padding-left:clamp(20px,4vw,56px);display:grid;gap:16px}
.rv label{font-size:16px;font-weight:500}
.rv-plan{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rv-plan output{font-size:clamp(44px,5.6vw,80px);font-weight:600;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.rv-plan span{font-size:15px;color:rgba(16,18,17,.72)}
.rv input[type=range]{width:100%;height:44px;margin:0;accent-color:#101211;cursor:pointer;background:transparent}
.rv input[type=range]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rv dl{margin:0;display:grid;border-top:1px solid rgba(16,18,17,.22)}
.rv dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(16,18,17,.22)}
.rv dt{font-size:16px;color:rgba(16,18,17,.76)}
.rv dd{margin:0;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rv .gain dt{color:var(--ink);font-weight:600}
.rv .gain dd{font-size:clamp(28px,3vw,40px);letter-spacing:-.04em}
.win .rv p{margin:0;font-size:13px;font-weight:400;color:rgba(16,18,17,.72);max-width:none}
@media (max-width:860px){.rv{border-left:0;padding-left:0;border-top:1px solid rgba(16,18,17,.22);padding-top:28px}}
@media (prefers-reduced-motion:no-preference){
  .js .fc-track i{transform:scaleX(0);transition:transform 1.1s var(--e) .15s}
  .js .fc-row:nth-child(2) .fc-track i{transition-delay:.4s}
  .js .fc-bars.in .fc-track i{transform:none}
}

/* Tree */
.tree{background:linear-gradient(180deg,#3F4729 0%,#262B1C 26%,#151812 62%,#101211 100%)}
.tree .wrap{padding-top:clamp(72px,10vw,144px);padding-bottom:clamp(72px,10vw,144px);display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.tree .tph{aspect-ratio:4/5;border-radius:6px}
.tree h2,.cost h2,.end h2{margin:0;font-size:clamp(34px,5vw,72px);font-weight:600;letter-spacing:-.045em;line-height:1;text-wrap:balance}
.nums{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 44px;margin:26px 0}
.nums div{display:grid;gap:4px}
.nums strong{font-size:clamp(48px,6.4vw,92px);font-weight:600;letter-spacing:-.05em;line-height:.95;color:var(--lime)}
.nums div + div strong{color:rgba(242,243,237,.5);font-size:clamp(28px,3.4vw,46px)}
.nums span{font-size:15px;color:var(--soft)}
.tree p{margin:0 0 14px;font-size:clamp(17px,1.5vw,20px);color:rgba(242,243,237,.8);max-width:34em}
.tree small{display:block;font-size:13px;color:rgba(242,243,237,.6)}
.tree .links a{color:var(--lime);font-size:16px;font-weight:500;padding:10px 0;display:inline-block;margin-right:24px}

/* cost: three columns on the gradient, no boxes */
.cost{background:linear-gradient(180deg,#101211 0%,#171A13 40%,#2B311F 100%)}
.cost .wrap{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(72px,10vw,144px)}
.cost .lead{margin:14px 0 clamp(36px,5vw,64px);font-size:clamp(17px,1.5vw,20px);color:var(--soft)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.col{padding:28px clamp(16px,2.6vw,36px) 8px;display:grid;gap:22px;align-content:start;border-left:1px solid var(--line)}
.col:first-child{border-left:0;padding-left:0}
.col:last-child{padding-right:0}
.col h3{margin:0;font-size:clamp(18px,1.6vw,21px);font-weight:500;letter-spacing:-.015em;line-height:1.25;min-height:2.5em}
.col strong{display:block;font-size:clamp(52px,6.6vw,96px);font-weight:600;letter-spacing:-.05em;line-height:.95;color:var(--lime);white-space:nowrap}
.col p{margin:10px 0 0;font-size:16px;color:var(--soft);max-width:22em}
.vis{min-height:74px;display:grid;align-content:center;gap:8px;font-size:13px;color:rgba(242,243,237,.6)}
.dots100{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px}
.dots100 i{display:block;aspect-ratio:1;border-radius:2px;background:rgba(242,243,237,.14)}
.split{display:flex;gap:4px}.split i{display:block;height:12px;border-radius:2px;background:rgba(242,243,237,.14)}
.ten{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;max-width:320px}.ten i{display:block;aspect-ratio:1;border-radius:50%;background:rgba(242,243,237,.14)}
.vis i.on{background:var(--lime)}
.src{margin:40px 0 0;font-size:13px;color:rgba(242,243,237,.55);max-width:60em}

/* merch strip: two photos edge to edge */
.merch{display:grid;grid-template-columns:1fr 1fr;background:#EADFD0}
.merch img{display:block;width:100%;height:auto}
@media (max-width:700px){.merch{grid-template-columns:1fr}}

/* close and footer share the last stretch of gradient */
.end{background:radial-gradient(80% 55% at 50% 100%,rgba(221,242,126,.3) 0%,rgba(221,242,126,0) 65%),linear-gradient(180deg,#2B311F 0%,#3F4729 55%,#566130 100%)}
.end .wrap.cta{padding-top:clamp(72px,11vw,160px);padding-bottom:clamp(72px,11vw,160px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.end h2{max-width:13em}
.end p{margin:0;font-size:clamp(17px,1.5vw,20px);color:rgba(242,243,237,.8);max-width:30em}
.btn{display:inline-flex;align-items:center;height:54px;padding:0 28px;border-radius:8px;background:var(--lime);color:var(--ink)!important;font-size:17px;font-weight:600;text-decoration:none}
.btn:hover{background:#E7F79A}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 28px;padding-top:24px;padding-bottom:28px;border-top:1px solid rgba(242,243,237,.2);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 22px}
.foot nav a{text-decoration:none;color:rgba(242,243,237,.8);padding:12px 0}
.foot nav a:hover{color:var(--lime)}
.foot small{flex-basis:100%;font-size:13px;color:rgba(242,243,237,.7)}

@media (max-width:860px){
  .win .n{font-size:clamp(84px,24vw,170px)}
  .win .wrap,.tree .wrap{grid-template-columns:minmax(0,1fr)}
  .win{background:linear-gradient(180deg,#5A6530 0,#A8B955 70px,#DDF27E 160px,#DDF27E calc(100% - 160px),#8E9D48 calc(100% - 70px),#3F4729 100%)}
  .win .wrap{padding-top:190px;padding-bottom:190px}
  .tree .tph{max-width:340px}
  .cols{grid-template-columns:minmax(0,1fr);border-top:0}
  .col,.col:first-child,.col:last-child{border-left:0;border-top:1px solid var(--line);padding:26px 0 22px}
  .col h3{min-height:0}
  .hero .wrap{padding-top:96px;padding-bottom:56px}
  .box textarea{font-size:17px;min-height:96px}
}
@media (prefers-reduced-motion:no-preference){
  .js .hero .wrap > *{opacity:0;transform:translateY(22px);animation:up 1s var(--e) forwards}
  .js .hero .wrap > :nth-child(2){animation-delay:.1s}.js .hero .wrap > :nth-child(3){animation-delay:.2s}.js .hero .wrap > :nth-child(4){animation-delay:.3s}
  @keyframes up{to{opacity:1;transform:none}}
  .js [data-words] span{opacity:.3;transition:opacity .35s}
  .js [data-words] span.lit{opacity:1}
}

/* ---------- same structure, light palette: white running into lime, ink type ---------- */
body{background:#FBFBF8}
.pg{background:#FBFBF8;color:var(--ink)}
.pg :focus-visible{outline-color:var(--ink)}
.top-cta{border-bottom-color:rgba(16,18,17,.4)}
.top-cta:hover{color:#414B19;border-color:#414B19}
.hero{background:
  radial-gradient(60% 46% at 12% 96%,rgba(221,242,126,.55) 0%,rgba(221,242,126,0) 100%),
  radial-gradient(60% 46% at 88% 96%,rgba(221,242,126,.55) 0%,rgba(221,242,126,0) 100%),
  linear-gradient(180deg,#FBFBF8 0%,#FBFBF8 38%,#F4F8DC 62%,#E9F5B4 84%,#DDF27E 100%)}
.vp-old{color:rgba(16,18,17,.55)}
.vp-old::after{background:var(--ink)}
.vp-new{color:var(--ink)}
.vp-new b{color:#576614}
.vp-new i{border-color:#576614}
.vp summary:hover .vp-new{text-decoration-color:rgba(16,18,17,.4)}
.vp ol,.vp li{border-color:rgba(16,18,17,.14)}
.vp li span{color:rgba(16,18,17,.72)}
.vp li::before{color:#576614}
.vp p{color:rgba(16,18,17,.62)}
.box{background:#FFFFFF;border:1px solid rgba(16,18,17,.12);box-shadow:0 1px 2px rgba(16,18,17,.05),0 40px 80px -36px rgba(65,75,25,.45)}
.box:focus-within{box-shadow:0 0 0 3px rgba(16,18,17,.18),0 40px 80px -36px rgba(65,75,25,.45)}
.hq blockquote{color:var(--ink)}
.hq figcaption{color:rgba(16,18,17,.72)}
.hq b{color:var(--ink)}
.win{background:linear-gradient(180deg,#DDF27E 0,#DDF27E calc(100% - 260px),#EEF7C6 calc(100% - 110px),#FBFBF8 100%)}
.win .wrap{padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(300px,30vw,360px)}
.tree{background:#FBFBF8}
.tree .wrap{padding-top:clamp(24px,4vw,56px)}
.tree p{color:rgba(16,18,17,.8)}
.tree .links a{color:#414B19}
.tph{background-color:#E3E5DA}
.cost{background:linear-gradient(180deg,#FBFBF8 0%,#F5F6EF 100%)}
.cost .lead,.col p{color:rgba(16,18,17,.72)}
.cols,.col{border-color:rgba(16,18,17,.14)}
.col strong{color:#414B19}
.vis{color:rgba(16,18,17,.62)}
.dots100 i,.split i,.ten i{background:rgba(16,18,17,.12)}
.vis i.on{background:#576614}
.src{color:rgba(16,18,17,.62)}
.end{background:radial-gradient(80% 60% at 50% 100%,rgba(221,242,126,.9) 0%,rgba(221,242,126,0) 70%),linear-gradient(180deg,#F5F6EF 0%,#EEF7C6 60%,#DDF27E 100%)}
.end p{color:rgba(16,18,17,.76)}
.btn{background:var(--ink);color:var(--paper)!important}
.btn:hover{background:#2B311F}
.foot{border-top-color:rgba(16,18,17,.18)}
.foot nav a{color:rgba(16,18,17,.76)}
.foot nav a:hover{color:var(--ink)}
.foot small{color:rgba(16,18,17,.7)}
@media (max-width:860px){
  .win{background:linear-gradient(180deg,#DDF27E 0,#DDF27E calc(100% - 180px),#EEF7C6 calc(100% - 80px),#FBFBF8 100%)}
  .win .wrap{padding-top:64px;padding-bottom:220px}
  .col,.col:first-child,.col:last-child{border-top-color:rgba(16,18,17,.14)}
}

/* Tree: photo runs to the page edge, square corners, full height of the section */
.tree{background:#FBFBF8;border-top:1px solid rgba(16,18,17,.1);border-bottom:1px solid rgba(16,18,17,.1)}
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(92vh,760px)}
.tree-pic{background:url(../assets/tree-wide.jpg?v=2) 50% 36%/cover no-repeat #E3E5DA;min-height:420px}
.tree-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,7vw,112px) clamp(20px,6vw,96px);max-width:720px}
.tree-txt h2{margin:0 0 26px}
.tree-txt p:first-of-type{margin-top:0}
.win .wrap{padding-bottom:clamp(200px,22vw,260px)}
.win{background:linear-gradient(180deg,#DDF27E 0,#DDF27E calc(100% - 200px),#EEF7C6 calc(100% - 80px),#FBFBF8 100%)}
@media (max-width:860px){.split2{grid-template-columns:minmax(0,1fr);min-height:0}.tree-pic{aspect-ratio:4/5;min-height:0;background-image:url(../assets/tree.jpg?v=2);background-position:50% 32%}.win .wrap{padding-bottom:180px}}

/* cost: three raised panels with matched rows, a little depth, and a leads-per-month picker */
.cost .lead{margin-bottom:28px}
.pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:clamp(28px,4vw,44px)}
.pick span{font-size:15px;color:rgba(16,18,17,.72);margin-right:8px}
.pick button{min-height:44px;min-width:64px;padding:0 14px;border-radius:6px;border:1px solid rgba(16,18,17,.18);background:#FFFFFF;color:var(--ink);font:500 15px "IBM Plex Sans",sans-serif;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s,transform .15s}
.pick button:hover{background:#F2F3ED}
.pick button:active{transform:scale(.97)}
.pick button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto;gap:0 clamp(14px,2vw,24px);perspective:2000px}
.st{grid-row:span 4;display:grid;grid-template-rows:subgrid;gap:0;padding:clamp(22px,2.4vw,32px);background:linear-gradient(180deg,#FFFFFF 0%,#FBFCF6 100%);border:1px solid rgba(16,18,17,.08);border-radius:8px;
  box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px rgba(16,18,17,.06),0 12px 24px -12px rgba(65,75,25,.22),0 44px 80px -40px rgba(65,75,25,.55);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.st h3{margin:0;font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.015em;line-height:1.3;padding-bottom:22px}
.st h3 b{font-weight:600;font-variant-numeric:tabular-nums}
.st .vis{min-height:0;align-content:center;padding:18px;border-radius:6px;background:#F3F5EA;box-shadow:inset 0 1px 3px rgba(16,18,17,.12),inset 0 0 0 1px rgba(16,18,17,.04)}
.st-n{padding:26px 0 22px}
.st > *{min-width:0}
.st-n strong{display:block;font-size:clamp(38px,3.7vw,50px);font-weight:600;letter-spacing:-.05em;line-height:.95;color:#414B19;white-space:nowrap;font-variant-numeric:tabular-nums}
.st-n p{margin:10px 0 0;font-size:16px;color:rgba(16,18,17,.72)}
.st-n p b{font-weight:600;color:var(--ink)}
.use{margin:0;padding-top:18px;border-top:1px solid rgba(16,18,17,.12);font-size:15px;line-height:1.45;color:rgba(16,18,17,.8)}
.use b{display:block;font-size:13px;font-weight:600;color:#576614;margin-bottom:4px}
.st .dots100 i{border-radius:2px;background:#E2E5D6;box-shadow:inset 0 1px 1px rgba(16,18,17,.1)}
.st .dots100 i.on,.st .split i.on,.st .ten i.on{background:linear-gradient(160deg,#8A9C2E 0%,#576614 55%,#414B19 100%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 4px rgba(65,75,25,.45)}
.st .split i{height:14px;border-radius:3px;background:#E2E5D6;box-shadow:inset 0 1px 1px rgba(16,18,17,.1)}
.st .ten{max-width:none}
.st .ten i{background:#E2E5D6;box-shadow:inset 0 1px 2px rgba(16,18,17,.12)}
.st .vis span{font-size:13px;color:rgba(16,18,17,.66)}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .st:nth-child(1){transform:rotateY(5deg) translateZ(-8px);transform-origin:right center}
  .st:nth-child(3){transform:rotateY(-5deg) translateZ(-8px);transform-origin:left center}
  .st:nth-child(2){transform:translateY(-10px)}
  .st:hover{transform:translateY(-10px);box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px rgba(16,18,17,.06),0 18px 30px -14px rgba(65,75,25,.3),0 60px 100px -44px rgba(65,75,25,.65)}
}
@media (max-width:860px){.cols3{grid-template-columns:minmax(0,1fr);gap:16px;grid-template-rows:none}.st{grid-row:auto;grid-template-rows:none}}

/* no ring around the text box when it is clicked; the border darkens slightly instead */
.box:focus-within{box-shadow:0 1px 2px rgba(16,18,17,.05),0 40px 80px -36px rgba(65,75,25,.45);border-color:rgba(16,18,17,.32)}
.box textarea:focus,.box textarea:focus-visible{outline:none;box-shadow:none}

/* capture box: one email line first, then details, then an optional time */
.box.cap{max-width:560px;padding:8px}
.cap-row{display:flex;gap:8px}
.cap-row input{flex:1;min-width:0;height:54px;border:0;background:transparent;padding:0 14px;font:19px "IBM Plex Sans",sans-serif;color:var(--ink);outline:none}
.cap-row input::placeholder{color:rgba(16,18,17,.5)}
.cap-row .go{height:54px;border-radius:8px;flex:none}
.cap-err{margin:6px 14px 8px;font-size:14px;color:#8A2B1D}
.box.cap:has(#c2:not([hidden])),.box.cap:has(#c3:not([hidden])){max-width:700px}
#c2{display:grid;gap:16px;padding:14px 14px 10px}
#c2[hidden]{display:none}
.cap-ok{margin:0;font-size:17px;line-height:1.4}
.cap-ok b{font-weight:600}
#c3 .cap-ok{padding:14px 14px 12px}
.cap-h{margin:0;font-size:15px;color:rgba(16,18,17,.72)}
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#c2 label,#c2 legend{display:block;font-size:14px;font-weight:500;margin:0 0 6px;padding:0}
#c2 label span{font-weight:400;color:rgba(16,18,17,.62)}
#c2 input[type=text],#c2 input[type=tel],#c2 textarea{width:100%;border:1px solid rgba(16,18,17,.22);border-radius:6px;background:#FFFFFF;padding:11px 12px;font:16px/1.4 "IBM Plex Sans",sans-serif;color:var(--ink);min-height:46px;resize:vertical}
#c2 input:focus,#c2 textarea:focus{outline:none;border-color:var(--ink)}
.cap-opts{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cap-opts legend{width:100%}
.cap-opts label{margin:0!important;cursor:pointer}
.cap-opts input{position:absolute;opacity:0;pointer-events:none}
.cap-opts span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid rgba(16,18,17,.22);border-radius:6px;font-size:15px;font-weight:500!important;color:var(--ink)!important;transition:background .15s}
.cap-opts label:hover span{background:#F2F3ED}
.cap-opts input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)!important}
.cap-opts input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.cap-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.cap-act .back{margin:0}
/* trust marks: the client's and the employer's own logo files, or the name in plain type until a file is added */
.hq{max-width:680px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:center;text-align:left}
.lg{font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.lg-fm{font-size:clamp(26px,3vw,38px);padding-right:28px;border-right:1px solid rgba(16,18,17,.22)}
.fc-at{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.fc-at span{font-size:15px;color:rgba(16,18,17,.72)}
.lg-ad{font-size:30px}
@media (max-width:640px){.cap-row{flex-direction:column}.cap-row .go{width:100%}.cap-grid{grid-template-columns:minmax(0,1fr)}.hq{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}.lg-fm{border-right:0;padding-right:0}}

/* email line */
.pg .box.cap input:focus,.pg .box.cap input:focus-visible,.pg .box.cap textarea:focus-visible{outline:none}
.box.cap{border:1px solid rgba(16,18,17,.14);box-shadow:0 1px 2px rgba(16,18,17,.05),0 40px 80px -36px rgba(65,75,25,.45);transition:max-width .5s var(--e),border-color .2s,box-shadow .3s var(--e)}
.box.cap:focus-within{border-color:rgba(87,102,20,.7);box-shadow:0 0 0 3px rgba(87,102,20,.45),0 0 0 8px rgba(221,242,126,.85),0 18px 48px rgba(65,75,25,.3)}
.box.cap{padding:6px;border-radius:12px;margin-top:28px}
.cap-row{gap:6px;align-items:stretch}
.cap-row input{height:56px;padding:0 16px;border-radius:8px}
.cap-row .go{height:56px;padding:0 26px}
.hq{margin:32px auto 0;width:min(100%,560px);grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center;gap:8px 0}
.lg-fm{font-size:clamp(22px,2.2vw,28px);padding-right:22px}
.hq blockquote{font-size:16px}
.hq>div:last-child{padding-left:22px}

.lg-fm{display:flex;align-items:center;justify-content:center;gap:12px;font-size:22px;white-space:nowrap}
.lg-fm img{border-radius:8px}
.lg-ad img{height:24px}
@media (max-width:640px){.hq{width:100%;grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}.lg-fm{justify-content:center;border-right:0;padding-right:0}.hq>div:last-child{padding-left:0}}

/* brand kit: official lockup with its clearspace, 6px controls and 12px cards, Plex Mono for data labels and sources */
.logo{padding:8px 0}
.logo svg{display:block;height:28px;width:auto}
.go,.btn,.bk-go,.bk-slot,.bk-day,.pick button,.cap-opts span,#c2 input[type=text],#c2 input[type=tel],#c2 textarea,.cap-row .go{border-radius:6px}
.box.cap,.st{border-radius:12px}
.st .vis{border-radius:6px}
.src,.fc-note,.fc-sub,.rv dt,.rv #rvD,.vis span,.use b,.pick span,.fc-at span,.fc-row span,.rv-plan span,.hq figcaption{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:0}
.src,.fc-note,.rv #rvD{font-size:12px;line-height:1.55}
.fc-sub,.rv dt,.fc-row span,.pick span,.fc-at span,.rv-plan span{font-size:13px}
.hq figcaption{font-size:12px}

/* ---------- phone layout ---------- */
@media (max-width:640px){
  .top .wrap{min-height:60px}
  .logo svg{height:24px}
  .hero{min-height:0}
  .hero .wrap{padding-top:104px;padding-bottom:56px}
  .hero h1{font-size:clamp(34px,10.4vw,44px);line-height:1.04}
  .vp{margin-top:16px}
  .vp summary{font-size:17px;gap:2px 12px}
  .box.cap{margin-top:22px;padding:5px;border-radius:12px}
  .cap-row{flex-direction:row;gap:5px}
  .cap-row input{height:50px;padding:0 12px;font-size:16px}
  .cap-row .go{width:auto;height:50px;padding:0 16px;font-size:15px;white-space:nowrap}
  .hq{margin-top:28px;gap:12px}
  .lg-fm{font-size:19px}
  .lg-fm img{height:32px!important}
  .hq blockquote{font-size:15px}
  .win .wrap{padding-top:48px;padding-bottom:150px;gap:36px}
  .fc-at{margin-bottom:16px;flex-wrap:wrap;gap:8px 12px}
  .lg-ad img{height:20px!important}
  .fc h2{font-size:clamp(30px,8.6vw,38px)}
  .win .fc-sub{margin:12px 0 24px}
  .rv-plan output{font-size:52px}
  .tree-txt{padding:40px 20px 48px}
  .tree h2,.cost h2{font-size:clamp(30px,8.6vw,38px)}
  .cost .wrap{padding-top:48px;padding-bottom:64px}
  .pick button{min-width:0;flex:1}
  .pick span{flex-basis:100%;margin:0 0 4px}
  .end .wrap.cta{padding-top:64px;padding-bottom:72px}
  .end h2{font-size:clamp(30px,8.6vw,38px)}
  .foot{gap:4px 20px}
}
/* ---------- motion: one easing, one distance, blur-to-sharp; nothing loops ---------- */
.go,.btn,.bk-go{transition:background .2s,transform .35s var(--e),box-shadow .35s var(--e)}
.go:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(16,18,17,.55)}
.go:active,.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.split2{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .js .r{opacity:0;translate:0 26px;filter:blur(7px);transition:opacity .9s var(--e) var(--d,0s),translate 1.1s var(--e) var(--d,0s),filter .9s var(--e) var(--d,0s)}
  .js .r.in{opacity:1;translate:0 0;filter:none}
  .js .hero h1{animation:none;opacity:1;transform:none}
  .js .hero h1 .w{display:inline-block;opacity:0;translate:0 .45em;filter:blur(10px);animation:wd 1s var(--e) forwards;animation-delay:calc(var(--i)*70ms + 80ms)}
  @keyframes wd{to{opacity:1;translate:0 0;filter:none}}
  .js .hero .wrap > .vp{animation-delay:.55s}
  .js .hero .wrap > .box{animation-delay:.7s}
  .js .hero .wrap > .hq{animation-delay:.9s}
  .js .tree-pic{clip-path:inset(0 100% 0 0);scale:1.08;transition:clip-path 1.4s var(--e),scale 2s var(--e)}
  .js .tree-pic.in{clip-path:inset(0 0 0 0);scale:1}
  .js .top{opacity:0;animation:fadein .8s ease .2s forwards}
  @keyframes fadein{to{opacity:1}}
  #c2:not([hidden]),#c3:not([hidden]){animation:stepin .55s var(--e) both}
  @keyframes stepin{from{opacity:0;translate:0 10px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:none}}
  .box.cap{transition:max-width .5s var(--e),border-color .2s,box-shadow .3s var(--e)}
}

.lg-ad img{height:26px}
.fc-at{gap:12px}
/* reveal motion: headings rise word by word from behind a mask; logos and rules wipe in */
@media (prefers-reduced-motion:no-preference){
  .js .hero h1.mh{animation:none;opacity:1;transform:none}
  .js .mh .m{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .05em .14em;margin:0 -.05em -.14em}
  .js .mh .mi{display:inline-block;translate:0 115%;rotate:4deg;transform-origin:left bottom;transition:translate 1.05s var(--e) calc(var(--i)*60ms),rotate 1.05s var(--e) calc(var(--i)*60ms)}
  .js .mh.in .mi{translate:0 0;rotate:0deg}
  .js .fc-at .lg{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--e) .25s}
  .js .fc-at.in .lg{clip-path:inset(0 0 0 0)}
  .js .hq .lg-fm{clip-path:inset(0 100% 0 0);animation:wipe .9s var(--e) 1.25s forwards}
  @keyframes wipe{to{clip-path:inset(0 0 0 0)}}
  .js .rv dl div,.js .use{position:relative;border-color:transparent}
  .js .rv dl div::after,.js .use::before{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(16,18,17,.18);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e) .3s}
  .js .rv dl div::after{bottom:-1px}
  .js .use::before{top:-1px}
  .js .rv dl div:nth-child(2)::after{transition-delay:.42s}
  .js .rv dl div:nth-child(3)::after{transition-delay:.54s}
  .js .rv.in dl div::after,.js .st.in .use::before{transform:none}
  .js .st.r{translate:0 48px}
  .js .st.r.in{translate:0 0}
  .js .dots100 i{opacity:0;scale:.4;transition:opacity .4s ease,scale .5s var(--e)}
  .js .st.in .dots100 i{opacity:1;scale:1;transition-delay:calc(.25s + var(--k,0)*8ms)}
  .js .ten i{opacity:0;scale:.4;transition:opacity .4s ease,scale .5s var(--e)}
  .js .st.in .ten i{opacity:1;scale:1;transition-delay:calc(.35s + var(--k,0)*55ms)}
  .js .split i.on{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e) .4s}
  .js .st.in .split i.on{transform:none}
}

/* revenue slider: continuous, custom track and thumb */
.rv input[type=range]{-webkit-appearance:none;appearance:none;height:44px;background:transparent;touch-action:pan-y}
.rv input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#101211 var(--p,56%),rgba(16,18,17,.16) var(--p,56%))}
.rv input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(16,18,17,.16)}
.rv input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:#101211}
.rv input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#101211;border:3px solid #FBFBF8;box-shadow:0 2px 8px rgba(16,18,17,.35);cursor:grab;transition:transform .25s var(--e),box-shadow .25s var(--e)}
.rv input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#101211;border:3px solid #FBFBF8;box-shadow:0 2px 8px rgba(16,18,17,.35);cursor:grab}
.rv input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}
.rv input[type=range]:active::-webkit-slider-thumb{transform:scale(1.22);box-shadow:0 0 0 8px rgba(16,18,17,.1),0 2px 8px rgba(16,18,17,.35);cursor:grabbing}
.pg .rv input[type=range]:focus{outline:none}
.pg .rv input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(16,18,17,.28)}
.rv dd,.rv-plan output{font-variant-numeric:tabular-nums}

/* motion, top half: follows the layout. The centred hero settles in from its centre; the forecast's two columns cascade top to bottom; the photo stays still. No sideways wipes. */
@media (prefers-reduced-motion:no-preference){
  .js .hero .wrap > h1{opacity:0;transform:scale(.95);filter:blur(12px);transform-origin:50% 60%;animation:settle 1.3s var(--e) .1s forwards}
  @keyframes settle{to{opacity:1;transform:none;filter:none}}
  .js .hero .wrap > .box{opacity:0;transform:translateY(14px) scale(.965);transform-origin:50% 50%;animation:settle 1.1s var(--e) .75s forwards}
  .js .hero .wrap > .hq{opacity:0;transform:translateY(12px);animation:settle 1s var(--e) 1s forwards}
  .js .hq .lg-fm{clip-path:none;animation:none}
  .js .fc-at .lg,.js .fc-at.in .lg{clip-path:none;transition:none}
  .js .mh-even .mi{rotate:0deg;translate:0 105%;transition:translate 1.1s var(--e) calc(var(--i)*60ms)}
  .js .rv dl div{border-color:rgba(16,18,17,.22)}
  .js .rv dl div::after{display:none}
  .js .rv .r{translate:0 16px;filter:blur(4px)}
  .js .rv .r.in{translate:0 0;filter:none}
  .js .fc .r{translate:0 20px}
  .js .fc .r.in{translate:0 0}
  .js .tree-pic,.js .tree-pic.in{clip-path:none;scale:1;transition:none}
}

/* logo as an image file */
.logo img{display:block;height:28px;width:auto}
@media (max-width:640px){.logo img{height:24px}}

/* guides row */
.gd{background:#F5F6EF;border-top:1px solid rgba(16,18,17,.1)}
.gd .wrap{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px)}
.gd h2{margin:0;font-size:clamp(30px,4vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.gd .lead{margin:14px 0 clamp(28px,4vw,44px);font-size:clamp(17px,1.5vw,20px);color:rgba(16,18,17,.72)}
.gd-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(16,18,17,.14)}
.gd-list a{display:grid;gap:6px;height:100%;padding:22px 20px 24px 0;border-bottom:1px solid rgba(16,18,17,.14);text-decoration:none;transition:padding .4s var(--e)}
.gd-list a:hover{padding-left:10px}
.gd-list b{font-size:19px;font-weight:600;letter-spacing:-.015em}
.gd-list span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;line-height:1.45;color:rgba(16,18,17,.72)}
@media (max-width:860px){.gd-list{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.gd-list a{transition:none}}