/* ===========================================================
   Feature detail pages — one template, one stylesheet.
   Adding tool page #9 is a content edit, not a design job.

   Rule inherited from the site build: every animation here is CSS.
   Nothing on this page may depend on JavaScript to be visible.
   =========================================================== */

/* ---------- shell: feature library rail + the page itself ----------
   Grid rather than flex so the rail column can't be squeezed by a
   wide screenshot, and so the whole thing collapses in one rule. */
.flayout{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  padding:38px 32px 0;
  display:grid;grid-template-columns:222px minmax(0,1fr);
  gap:56px;align-items:start;
}

/* ---------- the feature library rail ---------- */
.rail{position:sticky;top:88px;}
.rail-in{
  border-right:1px solid var(--line);padding-right:22px;
  max-height:calc(100vh - 130px);overflow-y:auto;
}
.rail-back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:500;color:var(--muted);text-decoration:none;
  margin-bottom:24px;padding-left:10px;transition:color .25s,transform .25s;
}
.rail-back:hover{color:var(--primary);transform:translateX(-3px);}
.rail-grp{margin-bottom:22px;}
/* Headings are indented to match the links' own 10px padding. The links used
   to pull left with a negative margin instead — which put their rounded
   highlight outside .rail-in's padding box, where the scroll container
   clipped it flat. Indenting the headings gets the same alignment safely. */
.rail-grp h2{
  font-family:'DM Sans',sans-serif;font-size:.67rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:8px;padding-left:10px;line-height:1.4;
}
.rail-grp a,.rail-soon{
  display:block;font-size:.855rem;line-height:1.4;
  padding:5px 10px;border-radius:7px;
  text-decoration:none;color:var(--ink);font-weight:400;
  transition:background .22s,color .22s;
}
.rail-grp a:hover{background:var(--tint);color:var(--primary-dark);}
.rail-grp a[aria-current="page"]{
  background:var(--primary);color:#fff;font-weight:500;
}
.rail-soon{color:var(--muted);display:flex;align-items:center;gap:7px;cursor:default;}
.rail-soon i{
  font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--soon);background:var(--soon-bg);
  padding:2px 6px;border-radius:20px;line-height:1.4;
}

/* ---------- page head ---------- */
.fpage{padding-bottom:20px;}
.fhead{margin-bottom:34px;}
.fmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.fmeta .grp-name{
  font-size:.73rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--primary-dark);background:var(--tint);border:1px solid var(--line);
  padding:5px 13px;border-radius:30px;
}
/* Status chips. Static position — the .pill in main.css is absolutely
   positioned for the feature cards, so these get their own class. */
.chip-st{
  font-size:.63rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 11px;border-radius:30px;line-height:1.1;
  display:inline-flex;align-items:center;gap:6px;
}
.chip-st .dot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.chip-st.live{background:var(--live-bg);color:var(--live);}
.chip-st.new{background:var(--new-bg);color:var(--new);}
.chip-st.soon{background:var(--soon-bg);color:var(--soon);}
.chip-st.live .dot{animation:blip 1.8s ease-in-out infinite;}

.fhead h1{font-size:clamp(2rem,3.5vw,2.85rem);margin-bottom:16px;}
.fhead .lede{max-width:58ch;}

/* ---------- screenshot frame ----------
   Same shadow/radius vocabulary as the homepage .vcard so the two feel
   like one site, minus the 3D rotation — a real screenshot needs to be
   read, not admired at an angle. */
.shot{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 22px 60px -18px rgba(40,5,148,.20),0 2px 10px rgba(40,5,148,.05);
  margin-bottom:12px;
}
.shot-bar{
  display:flex;align-items:center;gap:9px;
  padding:11px 15px;background:var(--tint);border-bottom:1px solid var(--line);
}
.shot-bar .dots{display:flex;gap:6px;}
.shot-bar .dots i{width:9px;height:9px;border-radius:50%;background:#D6DBEE;display:block;}
.shot-bar .where{
  font-size:.74rem;color:var(--muted);background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:3px 13px;margin:0 auto;
  max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shot img{width:100%;height:auto;display:block;}
.shot-cap{
  font-size:.83rem;color:var(--muted);line-height:1.55;
  margin-bottom:44px;padding-left:2px;max-width:62ch;
}

/* Placeholder — only ever visible before the real screenshot lands.
   Aspect-ratio holds the true shape so the layout doesn't move on swap. */
.shot-ph{
  aspect-ratio:16/10;background:
    repeating-linear-gradient(45deg,var(--tint) 0 12px,#fff 12px 24px);
  display:grid;align-content:center;justify-items:center;gap:6px;
  text-align:center;padding:28px;
}
.shot-ph b{display:block;font-size:.9rem;color:var(--primary-dark);}
.shot-ph span{font-size:.82rem;color:var(--muted);max-width:40ch;display:block;}

/* ---------- section headings inside the page ----------
   padding:0 is load-bearing: these are <section> elements, and main.css sets
   `section{padding:72px 0}` for the marketing pages. Without this reset every
   block on a tool page carries 144px of dead vertical space it didn't ask for. */
.fsec{padding:0;margin-bottom:48px;}
.fsec > h2{font-size:1.5rem;margin-bottom:18px;}

/* ---------- how dealers use it ----------
   Numbered because using the tool genuinely is a sequence. */
.steps{list-style:none;counter-reset:s;display:grid;gap:16px;}
.steps li{
  counter-increment:s;
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px 20px;
  transition:border-color .38s var(--ease),box-shadow .38s;
}
.steps li:hover{border-color:#D3DAF2;box-shadow:0 14px 32px -18px rgba(40,5,148,.20);}
.steps li::before{
  content:counter(s);
  width:32px;height:32px;border-radius:9px;
  background:var(--tint);color:var(--primary-dark);
  font-family:'Playfair Display',serif;font-weight:800;font-size:1rem;
  display:grid;place-items:center;
}
.steps h3{margin-bottom:4px;}
.steps p{font-size:.9rem;color:var(--muted);margin-bottom:0;line-height:1.6;}

/* ---------- what it does / what it doesn't ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.blk{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;}
.blk.honest{background:var(--tint);border-color:#D9DEF5;}
.blk h2{font-size:1.12rem;margin-bottom:12px;}
.blk ul{list-style:none;display:grid;gap:10px;}
/* Deliberately NOT a grid or flex row. These items contain inline <b>, and a
   grid/flex parent blockifies every child — each <b> and each run of text
   between them becomes its own track, which stacks a one-line bullet into
   four. Relative + absolute marker keeps the text a single inline flow. */
.blk li{
  position:relative;padding-left:22px;
  font-size:.885rem;line-height:1.6;color:var(--muted);
}
.blk li::before{
  content:'';position:absolute;left:4px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--primary);
}
.blk.honest li::before{background:var(--muted);border-radius:1px;height:2px;width:9px;left:2px;top:.85em;}
.blk li b{color:var(--ink);font-weight:600;}

/* ---------- rollout note (tools not switched on for every dealer yet) ---------- */
.rollout{
  background:var(--soon-sk);border:1px solid var(--soon-br);border-radius:13px;
  padding:17px 20px;margin-bottom:26px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
}
.rollout .rk{
  font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:var(--soon);padding:4px 10px;border-radius:20px;
  line-height:1.1;margin-top:2px;white-space:nowrap;
}
.rollout p{font-size:.89rem;color:var(--muted);margin-bottom:0;line-height:1.6;max-width:62ch;}

/* ---------- closing CTA ---------- */
/* padding shorthand here also overrides main.css `section{padding:72px 0}`. */
.fcta{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  border-radius:18px;padding:38px 40px;color:#fff;text-align:center;
  margin-bottom:34px;
}
.fcta h2{color:#fff;font-size:1.55rem;margin-bottom:10px;}
.fcta p{color:rgba(255,255,255,.86);max-width:48ch;margin:0 auto 22px;font-size:.98rem;}
.fcta .btn{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.18);}
.fcta .btn .lbl,.fcta .btn .arw{color:var(--primary-dark);}
.fcta .btn::before{background:#F0F2FE;}

/* ---------- prev / next ---------- */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:16px;}
.pn a{
  border:1px solid var(--line);background:#fff;border-radius:13px;padding:15px 18px;
  text-decoration:none;color:inherit;
  transition:transform .38s var(--ease),box-shadow .38s,border-color .38s;
}
.pn a:hover{transform:translateY(-3px);border-color:#D3DAF2;
  box-shadow:0 14px 32px -16px rgba(40,5,148,.22);}
.pn .k{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:4px;}
.pn .t{font-weight:600;font-size:.96rem;}
.pn .next{text-align:right;}

/* ---------- responsive ----------
   The rail stops being a rail and becomes the "keep exploring" block at
   the foot of the page — same markup, same links, no duplicate DOM. */
@media(max-width:980px){
  .flayout{grid-template-columns:minmax(0,1fr);gap:0;padding:30px 22px 0;}
  .rail{position:static;order:2;margin-top:44px;padding-top:34px;border-top:1px solid var(--line);}
  .rail-in{border-right:none;padding-right:0;max-height:none;overflow:visible;
    display:grid;grid-template-columns:1fr 1fr;gap:26px;}
  .rail-back{grid-column:1/-1;margin-bottom:0;}
  .rail-grp{margin-bottom:0;}
  .fpage{order:1;}
  .two{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .flayout{padding-left:18px;padding-right:18px;}
  .rail-in{grid-template-columns:1fr;gap:20px;}
  .steps li{grid-template-columns:30px minmax(0,1fr);gap:13px;padding:16px 17px;}
  .steps li::before{width:26px;height:26px;font-size:.88rem;}
  .fcta{padding:30px 22px;}
  .fcta h2{font-size:1.3rem;}
  .pn{grid-template-columns:1fr;}
  .pn .next{text-align:left;}
  .shot-bar .where{max-width:52%;}
  .rollout{grid-template-columns:1fr;gap:9px;}
  .rollout .rk{justify-self:start;}
}