/* The feature page template (template-parts/feature.php with inc/feature.php; loaded by gs_feature_assets() after the
   kit and product.css): only what the type adds. Two of its sections print on other pages too, by the same renderer:
   the method (gs_feature_method()) and the cost card (gs_feature_cost()) on a product page whose object has them, the
   cost card on an integration page; their rules here hang on their own classes (.ft-how, .ft-steps, .ft-cost), never
   on .ft, so they hold there. Every section is a k- part of the landing kit (kit.css), every picture
   the shared demo (demo.css and demo-<piece>.css), and product.css's scoped rules apply too, since the template's
   output sits in div.pp.ft; nothing here restyles a k- class outside .ft. Nothing moves but the hero's window and the
   finale card's ticks, which bring their own rules.

   The type's own parts: the split hero (the words on the left, the feature's window on the runway band on the right),
   the method (a numbered list of steps beside its head, as the FAQ lays out), the eyebrow over a block's heading in
   place of the number, and the cost card (a list of rates in credits). */

/* ---- the hero: split, the words on the left, the feature's own window on the right -------------------------------- */
.ft-hero{padding:56px 0 120px;background:var(--ground)}
.ft-hero-in{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:64px;align-items:center;max-width:var(--k-wrap);margin:0 auto;padding:0 var(--k-gutter)}
.ft-hero-txt{min-width:0;padding-top:12px}
.ft-hero .k-eyebrow{gap:10px}
.ft-hero .k-h1{margin:22px 0 0;font-size:clamp(38px,3.9vw,56px);line-height:1.04}
.ft-hero .k-hero-dek{margin:22px 0 0;max-width:44ch;text-wrap:pretty}
.ft-hero .k-btns{margin-top:34px}
/* the stage: the shared runway band behind the window's top, the window inset from its sides, as a product page's hero
   draws it across the page */
.ft-stage{position:relative;min-width:0;padding-top:44px}
.ft-sky{position:absolute;left:0;right:0;top:0;height:min(64%,380px);border-radius:28px;overflow:hidden;background:var(--night)}
.ft-sky img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.ft-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,9,22,.28))}
.ft-stage>.gsd{position:relative;width:calc(100% - 56px);margin:0 auto}
.ft-stage>.gsd .gsd-win{box-shadow:0 -18px 36px -18px rgba(4,3,12,.35),var(--gsd-sh-lg)}

/* ---- the method: the head on the left, the steps on the right, each a number, a short heading and two lines ------- */
.ft-how-in{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:72px;align-items:start}
.ft-steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ft-steps>li{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:baseline;margin:0;padding:30px 0 32px;border-bottom:1px solid var(--line)}
.ft-step-n{font:500 14px/1 var(--mono);letter-spacing:.14em;color:var(--k-ai-ink)}
.ft-step-h{margin:0;font:600 22px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink2);text-wrap:balance}
.ft-step-p{margin:10px 0 0;max-width:60ch;font:400 16.5px/1.6 var(--sans);color:var(--k-text);text-wrap:pretty}

/* ---- a block's eyebrow: over the heading, in place of the number (the method holds the numbers); the cost's too, on
   any page that prints it (a feature page, an integration page, a product page) ----------------------------------- */
.ft .k-blk-txt>.k-eyebrow,.ft-cost .k-blk-txt>.k-eyebrow{margin-bottom:0}
.ft .k-blk-txt>.k-eyebrow+.k-h,.ft-cost .k-blk-txt>.k-eyebrow+.k-h{margin-top:20px}
/* a block with no picture (the parent product without a still): the words alone, one column */
.ft .ft-band .k-blk-in{grid-template-columns:minmax(0,1fr)}

/* ---- the cost: the words beside a card of rates, each a label and its value in credits (inc/feature.php
   gs_feature_cost(), section.ft-cost: its rules hang on that class, so the card needs no .ft around it) ------------ */
.ft-cost-card{min-width:0;border-radius:20px;background:var(--k-card);box-shadow:var(--k-card-sh),var(--k-sh)}
.ft-cost.k-blk-flip .ft-cost-card{order:-1}
.ft-rates-h{display:flex;justify-content:space-between;gap:24px;margin:0;padding:20px 30px 14px;border-bottom:1px solid var(--line);font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ft-rates{margin:0;padding:0 30px 6px}
.ft-rate{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:12px 0;border-bottom:1px solid var(--line)}
.ft-rate:last-child{border-bottom:0}
.ft-rate dt{min-width:0;font:500 17px/1.4 var(--sans);color:var(--ink);text-wrap:pretty}
.ft-rate dd{flex:none;margin:0;font:500 14.5px/1.3 var(--mono);letter-spacing:.02em;color:var(--ink2);text-align:right;white-space:nowrap}
.ft-rate-paid dd{padding:6px 11px;border-radius:999px;background:var(--k-ai-soft);color:var(--k-ai-ink);font-weight:600}
.ft-rate-free dd{color:var(--k-ok-ink)}
/* a note is words, not a figure: the sans, muted, so it never reads as a code token beside the numbers */
.ft-rate-note dd{font-family:var(--sans);font-size:15px;letter-spacing:0;color:var(--mute)}

/* the shared finale's motto splits evenly on a narrow screen instead of leaving its last word alone */
.ft .k-motto{text-wrap:balance}

/* ---- widths ------------------------------------------------------------------------------------------------------- */
@media (max-width:1200px){
  .ft-how-in{grid-template-columns:minmax(0,1fr);gap:40px;max-width:780px}
  /* stacked, a card on the left goes under its words, as a block's picture does (kit.css .k-blk-flip .k-pic) */
  .ft-cost.k-blk-flip .ft-cost-card{order:0}
}
/* under 1100 the hero stacks, the words first, the window under them as wide as the column */
@media (max-width:1100px){
  .ft-hero{padding:44px 0 96px}
  .ft-hero-in{grid-template-columns:minmax(0,1fr);gap:48px;max-width:780px}
  .ft-hero-txt{padding-top:0}
  .ft-hero .k-hero-dek{max-width:56ch}
}
@media (max-width:760px){
  .ft-hero{padding:28px 0 72px}
  .ft-hero-in{gap:36px}
  .ft-hero .k-h1{margin-top:18px;font-size:38px;line-height:1.06}
  .ft-hero .k-hero-dek{margin-top:18px;font-size:17px}
  .ft-hero .k-btns{margin-top:28px}
  /* on a phone the band shows only above the window, as on a product page's hero */
  .ft-stage{padding-top:72px}
  .ft-sky{height:200px;border-radius:20px}
  .ft-stage>.gsd{width:calc(100% - 20px)}
  .ft-steps>li{grid-template-columns:48px minmax(0,1fr);padding:24px 0 26px}
  .ft-step-h{font-size:20px}
  .ft-step-p{font-size:16px}
  .ft-rates-h{padding:16px 18px 12px}
  .ft-rates{padding:0 18px 4px}
  .ft-rate{min-height:64px;gap:16px}
  .ft-rate dt{font-size:16px}
  .ft-rate dd{font-size:13.5px}
  .ft-rate-note dd{max-width:15ch;white-space:normal;line-height:1.35}
}
@media (max-width:480px){
  .ft-stage>.gsd{width:100%}
  .ft-stage{padding-top:64px}
}

/* ---- the guide: a method page's long read, the contents beside the article (inc/feature.php gs_feature_guide()) - */
.ft-g-head{margin-bottom:48px}
.ft-g-in{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:72px;align-items:start}
.ft-g-toc{position:sticky;top:calc(var(--nav-h) + 32px)}
.ft-g-toc p{margin:0 0 14px;font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ft-g-toc ol{margin:0;padding:0;list-style:none;counter-reset:ftg;border-left:1px solid var(--line)}
.ft-g-toc li{counter-increment:ftg;margin:0}
.ft-g-toc a{display:grid;grid-template-columns:28px minmax(0,1fr);padding:7px 0 7px 16px;font:500 14.5px/1.4 var(--sans);color:var(--k-text);text-decoration:none}
.ft-g-toc a::before{content:counter(ftg,decimal-leading-zero);font:500 12px/1.6 var(--mono);color:var(--mute)}
.ft-g-toc a:hover{color:var(--ink)}
.ft-g-body{max-width:720px}
.ft-g-part{scroll-margin-top:calc(var(--nav-h) + 24px)}
.ft-g-part+.ft-g-part{margin-top:56px;padding-top:48px;border-top:1px solid var(--line)}
.ft-g-h{margin:0 0 18px;font:600 clamp(24px,2.2vw,30px)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink2);text-wrap:balance}
.ft-g-part p{margin:0 0 16px;font:400 17px/1.7 var(--sans);color:var(--k-text);text-wrap:pretty}
.ft-g-list,.ft-g-steps{margin:4px 0 20px;padding:0 0 0 22px;font:400 17px/1.65 var(--sans);color:var(--k-text)}
.ft-g-list li,.ft-g-steps li{margin:6px 0;padding-left:4px}
.ft-g-steps li::marker{font:600 15px var(--mono);color:var(--k-ai-ink)}
.ft-g-tpls{display:grid;gap:12px;margin:8px 0 20px}
.ft-g-tpl{margin:0;padding:16px 20px 18px;border-radius:14px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.ft-g-tpl figcaption{margin-bottom:8px;font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--k-ai-ink)}
.ft-g-tpl p{margin:0;font:400 16px/1.6 var(--sans);color:var(--ink2)}
.ft-g-table{margin:8px 0 22px;border-radius:14px;background:var(--k-card);box-shadow:var(--k-card-sh);overflow:hidden}
.ft-g-table table{width:100%;border-collapse:collapse;font:400 15.5px/1.5 var(--sans);color:var(--k-text);text-align:left}
.ft-g-table th,.ft-g-table td{padding:13px 18px;vertical-align:top}
.ft-g-table thead th{font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line)}
.ft-g-table tbody th{font-weight:600;color:var(--ink2)}
.ft-g-table tbody tr+tr>*{border-top:1px solid var(--line)}
.ft-g-pic{margin:12px 0 24px}
.ft-g-tip{display:flex;align-items:flex-start;gap:12px;margin:8px 0 0!important;padding:14px 18px;border-radius:14px;background:color-mix(in srgb,var(--ai) 6%,var(--k-card));font-size:16px!important;line-height:1.55!important;color:var(--ink2)!important}
.ft-g-tip .k-vlogo{flex:none;margin-top:1px}
@media (max-width:1000px){
  .ft-g-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .ft-g-toc{position:static}
}
@media (max-width:760px){
  .ft-g-part p,.ft-g-list,.ft-g-steps{font-size:16px}
  .ft-g-part+.ft-g-part{margin-top:40px;padding-top:36px}
  .ft-g-table th,.ft-g-table td{padding:11px 12px;font-size:14px}
}