/* PromptKru 2.2 — shared visual layer, based on the approved WebDesign references. */
html { scroll-padding-top: calc(var(--header-h) + 20px); }
body { background: var(--bg); }
button, a, input, select, textarea { touch-action: manipulation; }
h1, h2, h3 { font-weight: 700; }
main { min-height: 50vh; }
.wrap { --wrap: 1280px; }
.mobile-only { display: none; }
.pk-header { box-shadow: 0 3px 20px rgba(26, 69, 111, .045); }
.pk-header .wrap { gap: 1.25rem; }
.pk-logo { width: 46px; height: 46px; background: transparent; border-radius: 0; }
.pk-logo svg { width: 46px; height: 46px; }
:root[data-theme="dark"] .pk-logo, :root[data-theme="auto"] .pk-logo { background: transparent; }
.pk-brand-name { font-size: 1.4rem; font-weight: 700; color: var(--ink); }
.pk-brand-text { min-width: 0; }
.pk-brand-sub { margin-top: 5px; font-size: .71rem; }
.pk-nav { gap: .5rem; margin-left: auto; }
.pk-nav a, .pk-nav button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; position: relative; padding: .65rem .8rem; border: 0; background: none; color: var(--muted); font: inherit; font-size: .78rem; text-decoration: none; white-space: nowrap; }
.pk-nav svg { width: 21px; height: 21px; }
.pk-nav a::after, .pk-nav button::after { content: ''; position: absolute; bottom: 0; left: .5rem; right: .5rem; height: 3px; border-radius: 3px; background: transparent; }
.pk-nav [aria-current="page"], .pk-nav a:hover, .pk-nav button:hover { color: var(--brand-ink); }
.pk-nav [aria-current="page"]::after { background: var(--brand); }
.pk-header-actions { margin-left: .75rem; }
.pk-profile-btn { max-width: 195px; min-height: 44px; border-color: var(--line); border-radius: 12px; background: var(--surface-2); }
.icon-btn { min-width: 44px; min-height: 44px; border-radius: 12px; }
.pk-bottomnav { grid-template-columns: repeat(4, minmax(0, 1fr)); box-shadow: 0 -4px 20px rgba(26, 69, 111, .04); }
.pk-bottomnav .on { color: var(--brand-ink); }
.pk-bottomnav .on::before { background: var(--brand); height: 3px; border-radius: 3px; }
.btn { border-radius: 11px; min-height: 46px; }
.btn-sm { min-height: 40px; }
.btn-primary { box-shadow: 0 3px 9px color-mix(in srgb, var(--brand) 12%, transparent); }
.btn-lg { min-height: 54px; }
.chip { border-radius: 100px; min-height: 42px; padding: .45rem .95rem; }
.chip[aria-pressed="true"], .chip.on { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand); }
.lib-toolbar .chip[aria-pressed="true"] { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
.badge { border-radius: 100px; padding: .12rem .65rem; }
.mod-no::before { border-radius: 50%; }
.card-pad { padding: 1.3rem; }
.search input, .input, .textarea, .select { border-radius: 11px; border-color: var(--line-2); background: var(--surface); }
.input, .select { min-height: 48px; }
.search input { min-height: 52px; }
.lib-toolbar { padding-block: 1rem; background: var(--bg); z-index: 30; }
.lib-toolbar .search { max-width: 650px; }
.section-head, .sec-head { border-bottom: 0; margin-bottom: 1.1rem; }
.section-head { margin-top: 2.4rem; }
.section-head h2, .sec-head h2 { color: var(--ink); }
.section-head .sec-no { color: var(--mod-ink); background: var(--mod-soft); border-radius: 10px; padding: .15rem .45rem; }
.mod-hero { margin: 20px auto 0; width: calc(100% - 40px); max-width: 1224px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.mod-hero > .wrap { padding: 2rem 2rem 0; min-height: 260px; isolation: isolate; }
.module-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: -2; }
.mod-hero > .wrap::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 96%, transparent) 44%, color-mix(in srgb, var(--surface) 45%, transparent) 72%, transparent); }
.mod-hero h1 { max-width: 72%; font-size: clamp(1.6rem, 2.6vw, 2.6rem); }
.mod-hero .lead { max-width: 62%; line-height: 1.8; }
.mod-hero .eyebrow { color: var(--mod-ink); }
.mod-hero .eyebrow .mod-no { padding: .25rem .7rem; border-radius: 100px; background: var(--mod-soft); }
.mod-hero .crumbs { margin-bottom: 1.25rem; }
.mod-hero:has(.subnav) > .wrap { padding-bottom: 0; }
.mod-hero:not(:has(.subnav)) > .wrap { padding-bottom: 2rem; }
.steps-inline { gap: .5rem 1.2rem; color: var(--ink-2); margin-block: 1.15rem; max-width: 75%; }
.steps-inline::before { display: none; }
.steps-inline i { width: 28px; height: 28px; border: 0; background: var(--brand-soft); color: var(--brand-ink); }
.profile-bar { border-radius: 13px; background: color-mix(in srgb, var(--surface) 92%, transparent); border-color: var(--line); padding: .6rem .85rem; }
.profile-bar .pin { color: var(--brand-ink); }
.subnav { background: var(--surface); margin: 1.5rem -2rem 0; padding-inline: 2rem; gap: 1.75rem; border-top: 1px solid var(--line); }
.subnav a { padding-block: .85rem; min-height: 52px; }
.subnav a[aria-current="page"] { color: var(--brand-ink); border-bottom: 3px solid var(--brand); }
.subnav a svg { color: inherit; width: 20px; height: 20px; }
.tool-grid { gap: 1.1rem; }
.tool-card { border-radius: 16px; padding: 1.15rem; min-width: 0; box-shadow: 0 2px 5px rgba(26, 69, 111, .02); transition: border-color .18s, box-shadow .18s; }
.tool-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: 0 6px 24px rgba(26, 69, 111, .08); }
.tool-card .tc-top { align-items: flex-start; gap: .75rem; }
.tool-card .tc-title { font-size: 1rem; line-height: 1.6; }
.tool-icon { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; color: var(--mod-ink); background: var(--mod-soft); }
.tool-icon svg { width: 25px; height: 25px; }
.tool-card .tc-problem { font-size: .88rem; line-height: 1.75; }
.tool-card .tc-get { background: var(--brand-soft); padding: .55rem .65rem; border: 0; border-radius: 9px; color: var(--brand-ink); font-size: .81rem; align-items: center; }
.tool-card .tc-get .k { color: inherit; }
.tool-card .tc-get svg { color: var(--brand-ink); }
.tool-card .tc-mod { font-size: .73rem; display: inline-flex; width: fit-content; border-radius: 100px; padding: .15rem .6rem; background: var(--mod-soft); color: var(--mod-ink); }
.tool-card .fav { border-radius: 100px; color: var(--muted); top: .65rem; right: .6rem; width: 38px; height: 38px; }
.tool-card .fav[aria-pressed="true"] { color: var(--brand-ink); }
.tool-card.flagship { box-shadow: inset 0 3px 0 var(--mod); border-color: color-mix(in srgb, var(--mod) 25%, var(--line)); }
.tool-card .tc-thumb { margin: -1.15rem -1.15rem .75rem; aspect-ratio: 16/10; border-radius: 15px 15px 0 0; }
.home-section .tool-card .tc-thumb { aspect-ratio: 2.5/1; }
.feature-card { border-radius: 18px; padding: 1.2rem; background: var(--surface); }
.feature-card .fi { width: 48px; height: 48px; border-radius: 50%; }
.feature-card .fi svg { width: 25px; height: 25px; }
.feature-card h3 { font-size: 1.03rem; }
.path-card { border-radius: 18px; background: var(--surface); }
.path-card:nth-child(3n+1) { background: var(--brand-soft); }
.path-card:nth-child(3n+2) { background: var(--m2-soft); }
.path-card:nth-child(3n+3) { background: var(--m4-soft); }
.path-step { min-height: 44px; }
.callout { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent); padding: .9rem 1rem; }
.callout .ci { display: grid; place-items: center; color: var(--brand-ink); }
.adv-toggle, .area-btn, .ppill, .checklist, .gal-card, .sample-pre { border-radius: 12px; }
.tool-brief { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: .65rem 1rem; margin-bottom: 1.2rem; }
.tool-brief > div { grid-template-columns: 4.5rem 1fr; gap: .5rem; }
.sheet-head { background: var(--surface); padding-block: 1.25rem; }
.sheet-head h2 { font-size: 1.25rem; }
.sheet-body { background: var(--bg); }
.sheet { border-radius: 22px 22px 0 0; }
.sheet-foot { gap: .75rem; }
.sheet-foot .btn { min-height: 48px; min-width: 0; }
.b-form { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.25rem; min-width: 0; }
.builder-output { min-width: 0; }
.builder-workspace { display: grid; gap: 1rem; align-items: start; }
.builder-steps { display: flex; flex-wrap: wrap; gap: .65rem 1.3rem; margin-bottom: 1.2rem; font-size: .85rem; color: var(--ink-2); }
.builder-steps span { display: flex; align-items: center; gap: .4rem; }
.builder-steps i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-style: normal; font-weight: 600; }
.result-placeholder { background: var(--brand-soft); border: 1px solid var(--line); border-radius: 18px; padding: 2rem 1.4rem; text-align: center; }
.placeholder-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--brand-ink); display: grid; place-items: center; margin: 0 auto 1rem; }
.placeholder-icon svg { width: 28px; height: 28px; }
.result-placeholder p { color: var(--muted); font-size: .9rem; }
.result { padding: 1.2rem; border: 1px solid var(--line); margin: 0; border-radius: 18px; background: var(--brand-soft); scroll-margin-top: 1rem; }
.prompt-box { border-radius: 11px; background: var(--surface); border-color: var(--line); }
.prompt-box textarea { font-size: .94rem; line-height: 1.8; min-height: 180px; }
.prompt-box.collapsed textarea { min-height: 120px; }
.pb-bar { flex-wrap: wrap; }
.prompt-box .pb-bar .row { flex-wrap: wrap; }
.ai-head { margin-top: 1.4rem; }
.ai-grid { gap: .6rem; margin-top: .75rem; }
.ai-btn { border-radius: 12px; min-height: 90px; padding: .65rem .3rem; }
.ai-btn .ai-logo { border-radius: 7px; width: 28px; height: 28px; }
.ai-btn .ai-tag { border-radius: 100px; }
.checklist { border-color: color-mix(in srgb, var(--ok) 20%, var(--line)); }
.next-list { border: 0; gap: .55rem; }
.next-item { padding: .7rem .8rem; background: var(--surface); border-radius: 11px; border: 1px solid var(--line); }
.list { border-radius: 14px; }
.list-item { min-height: 58px; }
.empty .big { width: 64px; height: 64px; background: var(--brand-soft); color: var(--brand-ink); border: 0; }
.empty .big svg { width: 28px; height: 28px; }
.return-banner { border-radius: 16px; }
.home-hero { margin: 20px auto 0; width: calc(100% - 40px); max-width: 1224px; border-radius: 26px; border: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate; }
.home-hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.home-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 96%, transparent) 39%, color-mix(in srgb, var(--surface) 82%, transparent) 55%, transparent 90%); }
.home-hero .wrap.hero-grid { grid-template-columns: minmax(0, 1fr); padding: 2.7rem 2.5rem 1.5rem; gap: 0; }
.home-hero .hero-copy { max-width: none; }
.home-hero h1 { font-size: clamp(1.8rem, 3.4vw, 3rem); max-width: 68%; margin-bottom: .9rem; }
.home-hero h1 span { font-size: .85em; }
.home-hero .lead { max-width: 62%; color: var(--ink-2); font-size: 1.03rem; }
.home-hero .overline { font-size: .8rem; background: var(--brand-soft); border-radius: 100px; width: fit-content; padding: .3rem .75rem; }
.overline::before { display: none; }
.home-search { max-width: 880px; }
.home-search-row { padding: 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(26, 69, 111, .07); display: flex; gap: .6rem; }
.home-search-row .search { flex: 1 1 auto; min-width: 0; }
.home-search-row input { border-color: var(--line); }
.home-search-row .btn { flex: 0 0 auto; }
.popular { align-items: center; gap: .5rem; margin-top: .85rem; max-width: 950px; }
.popular .popular-l { font-size: .78rem; }
.popular a { text-decoration: none; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); font-size: .8rem; padding: .35rem .65rem; min-height: 36px; display: inline-flex; align-items: center; }
.popular a:hover { border-color: var(--brand); background: var(--brand-soft); }
.home-hero .facts { border: 0; border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); margin: 0 .5rem 1.5rem; padding: .6rem 1rem; }
.facts b { font-size: 1.15rem; color: var(--brand-ink); }
.facts li { padding-block: .65rem; }
.facts span { font-size: .78rem; }
.home-section { margin-top: 2.6rem; }
.section-heading { display: flex; align-items: center; gap: .65rem; }
.section-heading > svg { color: var(--brand); width: 27px; height: 27px; }
.mod-grid { gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mod-card { background: var(--mod-soft); border: 1px solid color-mix(in srgb, var(--mod) 8%, var(--line)); box-shadow: none; border-radius: 18px; padding: 1.2rem; }
.module-symbol { display: grid; place-items: center; width: 54px; height: 54px; background: var(--surface); color: var(--mod-ink); border-radius: 50%; margin-bottom: .8rem; }
.module-symbol svg { width: 29px; height: 29px; }
.mod-card .mod-no { color: var(--mod-ink); font-size: .85rem; }
.mod-card h3 { font-size: 1.1rem; line-height: 1.5; }
.mod-card .mc-course { display: none; }
.mod-card .mc-blurb { font-size: .85rem; line-height: 1.75; }
.mod-card .mc-tools { border: 0; margin-bottom: 0; gap: .5rem; }
.mod-card .mc-tool { background: var(--surface); border: 1px solid color-mix(in srgb, var(--mod) 12%, transparent); border-radius: 11px; padding: .6rem .65rem; gap: .4rem; font-size: .84rem; }
.mod-card .mc-tool small { display: none; }
.mod-card .mc-count { font-size: .69rem; color: var(--mod-ink); }
.mod-card .mc-tool svg { width: 15px; height: 15px; }
.how-banner { position: relative; display: flex; align-items: center; gap: 1.5rem; background: var(--brand-soft); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem; }
.how-banner .how-art { width: 170px; height: 125px; object-fit: contain; flex: 0 0 auto; }
.how-banner .how-content { flex: 1 1 auto; min-width: 0; }
.how-banner .how-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.how-banner .how-list li { border: 0; padding: 0; gap: .5rem; }
.how-banner .how-list p { font-size: .8rem; }
.faq-preview { padding: 1.5rem; border-radius: 20px; background: var(--m2-soft); }
.faq-preview .sec-head { margin-bottom: .85rem; }
.faq-preview details { background: var(--surface); padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 11px; margin-top: .5rem; font-size: .9rem; }
.faq-preview summary { cursor: pointer; font-weight: 600; }
.faq-preview details p { color: var(--ink-2); margin: .6rem 0 0; }
.principles { border: 0; gap: 1rem; background: transparent; }
.principles > div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.principles > div + div { border: 1px solid var(--line); }
.principles .pi { border-radius: 50%; }
.pk-footer { background: #102e4b; color: #fff; border: 0; margin-top: 3.5rem; }
.pk-footer .wrap { padding-block: 2.5rem 1.4rem; }
.pk-footer h4, .pk-footer .pk-brand-name { color: #fff; }
.pk-footer a, .pk-footer .fine, .pk-footer .pk-brand-sub { color: #c1d3e5; }
.pk-footer a:hover { color: #fff; }
.pk-footer .legal { border-color: #2d4b68; color: #a9c4de; }
body[data-page="guide"] .video-box { max-width: 960px; margin-inline: auto; border-radius: 20px; box-shadow: var(--shadow-2); }
body[data-page="guide"] .step-list { border: 0; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-page="guide"] .step-item { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 1.25rem; grid-template-columns: 32px 1fr; gap: .7rem; }
body[data-page="guide"] .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 1rem 1.2rem; margin-top: .65rem; }
.ex-card .ex-actions { border: 0; gap: .5rem; }
.ex-actions .btn { font-size: .84rem; }
body[data-page="m4-5e"] .plan-aside .card { background: var(--m4-soft); }
body[data-page="m4-5e"] .plan-aside .model-steps li { background: var(--surface); border-radius: 12px; padding: .65rem; }
body[data-page="m4-5e"] .plan-aside .model-steps li::before { background: var(--m4); }
body[data-page="m4-5e"] #builder .b-form { border: 0; padding: .3rem 0 1rem; }
/* 2.2.1 review: disclosure rows, FAQ numbering, demo actions */
details > summary { list-style: none; display: flex; align-items: center; gap: .75rem; cursor: pointer; font-weight: 600; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 6px 4px auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
details > summary:hover::after { border-color: var(--brand-ink); }
.faq-preview, body[data-page="guide"] .faq { counter-reset: faq; }
.faq-preview details > summary::before, body[data-page="guide"] .faq details > summary::before { counter-increment: faq; content: counter(faq); flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-size: .8rem; font-weight: 600; }
.faq-preview details[open], body[data-page="guide"] .faq details[open] { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.faq-preview details p, body[data-page="guide"] .faq details p { padding-left: calc(28px + .75rem); }
.tool-card .tc-actions { margin-top: auto; padding-top: .6rem; display: flex; gap: .5rem; }
.tool-card .tc-actions .btn { flex: 1 1 0; min-width: 0; min-height: 42px; padding-inline: .5rem; font-size: .84rem; white-space: nowrap; }
.tool-card .tc-actions .btn svg { width: 17px; height: 17px; }
.popular { max-width: 1060px; }
.not-found-art { width: 200px; height: 145px; object-fit: contain; margin: 0 auto 1rem; }
@media (min-width: 1150px) {
  .mod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sheet.sheet-builder { inset: 50% auto auto 50%; width: min(1180px, 94vw); height: 92dvh; max-height: 92dvh; border-radius: 24px; transform: translate(-50%, -47%); opacity: 0; transition: transform .25s, opacity .25s; }
  .sheet.sheet-builder.open { transform: translate(-50%, -50%); opacity: 1; }
  .sheet-builder .builder-workspace { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem; }
  .sheet-builder .builder-output { position: sticky; top: 0; }
  .sheet-builder .sheet-body { padding: 1.5rem; }
  .sheet-builder .sheet-foot { justify-content: flex-end; }
  .sheet-builder .sheet-foot .btn { flex: 0 1 220px; }
}
@media (max-width: 1023px) {
  :root { --header-h: 72px; }
  .mobile-only { display: inline-grid; }
  .pk-header-actions { gap: .1rem; margin-left: auto; }
  .pk-brand-name { font-size: 1.2rem; }
  .pk-logo, .pk-logo svg { width: 40px; height: 40px; }
  .pk-header-actions > [data-act="settings"] { display: none; }
  .pk-brand-sub { display: none; }
  .home-hero .wrap.hero-grid { padding: 2rem 1.5rem 1rem; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .pk-nav { display: none; }
  .mobile-only { display: inline-grid; }
  .pk-header-actions { margin-left: auto; }
}
@media (max-width: 699px) {
  :root { --header-h: 66px; }
  html { font-size: calc(16px * var(--fs)); }
  .pk-header .wrap { gap: .5rem; }
  .pk-header-actions .icon-btn { width: 40px; min-width: 40px; }
  .pk-brand-name { font-size: min(1.17rem, 6vw); }
  .pk-brand { gap: .4rem; }
  .pk-logo, .pk-logo svg { width: 35px; height: 35px; }
  .home-hero, .mod-hero { width: calc(100% - 24px); margin-top: 12px; border-radius: 20px; }
  .home-hero .wrap.hero-grid { padding: 1.5rem 1.1rem 1rem; }
  .home-hero-photo { height: 235px; object-fit: cover; object-position: 70% center; opacity: .35; }
  .home-hero::before { background: linear-gradient(90deg, var(--surface) 8%, color-mix(in srgb, var(--surface) 80%, transparent) 55%, transparent), linear-gradient(0deg, var(--surface) 45%, transparent); }
  .home-hero h1, .home-hero .lead { max-width: 100%; }
  .home-hero h1 { font-size: 1.9rem; }
  .home-hero .lead { font-size: .91rem; }
  .home-hero .overline { font-size: .7rem; }
  .home-search-row { flex-direction: column; gap: .5rem; padding: 6px; }
  .home-search-row .btn { width: 100%; min-height: 46px; }
  .home-search-row input { font-size: .91rem; min-height: 48px; }
  .search-label { font-size: .85rem; }
  .popular { gap: .4rem; }
  .popular .popular-l { width: 100%; }
  .popular a { font-size: .74rem; padding: .3rem .55rem; }
  .home-hero .facts { padding: .4rem .8rem; margin-inline: 0; }
  .facts b { font-size: .96rem; }
  .facts span { font-size: .7rem; }
  .mod-hero > .wrap { padding: 1.35rem 1.1rem 0; min-height: 0; }
  .module-hero-photo { height: 220px; opacity: .28; object-position: 75% center; }
  .mod-hero > .wrap::before { background: linear-gradient(90deg, var(--surface) 15%, color-mix(in srgb, var(--surface) 65%, transparent) 80%), linear-gradient(0deg, var(--surface) 20%, transparent); }
  .mod-hero h1 { max-width: 100%; font-size: 1.7rem; }
  .mod-hero .lead { max-width: 100%; font-size: .9rem; }
  .mod-hero .eyebrow { font-size: .75rem; }
  .mod-hero .crumbs { font-size: .72rem; }
  .steps-inline { max-width: 100%; gap: .6rem; font-size: .75rem; }
  .steps-inline i { width: 22px; height: 22px; }
  .subnav { margin-inline: -1.1rem; padding-inline: 1.1rem; gap: 1rem; }
  .subnav a { font-size: .8rem; }
  .profile-bar { font-size: .79rem; }
  .profile-bar > span:nth-child(2) { flex-basis: 8rem; }
  .mod-grid { gap: .7rem; }
  .mod-card { padding: .85rem; border-radius: 15px; }
  .module-symbol { width: 42px; height: 42px; margin-bottom: .5rem; }
  .module-symbol svg { width: 25px; height: 25px; }
  .mod-card h3 { font-size: .95rem; }
  .mod-card .mc-blurb { font-size: .76rem; }
  .mod-card .mc-tool { font-size: .75rem; flex-wrap: wrap; }
  .mod-card .mc-count { display: none; }
  .tool-grid, .pop-grid { gap: .85rem; }
  .home-section .pop-grid .tool-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: .7rem; row-gap: .35rem; padding: .85rem; }
  .home-section .pop-grid .tc-thumb { margin: 0; grid-column: 1; grid-row: 1 / 5; width: 88px; height: 98px; align-self: start; border-radius: 10px; }
  .home-section .pop-grid .tc-mod, .home-section .pop-grid .tc-title, .home-section .pop-grid .tc-get { grid-column: 2; }
  .home-section .pop-grid .tc-mod { font-size: .65rem; padding: .1rem .4rem; max-width: 100%; }
  .home-section .pop-grid .tc-title { font-size: .88rem; margin: 0; }
  .home-section .pop-grid .tc-problem { display: none; }
  .home-section .pop-grid .tc-get { margin: 0; font-size: .72rem; padding: .45rem; }
  .home-section .pop-grid .tc-get > span:not(.k) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .home-section .pop-grid .tc-get .k { display: none; }
  .mod-card .mc-blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .home-section { margin-top: 2rem; }
  .section-heading > svg { width: 23px; height: 23px; }
  .how-banner { padding: 1.1rem; gap: .5rem; }
  .how-banner .how-art { display: none; }
  .how-banner .how-list { grid-template-columns: 1fr; gap: .8rem; }
  .how-banner .how-list li { grid-template-columns: 28px 1fr; }
  .faq-preview { padding: 1.1rem; }
  .b-form, .result { padding: 1rem; border-radius: 15px; }
  .builder-workspace { grid-template-columns: minmax(0, 1fr); }
  .builder-output:has(.result-placeholder) { display: none; }
  .tool-brief { padding: .65rem .8rem; }
  .tool-brief > div { grid-template-columns: 1fr; gap: 0; font-size: .86rem; }
  .sheet-head h2 { font-size: 1.1rem; }
  .sheet-body { padding-inline: .75rem; }
  .sheet-foot { gap: .5rem; padding-inline: .75rem; }
  .sheet-foot .btn { font-size: .83rem; padding-inline: .55rem; }
  .chip { font-size: .85rem; max-width: 100%; white-space: normal; text-align: left; }
  .chips.scroll .chip { max-width: none; white-space: nowrap; flex: 0 0 auto; }
  .ai-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-btn { min-height: 58px; display: grid; grid-template-columns: 28px 1fr; text-align: left; column-gap: .65rem; padding: .65rem .8rem; }
  .ai-btn .ai-logo { grid-row: span 2; }
  .ai-btn small { grid-column: 2; }
  .ai-btn .ai-tag { left: auto; right: .7rem; transform: none; }
  body[data-page="guide"] .step-list { grid-template-columns: minmax(0, 1fr); }
  .pk-footer { margin-top: 2.5rem; }
  .pk-footer .fine { font-size: .77rem; }
}
@media (max-width: 559px) {
  .mod-grid { grid-template-columns: minmax(0, 1fr); }
  .mod-card header { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: .75rem; align-items: center; }
  .mod-card .module-symbol { grid-row: span 2; margin: 0; }
  .mod-card h3 { margin: 0; }
  .mod-card .mc-blurb { margin-top: .5rem; }
  .mod-card .mc-tool { flex-wrap: nowrap; font-size: .82rem; }
  .mod-card .mc-count { display: inline; }
  .tool-card .tc-actions .btn { font-size: .8rem; }
}
@media (max-width: 380px) {
  .pk-brand-name { font-size: 1.05rem; }
  .pk-logo, .pk-logo svg { width: 30px; height: 30px; }
  .mod-card .mc-tool { padding: .5rem; }
}
@media (min-width: 700px) and (max-width: 1149px) {
  .builder-output:has(.result-placeholder) { display: none; }
}
@media print {
  .module-hero-photo, .home-hero-photo, .result-placeholder { display: none !important; }
  .sheet { position: static; transform: none; box-shadow: none; height: auto; max-height: none; }
  .sheet-body { overflow: visible; }
  .builder-workspace { display: block; }
}