/* ═══════════════════════════════════════════════════
   NAVORAHR — TOOLS PAGE  ·  Stacked Tailark sections + scroll fade
   One section per tool, stacked. Subtle fade-up reveal on scroll.
   Dashboard mockup flips light/dark; dark-mode buttons lighter shade.
═══════════════════════════════════════════════════ */
.tf-scope{
  --tf-bg:#09090f;--tf-bg2:#0f0f18;
  --tf-text:#fff;--tf-t2:rgba(255,255,255,.66);--tf-t3:rgba(255,255,255,.45);
  --tf-border:rgba(255,255,255,.1);
  --tf-accent:#818cf8;--tf-kick-bg:rgba(99,102,241,.12);--tf-kick-bd:rgba(167,139,250,.3);--tf-kick-tx:#a88cff;
  --tf-grad:linear-gradient(120deg,#7ba4ff,#a88cff 50%,#f5b8d0);
  /* dashboard mockup — DARK */
  --d-bg:#0d0d15;--d-surface:#15151f;--d-card:#1a1a26;--d-border:rgba(255,255,255,.09);--d-line:rgba(255,255,255,.06);
  --d-text:#fff;--d-t2:rgba(255,255,255,.58);--d-t3:rgba(255,255,255,.38);--d-fill:rgba(255,255,255,.05);
  --d-shadow:0 40px 90px rgba(0,0,0,.5);
}
[data-theme="light"] .tf-scope{
  --tf-bg:#faf8f3;--tf-bg2:#f3f0e9;
  --tf-text:#0a0a14;--tf-t2:rgba(10,10,20,.66);--tf-t3:rgba(10,10,20,.48);
  --tf-border:rgba(10,10,30,.08);
  --tf-accent:#3730a3;--tf-kick-bg:rgba(99,102,241,.08);--tf-kick-bd:rgba(99,102,241,.25);--tf-kick-tx:#3730a3;
  --tf-grad:linear-gradient(120deg,#3730a3,#4f46e5 50%,#a8245a);
  /* dashboard mockup — LIGHT */
  --d-bg:#fbfbfd;--d-surface:#ffffff;--d-card:#f6f6f9;--d-border:#ececf0;--d-line:#f0f0f4;
  --d-text:#1e1b4b;--d-t2:#6b6b80;--d-t3:#9a9aab;--d-fill:#f2f2f6;
  --d-shadow:0 40px 90px rgba(13,24,64,.13);
}
/* button shade: lighter tool color in dark, full tool color in light */
.tf-scope .tf-section{--btn:var(--tool-lite);--btn-tx:#0d0d15;}
[data-theme="light"] .tf-scope .tf-section{--btn:var(--tool);--btn-tx:#fff;}

.tf-scope{position:relative;background:var(--tf-bg);color:var(--tf-text);overflow-x:clip;}
.tf-scope *{box-sizing:border-box;}
.tf-accent{background:var(--tf-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}

/* hero */
.tf-hero{max-width:64rem;margin:0 auto;padding:72px 24px 8px;text-align:center;}
.tf-kicker{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tf-kick-tx);border:1px solid var(--tf-kick-bd);background:var(--tf-kick-bg);padding:8px 18px;border-radius:99px;margin-bottom:20px;}
.tf-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;letter-spacing:-.04em;line-height:1.04;}
.tf-hero p{margin:18px auto 0;max-width:36rem;font-size:clamp(1rem,1.3vw,1.15rem);color:var(--tf-t2);line-height:1.55;}

/* section */
.tf-section{padding:60px 0;}
.tf-section + .tf-section{border-top:1px solid var(--tf-border);}
.tf-inner{max-width:64rem;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:42px;}

/* header */
.tf-head{display:grid;gap:16px;align-items:center;}
@media(min-width:768px){.tf-head{grid-template-columns:1fr 1fr;gap:48px;}}
.tf-eyebrow{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;}
.tf-eyebrow .tf-eb-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;}
.tf-eyebrow .tf-eb-ic svg{width:14px;height:14px;}
.tf-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.025em;line-height:1.08;color:var(--tf-text);}
.tf-head p{max-width:24rem;font-size:1rem;color:var(--tf-t2);line-height:1.6;}
@media(min-width:768px){.tf-head p{margin-left:auto;}}

/* product shot */
.tf-shot-wrap{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--d-shadow);border:1px solid var(--d-border);}
.tf-shot-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;background:linear-gradient(to top,var(--tf-bg),transparent);pointer-events:none;z-index:5;}

/* ─────── dashboard mockup ─────── */
.tf-dash{background:var(--d-bg);min-height:430px;display:flex;flex-direction:column;}
.tf-dash-top{display:flex;align-items:center;gap:14px;padding:15px 20px;background:var(--d-surface);border-bottom:1px solid var(--d-border);}
.tf-dash-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.88rem;color:var(--d-text);}
.tf-dash-bic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;background:var(--tool);}
.tf-dash-bic svg{width:15px;height:15px;}
.tf-dash-tabs{display:flex;gap:4px;margin-left:14px;}
.tf-dash-tab{font-size:.76rem;color:var(--d-t3);padding:5px 11px;border-radius:7px;font-weight:500;background:transparent;border:none;appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;}
.tf-dash-tab.on{color:var(--d-text);background:var(--d-fill);}
.tf-dash-tab:hover{color:var(--d-text);}
.tf-dash-btn{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--btn-tx);background:var(--btn);padding:8px 15px;border-radius:8px;}
.tf-dash-body{padding:20px;display:flex;flex-direction:column;gap:14px;flex:1;}

.tf-m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.tf-m{background:var(--d-card);border:1px solid var(--d-border);border-radius:12px;padding:14px;}
.tf-m-v{font-size:1.4rem;font-weight:800;color:var(--d-text);line-height:1.1;}
.tf-m-v .u{font-size:.78rem;color:var(--d-t3);font-weight:700;}
.tf-m-l{font-size:.64rem;color:var(--d-t2);text-transform:uppercase;letter-spacing:.04em;margin-top:5px;font-weight:600;}
.tf-m-chip{font-size:.62rem;font-weight:700;color:#10b981;margin-top:5px;display:inline-block;}

.tf-panel{background:var(--d-card);border:1px solid var(--d-border);border-radius:12px;padding:16px;}
.tf-panel-pad0{padding:4px 16px;}
.tf-p-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.tf-p-t{font-size:.85rem;font-weight:700;color:var(--d-text);}
.tf-p-s{font-size:.72rem;color:var(--d-t3);}

.tf-bars{display:flex;align-items:flex-end;gap:9px;height:84px;}
.tf-bar{flex:1;border-radius:5px 5px 2px 2px;background:var(--tool);}
[data-theme="dark"] .tf-scope .tf-bar{background:var(--tool-lite);}

.tf-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--d-line);}
.tf-row:last-child{border:none;}
.tf-av{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:#fff;flex-shrink:0;}
.tf-rn{font-size:.82rem;font-weight:700;color:var(--d-text);}
.tf-rs{font-size:.7rem;color:var(--d-t2);}
.tf-pill{margin-left:auto;font-size:.64rem;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap;}
.tf-pill.ok{color:#10b981;background:rgba(16,185,129,.14);}
.tf-pill.warn{color:#d97706;background:rgba(217,119,6,.16);}
[data-theme="dark"] .tf-scope .tf-pill.warn{color:#fbbf24;}
.tf-pill.muted{color:var(--d-t2);background:var(--d-fill);}

.tf-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.tf-cell{aspect-ratio:1;border-radius:6px;background:var(--d-fill);display:flex;align-items:center;justify-content:center;font-size:.68rem;color:var(--d-t3);font-weight:600;}
.tf-cell.present{background:color-mix(in srgb,var(--tool) 22%,transparent);color:var(--tool-lite);}
.tf-cell.leave{background:rgba(217,119,6,.18);color:#d97706;}
[data-theme="dark"] .tf-scope .tf-cell.leave{color:#fbbf24;}
[data-theme="light"] .tf-scope .tf-cell.present{color:var(--tool);}

.tf-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.tf-col{background:var(--d-card);border:1px solid var(--d-border);border-radius:10px;padding:11px;min-height:120px;}
.tf-col-h{font-size:.66rem;font-weight:700;color:var(--d-t2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px;display:flex;justify-content:space-between;}
.tf-chip{background:var(--d-fill);border-radius:7px;padding:7px 9px;margin-bottom:6px;font-size:.72rem;font-weight:600;color:var(--d-text);}

.tf-prog{display:flex;justify-content:space-between;margin-bottom:8px;}
.tf-prog-n{font-size:.8rem;font-weight:700;color:var(--d-text);}
.tf-prog-v{font-size:.72rem;color:var(--d-t3);}
.tf-track{height:7px;border-radius:99px;background:var(--d-fill);overflow:hidden;margin-bottom:14px;}
.tf-track:last-child{margin-bottom:0;}
.tf-fill{height:100%;border-radius:99px;background:var(--tool);}
[data-theme="dark"] .tf-scope .tf-fill{background:var(--tool-lite);}

.tf-stars{display:flex;gap:5px;}
.tf-star{font-size:1.1rem;color:var(--d-t3);}
.tf-star.f{color:#f59e0b;}

.tf-letter{background:var(--d-surface);border:1px solid var(--d-border);border-radius:10px;padding:18px;font-size:.78rem;color:var(--d-text);line-height:1.7;}
.tf-letter .bl{background:color-mix(in srgb,var(--tool) 20%,transparent);color:var(--tool-lite);padding:1px 6px;border-radius:4px;font-weight:700;}
[data-theme="light"] .tf-scope .tf-letter .bl{color:var(--tool);}

.tf-qa{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tf-qa-item{background:var(--d-card);border:1px solid var(--d-border);border-radius:11px;padding:14px;display:flex;align-items:center;gap:11px;font-size:.82rem;font-weight:700;color:var(--d-text);}
.tf-qa-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.tf-qa-ic svg{width:17px;height:17px;}

/* realistic phone device — modern iPhone (Dynamic Island, thin uniform bezels) */
.tf-shot-phone .tf-dash-body{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--tool) 14%,transparent),transparent 60%);}
.tf-phone-wrap{padding:18px 0;display:flex;justify-content:center;}
.tf-phone{position:relative;width:290px;background:linear-gradient(150deg,#2a2a32,#0a0a12 40%);border-radius:50px;padding:5px;box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 1.5px rgba(255,255,255,.1);}
/* titanium-style side buttons */
.tf-phone::before{content:"";position:absolute;left:-2px;top:120px;width:3px;height:34px;border-radius:3px;background:linear-gradient(90deg,#3a3a42,#1a1a22);box-shadow:0 56px 0 #2a2a32,0 110px 0 #2a2a32;}
.tf-phone::after{content:"";position:absolute;right:-2px;top:150px;width:3px;height:62px;border-radius:3px;background:linear-gradient(270deg,#3a3a42,#1a1a22);}
.tf-phone-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:104px;height:30px;background:#000;border-radius:99px;z-index:5;}
/* tiny camera dot inside the island */
.tf-phone-notch::after{content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3a55,#05060a 70%);box-shadow:inset 0 0 0 1px rgba(120,160,255,.18);}
.tf-phone-screen{background:linear-gradient(175deg,#16131f,#0d0a24);border-radius:51px;padding:48px 20px 14px;overflow:hidden;}
.tf-phone-status{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.92);font-size:.78rem;font-weight:700;margin-bottom:18px;padding:0 6px;}
.tf-phone-status-r{letter-spacing:1px;font-size:.66rem;}
.tf-phone-h{color:#fff;font-weight:800;font-size:1.18rem;letter-spacing:-.01em;}
.tf-phone-sub{color:rgba(255,255,255,.5);font-size:.78rem;margin:3px 0 16px;}
.tf-phone-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tf-phone-btn{border:none;border-radius:18px;padding:18px 12px;font-weight:700;font-size:.86rem;color:#fff;cursor:pointer;font-family:inherit;transition:transform .12s,filter .15s;box-shadow:0 6px 16px rgba(0,0,0,.25);}
.tf-phone-btn:hover{filter:brightness(1.1);}
.tf-phone-btn:active{transform:scale(.95);}
.tf-phone-card{margin-top:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 16px;}
.tf-phone-card-l{color:rgba(255,255,255,.5);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.tf-phone-card-v{color:#fff;font-weight:800;font-size:1.02rem;margin-top:4px;}

/* standalone phone (no surrounding dashboard card at all) */
.tf-shot-bare{background:none !important;border:none !important;box-shadow:none !important;padding:0;display:flex;justify-content:center;overflow:visible;border-radius:0;transform:none !important;}
.tf-shot-bare::after{display:none !important;content:none !important;}
.tf-shot-bare:hover{box-shadow:none !important;transform:none !important;}
.tf-shot-bare .tf-phone{margin:6px auto 0;}
/* screen is a column: scrollable content area above a floating nav */
.tf-phone-screen{display:flex;flex-direction:column;position:relative;}
.tf-phone-views{flex:0 0 auto;height:400px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.tf-phone-views::-webkit-scrollbar{display:none;}
.tf-phone-view{display:none;animation:tf-phone-fade .3s ease;}
.tf-phone-view.on{display:block;}
@keyframes tf-phone-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* floating rounded (pill) bottom nav inside the phone */
.tf-phone-nav{display:flex;justify-content:space-around;align-items:center;gap:4px;margin:14px 4px 6px;padding:8px 10px;border-radius:26px;background:rgba(30,28,46,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px rgba(0,0,0,.35);}
.tf-phone-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:none;background:none;cursor:pointer;font-family:inherit;color:rgba(255,255,255,.5);padding:6px 0;border-radius:18px;transition:color .18s,background .18s;}
.tf-phone-tab svg{width:21px;height:21px;}
.tf-phone-tab span{font-size:.62rem;font-weight:600;letter-spacing:.01em;}
.tf-phone-tab.on{color:#fff;background:rgba(255,255,255,.1);}
.tf-phone-tab.on svg{stroke:#b9a6ff;}
.tf-phone-tab:active{transform:scale(.93);}
/* small section label used inside phone views */
.tf-phone-label{color:rgba(255,255,255,.42);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:16px 2px 8px;}
/* stat pair row (e.g. profile quick stats) */
.tf-phone-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.tf-phone-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:13px 14px;}
.tf-phone-stat-v{color:#fff;font-weight:800;font-size:1.15rem;}
.tf-phone-stat-l{color:rgba(255,255,255,.5);font-size:.66rem;font-weight:600;margin-top:2px;}
/* activity / progress bar inside phone */
.tf-phone-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px;}
.tf-phone-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7c83ff,#b9a6ff);}
/* chips row */
.tf-phone-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.tf-phone-chip{font-size:.7rem;font-weight:600;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:99px;padding:6px 12px;}

.tf-seg{display:flex;height:13px;border-radius:99px;overflow:hidden;gap:3px;margin-top:10px;}
.tf-seg span{height:100%;border-radius:3px;}
.tf-seg-legend{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap;}
.tf-seg-leg{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--d-t2);font-weight:500;}
.tf-seg-dot{width:9px;height:9px;border-radius:50%;}

/* feature points */
.tf-feats{display:grid;grid-template-columns:1fr 1fr;gap:24px 12px;}
@media(min-width:640px){.tf-feats{gap:32px;}}
@media(min-width:1024px){.tf-feats{grid-template-columns:repeat(4,1fr);}}
.tf-feat{display:flex;flex-direction:column;gap:9px;}
.tf-feat-h{display:flex;align-items:center;gap:8px;}
.tf-feat-h svg{width:16px;height:16px;color:var(--tf-text);}
.tf-feat-h h3{font-size:.88rem;font-weight:600;color:var(--tf-text);}
.tf-feat p{font-size:.85rem;color:var(--tf-t3);line-height:1.55;}

/* closing cta */
.tf-cta{max-width:64rem;margin:0 auto;padding:90px 24px;text-align:center;border-top:1px solid var(--tf-border);}
.tf-cta h2{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;}
.tf-cta p{margin:16px auto 0;color:var(--tf-t2);font-size:1.1rem;}
.tf-cta-btns{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.tf-b1{background:var(--tf-grad);padding:15px 32px;border-radius:12px;font-weight:700;font-size:.98rem;color:#fff;text-decoration:none;}
.tf-b2{padding:15px 28px;border-radius:12px;font-weight:600;font-size:.98rem;border:1px solid var(--tf-border);color:var(--tf-t2);text-decoration:none;}

/* ─────── SCROLL FADE (the only animation) ─────── */
.tf-fade{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}
.tf-fade.in{opacity:1;transform:none;}
/* stagger the three blocks inside a section */
.tf-fade.d1{transition-delay:.06s;}
.tf-fade.d2{transition-delay:.14s;}
@media(prefers-reduced-motion:reduce){.tf-fade{opacity:1!important;transform:none!important;transition:none!important;}}

/* ── multi-page dashboard ── */
.tf-page{display:none;flex-direction:column;gap:13px;}
.tf-page.on{display:flex;animation:tf-pagein .35s ease;}
@keyframes tf-pagein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ── 3D tilt on dashboard box (cursor-follow, set via JS) ── */
.tf-shot-wrap{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform:perspective(1200px) rotateX(0deg) rotateY(0deg);will-change:transform;}
.tf-shot-wrap.tilting{transition:transform .08s ease,box-shadow .4s ease;}
@media(hover:hover){
  .tf-shot-wrap:hover{box-shadow:0 50px 110px rgba(0,0,0,.55);}
  [data-theme="light"] .tf-scope .tf-shot-wrap:hover{box-shadow:0 50px 110px rgba(13,24,64,.18);}
}

/* ── inner cards: hover lift + click highlight ── */
@media(hover:hover){
  .tf-m,.tf-panel,.tf-qa-item,.tf-col{transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s ease,box-shadow .2s ease;}
  .tf-m:hover,.tf-panel:hover,.tf-col:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tool) 40%,var(--d-border));box-shadow:0 10px 24px rgba(0,0,0,.18);}
  [data-theme="light"] .tf-scope .tf-m:hover,[data-theme="light"] .tf-scope .tf-panel:hover,[data-theme="light"] .tf-scope .tf-col:hover{box-shadow:0 10px 24px rgba(13,24,64,.08);}
}

/* ── clean buttons: solid + press-down only ── */
.tf-dash-btn{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--btn-tx);background:var(--btn);padding:8px 15px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;transition:transform .1s ease;}
.tf-dash-btn:active{transform:translateY(1px) scale(.98);}
.tf-dash-btn:disabled{opacity:.6;cursor:default;}
.tf-act{font-size:.7rem;font-weight:700;padding:6px 12px;border-radius:7px;cursor:pointer;border:1px solid var(--d-border);background:var(--d-surface);color:var(--d-t2);font-family:inherit;transition:transform .1s ease;}
.tf-act:active{transform:translateY(1px) scale(.98);}
.tf-act.primary{background:var(--btn);color:var(--btn-tx);border-color:transparent;}
.tf-phone-btn{border:none;border-radius:14px;padding:16px 10px;font-weight:700;font-size:.8rem;color:#fff;cursor:pointer;font-family:inherit;transition:transform .1s ease;}
.tf-phone-btn:active{transform:translateY(1px) scale(.97);}

/* interactive affordances (kept minimal) */
.tf-dash-tab{cursor:pointer;}
.tf-acts{margin-left:auto;display:flex;gap:6px;}
.tf-cell{cursor:pointer;transition:transform .12s,background .2s;}
.tf-cell:hover{transform:scale(1.1);}
.tf-chip{cursor:grab;}
.tf-chip:active{cursor:grabbing;}
.tf-chip.dragging{opacity:.4;}
.tf-col.over{outline:2px dashed var(--tool);outline-offset:-3px;}
.tf-star{cursor:pointer;transition:transform .1s;}
.tf-star:hover{transform:scale(1.2);}
.tf-qa-item{cursor:pointer;font-family:inherit;text-align:left;}
.tf-qa-item:active{transform:translateY(1px) scale(.98);}
.tf-search{width:100%;border:1px solid var(--d-border);background:var(--d-surface);border-radius:10px;padding:11px 14px;font-size:.82rem;color:var(--d-text);outline:none;font-family:inherit;margin-bottom:2px;}
.tf-search:focus{border-color:var(--tool);}
.tf-search::placeholder{color:var(--d-t3);}

/* ── curvy waypoint connector ── */
.tf-connector{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible;}
.tf-connector path{fill:none;stroke-linecap:round;}
.tf-conn-track{display:none;}
.tf-conn-draw{stroke:url(#tf-conn-grad);stroke-width:3.5;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tf-accent) 45%,transparent));}
/* keep section content above the line */
.tf-inner{position:relative;z-index:1;}
.tf-hero,.tf-cta{position:relative;z-index:1;}

/* phone subpages */
.tf-phone-list{display:flex;flex-direction:column;gap:8px;}
.tf-phone-row{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.06);border-radius:12px;padding:11px 13px;}
.tf-phone-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.tf-phone-rn{color:#fff;font-weight:700;font-size:.82rem;}
.tf-phone-rs{color:rgba(255,255,255,.5);font-size:.7rem;margin-top:1px;}
.tf-phone-prof{text-align:center;padding:8px 0 4px;}
.tf-phone-av{width:64px;height:64px;border-radius:20px;margin:0 auto;background:linear-gradient(135deg,#6366f1,#a88cff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.3rem;}

/* org chart */
.tf-org{display:flex;flex-direction:column;align-items:center;gap:18px;padding:6px 0 2px;position:relative;}
.tf-org-node{background:var(--d-surface);border:1px solid var(--d-border);border-radius:10px;padding:9px 14px;font-size:.78rem;font-weight:700;color:var(--d-text);}
.tf-org-node.lead{background:var(--tool);color:#fff;border-color:transparent;}
.tf-org-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;position:relative;}
.tf-org-row::before{content:"";position:absolute;top:-18px;left:50%;width:1px;height:18px;background:var(--d-border);}

/* toast */
.tf-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--tf-text);color:var(--tf-bg);font-size:.85rem;font-weight:600;padding:12px 22px;border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:2000;}
.tf-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── responsive / mobile view ── */
@media(max-width:768px){
  .tf-hero{padding:48px 20px 4px;}
  .tf-section{padding:44px 0;}
  .tf-inner{padding:0 20px;gap:30px;}
  .tf-head{gap:14px;}
  .tf-head p{margin-left:0;}
  .tf-dash-body{padding:14px;gap:11px;}
  .tf-dash-top{padding:12px 14px;gap:8px;}
  .tf-dash-brand{font-size:.8rem;}
  .tf-m-grid{grid-template-columns:1fr 1fr 1fr;gap:8px;}
  .tf-m{padding:11px;}
  .tf-m-v{font-size:1.15rem;}
  .tf-feats{grid-template-columns:1fr 1fr;gap:20px 14px;}
  .tf-cta{padding:64px 20px;}
}
@media(max-width:560px){
  .tf-m-grid{grid-template-columns:1fr;}
  .tf-pipe{grid-template-columns:1fr 1fr;}
  .tf-dash-tabs{display:none;}
  .tf-dash-btn{margin-left:auto;}
  .tf-feats{grid-template-columns:1fr;}
  .tf-head h2{font-size:1.7rem;}
}
/* ============ MOBILE REDESIGN (<=640px) ============ */
@media(max-width:640px){
  /* feature points -> horizontal swipe cards */
  .tf-feats{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px;padding:2px 20px 10px;}
  .tf-feats::-webkit-scrollbar{display:none;}
  .tf-feat{flex:0 0 72%;max-width:260px;scroll-snap-align:start;background:rgba(127,127,140,.07);border:1px solid var(--tf-border);border-radius:16px;padding:16px;gap:10px;}
  [data-theme="light"] .tf-scope .tf-feat{background:rgba(13,24,64,.035);}
  .tf-feat-h h3{font-size:.92rem;}
  .tf-feat p{font-size:.84rem;}
  /* dashboard mockup -> shorter with internal scroll */
  .tf-dash{min-height:0;max-height:380px;}
  .tf-dash-body{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tf-dash-body::-webkit-scrollbar{display:none;}
  /* phone shots manage their own height */
  .tf-shot-phone .tf-dash,.tf-shot-bare .tf-dash{max-height:none;}
}