/* KAMAE — the world's own parts (2026-10-12; the owner: 「ここまで凝ってるんだから世界観は統一してほしい」).
   Everything the visitor meets over the room — the gate (sound; a computer, on a phone), the guide, the scroll cue,
   the AI, the forms, the price sheet, the menu, the reading pages — is a piece of the room:
     · a dark LED panel: the room's dot mesh in its surface, lit faintly by the room's colour of the moment (--room,
       kept in step with the wall by main.js / page.js: the next colour every ~11.5 s, as on the wall);
     · its corner cut along the K's slash (51.5°, the top left: Δy = Δx · tan 51.5° = 1.257), a line of the room's
       light along the cut;
     · it comes in as the K's blade passes: revealed along the slash, a line of light at its front;
     · labels in mono in the room's colour, the big words in the display type; the room's colour is the accent. */
:root { --room: 240 70 31; --cut: 22px; }

/* ---------- the panel ---------- */
.chat__panel, .modal__panel, .sheet__panel, .guide, .cue__sign, .gate__btn, .chat__send, .form__submit, .msg__go-btn {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) * 1.257)); }
.chat__panel, .modal__panel, .sheet__panel, .guide, .cue__sign {
  background: radial-gradient(circle, rgb(var(--room) / .14) 0 .8px, transparent 1.3px) 0 0 / 5px 5px,
              linear-gradient(rgb(var(--room) / .06), rgb(var(--room) / .06)), rgb(9 8 8 / .9) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--room) / .3) !important; }
/* the cut, lit */
.chat__panel::after, .modal__panel::after, .sheet__panel::after, .guide::after, .cue__sign::after {
  content: ""; position: absolute; left: 0; top: calc(var(--cut) * 1.257); width: calc(var(--cut) * 1.606); height: 2px; z-index: 3; pointer-events: none;
  background: rgb(var(--room)); box-shadow: 0 0 12px rgb(var(--room)); transform: rotate(-51.5deg); transform-origin: 0 50%; }
.chat__panel, .modal__panel, .sheet__panel { --cut: 34px; }
.gate__btn, .chat__send, .form__submit, .msg__go-btn { --cut: 12px; }
.guide, .cue__sign { --cut: 14px; }

/* the K's blade: a panel is revealed along the slash, a line of light at the front */
@keyframes k-blade { from { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.k-in { -webkit-mask-image: linear-gradient(128.5deg, #000 42%, rgb(0 0 0 / .9) 47%, transparent 52%); mask-image: linear-gradient(128.5deg, #000 42%, rgb(0 0 0 / .9) 47%, transparent 52%);
  -webkit-mask-size: 260% 260%; mask-size: 260% 260%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: k-blade .9s var(--ease) both; }

/* labels: mono in the room's colour, a lit LED before them */
.k-label, .modal__label, .welcome__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgb(var(--room)) !important; }
.k-label::before, .modal__label::before { content: ""; width: 5px; height: 5px; background: rgb(var(--room)); box-shadow: 0 0 8px rgb(var(--room)); }

/* buttons: filled with the room's light (black type), or a hairline of it */
.gate__btn, .chat__send, .form__submit, .msg__go-btn { background: rgb(var(--room)) !important; color: #080706 !important; font-weight: 700; transition: filter .4s var(--ease), background-color .6s var(--ease) !important; }
.gate__btn:hover, .chat__send:hover, .form__submit:hover, .msg__go-btn:hover { filter: brightness(1.18); color: #080706 !important; }
.msg__go-btn::before { display: none; }
.gate__btn--line { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .34); }
.gate__btn--line:hover { box-shadow: inset 0 0 0 1px rgb(var(--room)); color: rgb(var(--room)) !important; filter: none; }

/* ---------- the gate: before the room (sound; on a phone first, a computer) ----------
   over the dimmed room, the big word lit by the room's dots (dots.js), what it is in one line, the two ways in */
.gate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgb(4 4 6 / .58); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .8s var(--ease); }
.gate.is-in { opacity: 1; }
html.is-gated, html.is-gated body { overflow: hidden !important; touch-action: none; }
.gate { overscroll-behavior: contain; touch-action: none; }
.gate__step { display: grid; justify-items: center; text-align: center; width: min(760px, 100%); }
.gate__word { margin-top: 18px; font-family: var(--f-disp); font-size: clamp(64px, 12.5vw, 190px); font-weight: 800; line-height: .86; letter-spacing: -.02em; color: #fff; }
.gate__eq { display: flex; gap: 7px; height: 46px; margin-top: 26px; align-items: flex-end; }
.gate__eq i { width: 5px; height: 100%; background: radial-gradient(circle, rgb(var(--room)) 0 2px, transparent 2.6px) 50% 100% / 5px 7px repeat-y;
  -webkit-mask-image: linear-gradient(to top, #000 var(--eqh, 30%), transparent var(--eqh, 30%)); mask-image: linear-gradient(to top, #000 var(--eqh, 30%), transparent var(--eqh, 30%));
  filter: drop-shadow(0 0 4px rgb(var(--room) / .8)); animation: gate-eq 1.1s ease-in-out infinite alternate; }
.gate__eq i:nth-child(2n) { animation-duration: .8s; } .gate__eq i:nth-child(3n) { animation-duration: 1.4s; } .gate__eq i:nth-child(4n) { animation-delay: -.5s; }
@keyframes gate-eq { from { --eqh: 18%; } to { --eqh: 100%; } }
@property --eqh { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
.gate__lead { margin-top: 24px; max-width: 30em; font-family: var(--f-jp); font-size: 14px; line-height: 2; letter-spacing: .06em; color: rgb(255 255 255 / .74); }
.gate__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.gate__btn { min-width: 210px; height: 52px; padding: 0 26px; font-family: var(--f-jpb); font-size: 13.5px; letter-spacing: .14em; }
.gate__guide { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font-family: var(--f-jp); font-size: 12px; letter-spacing: .08em; color: rgb(255 255 255 / .6); cursor: pointer; }
.gate__guide input { position: absolute; opacity: 0; pointer-events: none; }
/* (the switch: two LEDs, the lit one tells) */
.gate__guide i { position: relative; width: 26px; height: 12px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.gate__guide i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; background: rgb(255 255 255 / .4); transition: transform .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease); }
.gate__guide input:checked + i::after { transform: translateX(14px); background: rgb(var(--room)); box-shadow: 0 0 8px rgb(var(--room)); }
.gate__guide input:focus-visible + i { outline: 1px solid rgb(var(--room)); outline-offset: 3px; }
@media (max-width: 600px) {
  .gate__word { font-size: 15.5vw; white-space: nowrap; }
  .gate__lead { font-size: 13px; }
  .gate__acts { flex-direction: column-reverse; width: 100%; }
  .gate__btn { width: 100%; }
}

/* ---------- the guide (main.js): a panel of the room along the foot of the screen ---------- */
.guide__head b { color: rgb(var(--room)) !important; }
.guide__en { font-family: var(--f-disp); font-size: 15px; font-weight: 800; letter-spacing: .02em; margin-right: 10px; }
.guide__off { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22) !important; }
.guide__off:hover { color: rgb(var(--room)) !important; box-shadow: inset 0 0 0 1px rgb(var(--room)) !important; }
.guide-chip { clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 10px); background: radial-gradient(circle, rgb(var(--room) / .14) 0 .8px, transparent 1.3px) 0 0 / 5px 5px, rgb(9 8 8 / .9) !important; box-shadow: inset 0 0 0 1px rgb(var(--room) / .4) !important; }
.guide-chip::before { background: rgb(var(--room)) !important; box-shadow: 0 0 8px rgb(var(--room)); }
/* (a chapter's note waiting under the chip: lit until it is opened — phones) */
.guide-chip.is-new { box-shadow: inset 0 0 0 1px rgb(var(--room)), 0 0 16px rgb(var(--room) / .35) !important; }
.guide-chip.is-new::before { animation: k-wait 1s steps(2) infinite; }
.guide-chip { transition: opacity .4s var(--ease); }
.guide-chip.is-away { opacity: 0; pointer-events: none; }
/* (desktop: under the header when copy, the plans' labels or the footer are at the foot of the screen) */
@media (min-width: 901px) { .guide.is-top { top: 84px; bottom: auto; } }

/* ---------- the scroll cue: a panel with a column of LEDs lit downward ---------- */
.cue__sign { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.cue__dots { display: grid; gap: 3px; flex: none; }
.cue__dots i { width: 4px; height: 4px; background: rgb(255 255 255 / .2); animation: cue-dot 1.2s steps(1) infinite; }
.cue__dots i:nth-child(2) { animation-delay: .3s; } .cue__dots i:nth-child(3) { animation-delay: .6s; } .cue__dots i:nth-child(4) { animation-delay: .9s; }
@keyframes cue-dot { 0% { background: rgb(var(--room)); box-shadow: 0 0 6px rgb(var(--room)); } 25% { background: rgb(255 255 255 / .2); box-shadow: none; } }
.cue__t b { color: rgb(var(--room)) !important; }

/* ---------- the AI, the forms, the price sheet ---------- */
.modal, .chat, .sheet { background: rgb(4 4 6 / .5) !important; }
.chat__title, .modal__title, .sheet__title { font-family: var(--f-jpb); }
.modal__label { font-size: 11px; }
.modal__close i { transition: background-color .4s var(--ease); }
.modal__panel:focus, .chat__panel:focus { outline: none; }
.modal__close:hover i { background: rgb(var(--room)); }
/* (between the messages, a row of the room's dots instead of a rule) */
.msg { border-top: 0 !important; background: radial-gradient(circle, rgb(var(--room) / .5) 0 1px, transparent 1.5px) 0 0 / 6px 3px repeat-x; }
.msg--ai .msg__who { color: rgb(var(--room)) !important; }
.chat__starts, .chat__starts li { border-color: rgb(var(--room) / .22) !important; }
.chat__starts button::before { color: rgb(var(--room)) !important; }
.chat__starts button:hover { color: rgb(var(--room)) !important; }
.chat__form { border-top-color: rgb(var(--room) / .6) !important; }
.chat__acts button:hover, .sheet__ai:hover { color: rgb(var(--room)) !important; }
.form input, .form select, .form textarea { background: radial-gradient(circle, rgb(var(--room) / .1) 0 .7px, transparent 1.2px) 0 0 / 5px 5px, rgb(255 255 255 / .03) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16) !important; border-radius: 0 !important; transition: box-shadow .4s var(--ease); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; box-shadow: inset 0 0 0 1px rgb(var(--room)), 0 0 18px rgb(var(--room) / .22) !important; }
.form__row em, .form__note.is-error { color: rgb(var(--room)) !important; }
.form__agree input { accent-color: rgb(var(--room)); }

/* ---------- the menu: the room's dots behind it ---------- */
.menu { background: radial-gradient(circle, rgb(var(--room) / .12) 0 .8px, transparent 1.3px) 0 0 / 6px 6px, rgb(0 0 0 / .92) !important; }
.menu__inner a { border-bottom-color: rgb(var(--room) / .25) !important; transition: color .4s var(--ease); }
.menu__inner a:hover { color: rgb(var(--room)); }

@media (prefers-reduced-motion: reduce) { .k-in { animation: none; -webkit-mask-image: none; mask-image: none; } .gate__eq i, .cue__dots i { animation: none; } }

/* ---------- the reading pages (terms, privacy, company, plans): in the room too ----------
   no paper: the room's dark, its dot mesh behind the text, the room's light falling from above in its colour of the
   moment (page.js keeps --room turning as the wall does), labels and rules in that light */
body.k-page::before { background-image: radial-gradient(circle, rgb(var(--room) / .16) 0 .9px, transparent 1.4px) !important; background-size: 6px 6px !important;
  -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 25%, rgb(0 0 0 / .18) 75%) !important; mask-image: radial-gradient(130% 90% at 50% 0%, #000 25%, rgb(0 0 0 / .18) 75%) !important; }
body.k-page::after { content: ""; position: fixed; left: 50%; top: -45vh; z-index: -1; width: 130vw; height: 90vh; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--room) / .2), transparent); transition: background .8s linear; }
body.k-page .label { color: rgb(var(--room)); }
body.k-page .label::before { background: rgb(var(--room)) !important; }
body.k-page .doc__toc a:hover, body.k-page .doc__body a { color: rgb(var(--room)); }
body.k-page .doc__body h2, body.k-page .doc h2 { border-color: rgb(var(--room) / .35); }
body.k-page .ph.is-solid { background: rgb(5 5 5 / .78) !important; box-shadow: 0 1px 0 rgb(var(--room) / .25); }
body.k-page .ph__cta { transition: box-shadow .4s var(--ease), color .4s var(--ease); }
body.k-page .ph__cta:hover { box-shadow: inset 0 0 0 1px rgb(var(--room)); color: rgb(var(--room)); }

/* ---------- no browser widgets, anywhere (the owner: 「こういうの絶対全部消して」) ----------
   no scroll bars (everything still scrolls: wheel, finger, keys), no resize grips, no spin buttons, no search
   clearers; the choices are the room's own lists (picker.js), the check boxes the room's LEDs */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
textarea { resize: none !important; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
select { -webkit-appearance: none; appearance: none; }
/* the choice: a field of the room's parts, its list a panel of them */
.pick { position: relative; }
.pick__native { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.pick__btn { position: relative; width: 100%; padding: 12px 40px 12px 14px; text-align: left; font-size: 15px; color: #fff;
  background: radial-gradient(circle, rgb(var(--room) / .1) 0 .7px, transparent 1.2px) 0 0 / 5px 5px, rgb(255 255 255 / .03);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); transition: box-shadow .4s var(--ease); }
.pick__btn.is-empty { color: rgb(255 255 255 / .42); }
.pick__btn::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid rgb(var(--room)); border-bottom: 1.5px solid rgb(var(--room)); transform: rotate(45deg); transition: transform .4s var(--ease), margin .4s var(--ease); }
.pick.is-open .pick__btn::after { transform: rotate(-135deg); margin-top: -2px; }
.pick__btn:hover, .pick__btn:focus-visible, .pick.is-open .pick__btn { outline: none; box-shadow: inset 0 0 0 1px rgb(var(--room)), 0 0 18px rgb(var(--room) / .22); }
.pick__list { --cut: 12px; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; margin: 0; padding: 6px 0; list-style: none; max-height: 264px; overflow-y: auto;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) * 1.257));
  background: radial-gradient(circle, rgb(var(--room) / .14) 0 .8px, transparent 1.3px) 0 0 / 5px 5px, rgb(12 11 11 / .97);
  box-shadow: inset 0 0 0 1px rgb(var(--room) / .45), 0 1em 2.4em rgb(0 0 0 / .5); }
.pick__list li { position: relative; padding: 10px 14px 10px 30px; font-size: 14px; letter-spacing: .04em; color: rgb(255 255 255 / .82); cursor: pointer; }
.pick__list li.is-active { background: rgb(var(--room) / .16); color: #fff; }
.pick__list li[aria-selected="true"] { color: rgb(var(--room)); }
.pick__list li[aria-selected="true"]::before { content: ""; position: absolute; left: 14px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: rgb(var(--room)); box-shadow: 0 0 8px rgb(var(--room)); }
/* the check box: a frame, and a lit LED in it when checked */
.form__agree input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 16px; height: 16px; margin: 2px 0 0; background: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4) !important; cursor: pointer; }
.form__agree input[type="checkbox"]::after { content: ""; position: absolute; inset: 4px; background: rgb(var(--room)); box-shadow: 0 0 8px rgb(var(--room)); transform: scale(0); transition: transform .3s var(--ease); }
.form__agree input[type="checkbox"]:checked::after { transform: none; }
.form__agree input[type="checkbox"]:focus-visible { outline: 1px solid rgb(var(--room)); outline-offset: 3px; }
/* (the AI writing the summary for the form: its button waits, lit) */
.chat__acts .is-busy { color: rgb(var(--room)) !important; pointer-events: none; animation: k-wait 1s steps(2) infinite; }
@keyframes k-wait { 50% { opacity: .45; } }

/* ---------- the dialogs: a still frame, the reading inside it scrolls (2026-10-12, phones) ----------
   The form and the price sheet keep their panel still — its cut, its close at hand at the top — and only what is
   read moves, under a band at the top where the close stands. With no scroll bars, the reading fades out at the
   edge where there is more of it (more.js: has-more / has-before); nothing is painted over the text. The panel is
   never taller than what the phone shows right now (dvh: with its address bar). */
.modal__panel { display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0 !important; overflow: hidden !important; }
.modal__body { min-height: 0; margin-top: 56px; padding: 0 44px 40px; overflow-y: auto; overscroll-behavior: contain; }
.sheet__panel { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden !important; }
.sheet__body { flex: 1; min-height: 0; margin-top: 64px; padding: 0 56px 64px; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 960px) {
  .modal { padding: 16px 12px; }
  .modal__panel { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .modal__body { margin-top: 60px; padding: 0 22px 28px; }
  .sheet__body { margin-top: 60px; padding: 0 20px calc(40px + env(safe-area-inset-bottom)); }
}
@property --k-ft { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --k-fb { syntax: "<length>"; inherits: false; initial-value: 0px; }
.modal__body, .sheet__body, .chat__log {
  -webkit-mask-image: linear-gradient(transparent, #000 var(--k-ft), #000 calc(100% - var(--k-fb)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--k-ft), #000 calc(100% - var(--k-fb)), transparent);
  transition: --k-ft .4s var(--ease), --k-fb .4s var(--ease); }
.modal__body.has-before, .sheet__body.has-before, .chat__log.has-before { --k-ft: 22px; }
.modal__body.has-more, .sheet__body.has-more, .chat__log.has-more { --k-fb: 56px; }
/* (the form's choice lists hold all their choices: no list that scrolls inside a form that scrolls) */
.pick__list { max-height: none; overflow: visible; }

/* ---------- phones: the version, said plainly (2026-10-12; the owner: 「スマホ版は…本物とは違うことがわかるように」) ----------
   the header carries "スマホ版 / 簡易表示" all the way down (a tap: how it differs, the gate's first page again); the
   menu says it once more beside the sound, which a phone otherwise had no way to turn off; the guide's chip sits in the
   header too, never over a chapter's own buttons at the foot */
.hdr__mobile { display: none; }
.gate__lead b { display: block; margin-bottom: .35em; font-family: var(--f-jpb); font-size: 1.08em; letter-spacing: .08em; color: #fff; }
.guide-chip { font-family: var(--f-jp) !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: none !important; }
.guide__head b { font-family: var(--f-jp); letter-spacing: .14em; }
.menu__foot { display: grid; gap: 12px; }
.menu__sound { display: inline-flex; align-items: center; gap: 12px; justify-self: start; height: 40px; font-family: var(--f-jp); font-size: 13px; letter-spacing: .14em; color: #fff; }
.menu__sound i { position: relative; width: 26px; height: 12px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.menu__sound i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; background: rgb(255 255 255 / .4);
  transition: transform .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease); }
.menu__sound[aria-pressed="true"] i::after { transform: translateX(14px); background: rgb(var(--room)); box-shadow: 0 0 8px rgb(var(--room)); }
.menu__note { font-family: var(--f-jp); font-size: 11px; line-height: 1.75; letter-spacing: .04em; color: rgb(255 255 255 / .56); }
@media (max-width: 900px) {
  .hdr__mobile { display: inline-grid; justify-items: start; gap: 3px; margin: 0 auto 0 14px; padding: 5px 9px 5px 11px; text-align: left; line-height: 1.1; color: #fff;
    --cut: 7px; clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) * 1.257));
    background: rgb(9 8 8 / .62); box-shadow: inset 0 0 0 1px rgb(var(--room) / .6); }
  .hdr__mobile b { font-family: var(--f-jpb); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
  .hdr__mobile small { font-family: var(--f-jp); font-size: 9px; letter-spacing: .1em; color: rgb(255 255 255 / .68); }
  .guide-chip { top: 27px; right: 72px; bottom: auto; left: auto; transform: none; }
}
/* (the hero's scroll hint on a phone, in Japanese: down the edge, the arrow turned with the line) */
.kv__scroll { font-family: var(--f-jp); letter-spacing: .32em; }

/* ---------- phones: each chapter's copy on a real phone's screen (2026-10-12) ----------
   (a phone's browser keeps its bars: 560–750 px of height, not 844 — gl/app.js fits the windows into what the copy
   leaves them; here the copy itself) the care step starts under the header, never behind it (it stood centred,
   taller than a short screen); the service's own count is not repeated (its badge numbers it); Contact's word stays
   on one line (it broke as "Contac / t" at 360 px) */
@media (max-width: 900px) {
  .cue.is-inside .cue__sign { background: rgb(9 8 8 / .86) !important; }
  .care { top: 92px; bottom: auto; translate: none; }
  .services__count { display: none; }
  .cta__main { left: 24px; right: 24px; }
  .cta__link { font-size: min(62px, 13.4vw); white-space: nowrap; }
}
/* (a short phone screen — the browser's bars shown: the windows come first, they are what the chapters show; the
   copy keeps its name, price, line and button, and the rest waits in the price sheet and the samples themselves) */
@media (max-width: 900px) and (max-height: 720px) {
  .work { bottom: 66px; }
  .works__more { bottom: 22px; }
  .work__imp { display: none; }
  .svc { bottom: 40px; }
  .tier { bottom: 26px; }
  .tier__list { display: none; }
  .tier__what { margin-top: 6px; }
  .tier__open { margin-top: 10px; }
  .plans__labels small { display: none; }
}
@media (max-width: 900px) and (max-height: 600px) {
  .work__ja { display: none; }
  .svc__desc { font-size: 11.5px; line-height: 1.75; }
  .tier__price { font-size: 38px; }
}
/* (the menu on a short screen: all of it in view — the links' size follows the height — and, should it still not fit,
   it scrolls under the finger rather than leaving its last links off the screen) */
@media (max-width: 900px) {
  .menu { padding-top: 96px; overflow-y: auto; overscroll-behavior: contain; }
  .menu__inner a { font-size: clamp(22px, 4.6vh, 40px); padding: 4px 0; }
}
/* (phones: the header's row — the version, the guide's chip, the menu — never crowded; the chip waits while the menu
   is open; the AI panel on a short screen: its lead is said in its foot instead, so the box and its buttons stay in
   view) */
@media (max-width: 900px) {
  .hdr__mobile { margin-left: 10px; }
  .guide-chip { right: 62px; padding: 0 10px; }
  .is-menu .guide-chip { opacity: 0; pointer-events: none; }
  .menu { padding-bottom: 22px; }
}
@media (max-width: 349px) { .guide-chip { display: none !important; } }
@media (max-width: 900px) and (max-height: 700px) {
  .chat__panel { padding-top: 56px; }
  .chat__lead { display: none; }
  .chat__starts button { padding: 12px 0; }
}

/* ---------- the owner's Instagram at the end of every page (2026-10-12) ----------
   (a line glyph like the rest of the footer; the handle beside it, so a second account can stand next to it later) */
.ftr__ig, .pf__ig { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--grey); transition: color .4s var(--ease); }
.ftr__ig svg, .pf__ig svg { width: 18px; height: 18px; flex: none; }
.ftr__ig:hover, .pf__ig:hover, .ftr__ig:focus-visible, .pf__ig:focus-visible { color: rgb(var(--room)); }
.ftr__ig { grid-column: 1 / -1; justify-self: end; }
@media (max-width: 900px) { .ftr__ig { justify-self: start; } }