/* ============================================================
   Inner pages (service, About, FAQ). Loaded after style.css.
   Inner pages reuse the homepage components (hero, pain rows,
   featured service card, estimate head, process steps, contact
   head). Only what the homepage has no version of lives here.
   No .reveal on content: these are search landing pages and must
   show their text even when JS is blocked or slow.
   ============================================================ */

/* Breadcrumb above the hero badge */
.crumbs{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;color:var(--ink-faint);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.crumbs a{color:var(--ink-soft);border-bottom:1px solid transparent;transition:border-color .2s}
.crumbs a:hover{border-color:currentColor}
.crumbs span[aria-hidden]{opacity:.6}

/* Inner-page hero: same component, a touch shorter than the homepage's */
.hero .hd h1{font-size:clamp(2.7rem,6.6vw,5.6rem)}

/* Example chips reuse the calculator chip look but are not buttons */
.fit-chips{margin:4px 0 0}
.fit-chips .ba-chip{cursor:default}
.fit-chips .ba-chip:hover{border-color:var(--line)}

/* Questions: a card like the contact form, rows like the pain list */
.qa{max-width:820px;margin:44px auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 34px;box-shadow:var(--shadow-sm)}
.qa details{border-bottom:1px solid var(--line)}
.qa details:last-child{border-bottom:0}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;
  font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--ink);line-height:1.3;transition:color .25s}
.qa summary:hover{color:var(--accent)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
.qa details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.qa .ans{padding:0 0 24px;font-size:1.02rem;max-width:68ch}
.qa .ans p+p{margin-top:12px}
.qa .ans a{color:var(--accent);border-bottom:1px solid currentColor}
.qa-more{text-align:center;margin-top:30px;font-size:1rem}
.qa-more a{color:var(--accent);font-weight:600;border-bottom:1px solid currentColor}
@media(max-width:600px){.qa{padding:4px 20px}.qa summary{font-size:1.08rem}}

/* Accent words in section heads: the same rule the homepage applies to #estimate */
.head h2 .it{font-style:italic;font-weight:500;color:var(--accent-2)}

/* FAQ page: one block per question group, tighter than a full section */
section.block.faq-group{padding:64px 0}
section.block.faq-group .qa{margin-top:26px}
/* Example cards without a video (Automation page) */
.vcard .vmeta p{font-size:.98rem;margin-top:4px}
/* About page story: a longer heading than the homepage's "Hi, I'm Samin" */
.about h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.about h2 .it{font-style:italic;font-weight:500;color:var(--accent-2)}

/* ---------- Small per-page variations (Samin, 2026-10-10) ----------
   Containers stay identical to the homepage; these only shift layout
   and type accents so the inner pages don't all read the same. */
.head.center,.vhead.center{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;justify-content:center}
.head.center .eyebrow,.vhead.center .eyebrow{justify-content:center}
.vhead.center p{margin-left:auto;margin-right:auto}
.pain-list.accent .n{color:var(--accent-2);font-weight:600;font-size:1rem}
.proc-grid.flip{grid-template-columns:1.2fr .8fr}
.proc-grid.flip .proc-sticky{order:2}
@media(max-width:860px){.proc-grid.flip{grid-template-columns:1fr}.proc-grid.flip .proc-sticky{order:0}}

/* ---------- Feature tiles under the video card ----------
   Same card surface as the homepage cards. They are fully visible by
   default; where the browser supports scroll-driven animation they
   rise in one after another as they scroll into view (no JS needed,
   nothing hidden for crawlers or blocked scripts). */
.fstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.fstrip:has(.ftile:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
.ftile{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 18px;box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.ftile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--shadow)}
.ftile .ficon{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:color-mix(in srgb,var(--accent-2) 13%,transparent);color:var(--accent-2);transition:background .35s,color .35s}
.ftile:hover .ficon{background:var(--accent-2);color:#fff}
.ftile .ficon svg{width:19px;height:19px}
.ftile h3{font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:var(--ink);line-height:1.25;margin:2px 0 4px;letter-spacing:-.01em}
.ftile p{font-size:.88rem;line-height:1.5;margin:0}
@media(max-width:1080px){.fstrip,.fstrip:has(.ftile:nth-child(6):last-child){grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fstrip,.fstrip:has(.ftile:nth-child(6):last-child){grid-template-columns:1fr}}

@keyframes ftileIn{from{opacity:0;translate:0 26px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .ftile{animation:ftileIn linear both;animation-timeline:view();animation-range:entry 5% entry 70%}
    .ftile:nth-child(4n+2){animation-range:entry 12% entry 77%}
    .ftile:nth-child(4n+3){animation-range:entry 19% entry 84%}
    .ftile:nth-child(4n+4){animation-range:entry 26% entry 91%}
  }
}

/* Hero watermark: identical to the homepage "AI" mark on every page. The
   homepage places it at 8% of the hero's height (58-64px across widths);
   inner heroes have different heights, so pin it to 62px instead and it
   no longer shifts between pages. */
.hero .hero-mark{top:62px}

/* LinkedIn button: the familiar logo leads */
.btn-linkedin{gap:10px}
.btn-linkedin .li-logo{flex:0 0 auto;border-radius:4px}

/* Per-page hero watermark (24/7, @, { }, Hi, ?). Each symbol is scaled and
   nudged (--mk-s/-x/-y, computed from its measured ink box in Lato 900) so
   its visible shape fills exactly the box the homepage "AI" fills: same
   top, same height, same right edge. overflow stays visible because @ and
   braces reach past the .8 line box; the hero itself clips. */
.hero .hero-mark[data-mark]{font-family:'Lato',system-ui,sans-serif;font-weight:900;overflow:visible;max-width:none;
  font-size:calc(38vw * var(--mk-s,1));transform:translate(var(--mk-x,0),var(--mk-y,0))}

/* ---------- Hero label: typed in, on a loop (Samin, 2026-10-10) ----------
   Replaces the orange flash-pill on the inner pages (the homepage keeps its
   pill). Same family as .eyebrow (mono, uppercase, blue rule). The letters
   are typed by js/typed-label.js; the full text is always in the HTML.
   .tl-js (set in the page head) hides the label until the script is ready;
   if the script never runs, tlShow reveals it after 2s anyway. */
.typed-label{display:flex;align-items:center;gap:12px;margin:0;min-height:1.6em;font-family:var(--font-mono);font-size:.84rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.typed-label::before{content:"";flex:0 0 auto;width:26px;height:2px;background:var(--accent)}
.typed-label .tl-text{white-space:nowrap}
.typed-label .hl{color:var(--accent-2)}
.tl-js .typed-label .tl-text:not(.tl-ready){visibility:hidden;animation:tlShow 0s 2s forwards}
@keyframes tlShow{to{visibility:visible}}
.tl-caret{display:inline-block;width:2px;height:1.15em;margin-left:3px;vertical-align:-.2em;background:var(--accent-2);animation:tlBlink .9s step-end infinite}
.tl-caret.tl-busy{animation:none}
@keyframes tlBlink{50%{opacity:0}}
.tl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}