/* Novaia Labs Official — phone layer (2026-10-24, CEO: "PCは変更なし").
   Everything that changes layout lives inside max-width media queries; the only rules outside are "hidden by default" helpers for the phone-only controls that js/mobile.js adds. */
.m-tabs, .m-desc, .m-pick { display: none; }

/* ───────────── opening: the wordmark stays "NOVAIA / LABS" (2 lines) while it animates ───────────── */
@media (max-width: 760px) {
  .word-row.two { font-size: 20vw; max-width: 96vw; column-gap: 0; }  /* the 30px default gap pushed 'IA' onto its own line */
}

/* ───────────── home hero: compact, left-aligned ───────────── */
@media (max-width: 700px) {
  .hero { display: flex; flex-direction: column; padding: calc(var(--navh, 64px) + 14px) var(--gut) 0; min-height: 0; }
  .hero .meta { order: 1; position: static; margin: 0 0 clamp(10px, 2.4vh, 18px); display: flex; gap: 1.6em; justify-content: flex-start; font-size: 10.5px; opacity: 1; }
  .hero .hl { order: 2; align-self: flex-start; margin: 0; padding: 0; font-size: min(22vw, 108px); line-height: .84; }
  .hero .tag { order: 3; position: static; align-self: flex-end; margin: clamp(14px, 3vh, 26px) 0 0; text-align: right; font-size: 17px; line-height: 1.8; letter-spacing: .1em; }
  .hero .strip { order: 4; margin-top: clamp(34px, 7vh, 64px); }
  .hero .cue-row { order: 5; position: static; padding: 14px 0 22px; }
}

/* one-line notes (home + designs) */
@media (max-width: 560px) {
  .hm-works .hm-note, .dz-note { white-space: nowrap; font-size: min(12px, 2.95vw); letter-spacing: .01em; }
  .dz-note { padding-left: 8px; padding-right: 0; }
}

/* ───────────── home: PLANS → tabs (one sample at a time) ───────────── */
@media (max-width: 820px) {
  .hm-ptabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 22px; }
  .hm-ptabs button { appearance: none; border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 11px 4px 10px; font: 800 clamp(10.5px, 3vw, 13px)/1.25 var(--f-ui); letter-spacing: -.01em; cursor: pointer; min-width: 0; display: grid; gap: 4px; justify-items: center; text-transform: uppercase; }
  .hm-ptabs button small { font: 500 10.5px/1 var(--f-ja); letter-spacing: .04em; opacity: .75; }
  .hm-ptabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .hm-ptabs button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
  .hm-stage.is-tabs { display: block; }
  .hm-stage.is-tabs .hm-win { display: none; }
  .hm-stage.is-tabs .hm-win.act { display: grid; animation: mfade .45s ease both; }
  @keyframes mfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ───────────── home: VARIATIONS → one row of tabs + small rotating deck, arrows beside the card ───────────── */
@media (max-width: 820px) {
  .hm-mh { grid-template-columns: 1fr; gap: 16px; }
  .hm-mh h2 { white-space: nowrap; font-size: min(5.3vw, 28px); }
  .hm-sws { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; flex-wrap: nowrap; }
  .hm-sw { min-width: 0; padding: 10px 2px 9px; border-radius: 40px; display: grid; gap: 3px; justify-items: center; white-space: nowrap; }
  .hm-sw b { font-size: 12.5px; letter-spacing: 0; white-space: nowrap; }
  .hm-sw small { font-size: 9px; letter-spacing: .06em; }
  .hm-pin { padding-top: clamp(64px, 10vh, 100px); padding-bottom: 46px; overflow: hidden; }
  .hm-mstage { position: relative; padding: 4px 0 0; perspective: 1400px; }
  .hm-deck { min-height: 0; height: calc(var(--mcw, 64vw) * .625 + 52px); }
  .hm-card { --cw: var(--mcw, 64vw); }
  .hm-card .hm-open { font-size: 10px; padding: .6em .9em; }
  .hm-arrow { top: calc((var(--mcw, 64vw) * .625 + 52px) / 2); bottom: auto; width: 40px; height: 40px; margin-top: -20px; font-size: 20px; }
  .hm-arrow.l { left: 6px; right: auto; }
  .hm-arrow.r { right: 6px; left: auto; }
  .hm-mfoot { padding-top: 6px; }
}

/* ───────────── plans (comparison) → one plan at a time ───────────── */
@media (max-width: 760px) {
  .m-tabs { display: grid; }
  .pl-tabs { position: sticky; top: calc(var(--navh, 64px) - 1px); z-index: 20; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 calc(var(--gut) * -1) 20px; padding: 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .pl-tabs button { appearance: none; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); padding: 12px 2px 11px; font: 800 clamp(10.5px, 3vw, 13px)/1.2 var(--f-ui); letter-spacing: -.01em; cursor: pointer; display: grid; gap: 4px; justify-items: center; min-width: 0; }
  .pl-tabs button:last-child { border-right: 0; }
  .pl-tabs button small { font: 500 10.5px/1 var(--f-ja); letter-spacing: .02em; opacity: .75; }
  .pl-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .pl-tabs button:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
  .pl-cmp[data-sel="ESSENTIAL"] .tbl td:not([data-p="ESSENTIAL"]), .pl-cmp[data-sel="SIGNATURE"] .tbl td:not([data-p="SIGNATURE"]), .pl-cmp[data-sel="PREMIUM"] .tbl td:not([data-p="PREMIUM"]) { display: none; }
  .pl-cmp .tbl td::before { display: none; }
  .pl-cmp .tbl tbody tr { padding: 14px 0 12px; border-top: 1px solid var(--line); }
  .pl-cmp .tbl tbody th { padding: 0 0 4px; border: 0; }
  .pl-cmp .tbl td { padding: 0; font-size: 16px; line-height: 1.8; }
  .pl-cmp .tbl .px td { font-size: 36px; }
  .pl-cmp .tbl .smp td { padding-top: 6px; }
}

/* ───────────── flow: TIMING stays a compact 3-column table ───────────── */
@media (max-width: 760px) {
  .tbl.flt { display: table; table-layout: fixed; width: 100%; }
  .tbl.flt thead { display: table-header-group; }
  .tbl.flt tbody { display: table-row-group; }
  .tbl.flt tr { display: table-row; }
  .tbl.flt th, .tbl.flt td { display: table-cell; padding: 14px 6px 14px 0; border-top: 1px solid var(--line); vertical-align: top; }
  .tbl.flt thead th { font: 800 clamp(10.5px, 3vw, 13px)/1.2 var(--f-ui); letter-spacing: -.01em; padding: 0 6px 12px 0; border-top: 0; }
  .tbl.flt thead th:first-child { width: 3.4em; padding: 0; }
  .tbl.flt tbody th { display: table-cell; width: 3.4em; padding: 16px 6px 14px 0; font: 500 11px/1.5 var(--f-ja); letter-spacing: .08em; color: var(--mute); }
  .tbl.flt td::before { display: none; }
  .tbl.flt .px td { font: 800 clamp(18px, 5.4vw, 24px)/1.25 var(--f-ja); letter-spacing: -.02em; }
  .tbl.flt .px2 td { font: 500 clamp(15px, 4.4vw, 18px)/1.5 var(--f-ja); }
  .tbl.flt .px td::after, .tbl.flt .px2 td::after { content: none; }
}

/* ───────────── contact: the "ご入力内容の確認" sits under the form ───────────── */
@media (max-width: 900px) {
  .ct aside { order: 2; margin-top: 8px; }
}

/* ───────────── Motion+ ───────────── */
@media (max-width: 820px) {
  /* TOUCH: ドラッグ / カーソル / 長押し side by side; the explanation, then the thing to touch, under them */
  .mx-touch { gap: 0; }
  .mx-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-top: 0; margin-top: 18px; }
  .mx-modes button { display: grid; grid-template-columns: 1fr; justify-items: center; padding: 14px 4px 13px; border: 1px solid var(--ink); opacity: .8; text-align: center; }
  .mx-modes button .n, .mx-modes button small { display: none; }
  .mx-modes button b { font-size: 15px; letter-spacing: .04em; }
  .mx-modes button[aria-selected="true"] { opacity: 1; padding: 14px 4px 13px; background: var(--ink); color: var(--paper); }
  .m-desc { display: block; margin: 14px 0 16px; font-size: 14px; line-height: 1.9; color: var(--mute); min-height: 5.7em; }
  /* PATH A / B + INCLUDED vs MOTION+: both choices are visible together; tap one to read it */
  .m-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; }
  .m-pick button { appearance: none; text-align: left; border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 12px 12px 13px; display: grid; gap: 6px; align-content: start; cursor: pointer; min-width: 0; font: inherit; }
  .m-pick button .mp-n { font: 500 10.5px/1 var(--f-ui); letter-spacing: .2em; opacity: .75; }
  .m-pick button b { font: 800 15px/1.45 var(--f-ja); letter-spacing: 0; }
  .m-pick button small { font: 500 11.5px/1.65 var(--f-ja); opacity: .8; }
  .m-pick button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .m-pick button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
  .mp-paths { display: block; padding: 28px var(--gut) 8px; border-bottom: 1px solid var(--line); }
  .mp-path { padding: 8px 0 22px; border: 0; gap: 18px; }
  .mp-path:hover { background: transparent; color: inherit; }
  .mp-path.m-hide, .cmp > .m-hide { display: none; }
  .mp-path h2 { font-size: clamp(26px, 8vw, 36px); }
  .mp-path > .n { display: none; }
  .cmp { display: block; }
  .cmp > div { padding-top: 16px; }
  .cmp .cmp-k { display: none; }
}

/* ───────────── phone reading comfort: tighter tracking, calmer vertical rhythm (all pages) ───────────── */
@media (max-width: 760px) {
  body { font-size: 15px; line-height: 1.95; letter-spacing: .035em; }
  .sh .lead { font-size: 16px; line-height: 1.85; letter-spacing: .04em; }
  .ph .ja { font-size: 19px; letter-spacing: .05em; }
  .ph .sub { letter-spacing: .04em; }
  .ph { padding-bottom: clamp(26px, 4vh, 40px); }
  .sec { padding-top: clamp(44px, 7vh, 64px); padding-bottom: clamp(44px, 7vh, 64px); }
  .sh { gap: 12px; margin-bottom: 26px; }
  .sh h2 em { margin-top: .8em; }
  .hm { padding-top: clamp(44px, 7vh, 64px); padding-bottom: clamp(44px, 7vh, 64px); }
}