/* Facts strip + Features section (one auto-playing cursor-driven walkthrough). Values from Paper (Desktop / Tablet / Mobile boards). */

/* ---------- Facts strip ---------- */
.facts{display:flex;flex-direction:column;align-items:center;gap:28px;padding:24px 16px 64px}
.facts::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--color-border)}
.facts__line{margin:0;font-family:var(--font-heading);font-size:var(--text-base);letter-spacing:var(--tracking-tight);line-height:22px;color:var(--color-body);text-align:center}
.facts__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.facts__item{display:flex;flex-direction:column;align-items:center;gap:2px;padding-inline:40px;text-align:center}
.facts__item + .facts__item{border-left:1px solid var(--color-border);padding-block:0}
.facts__title{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);line-height:22px;color:var(--color-ink)}
.facts__text{font-family:var(--font-body);font-size:var(--text-sm);line-height:17px;color:var(--color-body)}
.facts__item + .facts__item{position:relative;border-left:0}
.facts__item + .facts__item::before{content:"";position:absolute;left:0;top:50%;height:36px;width:1px;margin-top:-18px;background:var(--color-border)}

/* ---------- Features section ---------- */
.features{padding-block:104px}
.features::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--color-border)}
.features__inner{width:min(var(--container-wide),100%);margin-inline:auto;padding-inline:var(--edge);display:flex;flex-direction:column;align-items:center;gap:56px}
.features__head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.features__pill{padding:4px 12px;border-radius:var(--radius-pill);background:var(--color-chip);color:var(--color-body);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:16px}
.features__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:-0.02em;color:var(--color-ink)}
.features__sub{margin:0;font-family:var(--font-heading);font-size:var(--text-base);letter-spacing:var(--tracking-tight);line-height:22px;color:var(--color-body)}

/* ---------- Looping, interactive walkthrough (js/features.js). Paper: "Features one border" + the six v2 page boards. ---------- */
.fdemo{width:100%;display:flex;flex-direction:column;align-items:center}
.fhead{display:flex;flex-direction:column;align-items:center;width:100%;transition:opacity .18s,transform .18s}
.fhead.is-swap{opacity:0;transform:translateY(4px)}
.fnavrow{display:flex;align-items:center;justify-content:center;gap:24px;width:100%}
.fnav{all:unset;box-sizing:border-box;flex:0 0 210px;min-width:0;cursor:pointer;font-family:var(--font-display);font-size:16px;line-height:22px;white-space:nowrap;color:var(--feat-text3);opacity:.7;transition:opacity .2s}
.fnav:hover{opacity:1}
.fnav--prev{text-align:right}
.fnav:focus-visible{outline:2px solid var(--feat-prog);outline-offset:4px;border-radius:4px}
.fnav.is-none,.fdash.is-none{visibility:hidden;pointer-events:none}
/* mini progress bars between the step labels (Paper "Round 2 final"): the bar before the active step is full, the one after it fills over the beat */
.fdash{display:block;flex:0 0 48px;height:3px;border-radius:2px;overflow:hidden;background:var(--feat-track)}
.fdash b{display:block;height:100%;background:var(--feat-amber);transform-origin:left;transform:scaleX(0)}
.fdash--prev b{transform:scaleX(1)}
.fnow{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 1 auto;min-width:0}
.fcount{display:none;font-family:var(--font-body);font-size:13px;font-weight:var(--weight-medium);letter-spacing:.02em;line-height:16px;color:var(--feat-text2)}
.fnow__title{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:36px;letter-spacing:-0.01em;color:var(--feat-ink);text-align:center;white-space:nowrap}
.fdots{display:none}
.fdesc{margin:10px 0 0;font-family:var(--font-body);font-size:var(--text-sm);line-height:20px;color:var(--feat-text2);text-align:center}
.fwin{width:100%;margin-top:28px}

/* the one demo window: a single 1px border (progress lives in the step labels / dots, not on the window) */
.fstage{position:relative;display:flex;flex-direction:column;width:100%;height:420px;overflow:hidden;background:var(--feat-notes-bg);border:1px solid var(--feat-win-border);border-radius:14px;font-family:var(--font-ui);font-size:12px;line-height:16px;color:var(--feat-ink);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.fstage:focus-visible{outline:2px solid var(--feat-prog);outline-offset:3px}
.fstage__bar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:44px;padding-inline:16px;border-bottom:1px solid var(--feat-line)}
.fstage__who{display:flex;align-items:center;gap:10px}
.fstage__who b{font-size:13px;font-weight:700}
.fstage__tk{padding:3px 10px;border:1px solid var(--feat-ctl-border);border-radius:6px;color:var(--feat-text2);transition:background-color .25s,border-color .25s,color .25s}
.fstage__tk.is-on{background:var(--feat-on-bg);border-color:var(--feat-on-bg);color:var(--feat-on-ink);font-weight:600}
/* header ticker chip at rest (Paper): light = #E8ECF3 fill, ink 600; dark = 1px #2A3441 outline, #E5E7EB 400 */
.fstage__tk:not(.is-on){color:#E5E7EB;font-weight:400}
:root[data-theme="light"] .fstage__tk:not(.is-on){background:#E8ECF3;border-color:#E8ECF3;color:#061236;font-weight:600}
.fstage__meta{font-family:var(--font-mono);font-size:11px;line-height:14px;color:var(--feat-text3)}
.fstage .fscenes{position:relative;flex:1;min-height:0}
.fstage .fscene{position:absolute;inset:0;display:flex;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.fstage .fscene.is-live{opacity:1;visibility:visible;transition:opacity .35s}
/* autoplay: the window only reads taps; once a visitor taps in (is-manual) the real controls answer */
.fdemo:not(.is-manual) .fstage *{pointer-events:none}
.fdemo:not(.is-manual) .fstage{cursor:pointer}
.fdemo.is-manual .fstage :is(.fchip:not(.fchip--add),.sopt,.atk,.hrow,.dbtn,.dtb,.dc--s){cursor:pointer}
.fdemo.is-manual .fstage .fchip:not(.fchip--add):hover,.fdemo.is-manual .fstage .sopt:hover,.fdemo.is-manual .fstage .atk:hover,.fdemo.is-manual .fstage .dbtn:hover{border-color:var(--feat-hover)}
.fdemo.is-manual .fstage :focus-visible{outline:2px solid var(--feat-prog);outline-offset:2px}
.fdemo.is-manual .fstage .fcursor,.fdemo.is-manual .fstage .fring{display:none}

/* scene 0: chips */
.fstage .fscene--chips{flex-wrap:wrap;align-content:center;gap:10px;padding:28px 56px}
.fstage .fchip{display:inline-block;padding:7px 12px;border:1px solid var(--feat-ctl-border);border-radius:6px;color:var(--feat-ink);transition:background-color .2s,border-color .2s,color .2s}
.fstage .fchip.is-on{background:var(--feat-on-bg);border-color:var(--feat-on-bg);color:var(--feat-on-ink)}
.fstage .fchip--add{background:var(--feat-on-bg);border-color:var(--feat-nb);font-weight:600}
.fstage .fchip--add.is-typing::after{content:"";display:inline-block;width:1px;height:13px;margin-left:1px;vertical-align:-2px;background:var(--feat-ink);animation:fcaret .8s steps(1) infinite}
.fstage .fchip--new.is-on{background:var(--feat-on-bg);border-color:var(--feat-nb)}
@keyframes fcaret{50%{opacity:0}}

/* scene 1: scale */
.fstage .fscene--scale{flex-direction:column;justify-content:center;gap:14px;padding:0 min(330px,30%)}
.fstage .srow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fstage .sopts{display:flex;gap:6px}
.fstage .sopt{display:flex;align-items:center;justify-content:center;width:28px;height:24px;border:1px solid var(--feat-ctl-border);border-radius:5px;color:var(--feat-text3);font-family:var(--font-mono);font-size:11px;line-height:14px;transition:background-color .2s,border-color .2s,color .2s}
.fstage .sopt.is-on{background:var(--feat-on-bg);border-color:var(--feat-on-bg);color:var(--feat-on-ink);font-weight:600}

/* Settings view extras (Paper "NEW Features step 2b"): dashed add row, Reset + Save */
.fstage .sadd{display:flex;align-items:center;justify-content:center;height:32px;border:1px dashed var(--feat-ctl-border);border-radius:8px;color:var(--feat-text3);font-size:12px;line-height:16px}
.fstage .sbtns{display:flex;justify-content:flex-end;gap:8px}
.fstage .sbtn{padding:7px 14px;border:1px solid var(--feat-ctl-border);border-radius:8px;color:var(--feat-text2);font-size:12px;font-weight:600;line-height:16px}
.fstage .sbtn--save{padding:7px 15px;border:1px solid var(--feat-save-border);background:var(--feat-on-bg);color:var(--feat-on-ink);font-weight:600}
:root{--feat-prog:#E5E7EB;--feat-save-border:#3A4656;--feat-nb:#3A4656;--feat-hover:#5A6679}
:root[data-theme="light"]{--feat-prog:#061236;--feat-save-border:#D5DAE5;--feat-nb:#D5DAE5;--feat-hover:#B9C0CF}

/* scene 5: scoring view (Paper "NEW Features step 1"): each criterion 1-5, Total row. Also the gear that opens Settings. */
.fstage .fscene--score{flex-direction:column;justify-content:center;gap:14px;padding:0 min(330px,30%)}
.fstage .fscene--score .srow__label{color:var(--feat-text2);font-size:13px;line-height:18px}
.fstage .spill{display:flex;align-items:center;justify-content:center;width:28px;height:24px;border:1px solid var(--feat-ctl-border);border-radius:5px;color:var(--feat-text3);font-family:var(--font-mono);font-size:11px;line-height:14px;transition:background-color .2s,border-color .2s,color .2s}
.fstage .spill.is-on{background:var(--feat-on-bg);border-color:var(--feat-on-bg);color:var(--feat-on-ink);font-weight:600}
.fstage .stotal{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--feat-line)}
.fstage .stotal__label{font-size:13px;font-weight:600;line-height:18px;color:var(--feat-ink)}
.fstage .stotal__val{display:flex;align-items:baseline;gap:8px;font-family:var(--font-mono)}
.fstage .stotal__val b{font-size:13px;font-weight:600;line-height:18px;color:var(--feat-ink)}
.fstage .stotal__val i{font-style:normal;font-size:11px;line-height:14px;color:var(--feat-text2)}
.fstage .fstage__gear{display:none;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--feat-gear-bg);color:var(--feat-ink)}
.fstage.is-gear .fstage__gear{display:flex}
.fstage.is-gear .fstage__meta{display:none}
:root{--feat-gear-bg:#2A3441}
:root[data-theme="light"]{--feat-gear-bg:#E8ECF3}

/* scene 2: auto-save */
.fstage .fscene--auto{flex-direction:column;justify-content:center;gap:14px;padding:0 min(283px,22%)}
.fstage .aflow{display:flex;align-items:center;gap:14px}
.fstage .atk{padding:6px 12px;border:1px solid var(--feat-ctl-border);border-radius:6px;color:var(--feat-text2);transition:background-color .25s,border-color .25s,color .25s}
.fstage .atk.is-to{background:var(--feat-on-bg);border-color:var(--feat-on-bg);color:var(--feat-on-ink);font-weight:600}
.fstage .aarrow{flex-shrink:0;color:var(--feat-arrow)}
.fstage .amsg{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px dashed var(--feat-nb);border-radius:8px;background:var(--feat-on-bg);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.fstage .amsg.is-in{opacity:1;transform:none}
.fstage .amsg__tags{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fstage .tag-auto{padding:1px 5px;border:1px solid var(--feat-ctl-border);border-radius:4px;color:var(--feat-text3);font-family:var(--font-mono);font-size:10px;line-height:12px}
.fstage .pct-badge{padding:2px 6px;border-radius:4px;background:var(--feat-pill-high);color:var(--feat-pill-ink);font-family:var(--font-mono);font-size:11px;font-weight:600;line-height:14px}

/* scene 3: history */
.fstage .fscene--hist{flex-direction:column;justify-content:center;padding:0 min(213px,14%)}
.fstage .hrow{display:flex;align-items:center;justify-content:space-between;height:32px;border:1px solid transparent;border-bottom-color:var(--feat-line);border-radius:6px;font-size:11px;line-height:14px;transition:background-color .2s,border-color .2s,margin .2s,padding .2s}
.fstage .hrow:last-child{border-bottom-color:transparent}
.fstage .hrow__date{flex-shrink:0;width:96px;font-family:var(--font-mono);color:var(--feat-text3)}
.fstage .hrow__kind{flex:1 1 0;display:flex;align-items:center;gap:6px;color:var(--feat-text3)}
.fstage .hrow__pct{font-family:var(--font-mono);font-weight:600;color:var(--feat-high)}
.fstage .hrow__pct.s-mid{color:var(--feat-mid)}
.fstage .hbadge{display:none;padding:1px 5px;border-radius:3px;background:var(--feat-on-bg);color:var(--feat-on-ink);font-size:10px;font-weight:600;line-height:12px}
.fstage .hbadge--ro{background:transparent;border:1px solid var(--feat-ctl-border);color:var(--feat-text2);font-weight:400}
.fstage .hrow.is-hot{margin-inline:-6px;padding-inline:6px;background:var(--feat-on-bg);border:1px dashed var(--feat-nb)}
.fstage .hrow.is-hot .hrow__date,.fstage .hrow.is-hot .hrow__kind{color:var(--feat-ink)}
.fstage .hrow.is-hot .hbadge:not(.hbadge--ro),.fstage .hrow.is-open .hbadge--ro{display:inline-block}

/* scene 4: dashboard */
.fstage .fscene--dash{flex-direction:column}
.fstage .dtop{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:44px;padding-inline:16px;border-bottom:1px solid var(--feat-line)}
.fstage .dtabs,.fstage .dexp{display:flex;gap:6px}
.fstage .dtb{padding:5px 12px;border-radius:6px;color:var(--feat-text3)}
.fstage .dtb.is-on{background:var(--feat-on-bg);color:var(--feat-on-ink);font-weight:600}
.fstage .dbtn{padding:5px 12px;border:1px solid var(--feat-ctl-border);border-radius:6px;color:var(--feat-text2);transition:background-color .2s,border-color .2s,color .2s}
.fstage .dbtn.is-hit{background:var(--feat-on-bg);border-color:var(--feat-nb);color:var(--feat-ink)}
.fstage .dtable{display:flex;flex-direction:column}
.fstage .dr{display:flex;align-items:center;height:40px;padding-inline:16px;border-bottom:1px solid var(--feat-line);font-size:13px;line-height:16px;color:var(--feat-text2);background:transparent}
.fstage .dr--head{height:auto;padding-block:10px;font-size:11px;font-weight:600;letter-spacing:.06em;line-height:14px;color:var(--feat-text3);order:-1}
.fstage .dr:last-child{border-bottom:0}
.fstage .dc{flex-shrink:0}
.fstage .dc--t{width:200px;font-weight:600;color:var(--feat-ink)}
.fstage .dc--s{width:120px;font-family:var(--font-mono);font-weight:600;color:var(--feat-high)}
.fstage .dc--s.s-mid{color:var(--feat-mid)}
.fstage .dr--head .dc--s{font-family:var(--font-ui);transition:color .2s}
.fstage .dr--head .dc--s.is-sorted{color:var(--feat-ink)}
.fstage .dc--n{width:160px;font-family:var(--font-mono)}
.fstage .dc--u{width:240px}
.fstage .dc--c{flex:1;text-align:right;font-family:var(--font-mono)}
.fstage .dr.is-first{background:var(--feat-row-hover)}
.fstage .dtoast{position:absolute;right:16px;bottom:14px;padding:8px 12px;border:1px solid var(--feat-high);border-radius:8px;background:color-mix(in srgb,var(--feat-high) 13%,var(--feat-inset));color:var(--feat-ink);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.fstage .dtoast.is-in{opacity:1;transform:none}

/* cursor + click ring */
.fstage .fcursor{position:absolute;left:0;top:0;z-index:3;opacity:0;fill:#fff;stroke:#0A0D12;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 2px 3px #00000066);transition:transform .75s cubic-bezier(.45,.05,.25,1),opacity .3s;will-change:transform}
:root[data-theme="light"] .fcursor{fill:#061236;stroke:#fff}
.fstage .fcursor.is-on{opacity:1}
.fstage .fring{position:absolute;left:0;top:0;z-index:2;width:28px;height:28px;margin:-14px 0 0 -14px;border:2px solid var(--feat-amber);border-radius:50%;opacity:0;pointer-events:none}
.fstage .fring.is-click{animation:fring .55s ease-out}
@keyframes fring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}

/* ---------- Tablet (600-1199) + phone (<=599): current step only, counter + five dots, shorter window. Paper "FINAL · Features step 1/2a/2b" tablet 810 + mobile 390 ---------- */
@media (max-width:1199px){
  .fnav,.fdash{display:none}
  .fcount{display:block;order:1;margin-bottom:8px;line-height:14px}
  .fnow{flex:1 1 auto;gap:0}
  .fnow__title{order:3;white-space:normal}
  .fdots{order:2;display:flex;margin-bottom:6px}
  /* dots: 6px dot, 20x4 active pill, 6px apart. The hit area is 30x30 (negative margins give the Paper layout size) */
  .fdemo .fdot{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:-12px -9px;cursor:pointer}
  .fdemo .fdot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--feat-dot);transition:width .2s,height .2s,border-radius .2s,background-color .2s}
  .fdemo .fdot.is-active{width:30px;margin-inline:-2px}
  .fdemo .fdot.is-active::before{width:20px;height:4px;border-radius:2px;background:var(--feat-track)}
  .fdot i{display:none;position:absolute;left:50%;top:50%;width:20px;height:4px;margin:-2px 0 0 -10px;border-radius:2px;background:var(--feat-amber);transform-origin:left;transform:scaleX(0)}
  .fdot.is-active i{display:block}
  .fdot:focus-visible{outline:2px solid var(--feat-prog);outline-offset:1px;border-radius:4px}
  :root[data-theme="light"] .fdots{--feat-track:#DCE0E8;--feat-dot:#DCE0E8}
  .fhead{max-width:600px}
  .fdemo .fdesc{margin-top:10px;font-size:13px;line-height:18px}
  .fwin{margin-top:24px}
  .fstage{height:360px}
  .facts{padding-inline:16px}
  .facts__item{padding-inline:10px}
  .features{padding-block:88px}
  .fstage .fscene--chips{padding:0 48px;gap:10px;justify-content:center}
  .fstage .fchip{padding:5px 11px}
  .dc--t{width:25%}
  .dc--s{width:18%}
  .dc--n{width:20%}
  .dc--u{width:25%}
  /* scoring + Settings views: 160px side padding at 730 (Paper), easing in on narrower tablets so the rows never collide */
  .fstage .fscene--scale,.fstage .fscene--score{padding:0 clamp(24px,calc((100% - 408px)/2),160px);gap:14px}
}
@media (min-width:600px) and (max-width:1199px){
  .features__inner{width:min(730px,100% - 80px);max-width:none;padding-inline:var(--edge)}
  .fdemo .fnow__title{font-size:27px;line-height:32px}
}
@media (max-width:599px){
  .facts{padding:32px 16px 40px;gap:24px}
  .facts__line{max-width:none;font-size:min(var(--text-base),calc((100vw - 32px) * .0405));text-wrap:balance}   /* two lines on phone (owner 2026-10-31) */
  .facts__list{display:grid;grid-template-columns:1fr 1fr;row-gap:20px;width:100%;max-width:358px}
  .facts__item{padding-inline:8px}
  .facts__item + .facts__item::before{display:none}
  .facts__item:nth-child(even){border-left:1px solid var(--color-border)}
  .features{padding-block:64px}
  .features__inner{width:100%;padding-inline:16px;gap:32px}
  .features__title{font-size:38px;line-height:44px;max-width:358px}
  .features__sub{max-width:320px}
  /* phone order: counter, title, dots, description, each 8px apart */
  .fcount{order:1;margin-bottom:8px}
  .fnow__title{order:2;margin-bottom:8px}
  .fdots{order:3;margin-bottom:0}
  .fdemo .fdesc{margin-top:8px;max-width:330px}
  .fwin{margin-top:20px}
  .fstage{height:300px}
  .fstage__bar{height:44px;padding-inline:16px}
  .fstage .fscene--chips{padding:0 20px;gap:10px;justify-content:flex-start}
  .fstage .fchip{padding:5px 11px}
  .fstage .fscene--scale,.fstage .fscene--score{padding:0 16px;gap:14px}
  .fscene--auto{padding:0 20px}
  .fscene--hist{padding:0 20px}
  .fstage .dr{height:34px}
  .dc--u,.dc--n{display:none}
  .dc--t{width:34%}
  .dc--s{width:30%}
  .dr{padding-inline:12px}
  .dtop{padding-inline:12px}
  .dtb:nth-child(n+2){display:none}
}
@media (prefers-reduced-motion:reduce){.fhead{transition:none}}