@charset "utf-8";

/*
 * Inner-page fine-tune — 2026-09-05
 * Loaded after every page-specific and laptop stylesheet. This final layer
 * tightens the common rhythm, protects two-line headings, improves evidence
 * readability and fixes the shared mobile footer without replacing the visual
 * identity of each service page.
 */

.inner-page-v2 {
  --fine-ink: #292627;
  --fine-copy: #59666c;
  --fine-blue: #009fe8;
  --fine-sky: #87d0f4;
  --fine-mist: #eef8fc;
  --fine-line: rgba(89, 143, 168, .17);
}

.inner-page-v2 :is(
  #site-foundation,
  #build-capabilities,
  #site-cases,
  #site-blueprint,
  #site-process,
  #site-support,
  #seo-foundation,
  #seo-proof,
  #seo-process,
  #snk-sc,
  #ai-foundation,
  #method,
  #agent-foundation,
  #why-unstable,
  #skill-matrix,
  #workflow,
  #about-foundation,
  #company-film,
  #principles,
  #dongming-notes,
  #contact
) { scroll-margin-top: 92px; }

.inner-page-v2 .reveal { transition-duration: .45s; }
.inner-page-v2 .reveal-delay-1 { transition-delay: .05s; }
.inner-page-v2 .reveal-delay-2 { transition-delay: .10s; }
.inner-page-v2 .reveal-delay-3 { transition-delay: .15s; }

.inner-page-v2 :is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(0, 159, 232, .25);
  outline-offset: 4px;
}

/* Evidence and project cards stay still; the content is what should move the
   reader, not a large image zoom. */
.inner-page-v2 :is(.build-case img, .seo-proof-card, .scenario-card, .capability-card, .process-item, .process-step) {
  transition-duration: .36s;
}

@media (hover: hover) and (pointer: fine) {
  .inner-page-v2 :is(.capability-card, .scenario-card, .process-item, .process-step):hover {
    transform: translateY(-3px);
  }

  .page-independent-site .build-case:hover img,
  .page-independent-site .build-case:focus-visible img { transform: scale(1.012); }
}

/* Independent-site project evidence. */
.page-independent-site .build-case > div > span,
.page-independent-site .seo-proof-card figcaption span,
.page-independent-site .seo-proof-body dt { font-size: 9.5px; }

.page-independent-site .build-case p,
.page-independent-site .seo-proof-body > p {
  font-size: 12.5px;
  line-height: 1.72;
}

.page-independent-site .build-case :is(ul, b) { font-size: 10px; }
.page-independent-site .build-case img {
  filter: saturate(.98) contrast(1.01);
  transition: transform .42s cubic-bezier(.2, .72, .2, 1), filter .3s ease;
}

/* GSC proof screenshots are wide interfaces; showing the whole capture is more
   important than filling the frame by cropping it. */
.page-google-seo .seo-proof-card figure { overflow: hidden; background: #edf5f8; }
.page-google-seo .seo-proof-card figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.page-google-seo .seo-proof-body :is(.seo-proof-meta span, .seo-proof-meta b, dt, .ranking-queries small, .proof-status) {
  font-size: 9.5px;
  line-height: 1.48;
}

/* The buyer path now reads as one level sequence. Large step numbers and the
   existing purpose-built icons carry the movement without line-frame cards. */
.page-google-seo .search-path-grid {
  align-items: stretch;
  gap: clamp(28px, 3.2vw, 48px);
  padding-bottom: 56px;
}

.page-google-seo .search-path-card,
.page-google-seo .search-path-card:nth-child(n) {
  --step-rise: 0px;
  min-height: 280px;
  margin-top: 0;
  padding-top: 84px;
}

.page-google-seo .search-path-card > p { font-size: 13.5px; }
.page-google-seo .search-path-card small { font-size: 10.5px; }
.page-google-seo h1 .g-core svg { animation-duration: .9s; animation-delay: .08s; }

/* AI answer demo labels remain compact but legible. */
.page-ai-recommendation :is(
  .ai-bracket-top > span,
  .ai-source-row small,
  .ai-answer-label,
  .ai-bracket-core span,
  .ai-answer-source small,
  .ai-answer-ready,
  .ai-bracket-note
) { font-size: max(8px, .56vw); }

.page-ai-recommendation .ai-source-row span { font-size: max(9px, .62vw); }

/* About media evidence: faster scan on hover and a calmer editorial grid. */
.page-about .douyin-profile-window:hover figure img,
.page-about .douyin-profile-window:focus-visible figure img {
  transition-duration: 24s !important;
  transition-timing-function: linear !important;
  transition-delay: .3s !important;
}

/* Match the live homepage container system; leave component padding and
   narrow reading-column max-widths intact. Updated 2026-09-08. */
.inner-page-v2 { --shell: min(1440px, calc(100% - 56px)); }

@media (min-width: 981px) and (max-width: 1600px) {
  .inner-page-v2 main .shell { width: min(1440px, calc(100% - 112px)); }
}

@media (min-width: 1101px) {

  .inner-page-v2 :is(
    .section-space,
    .page-section,
    .page-focus-section,
    .process-section,
    .growth-room-section,
    .boundary-section,
    .faq-section,
    .contact-section,
    .rich-section,
    .company-film-section,
    .douyin-proof-section
  ),
  .page-independent-site :is(
    .build-foundation,
    .site-blueprint-section,
    .ownership-section,
    .operations-section
  ) { padding-top: 100px; padding-bottom: 100px; }

  .inner-page-v2 .inner-hero + :is(.page-intro, .page-section) { padding-top: 0; }

  .inner-page-v2 :is(
    .split-heading h2,
    .section-lead h2,
    .rich-section-head h2,
    .focus-copy h2,
    .process-heading h2,
    .process-intro h2,
    .growth-room-copy h2,
    .boundary-note h2,
    .faq-intro h2,
    .contact-layout h2,
    .company-film-head h2
  ) {
    max-width: 820px;
    font-size: clamp(46px, 3.75vw, 54px);
    line-height: 1.1;
    letter-spacing: -.05em;
    text-wrap: balance;
  }

  .page-independent-site :is(
    .build-foundation-head h2,
    .site-blueprint-copy h2,
    .ownership-heading h2,
    .operations-copy h2
  ) {
    font-size: clamp(48px, 3.9vw, 56px);
    line-height: 1.08;
    text-wrap: balance;
  }

  .inner-page-v2 :is(.split-heading, .section-lead, .rich-section-head, .process-intro, .company-film-head) {
    column-gap: 72px;
    margin-bottom: 50px;
  }

  .page-independent-site .rich-case-section,
  .page-google-seo .seo-proof-section { padding-top: 100px; padding-bottom: 100px; }

  .page-google-seo .seo-proof-port .seo-proof-body { padding: 22px 24px 26px; }
  .page-google-seo .seo-proof-port .seo-proof-feature .seo-proof-body { padding: 28px 30px 32px; }
  .page-google-seo .seo-proof-port .seo-proof-card:nth-child(-n + 4) figure { aspect-ratio: 2.35 / 1; }

  .page-about :is(.company-film-section, .rich-section, .douyin-proof-section) { padding-top: 104px; padding-bottom: 104px; }
  .page-about :is(.company-film-head, .rich-section-head, .douyin-proof-layout) { column-gap: 72px; }
}

@media (min-width: 981px) and (max-width: 1440px) {
  .inner-page-v2 .inner-hero { min-height: 780px; }
  .inner-page-v2 .inner-hero h1 { font-size: clamp(58px, 5.25vw, 72px); }
  .page-about .about-hero-says.inner-hero { min-height: 800px; }
  .page-about .about-hero-says h1 { font-size: clamp(40px, 3.25vw, 46px); }
}

@media (max-width: 1080px) {
  .inner-page-v2 { --shell: min(1000px, calc(100% - 36px)); }
  .inner-page-v2 :is(.split-heading, .section-lead, .rich-section-head, .process-intro, .company-film-head) { gap: 46px; }
}

/* Tablet heroes are a single composition: compact copy, inline actions and
   centered artwork. The SEO hero retains its existing two-column breakpoint. */
@media (min-width: 721px) and (max-width: 1080px) {
  .inner-page-v2:not(.page-google-seo) .inner-hero {
    min-height: 0;
    padding-top: 112px;
    padding-bottom: 36px;
  }
  .inner-page-v2.page-about .about-hero-says.inner-hero { min-height: 0; }
  .inner-page-v2:not(.page-google-seo) .inner-hero :is(.inner-hero-layout, .inner-hero-grid) { gap: 32px !important; }
  .inner-page-v2:not(.page-google-seo) .inner-hero-copy { width: 100%; max-width: none; }
  .inner-page-v2:not(.page-google-seo) .inner-hero .breadcrumbs { margin-bottom: 18px; }
  .inner-page-v2:not(.page-google-seo) .inner-hero .eyebrow { margin-bottom: 20px; }
  .inner-page-v2:not(.page-google-seo) .inner-hero-copy > p:not(.eyebrow):not(.breadcrumbs) { margin-top: 22px; }
  .inner-page-v2:not(.page-google-seo) .inner-hero :is(.hero-actions, .inner-hero-actions) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }
  .inner-page-v2:not(.page-google-seo) .inner-hero :is(.hero-actions, .inner-hero-actions) .button { width: auto; min-height: 50px; }
  .inner-page-v2:not(.page-google-seo) .inner-scroll-cue {
    position: relative;
    inset: auto;
    display: flex;
    width: max-content;
    margin: 24px auto 0;
    transform: none;
  }
  .inner-page-v2:not(.page-google-seo) .inner-scroll-cue:hover { transform: translateY(-3px); }
  .inner-page-v2.page-dongming-ai .agent-hero-proof { max-width: 760px; margin-top: 24px; }
  .inner-page-v2.page-dongming-ai .inner-hero .snk-sim--hero { justify-self: center; }

  /* Keep the founder portrait and quote together instead of two tall rows. */
  .page-about .about-hero-says .says-creds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-about .about-hero-says .says-creds article { min-width: 0; }
  .page-about .about-hero-says .photo-wrap {
    display: block;
    justify-self: center;
    width: min(100%, 600px);
    max-width: 600px;
    height: 400px;
    min-height: 0;
  }
  .page-about .about-hero-says .portrait { position: absolute; inset: auto 0 0 auto; width: auto; height: 100%; max-width: none; }
  .page-about .about-hero-says .talk { position: absolute; inset: 12% auto auto 0; width: min(49%, 285px); min-height: 0; }
}

@media (max-width: 720px) {
  .inner-page-v2 { --shell: calc(100% - 32px); }

  .inner-page-v2 :is(
    .section-space,
    .page-section,
    .page-focus-section,
    .process-section,
    .growth-room-section,
    .boundary-section,
    .faq-section,
    .contact-section,
    .rich-section,
    .company-film-section,
    .douyin-proof-section,
    .page-cta
  ),
  .page-independent-site :is(
    .build-foundation,
    .site-blueprint-section,
    .ownership-section,
    .operations-section
  ) { padding-top: 70px; padding-bottom: 70px; }

  .inner-page-v2 .inner-hero + :is(.page-intro, .page-section) { padding-top: 0; }

  .inner-page-v2 :is(
    .split-heading h2,
    .section-lead h2,
    .rich-section-head h2,
    .focus-copy h2,
    .process-heading h2,
    .process-intro h2,
    .growth-room-copy h2,
    .boundary-note h2,
    .faq-intro h2,
    .contact-layout h2,
    .company-film-head h2
  ) {
    max-width: 100%;
    font-size: clamp(29px, 8vw, 32px);
    line-height: 1.14;
    letter-spacing: -.045em;
    text-wrap: balance;
  }

  .inner-page-v2 :is(
    .split-heading > p,
    .section-lead > p,
    .rich-section-head > p,
    .focus-copy > p,
    .process-heading > p,
    .process-intro > p
  ) { font-size: 14px; line-height: 1.75; }

  .inner-page-v2 :is(.split-heading, .section-lead, .rich-section-head, .process-intro, .company-film-head) {
    gap: 24px;
    margin-bottom: 34px;
  }

  /* Shared mobile footer: the two short link directories sit side by side;
     brand and contact retain the full width. */
  .inner-page-v2 .site-footer.footer-v2 .footer-v2-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 34px !important;
    padding-top: 54px;
    padding-bottom: 58px;
  }

  .inner-page-v2 .site-footer.footer-v2 :is(.footer-v2-brand-block, .footer-v2-contact) { grid-column: 1 / -1; }
  .inner-page-v2 .site-footer.footer-v2 .footer-v2-column { min-width: 0; }
  .inner-page-v2 .site-footer.footer-v2 .footer-v2-column > a {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 44px;
    font-size: 11.5px;
  }

  .inner-page-v2 .site-footer.footer-v2 .footer-v2-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    align-items: start;
  }

  .inner-page-v2 .site-footer.footer-v2 .footer-v2-contact > p:first-child { grid-column: 1 / -1; margin-bottom: 18px; }
  .inner-page-v2 .site-footer.footer-v2 .footer-v2-contact .footer-v2-phone { grid-column: 1; grid-row: 2; font-size: clamp(20px, 5.5vw, 23px); }
  .inner-page-v2 .site-footer.footer-v2 .footer-v2-contact .footer-v2-mail { grid-column: 1; grid-row: 3; overflow-wrap: anywhere; }
  .inner-page-v2 .site-footer.footer-v2 .footer-v2-contact .footer-v2-contact-address { grid-column: 2; grid-row: 2; margin: 0; }
  .inner-page-v2 .site-footer.footer-v2 .footer-v2-contact > small { grid-column: 2; grid-row: 3; margin-top: 9px; }

  .inner-page-v2 .toast { right: 14px; bottom: calc(142px + env(safe-area-inset-bottom)); }

  /* Website construction page. */
  .page-independent-site .build-case,
  .page-independent-site .build-case:nth-child(n) { min-height: 285px; }
  .page-independent-site .build-case-lead { min-height: 410px; }
  .page-independent-site .build-case h3 { font-size: 20px; }
  .page-independent-site .build-case p { font-size: 12px; }
  .page-independent-site .build-case > div { right: 20px; bottom: 20px; left: 20px; }

  /* SEO proof and search-path density. */
  .page-google-seo .seo-proof-port .seo-proof-body,
  .page-google-seo .seo-proof-port .seo-proof-feature .seo-proof-body { padding: 20px 18px 22px; }
  .page-google-seo .seo-proof-port .seo-proof-card figure { aspect-ratio: 2.45 / 1; }
  .page-google-seo .search-path-grid { gap: 32px; padding-bottom: 22px; }
  .page-google-seo .search-path-card,
  .page-google-seo .search-path-card:nth-child(n) { min-height: 0; margin-top: 0; padding: 0; }

  /* AI recommendation page. */
  .page-ai-recommendation :is(.buyer-query-card, .evidence-nodes, .answer-preview-card) { min-height: 350px; }
  .page-ai-recommendation .evidence-nodes { gap: 8px; padding: 22px; }
  .page-ai-recommendation .evidence-nodes article { min-height: 64px; padding: 10px; }
  .page-ai-recommendation .scenario-card { min-height: 245px; padding: 22px; }
  .page-ai-recommendation .scenario-card h3 { margin: 32px 0 15px; }
  .page-ai-recommendation .scenario-card small { margin-top: 15px; padding-top: 14px; }

  /* Dongming AI: preserve all twelve skills but turn the longest vertical wall
     into a keyboard-accessible, touch-friendly horizontal shelf. */
  .page-dongming-ai .inner-hero h1 { font-size: clamp(27px, 8.2vw, 34px) !important; line-height: 1.12 !important; }
  /* Compact the existing Skill engine, without removing a step or its output. */
  .inner-page-v2.page-dongming-ai .inner-hero { padding-bottom: 36px; }
  .inner-page-v2.page-dongming-ai .inner-hero > .shell.inner-hero-grid { gap: 24px !important; }
  .inner-page-v2.page-dongming-ai .inner-hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .inner-page-v2.page-dongming-ai .inner-hero-actions .button { min-width: 0; min-height: 48px; padding-inline: 12px; gap: 10px; font-size: 12px; }
  .inner-page-v2.page-dongming-ai .agent-hero-proof { margin-top: 20px; }
  .inner-page-v2.page-dongming-ai .agent-hero-proof li { padding: 0; }
  .inner-page-v2.page-dongming-ai .inner-hero .snk-sim--hero .snk-sim-query { min-height: 60px; padding: 10px 13px; }
  .page-dongming-ai .inner-hero .dm-engine-core { grid-template-columns: 54px minmax(0, 1fr); gap: 6px 12px; min-height: 92px; padding: 12px; }
  .page-dongming-ai .inner-hero .dm-engine-core > strong { grid-column: 1; grid-row: 1; font-size: 44px; }
  .page-dongming-ai .inner-hero .dm-engine-core > span { grid-column: 1; grid-row: 2; font-size: 7px; letter-spacing: .05em; }
  .page-dongming-ai .inner-hero .dm-engine-core > div { grid-column: 2; grid-row: 1 / span 2; border-top: 0; border-left: 1px solid rgba(255,255,255,.12); padding: 0 0 0 12px; }
  .page-dongming-ai .inner-hero .dm-engine-core small { font-size: 7px; letter-spacing: .06em; }
  .page-dongming-ai .inner-hero .dm-engine-core b { font-size: 23px; line-height: 1.12; }
  .page-dongming-ai .inner-hero .dm-hero-task li { grid-template-columns: 20px minmax(0, 1fr) auto; min-height: 52px; padding: 9px 10px; gap: 7px; }
  .page-dongming-ai .inner-hero .dm-hero-task li > :is(span, div, b) { grid-row: 1; }
  .page-dongming-ai .inner-hero .dm-hero-task li > div > b { font-size: 12px; }
  .page-dongming-ai .inner-hero .snk-agent-output { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; gap: 6px 10px; }
  .page-dongming-ai .inner-hero .snk-agent-output > small { grid-column: 2; grid-row: 1 / span 2; }
  .page-dongming-ai .inner-hero .snk-agent-output > b { font-size: 11px; }
  .page-dongming-ai .inner-scroll-cue { position: relative; inset: auto; display: flex; width: max-content; margin: 24px auto 0; transform: none; }
  .page-dongming-ai .dm-pain-ledger-body article { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-dongming-ai .dm-pain-ledger-body :is(h3, p, strong) { padding: 14px 15px; }
  .page-dongming-ai .dm-pain-ledger-body h3 { font-size: 17px; }
  .page-dongming-ai .dm-skill-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .page-dongming-ai .dm-skill-flow span {
    min-height: 62px;
    padding: 0 4px;
    border-right: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 0;
    font-size: 10px;
    text-align: center;
  }
  .page-dongming-ai .dm-skill-flow span:not(:last-child)::after { display: none; }
  .page-dongming-ai .dm-skill-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 14px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-color: rgba(135, 208, 244, .45) transparent;
    scrollbar-width: thin;
  }
  .page-dongming-ai .dm-skill-card {
    flex: 0 0 min(86vw, 320px);
    min-height: 280px;
    scroll-snap-align: start;
  }
  .page-dongming-ai .dm-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-dongming-ai .dm-module-card { min-height: 225px; padding: 18px; }
  .page-dongming-ai .dm-module-card > b { margin-top: 28px; font-size: 19px; }
  .page-dongming-ai .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-dongming-ai .process-item { min-height: 170px; padding: 20px 18px; }
  .page-dongming-ai .process-item:last-child { grid-column: 1 / -1; }
  .page-dongming-ai .process-item h3 { margin-top: 26px; }
  .page-dongming-ai .role-card { min-height: 330px; padding: 24px; }
  .page-dongming-ai .role-card > b { margin-top: 36px; }
  .page-dongming-ai .role-card ul { margin-top: 20px; }
  .page-dongming-ai .role-card li { padding: 10px 0; }
  .page-dongming-ai .role-card small { margin-top: 20px; }

  /* About page: the portrait is larger but stays after the copy, so it cannot
     cover the title or credentials. */
  .page-about .about-hero-says { padding-top: 96px; padding-bottom: 52px; }
  .page-about .about-hero-says .photo-wrap {
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-rows: 136px 20px;
    gap: 8px 12px;
    min-height: 164px;
  }
  .page-about .about-hero-says .portrait {
    width: 108px;
    height: 136px;
    max-width: 108px;
    border-radius: 54px 54px 24px 24px;
    object-position: center 8%;
  }
  .page-about .about-hero-says .talk {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 164px;
    padding: 15px 14px;
  }
  .page-about .about-hero-says .badge { grid-column: 1; grid-row: 2; width: 108px; }
  .page-about .company-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1px; margin-top: 36px; }
  .page-about .company-timeline article { min-height: 158px; padding: 19px; }
  .page-about .company-timeline strong { margin-top: 28px; font-size: 30px; }
  .page-about .capability-card { min-height: 205px; padding: 22px; }
  .page-about .process-item { min-height: 165px; padding: 21px 20px; }
  .page-about .audience-card { min-height: 215px; padding: 22px; }
  .page-about .audience-card h3 { margin-top: 34px; }
  .page-about .fit-boundary { min-height: 340px; padding: 24px; }
  .page-about .field-photo-main { min-height: 360px; }
  .page-about .field-photo:nth-child(2),
  .page-about .field-photo:nth-child(3) { min-height: 260px; }
}

@media (max-width: 390px) {
  /* The homepage uses a 14px gutter for its compact footer rows. Ordinary
     content/header gutters remain 20px via snk-audit-polish-v1.css. */
  .inner-page-v2 { --shell: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .inner-page-v2 .reveal { opacity: 1; transform: none; transition: none; }
  .inner-page-v2 :is(.build-case img, .seo-proof-card, .scenario-card, .capability-card, .process-item, .process-step) { transition: none; transform: none; }
  .page-google-seo h1 .g-core svg { animation: none; opacity: 1; filter: none; transform: none; }
  .snk-sc-svg .pulse { display: none; }
}