/* =====================================================================
   SEQUENCE — subpage refresh
   Loaded last on every page except the homepage. It restyles the existing
   markup only; no diagnostic, article or legal content is changed.
   ===================================================================== */
body.seq-sub{background:var(--paper);font-size:16px;}
body.seq-sub .wrap{padding-top:clamp(40px,7vw,96px)!important;}

/* crumb under the header on article pages */
.crumbbar{max-width:var(--shell);margin:0 auto;padding:18px var(--gutter) 0;font-size:14px;font-weight:500;}
.crumbbar a{color:var(--muted);text-decoration:none;display:inline-flex;gap:8px;align-items:center;transition:color .2s,gap .3s var(--ease);}
.crumbbar a:hover{color:var(--ink);gap:12px;}
.crumbbar + .wrap{padding-top:clamp(24px,4vw,56px)!important;}

/* labels: sentence case with the brand dot, matching the homepage */
body.seq-sub .eyebrow,body.seq-sub .kicker{display:inline-flex;align-items:center;gap:10px;text-transform:none!important;letter-spacing:.005em!important;
  font-size:clamp(16px,1.3vw,18px)!important;font-weight:600!important;line-height:1.2;color:var(--pine)!important;background:var(--accent-soft);
  padding:10px 20px 10px 15px;border-radius:999px;margin-bottom:26px!important;}
body.seq-sub .doctag{display:inline-flex;align-items:center;gap:10px;text-transform:none!important;letter-spacing:0!important;
  font-size:15px!important;font-weight:600!important;color:var(--pine)!important;margin-bottom:26px!important;}
body.seq-sub .eyebrow::before,body.seq-sub .kicker::before{content:"";width:8px!important;height:8px!important;border-radius:50%;background:var(--mint)!important;flex:none;}
body.seq-sub .doctag{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;border:0!important;padding:0!important;}

/* display type */
body.seq-sub h1{font-family:var(--serif)!important;font-weight:600!important;letter-spacing:-.032em!important;line-height:1.04!important;
  font-size:clamp(36px,5.4vw,62px)!important;font-variation-settings:"opsz" 144;max-width:18ch;}
body.seq-sub article.wrap h1{max-width:22ch;}
body.seq-sub h1 em{font-style:italic;font-weight:inherit;color:var(--pine)!important;}
body.seq-sub .wrap > h2,body.seq-sub article h2{font-family:var(--serif);font-weight:600!important;letter-spacing:-.02em!important;line-height:1.15;}
body.seq-sub .lede{font-size:clamp(17px,1.7vw,20px)!important;line-height:1.55!important;color:var(--ink-soft)!important;}
body.seq-sub article.wrap p,body.seq-sub article.wrap li{font-size:17px;line-height:1.75;}
body.seq-sub article.wrap a{color:var(--pine);}
body.seq-sub .hr{border:0!important;height:1px!important;background:var(--line)!important;}

/* buttons — pill shape with motion, same palette */
body.seq-sub .btn,body.seq-sub:not(.seq-app) .cta a,body.seq-sub .btns a{border-radius:999px!important;font-weight:600;
  transition:background-color .25s,color .25s,border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease)!important;}
body.seq-sub .btn:not(:disabled):hover,body.seq-sub:not(.seq-app) .cta a:hover,body.seq-sub .btns a:hover{transform:translateY(-2px);}
body.seq-sub .btn.primary,body.seq-sub:not(.seq-app) .cta a.primary{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important;}
body.seq-sub .btn.primary:not(:disabled):hover,body.seq-sub:not(.seq-app) .cta a.primary:hover{background:var(--pine)!important;border-color:var(--pine)!important;box-shadow:0 14px 30px -14px rgba(14,107,82,.6);}

/* cards and panels */
body.seq-sub .card,body.seq-sub .c,body.seq-sub a.card,body.seq-sub a.featured,body.seq-sub .block,body.seq-sub .cs,body.seq-sub .panel,body.seq-sub .rung,
body.seq-sub .why,body.seq-sub .vs > div,body.seq-sub .honest,body.seq-sub:not(.seq-app) .cta,body.seq-sub .related,body.seq-sub .specimen,body.seq-sub .note{
  border-radius:var(--radius)!important;}
body.seq-sub a.card,body.seq-sub .c,body.seq-sub a.featured,body.seq-sub .rung{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s!important;}
body.seq-sub a.card:hover,body.seq-sub .c:hover,body.seq-sub a.featured:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow)!important;
  border-color:color-mix(in srgb,var(--pine) 35%,var(--line))!important;}
body.seq-sub a.card h2,body.seq-sub a.featured h2,body.seq-sub .c h2,body.seq-sub .block h2,body.seq-sub .cs h2{font-weight:600!important;letter-spacing:-.015em;}
body.seq-sub a.featured{background:var(--forest)!important;color:#f4f1e8!important;border-color:transparent!important;}
body.seq-sub a.featured *{color:inherit;}
body.seq-sub a.featured .ser{color:var(--mint-soft)!important;}
body.seq-sub a.featured .fl{color:#0b2a1f!important;background:var(--mint)!important;}
body.seq-sub a.featured .go{color:var(--mint)!important;}
body.seq-sub:not(.seq-app) .cta{background:var(--forest)!important;color:#f4f1e8!important;border:0!important;}
body.seq-sub:not(.seq-app) .cta h2,body.seq-sub:not(.seq-app) .cta h3{color:#f4f1e8!important;}
body.seq-sub:not(.seq-app) .cta p{color:rgba(244,241,232,.75)!important;}
body.seq-sub:not(.seq-app) .cta a{background:var(--loud)!important;color:#0f1d17!important;border-color:var(--loud)!important;}
body.seq-sub:not(.seq-app) .cta a:hover{background:var(--loud-hover)!important;border-color:var(--loud-hover)!important;}
body.seq-sub:not(.seq-app) .cta a.ghost{background:transparent!important;color:#f4f1e8!important;border:1.5px solid rgba(244,241,232,.3)!important;}

/* diagnostic tool surfaces (visual only) */
body.seq-sub .opt{border-radius:14px!important;transition:border-color .2s,background-color .2s,transform .3s var(--ease)!important;}
body.seq-sub .opt:not(.sel):hover{transform:translateX(3px);}
body.seq-sub .progress .bar,body.seq-sub .bar{border-radius:999px!important;overflow:hidden;}
body.seq-sub .bar > i{transition:width .6s var(--ease)!important;}
body.seq-sub .pill{border-radius:999px!important;}
body.seq-sub .series-nav button{border-radius:999px!important;transition:background-color .2s,color .2s,border-color .2s!important;}

/* tables */
body.seq-sub table{border-radius:12px;overflow:hidden;}

/* legacy page footers already use --accent-deep, which now maps to forest */
body.seq-sub footer a{transition:color .2s;}

/* start state for the page entrance (only when motion is confirmed running) */
.js-motion body.seq-sub > .wrap,.js-motion body.seq-sub > article.wrap{opacity:0;}
.motion-off body.seq-sub > .wrap,.motion-off body.seq-sub > article.wrap{opacity:1!important;}
@media (prefers-reduced-motion:reduce){
  body.seq-sub a.card:hover,body.seq-sub .c:hover,body.seq-sub a.featured:hover,body.seq-sub .opt:not(.sel):hover{transform:none!important;}
}