/* page-founder-product.css - shared sheet for the two founder product sub-pages
   (/what-the-founder-uses/airdog-x8-pro/ + /micropure/), template page-founder-product.php.
   Store-TPA IA (tab row + accordion model stack) built from THEME VOCABULARY ONLY.
   2026-07-16 polish pass: every type/spacing/animation value below is COPIED from the recorded
   references, never invented - .sec-head + expander ladder from page-founder-uses.css, buttons
   are the global .btn-primary (markup class, no local button CSS), accordion motion mirrors the
   style.css site-wide ::details-content block (0.3s ease-in-out + faqAnswerIn fade, global
   keyframe), reduced-motion falls back per the reference. */

.fp-hero{background:var(--night);color:var(--night-text);padding:150px 0 72px;}
.fp-hero .eyebrow{color:var(--gold);display:block;margin-bottom:22px;}
.fp-hero .eyebrow a{color:inherit;text-decoration:none;}
.fp-hero .eyebrow a:hover{color:#fff;}
.fp-hero h1{color:#fff;font-size:clamp(2.4rem,5.4vw,3.2rem);max-width:22ch;margin-bottom:20px;}
.fp-hero .fp-lede{max-width:62ch;font-size:1.05rem;line-height:1.7;color:var(--night-text);}

/* recorded section-head ladder (page-founder-uses.css .sec-head, copied verbatim) */
.sec-head{max-width:48ch;margin-bottom:52px;}
.sec-head h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:14px 0;font-weight:300;letter-spacing:-.02em;line-height:1.12;}
.sec-head h2 em{font-family:'Fraunces',serif;font-style:italic;color:var(--accent);}
.sec-head p{color:var(--ink-soft);font-size:1.1rem;max-width:60ch;}

/* 50/50 split (store: gallery | title/summary). Media column = square tiles like .fu-shot. */
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.fp-shot{background:var(--paper-deep);border:1px solid var(--line);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:26px;}
.fp-shot img{max-width:100%;height:auto;display:block;mix-blend-mode:multiply;}
.fp-shot + .fp-shot{margin-top:22px;}
.fp-shot.fp-shot-sm{max-width:62%;}
.fp-kicker{font-family:'Fraunces',serif;font-style:italic;font-weight:300;color:var(--ink-soft);font-size:1.02rem;line-height:1.55;margin-bottom:26px;}
.fp-glance{list-style:none;margin:0 0 30px;padding:0;}
.fp-glance li{padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink-soft);line-height:1.55;}
.fp-glance li:first-child{border-top:1px solid var(--line);}
.fp-glance strong{color:var(--ink);font-weight:500;}
.fp-body p{color:var(--ink-soft);font-size:1rem;line-height:1.75;max-width:58ch;}
.fp-body p + p{margin-top:16px;}

/* Spec tables: hairline rows on the founder page's .evid rhythm (10px vertical, 1px --line). */
.fp-spec{width:100%;border-collapse:collapse;margin-top:8px;}
.fp-spec th,.fp-spec td{text-align:left;padding:10px 18px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.fp-spec th{font-family:'Archivo',sans-serif;font-weight:500;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);width:34%;}
.fp-spec td{font-size:.95rem;color:var(--ink-soft);line-height:1.6;}
.fp-note{margin-top:18px;font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:.92rem;color:var(--ink-soft);max-width:66ch;}

/* Prose sections */
.fp-prose p{color:var(--ink-soft);font-size:1rem;line-height:1.75;max-width:62ch;}
.fp-prose p + p{margin-top:16px;}
.fp-prose ul{margin:18px 0 0;padding:0;list-style:none;max-width:62ch;}
.fp-prose ul li{padding:10px 0 10px 26px;position:relative;color:var(--ink-soft);font-size:.98rem;line-height:1.6;border-bottom:1px solid var(--line);}
.fp-prose ul li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:1px;background:var(--accent);}
.fp-prose ul li strong{color:var(--ink);font-weight:500;}
.fp-prose .btn-primary{margin-top:6px;}

/* Disclosure accordions: the founder page's .fu-deep expander ladder, copied -
   hairline top (+ bottom on last), summary 22px 0, Fraunces 1.25rem/1.2 title, accent cue. */
.fp-qa details{border-top:1px solid var(--line);}
.fp-qa details:last-of-type{border-bottom:1px solid var(--line);}
.fp-qa summary{cursor:pointer;list-style:none;padding:22px 34px 22px 0;position:relative;
  font-family:'Fraunces',serif;font-weight:300;font-size:1.25rem;line-height:1.2;color:var(--ink);}
.fp-qa summary::-webkit-details-marker{display:none;}
.fp-qa summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--accent);font-weight:300;font-size:1.25rem;line-height:1;}
.fp-qa details[open] summary::after{content:"\2013";}
.fp-qa .fp-qa-a{padding:2px 0 30px;}
.fp-qa .fp-qa-a p{color:var(--ink-soft);margin-bottom:12px;max-width:62ch;}
.fp-qa .fp-qa-a p:last-child{margin-bottom:0;}
.fp-qa .fp-qa-a .fp-spec{margin-top:0;}
.fp-qa .fp-qa-a .fp-spec th{width:44%;}

/* Accordion + tab-panel motion: MIRRORS style.css's site-wide reference block
   (.faq-item/.fu-deep ::details-content, 0.3s ease-in-out, allow-discrete; answers fade with the
   global faqAnswerIn keyframe at .3s cubic-bezier(.2,.7,.3,1)). interpolate-size:allow-keywords
   is already set on :root by style.css under the same @supports. Same reduced-motion fallback. */
.fp-qa details[open] .fp-qa-a{animation:faqAnswerIn .3s cubic-bezier(.2,.7,.3,1);}
.fp-tabs-js .fp-panel:not([hidden]){animation:faqAnswerIn .3s cubic-bezier(.2,.7,.3,1);}
@supports (interpolate-size: allow-keywords){
  .fp-qa details::details-content{
    block-size:0; overflow:clip;
    transition: block-size .3s ease-in-out, content-visibility .3s ease-in-out;
    transition-behavior: allow-discrete;
  }
  .fp-qa details[open]::details-content{
    block-size:auto;
    transition: block-size .3s ease-in-out, content-visibility .3s ease-in-out;
    transition-behavior: allow-discrete;
  }
}
@media (prefers-reduced-motion: reduce){
  .fp-qa details::details-content,.fp-qa details[open]::details-content{transition:none;}
  .fp-qa details[open] .fp-qa-a,.fp-tabs-js .fp-panel:not([hidden]){animation:none;}
}

/* ---- Tabs (progressive enhancement; JS-off = stacked panels with headings) ----
   Labels sit on the button family's type (.btn/.cta recorded pair: .8rem / .16em / uppercase). */
.fp-tabrow{display:none;}
.fp-tabs-js .fp-tabrow{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:34px;}
.fp-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);padding:14px 22px;transition:color .3s;}
.fp-tab:hover{color:var(--ink);}
.fp-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold);}
.fp-panel + .fp-panel{margin-top:44px;}
.fp-tabs-js .fp-panel + .fp-panel{margin-top:0;}
.fp-panel-h{font-family:'Archivo',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 18px;}
.fp-tabs-js .fp-panel-h{display:none;}
.fp-panel[hidden]{display:none;}

/* ---- Model columns ----
   Header = the recorded product-name idiom (.fu-card .name: Fraunces 1.5rem / 1.15). A fixed
   single-line box (min-height = 1lh) + identical margin keeps both headers baseline-level and
   the first accordion hairline at the same y in both columns. */
.fp-models{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.fp-model-h{font-family:'Fraunces',serif;font-weight:300;font-size:1.5rem;line-height:1.15;min-height:1.15em;letter-spacing:normal;color:var(--ink);margin:0 0 18px;}
/* single-model variant (micropure): one column at the exact TPA column measure, centered.
   Measure = (wrap 1180 - 2*40 padding - 56 gap) / 2 = 522px. */
.fp-models.fp-models-solo{grid-template-columns:1fr;}
.fp-models-solo .fp-model{max-width:522px;margin:0 auto;width:100%;}

/* Closing back-link */
.fp-close{display:flex;gap:28px;flex-wrap:wrap;align-items:center;}
.fp-close a{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-decoration:none;}
.fp-close a:hover{color:var(--ink);}

@media(max-width:860px){
  .fp-hero{padding:120px 0 52px;}
  .fp-grid{grid-template-columns:1fr;gap:34px;}
  .fp-shot.fp-shot-sm{max-width:56%;}
  .fp-spec th{width:42%;font-size:.7rem;padding-right:12px;}
  .fp-models{grid-template-columns:1fr;gap:40px;}
  /* Mobile tab treatment = the compressed-nav band's recorded control values (style.css
     1001-1366 block: font 0.70rem, padding 11px 14px, CTA letter-spacing .1em) - not invented.
     Body-class anchored (0,2,1+) per the standing specificity lesson; row-gap keeps the row
     hairline clear of a wrapped second line if one ever occurs (no overflow hiding). */
  body.page-template-page-founder-product .fp-tabs-js .fp-tabrow{row-gap:8px;}
  body.page-template-page-founder-product .fp-tabs .fp-tab{padding:11px 14px;font-size:.70rem;letter-spacing:.1em;}
}
/* Restored TPA brochure buttons: the recorded mobile button treatment (style.css:468
   `.final .btn-primary` -> display:block;width:100%;text-align:center) at the same <=600 breakpoint,
   so the gold label + its nbsp-bound arrow sit centered on a full-width block and never orphan.
   Body-class-anchored (0,3,1) per the standing specificity lesson. */
@media(max-width:600px){
  body.page-template-page-founder-product .fp-prose .btn-primary,
  body.page-template-page-founder-product .fp-qa .btn-primary{display:block;width:100%;text-align:center;}
}