/* ScoutYard site styles.
   Built from the v3 mockups: one easing system, hover states gated behind
   a fine pointer, press feedback on everything pressable, and reduced
   motion handled by softening rather than removing. */
html{scroll-behavior:smooth}
body{margin:0;background:#F7F3EA}
a{color:#17484F}
.sy-page{
  --mx:0;--my:0;--fx:-200px;--fy:-200px;--fo:0;--fs:1;
  /* three curves, three jobs */
  --e-out:cubic-bezier(.23,1,.32,1);      /* enter, exit, respond */
  --e-move:cubic-bezier(.77,0,.175,1);    /* travel across the screen */
  --e-hover:cubic-bezier(.4,0,.2,1);      /* colour only */
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums
}
.sy-page a:focus-visible,.sy-page button:focus-visible{outline:2px solid #17484F;outline-offset:3px;border-radius:8px}
.sy-dark a:focus-visible,.sy-dark button:focus-visible{outline-color:#F7F3EA}
.sy-page [id]{scroll-margin-top:96px}
/* press feedback: one contract for everything pressable */
.sy-navlinks a{color:#4A625E;text-decoration:none;transition:color .2s var(--e-hover)}
.sy-btn,.sy-wa,.sy-wa-light,.sy-chip,.sy-tab,.sy-faq-q{
  transition:background-color .2s var(--e-hover),color .2s var(--e-hover),border-color .2s var(--e-hover),transform .14s var(--e-out)
}
.sy-btn:active,.sy-wa:active,.sy-wa-light:active,.sy-chip:active,.sy-tab:active,.sy-faq-q:active{transform:scale(.97)}
.sy-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:#D3CCBB;transition:text-decoration-color .2s var(--e-hover)}
/* every base colour on these sits in an inline style attribute, which outranks an
   author stylesheet, so the hover state has to say so explicitly */
@media (hover:hover) and (pointer:fine){
  .sy-navlinks a:hover{color:#17484F}
  .sy-btn:hover{background-color:#10373C !important;color:#F7F3EA !important}
  .sy-btn-light:hover{background-color:#FFFFFF !important;color:#10373C !important}
  .sy-wa:hover{background-color:#E4F0E7 !important}
  .sy-wa-light:hover{background-color:rgba(247,243,234,.12) !important}
  .sy-chip:hover{background-color:#E4F0E7 !important;border-color:#C6E2CE !important}
  .sy-link:hover{text-decoration-color:#17484F}
  .sy-faq-q:hover{color:#10373C}
}
/* the one orchestrated load moment */
.sy-line{display:block;opacity:0;transform:translateY(18px);animation:syRise .8s var(--e-out) forwards}
.sy-l2{animation-delay:.08s}
.sy-l3{animation-delay:.16s}
.sy-fade{opacity:0;animation:syFade .7s var(--e-out) .32s forwards}
.sy-card-in{opacity:0;transform:translateY(16px);animation:syRise .9s var(--e-out) .2s forwards}
@keyframes syRise{to{opacity:1;transform:none}}
@keyframes syFade{to{opacity:1}}
/* The hero demo. The decorative mouse parallax that used to live here set five
   custom properties on .sy-page every frame, which recalculated styles for the
   whole document. It is gone, and so is the recalc. */
.sy-spot{
  position:absolute;top:0;left:0;width:620px;height:620px;margin:-310px 0 0 -310px;
  border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(circle closest-side,rgba(76,163,145,.11),rgba(76,163,145,.05) 45%,rgba(76,163,145,0) 72%);
  transition:opacity .5s var(--e-out)
}
[data-sy-hero][data-live] .sy-spot{opacity:1}
/* promoted only while the pointer is actually in the hero */
[data-sy-hero][data-live] .sy-spot,[data-sy-hero][data-live] .sy-hdl{will-change:transform}
.sy-qwrap{transition:border-color .2s var(--e-hover),background-color .2s var(--e-hover)}
.sy-demo[data-phase="typing"] .sy-qwrap{border-color:#17484F;background-color:#FFFFFF}
/* the chips are the controls: you can only ask what there is an answer for */
.sy-pick{border:1px solid #E2DCCE;background:#FAF7F0;color:#4A625E;border-radius:999px;padding:5px 11px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;cursor:pointer;transition:background-color .2s var(--e-hover),border-color .2s var(--e-hover),color .2s var(--e-hover),transform .14s var(--e-out)}
.sy-pick:active{transform:scale(.97)}
.sy-pick[aria-pressed="true"]{background:#17484F;border-color:#17484F;color:#F7F3EA}
@media (hover:hover) and (pointer:fine){
  .sy-pick[aria-pressed="false"]:hover{background:#E4F0E7;border-color:#C6E2CE;color:#17484F}
}
/* the caret only exists while the script is typing; a real focused input has its own */
.sy-caret{display:none}
.sy-demo[data-phase="typing"] .sy-qtext::after{content:"";display:inline-block;vertical-align:-3px;width:1.5px;height:16px;margin-left:1px;background:#17484F;animation:syBlink 1s steps(1,end) infinite}
@keyframes syBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
/* results: hidden until a search resolves them */
.sy-count,.sy-more{opacity:0;transition:opacity .22s var(--e-out)}
.sy-demo[data-phase="searching"] .sy-count,.sy-demo[data-phase="done"] .sy-count{opacity:1}
.sy-demo[data-phase="done"] .sy-more{opacity:1;transition-delay:.3s}
.sy-spark{opacity:.35;transition:opacity .22s var(--e-out)}
.sy-demo[data-phase="done"] .sy-spark{opacity:1}
.sy-hit{opacity:0;transform:translateY(10px);transition:opacity .26s var(--e-out),transform .26s var(--e-out)}
.sy-hit[data-in]{opacity:1;transform:none}
.sy-hit:nth-of-type(2){transition-delay:90ms}
/* the reason arrives just after the row it belongs to, never with it */
.sy-why{opacity:0;transform:translateY(4px);transition:opacity .24s var(--e-out),transform .24s var(--e-out);transition-delay:.12s}
.sy-hit[data-in] .sy-why{opacity:1;transform:none}
/* scroll reveals, in every browser, not just the ones with animation-timeline.
   .sy-js is set by the script, so nothing is hidden if JS never runs. */
.sy-js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .42s var(--e-out),transform .42s var(--e-out)}
.sy-js [data-reveal][data-in]{opacity:1;transform:none}
.sy-js [data-stagger]>*{opacity:0;transform:translateY(12px);transition:opacity .42s var(--e-out),transform .42s var(--e-out)}
.sy-js [data-stagger][data-in]>*{opacity:1;transform:none}
.sy-js [data-stagger][data-in]>*:nth-child(2){transition-delay:60ms}
.sy-js [data-stagger][data-in]>*:nth-child(3){transition-delay:120ms}
.sy-js [data-stagger][data-in]>*:nth-child(4){transition-delay:180ms}
.sy-js [data-stagger][data-in]>*:nth-child(5){transition-delay:240ms}
.sy-js .sy-sweep{transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out)}
.sy-js .sy-sweep[data-in]{transform:scaleX(1)}
/* hero recede: was scale(.955)/opacity .35, the loudest effect on the page */
@supports (animation-timeline: view()){
  .sy-hero-inner{animation:syRecede linear both;animation-timeline:view();animation-range:exit 10% exit 95%}
  @keyframes syRecede{to{transform:scale(.975) translateY(24px);opacity:.6}}
}
/* audience tabs: a pill that travels, not a background that repaints */
.sy-tabs{display:inline-grid;grid-template-columns:1fr 1fr;background:#EBE6DA;border-radius:10px;padding:4px}
/* the pill is a grid item in cell 1, so it measures itself from the cell and
   translateX(100%) lands exactly on cell 2 — no magic numbers to drift */
.sy-tabpill{grid-area:1/1;border-radius:7px;background:#17484F;pointer-events:none;transition:transform .2s var(--e-move)}
.sy-tabs[data-tab="team"] .sy-tabpill{transform:translateX(100%)}
.sy-tab{grid-row:1;position:relative;z-index:1;background:transparent;border:0;cursor:pointer}
.sy-tab:nth-of-type(1){grid-column:1}
.sy-tab:nth-of-type(2){grid-column:2}
.sy-tab[aria-selected="false"]{color:#4A625E}
.sy-tab[aria-selected="true"]{color:#F7F3EA}
/* Board rows, on transitions rather than keyframes. Visible is the DEFAULT, so a
   node the template re-creates is never stranded invisible; the swap hides them
   for two frames and the entrance animates back. */
.sy-row{opacity:1;transform:none;transition:opacity .2s var(--e-out),transform .2s var(--e-out)}
.sy-board[data-swapping="true"] .sy-row{opacity:0;transform:translateY(6px);transition:none}
/* sticky outcome index: one marker that travels, not six borders repainting */
.sy-index ol{position:relative;border-left:2px solid #E2DCCE}
.sy-index li{height:44px;display:flex;align-items:center}
.sy-index-mark{position:absolute;left:-2px;top:0;width:2px;height:44px;background:#17484F;transition:transform .26s var(--e-move)}
.sy-index a{display:block;padding-left:16px;text-decoration:none;transition:color .2s var(--e-hover)}
/* faq: a real open/close, both directions, every browser */
.sy-faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;background:transparent;border:0;cursor:pointer;text-align:left}
.sy-plus{transition:transform .24s var(--e-out)}
.sy-faq-q[aria-expanded="true"] .sy-plus{transform:rotate(45deg)}
.sy-ans{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .24s var(--e-out),opacity .16s var(--e-hover)}
.sy-ans>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .24s}
.sy-faq-q[aria-expanded="true"]+.sy-ans>div{visibility:visible;transition:visibility 0s 0s}
.sy-faq-q[aria-expanded="true"]+.sy-ans{grid-template-rows:1fr;opacity:1}
/* chat panel: enters from its trigger, leaves faster than it arrived */
.sy-panel{
  transform-origin:bottom right;
  opacity:0;transform:translateY(8px) scale(.96);visibility:hidden;
  transition:opacity .14s var(--e-out),transform .14s var(--e-out),visibility 0s .14s
}
.sy-panel[data-open="true"]{
  opacity:1;transform:none;visibility:visible;
  transition:opacity .2s var(--e-out),transform .2s var(--e-out),visibility 0s 0s
}
@media (max-width:1080px){
  .sy-herogrid{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  .sy-visual{max-width:540px;width:100%;justify-self:center}
  .sy-index{display:none !important}
  .sy-outgrid{grid-template-columns:minmax(0,1fr) !important}
  .sy-split{grid-template-columns:minmax(0,1fr) !important;gap:48px !important}
  .sy-proofgrid{grid-template-columns:minmax(0,1fr) !important;gap:48px !important}
  .sy-proofhead{position:static !important}
}
@media (max-width:860px){
  .sy-navlinks{display:none !important}

  .sy-stat{grid-template-columns:88px minmax(0,1fr) !important;gap:16px !important;padding:20px 0 !important}
  .sy-stat dt{font-size:44px !important}
  .sy-problems{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .sy-hide-sm{display:none !important}
  .sy-footgrid{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:560px){
  .sy-wrap{padding-left:16px !important;padding-right:16px !important}
  .sy-ctas{flex-direction:column;align-items:flex-start !important}
  .sy-problems{grid-template-columns:minmax(0,1fr) !important}
  .sy-panel{width:calc(100vw - 32px) !important;right:16px !important}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sy-line,.sy-fade,.sy-card-in,.sy-hero-inner{animation:none !important;opacity:1 !important;transform:none !important}
  .sy-hit,.sy-why{transform:none !important;transition:opacity .25s var(--e-hover) !important}
  .sy-caret{display:none !important}
  .sy-pick{transform:none !important}
  .sy-spot{display:none !important}
  .sy-hdl{transform:none !important}
  /* reduced, not removed: keep the fades, drop the travel */
  .sy-js [data-reveal],.sy-js [data-stagger]>*{transform:none !important;transition:opacity .3s var(--e-hover) !important}
  .sy-js .sy-sweep{transform:none !important;transition:none !important}
  .sy-tabpill,.sy-index-mark{transition:none !important}
  .sy-row{transform:none !important;transition:opacity .2s var(--e-hover) !important}
  .sy-ans{transition:grid-template-rows 0s,opacity .2s var(--e-hover) !important}
  .sy-panel{transition:opacity .2s var(--e-hover),visibility 0s .2s !important;transform:none !important}
  .sy-panel[data-open="true"]{transition:opacity .2s var(--e-hover),visibility 0s 0s !important}
}
/* scroll reveals. .sy-js is set by the script, so nothing is hidden if JS never runs. */
.sy-js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .42s var(--e-out),transform .42s var(--e-out)}
/* the sticky screen. `visibility` was being flipped instantly because it wasn't in
   the transition list, so the outgoing screen hard-cut while the incoming one faded. */
.sy-screen{
  transition:opacity .32s var(--e-out),transform .32s var(--e-out),visibility 0s .32s
}
.sy-screen[data-on="true"]{transition:opacity .32s var(--e-out),transform .32s var(--e-out),visibility 0s 0s}
.sy-step{transition:opacity .32s var(--e-hover)}
/* step spine: how far through the story you are, without a word of copy */
.sy-spine{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-bottom:20px}
.sy-spine i{display:block;height:2px;background:#E2DCCE;border-radius:1px}
.sy-spine-mark{position:absolute;top:0;left:0;height:2px;width:calc((100% - 36px) / 7);background:#17484F;border-radius:1px;transition:transform .26s var(--e-move)}
@media (max-width:1080px){
  .sy-pgrid{grid-template-columns:minmax(0,1fr) !important;gap:48px !important}
  .sy-stage{position:static !important;margin-top:0 !important}
  .sy-spine{display:none !important}
  .sy-well{height:auto !important;display:flex;flex-direction:column;gap:20px}
  .sy-screen{position:static !important;opacity:1 !important;transform:none !important;visibility:visible !important}
  .sy-step{opacity:1 !important;min-height:0 !important}
  .sy-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:860px){
  .sy-navlinks{display:none !important}
  .sy-hide-sm{display:none !important}
  .sy-footgrid{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:560px){
  .sy-wrap{padding-left:16px !important;padding-right:16px !important}
  .sy-ctas{flex-direction:column;align-items:flex-start !important}
  .sy-4{grid-template-columns:minmax(0,1fr) !important}
  .sy-panel{width:calc(100vw - 32px) !important}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sy-line,.sy-fade{animation:none !important;opacity:1 !important;transform:none !important}
  /* reduced, not removed: keep the fades, drop the travel */
  .sy-js [data-reveal],.sy-js [data-stagger]>*{transform:none !important;transition:opacity .3s var(--e-hover) !important}
  .sy-screen{transition:opacity .25s var(--e-hover),visibility 0s .25s !important}
  .sy-screen[data-on="true"]{transition:opacity .25s var(--e-hover),visibility 0s 0s !important}
  .sy-spine-mark{transition:none !important}
  .sy-panel{transition:opacity .2s var(--e-hover),visibility 0s .2s !important;transform:none !important}
  .sy-panel[data-open="true"]{transition:opacity .2s var(--e-hover),visibility 0s 0s !important}
}
.sy-page a:focus-visible,.sy-page button:focus-visible,.sy-page summary:focus-visible{outline:2px solid #17484F;outline-offset:3px;border-radius:8px}
.sy-navlinks a{color:#4A625E;text-decoration:none;transition:color .2s var(--e-out)}
.sy-day{transition:background .3s var(--e-out)}
.sy-wk-btn{transition:background .2s var(--e-out),color .2s var(--e-out)}
.sy-faq summary{list-style:none;cursor:pointer}
.sy-faq summary::-webkit-details-marker{display:none}
.sy-faq summary .sy-plus{transition:transform .3s var(--e-out)}
.sy-faq details[open] summary .sy-plus{transform:rotate(45deg)}
@supports (animation-timeline: view()){
  .sy-cost{animation:syCost linear both;animation-timeline:view();animation-range:entry 10% cover 32%}
  @keyframes syCost{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media (max-width:1080px){
  .sy-split{grid-template-columns:minmax(0,1fr) !important;gap:48px !important}
  .sy-costrow{grid-template-columns:minmax(0,1fr) !important;gap:10px !important}
}
@media (max-width:860px){
  .sy-navlinks{display:none !important}
  .sy-hide-sm{display:none !important}
  .sy-footgrid{grid-template-columns:minmax(0,1fr) !important}
  .sy-week{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:560px){
  .sy-wrap{padding-left:16px !important;padding-right:16px !important}
  .sy-panel{width:calc(100vw - 32px) !important}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sy-line,.sy-fade,.sy-card-in,.sy-panel,.sy-cost{animation:none !important;opacity:1 !important;transform:none !important}
}
@keyframes syPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.sy-pop{animation:syPop .35s var(--e-out) both}
.sy-hm{transition:background .2s var(--e-out),border-color .2s var(--e-out)}
@media (max-width:860px){
  .sy-navlinks{display:none !important}
  .sy-footgrid{grid-template-columns:minmax(0,1fr) !important}
  .sy-caps{grid-template-columns:minmax(0,1fr) !important}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sy-line,.sy-fade,.sy-card-in,.sy-panel,.sy-cost,.sy-pop{animation:none !important;opacity:1 !important;transform:none !important}
}
@supports (animation-timeline: view()){
  .sy-track{transform-origin:top;animation:syGrow linear both;animation-timeline:view();animation-range:entry 20% exit 60%}
  @keyframes syGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .sy-chap{animation:syChap linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
  @keyframes syChap{from{opacity:.2;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media (max-width:1080px){
  .sy-split{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  .sy-aside{position:static !important}
}
@media (max-width:860px){
  .sy-navlinks{display:none !important}
  .sy-footgrid{grid-template-columns:minmax(0,1fr) !important}
  .sy-3{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:560px){
  .sy-wrap{padding-left:16px !important;padding-right:16px !important}
  .sy-chaprow{grid-template-columns:44px minmax(0,1fr) !important;gap:16px !important}
  .sy-panel{width:calc(100vw - 32px) !important}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sy-line,.sy-fade,.sy-panel,.sy-track,.sy-chap{animation:none !important;opacity:1 !important;transform:none !important}
}
.sy-page a:focus-visible,.sy-page button:focus-visible,.sy-page input:focus-visible{outline:2px solid #17484F;outline-offset:3px;border-radius:8px}
.sy-toc a{color:#4A625E;text-decoration:none;transition:color .2s var(--e-out),border-color .2s var(--e-out)}
@media (max-width:1080px){
  .sy-fgrid{grid-template-columns:minmax(0,1fr) !important;gap:32px !important}
  .sy-toc{position:static !important;display:flex;flex-wrap:wrap;gap:8px}
  .sy-toc ol{flex-direction:row !important;flex-wrap:wrap;gap:8px !important}
  .sy-toc a{border:1px solid #E2DCCE !important;border-radius:999px;padding:7px 12px !important}
}
@media (max-width:860px){
  .sy-navlinks{display:none !important}
  .sy-footgrid{grid-template-columns:minmax(0,1fr) !important}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sy-line,.sy-fade,.sy-panel{animation:none !important;opacity:1 !important;transform:none !important}
}
@media (max-width:1080px){.sy-split{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}}
@media (max-width:860px){.sy-navlinks{display:none !important}.sy-footgrid{grid-template-columns:minmax(0,1fr) !important}}
@media (max-width:560px){.sy-wrap{padding-left:16px !important;padding-right:16px !important}.sy-panel{width:calc(100vw - 32px) !important}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.sy-line,.sy-fade,.sy-panel{animation:none !important;opacity:1 !important;transform:none !important}}
@media (max-width:860px){.sy-navlinks{display:none !important}.sy-footgrid{grid-template-columns:minmax(0,1fr) !important}.sy-row{grid-template-columns:minmax(0,1fr);gap:8px}.sy-rowhead{display:none !important}}
.sy-az a{color:#17484F;text-decoration:none;border:1px solid #E2DCCE;border-radius:999px;padding:6px 12px;font-size:14px;transition:background .2s var(--e-out)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.sy-line,.sy-panel{animation:none !important;opacity:1 !important;transform:none !important}}
@media (max-width:1080px){.sy-split{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}.sy-aside{position:static !important}}
@media (max-width:860px){.sy-navlinks{display:none !important}.sy-footgrid{grid-template-columns:minmax(0,1fr) !important}.sy-res{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
.sy-navlinks a{color:#4A625E;text-decoration:none}
@media (max-width:860px){.sy-navlinks{display:none !important}}
@media (max-width:560px){.sy-wrap{padding-left:16px !important;padding-right:16px !important}}
@media (hover:hover) and (pointer:fine){
  /* every base colour on these sits in an inline style attribute, which outranks an
   author stylesheet, so the hover state has to say so explicitly */
@media (hover:hover) and (pointer:fine){.sy-navlinks a:hover{color:#17484F}
  .sy-btn:hover{background-color:#10373C !important;color:#F7F3EA !important}
  .sy-btn-light:hover{background-color:#FFFFFF !important;color:#10373C !important}
  .sy-wa:hover{background-color:#E4F0E7 !important}
  .sy-wa-light:hover{background-color:rgba(247,243,234,.12) !important}
  .sy-chip:hover{background-color:#E4F0E7 !important;border-color:#C6E2CE !important}
  .sy-link:hover{text-decoration-color:#17484F}}
  a:hover{color:#10373C !important}
  a:hover{color:#10373C !important}
  .sy-hm-ok:hover{background:#10373C !important}
  .sy-hm-no:hover{background:#F7E3D8 !important}
  a:hover{color:#10373C !important}
  a:hover{color:#10373C !important}
  .sy-toc a:hover{color:#17484F !important;border-color:#17484F !important}
  a:hover{color:#10373C !important}
  a:hover{color:#10373C !important}
  a:hover{color:#10373C !important}
  .sy-az a:hover{background:#E4F0E7 !important}
  a:hover{color:#10373C !important}
  a:hover{color:#10373C !important}
}

/* TA hiring economics: capacity first, followed by four cost areas. */
.ta-costs{background:#17484F;color:#F7F3EA;border-radius:28px 28px 0 0}
.ta-costs-wrap{max-width:1232px;margin:0 auto;padding:80px 56px}
.ta-costs-intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;align-items:center;margin-bottom:36px}
.ta-costs h2{font-family:'Sora',sans-serif;font-size:clamp(30px,3.3vw,44px);font-weight:600;line-height:1.12;letter-spacing:-.04em;color:#F7F3EA;margin:0 0 20px}
.ta-costs-intro p{font-size:17px;line-height:1.6;color:#D3E4E2;margin:0;max-width:38em}
.ta-capacity{padding:28px;border:1px solid rgba(247,243,234,.2);border-radius:16px;background:#10373C}
.ta-capacity strong{display:block;font-family:'Sora',sans-serif;font-size:clamp(36px,4vw,54px);font-weight:600;letter-spacing:-.04em;color:#F7F3EA}
.ta-capacity span{display:block;margin:8px 0 16px;font-weight:600;font-size:16px;color:#F7F3EA}
.ta-capacity p{font-size:14px}
.ta-costs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ta-cost-card{padding:26px;border:1px solid rgba(247,243,234,.2);border-radius:14px;display:flex;flex-direction:column}
.ta-cost-label{font-size:12px;font-weight:600;letter-spacing:.04em;color:#BAD2D6;margin-bottom:14px}
.ta-cost-card h3{font-family:'Sora',sans-serif;font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.025em;color:#F7F3EA;margin:0 0 12px}
.ta-cost-card p{font-size:15px;line-height:1.6;color:#D3E4E2;margin:0 0 22px}
.ta-cost-result{margin-top:auto;padding-top:16px;border-top:1px solid rgba(247,243,234,.16);font-size:14px;font-weight:600;color:#F7F3EA}
.ta-cost-evidence{font-size:12px;line-height:1.6;color:#BAD2D6;max-width:76em;margin:24px 0 0}
@media(max-width:760px){.ta-costs-wrap{padding:56px 24px}.ta-costs-intro{grid-template-columns:1fr;gap:24px}.ta-costs-grid{grid-template-columns:1fr}.ta-cost-card{padding:22px}}

/* A single focused benefit with restrained explanatory motion. */
[data-cost-story] .ta-costs-wrap{padding-top:64px;padding-bottom:64px}
.cost-navigation{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 24px}
.cost-navigation button,.cost-controls button{font:inherit;font-size:13px;cursor:pointer;border:1px solid rgba(247,243,234,.25);background:transparent;color:#D3E4E2;border-radius:8px;padding:10px 14px;transition:background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),transform .14s cubic-bezier(.23,1,.32,1)}.cost-navigation button:active,.cost-controls button:active{transform:scale(.97)}
.cost-navigation button span{margin-right:6px;opacity:.7}
.cost-navigation button[aria-pressed="true"]{background:#F7F3EA;color:#17484F;border-color:#F7F3EA}
.cost-stage{display:grid}.cost-slide[hidden]{display:grid !important}
.cost-slide{grid-area:1/1;display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:baseline;padding:34px 36px;background:#10373C;border:1px solid rgba(247,243,234,.17);border-radius:18px;opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity .26s cubic-bezier(.23,1,.32,1),transform .26s cubic-bezier(.23,1,.32,1),visibility 0s .26s}.cost-slide[data-on]{opacity:1;transform:none;visibility:visible;transition:opacity .26s cubic-bezier(.23,1,.32,1),transform .26s cubic-bezier(.23,1,.32,1),visibility 0s 0s}
.cost-highlight strong{display:block;color:#F7F3EA;font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(32px,3.4vw,44px);line-height:1.1;letter-spacing:-.04em}
.cost-highlight span{display:block;color:#F7F3EA;font-size:16px;margin-top:14px;max-width:20em;line-height:1.5}
.cost-copy h3{color:#F7F3EA;font-family:'Sora',sans-serif;font-size:clamp(23px,2.2vw,29px);line-height:1.2;letter-spacing:-.025em;margin:0 0 16px}
.cost-copy p{color:#D3E4E2;font-size:16px;line-height:1.6;margin:0 0 22px}
.cost-outcome{color:#F7F3EA;border-left:3px solid #E16436;padding-left:12px;font-size:14px;font-weight:600}
.cost-controls{display:flex;justify-content:space-between;align-items:center;margin-top:16px;color:#BAD2D6;font-size:12px}
.cost-controls > div{display:flex;gap:8px}
.cost-navigation button:focus-visible,.cost-controls button:focus-visible{outline:2px solid #F7F3EA;outline-offset:4px}


@media(prefers-reduced-motion:reduce){.cost-slide{animation:none}}
@media(max-width:760px){.cost-slide{grid-template-columns:1fr;gap:26px;padding:24px;align-items:start}.cost-navigation{display:grid;grid-template-columns:1fr 1fr}.cost-navigation button{text-align:left}}

/* Comparison layout is scoped to avoid interfering with interactive boards. */
.comparison-section .sy-row{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr) minmax(0,1fr);gap:0;align-items:stretch}
.comparison-section .sy-row > *{min-width:0;padding:24px;overflow-wrap:break-word}
.comparison-section .sy-rowhead{border-radius:12px 12px 0 0;background:#17484F;color:#F7F3EA !important;border-bottom:0 !important}
.comparison-section .sy-rowhead > span{padding:18px 24px}
.comparison-section .comparison-row{background:#fff;border:1px solid #E2DCCE;border-top:0}
.comparison-section .comparison-row > :nth-child(2){background:#E4F0E7;border-left:1px solid #C6E2CE;border-right:1px solid #C6E2CE}
.comparison-section .comparison-row:last-of-type{border-radius:0 0 12px 12px;overflow:hidden}
.comparison-mobile-label{display:none}
@media(max-width:860px){
 .comparison-section .sy-row.comparison-row{display:block;margin:0 0 16px;border:1px solid #E2DCCE;border-radius:12px;overflow:hidden}
 .comparison-section .sy-row > *{display:block;padding:20px}
 .comparison-section .comparison-row > :nth-child(2){border:0;border-top:1px solid #C6E2CE;border-bottom:1px solid #C6E2CE}
 .comparison-mobile-label{display:block;color:#17484F;font-size:12px;font-weight:700;letter-spacing:.03em;margin-bottom:8px}
}

/* TA hero: keep the promise together and show department-level decisions. */
.ta-hero .ta-hero-impact{color:#E16436;display:block;white-space:nowrap}
.ta-hero #sy-h1{font-size:clamp(34px,4vw,54px) !important;line-height:1.1 !important}
.sl-overview{margin:0;min-width:0;align-self:center}
.sl-card{border:1px solid #E2DCCE;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 14px 36px -24px #17484F50}
.sl-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px;background:#FAF7F0}
.sl-heading h2{font-family:'Sora',sans-serif;font-size:19px;font-weight:600;line-height:1.3;color:#17484F;margin:0}
.sl-heading p{font-size:12px;color:#677480;margin:5px 0 0}
.sl-total{background:#E4F0E7;color:#17484F;font-size:13px;font-weight:600;padding:7px 10px;border-radius:999px;white-space:nowrap}
.sl-table{width:100%;border-collapse:collapse;table-layout:fixed;color:#24403C}
.sl-table th,.sl-table td{padding:16px 20px;text-align:left;border-top:1px solid #EFEADE;font-size:14px}
.sl-table thead th{font-size:11px;font-weight:500;color:#677480;padding-top:12px;padding-bottom:12px}
.sl-table th:first-child{width:42%}
.sl-table tbody th{font-weight:600;color:#17484F}
.sl-table tbody th span{display:block;font-size:12px;font-weight:400;color:#677480;margin-top:4px}
.sl-table td b{font-family:'Sora',sans-serif;font-size:20px;font-weight:600;color:#17484F}
.sl-age{white-space:nowrap;font-size:12px;color:#4A625E}
.sl-age.overdue{color:#A8401B;background:#FCE8DF;border-radius:999px;padding:5px 9px}
.sl-summary{margin:0;padding:16px 22px;background:#FAF7F0;border-top:1px solid #EFEADE;font-size:12px;color:#4A625E;line-height:1.5}
.sl-overview figcaption{margin-top:14px;text-align:center;font-size:12px;color:#677480}
@media(max-width:600px){.ta-hero #sy-h1{font-size:clamp(30px,8.2vw,42px) !important}.sl-heading{padding:18px 14px}.sl-heading h2{font-size:17px}.sl-table th,.sl-table td{padding:14px 10px}.sl-table thead th{font-size:10px}.sl-age.overdue{padding:4px 6px}}

/* Candidate context shared by agency and TA pages. */
.candidate-memory{background:#fff;border-top:1px solid #E2DCCE;border-bottom:1px solid #E2DCCE}
.candidate-memory-wrap{max-width:1232px;margin:0 auto;padding:80px 56px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.candidate-memory h2{font-family:'Sora',sans-serif;font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.035em;color:#17484F;margin:0 0 18px}

.memory-intro{color:#4A625E;font-size:17px;line-height:1.6;margin:0 0 26px}
.memory-benefits{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.memory-benefits strong{color:#17484F;font-size:17px}
.memory-benefits p{font-size:15px;line-height:1.6;color:#4A625E;margin:7px 0 0}
.memory-preview{margin:0;border:1px solid #E2DCCE;border-radius:16px;overflow:hidden;min-width:0}
.memory-preview-head{display:flex;justify-content:space-between;gap:12px;background:#FAF7F0;padding:18px 22px;color:#17484F;font-size:16px;font-weight:600}
.memory-preview-head span{font-size:11px;color:#677480;font-weight:400;align-self:center}
.memory-person{padding:22px;border-top:1px solid #EFEADE}
.memory-person>strong{display:block;color:#17484F;font-size:17px;margin-bottom:10px}
.memory-pill{display:inline-block;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.4}
.memory-pill.recent{background:#E4F0E7;color:#17484F;border:1px solid #C6E2CE}
.memory-pill.dropout{background:#FDE7E7;color:#A32D2D;border:1px solid #F3BABA}
.memory-person dl{margin:16px 0;display:grid;gap:8px}
.memory-person dl>div{display:grid;grid-template-columns:100px 1fr;gap:12px;font-size:12px;line-height:1.5}
.memory-person dt{color:#677480}.memory-person dd{color:#24403C;margin:0}
.memory-person p{font-size:12px;line-height:1.6;color:#4A625E;background:#FAF7F0;padding:12px;margin:0;border-radius:8px}
.memory-preview figcaption{padding:14px 22px;border-top:1px solid #EFEADE;font-size:12px;color:#677480}
@media(max-width:860px){.candidate-memory-wrap{grid-template-columns:1fr;gap:32px;padding:56px 24px}}