/* Public homepage sections — "Bone & Lime". Owned by the homepage only.
   Tokens, type, buttons, navigation and footer come from public.css. */
.home-wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--gut); }
.home-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.home-line > span { display: block; }
.home-display em, .home-heading em { font-style: normal; color: var(--accent-ink); }
.home-closing-title em { font-style: normal; color: var(--lime); }

/* ---------- hero ---------- */
.home-hero { padding-top: 150px; text-align: center; }
.home-display { font-family: var(--sans); font-size: clamp(40px, 6.6vw, 96px); font-weight: 650; line-height: 0.98; letter-spacing: -0.05em; }
.home-hero-copy { max-width: 44ch; margin: 28px auto 0; font-size: 18.5px; color: var(--ink-2); }
.home-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.home-hero-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }

.home-stage-wrap { margin-top: 72px; padding: 0 var(--gut) 40px; }
.home-stage { position: relative; max-width: 1360px; margin: 0 auto; height: min(86vh, 820px); border-radius: 44px; overflow: hidden; background: var(--bone-2); transform-origin: 50% 0; isolation: isolate; }
.home-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgb(233 229 220 / 0%) 70%, rgb(233 229 220 / 85%) 100%); }
.home-tilt { position: absolute; left: 50%; top: 50%; width: 1900px; display: flex; justify-content: center; gap: 28px; transform: translate(-50%, -50%) perspective(2200px) rotateX(22deg) rotateZ(var(--tilt, -12deg)) scale(1.02); transform-style: preserve-3d; }
.home-lane { display: flex; flex-direction: column; gap: 28px; }
.home-lane:nth-child(odd) { margin-top: -260px; }
.home-stage-tag { position: absolute; left: 24px; bottom: 22px; z-index: 6; padding: 8px 12px; border-radius: 999px; background: rgb(251 250 247 / 92%); color: var(--ink-2); font-size: 13px; }

/* example screens */
.home-phone { flex: none; width: 240px; height: 490px; padding: 12px; border-radius: 38px; background: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / 80%) inset, 0 30px 60px -30px rgb(14 20 36 / 35%), 0 0 0 1px rgb(14 20 36 / 6%); }
.home-scr { position: relative; height: 100%; overflow: hidden; padding: 34px 16px 16px; border-radius: 28px; background: var(--paper); font-size: 11px; line-height: 1.4; }
.home-scr::before { content: ""; position: absolute; top: 9px; left: 50%; width: 70px; height: 18px; border-radius: 12px; background: var(--ink); transform: translateX(-50%); }
.home-win { flex: none; width: 420px; height: 290px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -30px rgb(14 20 36 / 32%), 0 0 0 1px rgb(14 20 36 / 6%); font-size: 11px; line-height: 1.4; }
.home-win-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #f7f6f2; }
.home-win-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d8d5cd; }
.home-win-bar span { flex: 1; max-width: 220px; margin-left: 12px; padding: 0 8px; border-radius: 7px; background: #ecebe6; color: #6f7280; font-size: 9px; line-height: 14px; white-space: nowrap; overflow: hidden; }
.home-win-body { height: calc(100% - 28px); padding: 16px; }
.home-k { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b6f7c; }
.home-h { margin: 4px 0 10px; font-family: var(--sans); font-size: 20px; font-weight: 650; line-height: 1.08; letter-spacing: -0.035em; }
.home-h-lg { font-size: 27px; }
.home-big { font-family: var(--sans); font-size: 32px; font-weight: 650; line-height: 1; letter-spacing: -0.04em; }
.home-row .home-big { font-size: 22px; }
.home-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.home-chip { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--bone-2); font-size: 9.5px; }
.home-chip-g { background: #e3f0c4; }
.home-chip-l { background: var(--lime); }
.home-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.home-slots b { padding: 8px 0; border: 1px solid var(--line); border-radius: 10px; font-weight: 500; text-align: center; }
.home-slots b.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.home-btnx { display: block; margin-top: 10px; padding: 10px; border-radius: 999px; background: var(--ink); color: #fff; text-align: center; }
.home-btnx-lime { background: var(--lime); color: var(--ink); }
.home-btnx-inline { display: inline-block; padding: 8px 14px; }
.home-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-top: 10px; }
.home-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: #cfdcb0; }
.home-bars i.on { background: var(--green); }
.home-member { display: flex; flex-direction: column; justify-content: space-between; height: 150px; padding: 14px; border-radius: 16px; background: var(--lime); }
.home-member b { font-family: var(--sans); font-size: 22px; font-weight: 650; letter-spacing: -0.03em; }
.home-grid2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
.home-ph { display: block; height: 100%; border-radius: 10px; background: linear-gradient(135deg, #e7dcc6, #c9b994); }
.home-scr .home-ph { height: 120px; margin: 4px 0 6px; }
.home-ph-g { background: linear-gradient(135deg, #cfe0b5, #7fa35d); }
.home-ph-b { background: linear-gradient(135deg, #d7dde8, #9aa8c2); }
.home-lines i { display: block; height: 7px; margin: 7px 0; border-radius: 4px; background: #ebe9e3; }

/* business pairs over the wall */
.home-pairs { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.home-pairs::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 62% at 50% 54%, rgb(233 229 220 / 92%) 30%, rgb(233 229 220 / 0%) 78%); }
.home-pair { position: absolute; left: 50%; top: 52%; display: flex; align-items: flex-end; transform: translate(-50%, -50%) scale(var(--pair-scale, 1)); }
.home-pair[hidden] { display: none; }
.home-pair-win { width: 520px; height: 360px; font-size: 12.5px; box-shadow: 0 50px 90px -40px rgb(14 20 36 / 45%), 0 0 0 1px rgb(14 20 36 / 7%); }
.home-pair-win .home-h { font-size: 26px; }
.home-pair-win .home-h-lg { font-size: 32px; }
.home-pair-phone { width: 236px; height: 470px; margin: 0 0 -46px 18px; box-shadow: 0 50px 90px -40px rgb(14 20 36 / 50%), 0 0 0 1px rgb(14 20 36 / 7%); }
.home-member-soft { height: auto; gap: 6px; background: #e3f0c4; }
.home-stamps { display: flex; gap: 6px; margin: 8px 0; }
.home-stamps i { width: 22px; height: 22px; border-radius: 50%; border: 1px dashed rgb(14 20 36 / 30%); }
.home-stamps i.on { border: 0; background: var(--lime); }
.home-picker { position: absolute; top: 22px; left: 50%; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: rgb(251 250 247 / 94%); box-shadow: 0 14px 34px -18px rgb(14 20 36 / 35%), 0 0 0 1px var(--line); transform: translateX(-50%); white-space: nowrap; }
.home-picker[hidden] { display: none; }
.home-picker-label { padding: 0 10px 0 12px; font-size: 14px; color: var(--ink-3); }
.home-picker-track { display: contents; }
.home-picker button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 500 15px/1 var(--sans); cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease); }
.home-picker button:hover { background: var(--bone-2); }
.home-picker button[aria-pressed="true"] { background: var(--ink); color: var(--bone); }

/* ---------- sections ---------- */
.home-section { padding: 140px 0; scroll-margin-top: 80px; }
.home-heading { font-family: var(--sans); font-size: clamp(40px, 4.8vw, 70px); font-weight: 650; line-height: 1; letter-spacing: -0.045em; }
.home-lead { max-width: 44ch; font-size: 18.5px; color: var(--ink-2); }
.home-section-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.home-section-aside { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* clay object */
.home-clay { position: relative; flex: none; width: 118px; height: 220px; }
.home-clay-body {
  position: absolute; inset: 0 0 30px; border-radius: 40px; transform: rotate(-10deg);
  background: radial-gradient(120% 90% at 30% 18%, #f6ffcf 0%, #dff57f 30%, #bfdf47 70%, #9ec22d 100%);
  box-shadow: inset -10px -14px 22px rgb(80 110 10 / 35%), inset 8px 10px 18px rgb(255 255 255 / 65%), 0 26px 30px -18px rgb(60 80 10 / 45%), 0 6px 10px -6px rgb(60 80 10 / 30%);
  animation: home-float 5.6s ease-in-out infinite;
}
.home-clay-body::before { content: ""; position: absolute; left: 14px; right: 14px; top: 18px; bottom: 40px; border-radius: 24px; background: radial-gradient(120% 100% at 30% 20%, #fffef8, #efeee6 60%, #e2e0d6); box-shadow: inset 3px 4px 8px rgb(80 90 40 / 25%), inset -2px -2px 6px rgb(255 255 255 / 80%); }
.home-clay-body::after { content: ""; position: absolute; left: 50%; bottom: 13px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2ffc0, #b6d93b 70%); box-shadow: inset -2px -3px 4px rgb(80 110 10 / 40%), inset 2px 2px 3px rgb(255 255 255 / 70%), 0 2px 3px rgb(60 80 10 / 30%); }
.home-clay-shadow { position: absolute; left: 50%; bottom: 0; width: 90px; height: 14px; margin-left: -45px; border-radius: 50%; background: radial-gradient(closest-side, rgb(14 20 36 / 22%), transparent); filter: blur(2px); animation: home-float-shadow 5.6s ease-in-out infinite; }
@keyframes home-float { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-14px) rotate(-6deg); } }
@keyframes home-float-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.8); opacity: .6; } }

/* service panels */
.home-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home-panel { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 40px; overflow: hidden; border-radius: 36px; scroll-margin-top: 96px; }
.home-panel-web { background: var(--paper); box-shadow: 0 0 0 1px var(--line) inset; }
.home-panel-mobile { background: var(--sage); }
.home-panel h3 { font-family: var(--sans); font-size: clamp(40px, 4vw, 60px); font-weight: 650; line-height: 1; letter-spacing: -0.045em; }
.home-panel-intro { max-width: 36ch; margin-top: 14px !important; font-size: 17px; color: var(--ink-2); }
.home-panel-preview { position: relative; display: grid; place-items: center; height: 280px; margin: 32px 0 28px; border-radius: 24px; background: rgb(14 20 36 / 3.5%); overflow: hidden; }
.home-panel-mobile .home-panel-preview { background: rgb(255 255 255 / 38%); }
.home-panel ul { list-style: none; font-size: 15.5px; }
.home-panel li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.home-panel li:last-child { border-bottom: 1px solid var(--line); }
.home-check { flex: none; }
.home-panel-note { margin-top: 18px !important; font-size: 14.5px; color: var(--ink-2); }
.home-panel-note strong { font-weight: 600; color: var(--ink); }
.home-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: auto; padding-top: 22px; }
.home-pv-win { width: min(380px, 86%); height: 220px; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -28px rgb(14 20 36 / 38%), 0 0 0 1px var(--line); transition: transform 1s var(--ease); }
.home-pv-bar { display: flex; gap: 5px; align-items: center; height: 24px; padding: 0 10px; background: #f3f2ee; border-bottom: 1px solid var(--line); }
.home-pv-bar b { width: 7px; height: 7px; border-radius: 50%; background: #d8d5cd; }
.home-pv-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; height: calc(100% - 24px); padding: 16px; }
.home-pv-body > div { display: flex; flex-direction: column; gap: 8px; }
.home-pv-kicker { width: 40%; height: 6px; border-radius: 3px; background: #dcdad3; }
.home-pv-title { width: 90%; height: 13px; border-radius: 4px; background: var(--ink); opacity: .85; }
.home-pv-title-short { width: 60%; }
.home-pv-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; }
.home-pv-slots i { height: 18px; border-radius: 6px; border: 1px solid var(--line); }
.home-pv-slots i.on { background: var(--ink); border-color: var(--ink); }
.home-pv-cta { width: 70%; height: 20px; margin-top: auto; border-radius: 999px; background: var(--lime); }
.home-pv-photo { display: block; border-radius: 10px; background: linear-gradient(135deg, #e7dcc6, #c9b994); }
.home-pv-phone { position: relative; z-index: 2; width: 138px; height: 262px; padding: 7px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px -28px rgb(14 20 36 / 38%), 0 0 0 1px var(--line); transition: transform 1s var(--ease); }
.home-pv-phone > div { display: flex; flex-direction: column; gap: 9px; height: 100%; padding: 26px 12px 12px; border-radius: 22px; background: var(--paper); }
.home-pv-phone b { display: block; height: 58px; border-radius: 14px; background: var(--lime); }
.home-pv-row { height: 8px; border-radius: 4px; background: #e4e2db; }
.home-pv-row-short { width: 60%; }
.home-pv-phone .home-pv-cta { width: 100%; height: 22px; background: var(--ink); }
.home-pv-phone-back { position: absolute; z-index: 1; transform: translate(70px, 18px) rotate(8deg) scale(.92); opacity: .9; }
.home-pv-phone-back b { background: #cfe0b5; }
.home-pv-phone:not(.home-pv-phone-back) { transform: translateX(-34px) rotate(-4deg); }
.home-unsure { margin-top: 28px !important; font-size: 15.5px; color: var(--ink-2); }
.home-unsure a { font-weight: 500; text-underline-offset: 4px; }
@media (hover: hover) {
  .home-panel-web:hover .home-pv-win { transform: translateY(-6px) rotate(-1deg); }
  .home-panel-mobile:hover .home-pv-phone:not(.home-pv-phone-back) { transform: translate(-40px, -8px) rotate(-6deg); }
  .home-panel-mobile:hover .home-pv-phone-back { transform: translate(78px, 10px) rotate(11deg) scale(.92); }
}
/* the same spread on touch screens, set by home.js as each preview scrolls into view */
.home-panel-web.is-spread .home-pv-win { transform: translateY(-6px) rotate(-1deg); }
.home-panel-mobile.is-spread .home-pv-phone:not(.home-pv-phone-back) { transform: translate(-40px, -8px) rotate(-6deg); }
.home-panel-mobile.is-spread .home-pv-phone-back { transform: translate(78px, 10px) rotate(11deg) scale(.92); }

/* process */
.home-process { margin: 0 var(--gut); padding: 110px 0; border-radius: 44px; background: var(--sage); scroll-margin-top: 80px; }
.home-process-pin { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.home-process-copy .home-lead { margin-top: 24px; }
.home-progress { display: none; gap: 6px; margin-top: 32px; }
.home-progress i { position: relative; flex: 1; max-width: 44px; height: 3px; overflow: hidden; border-radius: 2px; background: var(--line); }
.home-progress i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: left; }
.home-plates { display: none; }
.home-steps { list-style: none; border-top: 1px solid var(--ink); }
.home-step { padding: 28px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 40px; }
.home-step h3 { font-family: var(--sans); font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; line-height: 1.05; letter-spacing: -0.035em; display: flex; align-items: baseline; gap: 14px; }
.home-step-num { font-family: var(--sans); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.home-step > p { grid-column: 1; color: var(--ink-2); font-size: 16.5px; max-width: 40ch; }
.home-step dl { grid-column: 2; grid-row: 1 / span 2; }
.home-step dl div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.home-step dl div:first-child { border-top: 1px solid var(--line); }
.home-step dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.home-step:last-child h3::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px var(--ink); align-self: center; }

/* layered mode: enabled by home.js on wide screens with motion allowed */
.home-process.is-layered { height: 260vh; padding: 0; }
.home-process.is-layered .home-process-pin { position: sticky; top: 0; height: 100vh; min-height: 640px; align-items: center; }
.home-process.is-layered .home-progress { display: flex; }
.home-process.is-layered .home-layers { position: relative; height: 640px; }
.home-process.is-layered .home-plates { display: block; position: absolute; inset: 0; }
.home-plate { position: absolute; left: 0; top: 0; width: 380px; height: 220px; z-index: calc(10 - var(--i)); will-change: transform; }
.home-plate svg { width: 100%; height: 100%; overflow: visible; }
.home-plate-face { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.home-plate-last .home-plate-face { fill: var(--lime); }
.home-plate-side { fill: var(--bone-3); stroke: var(--ink); stroke-width: 1; }
.home-plate-side2 { fill: #cfc9bb; stroke: var(--ink); stroke-width: 1; }
.home-plate-hatch { fill: url(#home-hatch); pointer-events: none; }
.home-plate text { font: 650 28px var(--sans); letter-spacing: -0.04em; fill: var(--ink); }
.home-process.is-layered .home-steps { position: absolute; inset: 0 0 0 400px; border: 0; }
.home-process.is-layered .home-step { position: absolute; left: 0; right: 0; top: calc(var(--i) * 104px + 52px); display: block; padding: 0; border: 0; }
.home-process.is-layered .home-step h3 { font-size: 22px; }
.home-process.is-layered .home-step > p { margin-top: 4px; font-size: 15px; }
.home-process.is-layered .home-step dl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.home-step-detail { display: none; }
.home-process.is-layered .home-step-detail { display: block; min-height: 190px; margin-top: 30px; padding: 22px 24px; border-radius: 22px; background: rgb(255 255 255 / 55%); box-shadow: 0 0 0 1px var(--line) inset; }
.home-step-detail h3 { font-family: var(--sans); font-size: 24px; font-weight: 650; letter-spacing: -0.02em; }
.home-step-detail dl { margin-top: 10px !important; }
.home-step-detail dl div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.home-step-detail dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.home-step-detail-swap { animation: home-detail-in .6s var(--ease); }
@keyframes home-detail-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* care */
.home-care { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.home-care .home-lead { margin-top: 28px; }
.home-price { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 36px; margin-top: 40px; padding: 30px 32px; border-radius: 28px; background: var(--paper); box-shadow: 0 0 0 1px var(--line) inset; }
.home-price-figure { font-family: var(--sans); font-size: 52px; font-weight: 650; line-height: 1; letter-spacing: -0.045em; }
.home-price-figure small { margin-left: 8px; font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; white-space: nowrap; color: var(--ink-3); }
.home-price-tax { font-size: 14px; color: var(--ink-3); }
.home-price-note { flex-basis: 100%; font-size: 14.5px; color: var(--ink-2); }
.home-spec h3 { padding: 24px 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.home-spec h3:first-child { padding-top: 8px; }
.home-spec ul { list-style: none; }
.home-spec li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16.5px; }
.home-spec li span { flex: none; font-size: 14px; color: var(--ink-3); }

/* founder */
.home-founder-section { padding-top: 40px; }
.home-founder { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; max-width: 1000px; }
.home-founder-photo { width: 220px; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 24px; background: var(--bone-2); box-shadow: 0 24px 50px -30px rgb(14 20 36 / 40%); }
.home-founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.home-founder-copy blockquote { font-family: var(--sans); font-size: clamp(26px, 2.6vw, 38px); font-weight: 550; line-height: 1.15; letter-spacing: -0.035em; }
.home-founder-copy > p { margin-top: 24px; max-width: 46ch; font-size: 18px; color: var(--ink-2); }
.home-founder-copy > .home-founder-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 28px; font-size: 15px; }
.home-founder-sign strong { color: var(--ink); font-weight: 600; }
.home-founder-sign span { color: var(--ink-3); }
.home-founder-copy .public-pill { margin-top: 28px; }

/* faq */
.home-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
.home-faq-list { border-top: 1px solid var(--ink); }
.home-q { border-bottom: 1px solid var(--line); }
.home-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 44px; padding: 26px 0; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; }
.home-q summary::-webkit-details-marker { display: none; }
.home-q-icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); transition: background-color .4s var(--ease), border-color .4s var(--ease); }
.home-q-icon::before, .home-q-icon::after { content: ""; position: absolute; left: 10px; right: 10px; top: 16px; height: 1.5px; background: var(--ink); transition: transform .5s var(--ease); }
.home-q-icon::after { transform: rotate(90deg); }
.home-q[open] .home-q-icon { background: var(--lime); border-color: var(--lime); }
.home-q[open] .home-q-icon::after { transform: rotate(0deg); }
.home-q::details-content { block-size: 0; overflow: hidden; transition: block-size .6s var(--ease), content-visibility .6s var(--ease) allow-discrete; }
.home-q[open]::details-content { block-size: auto; }
.home-a p { max-width: 66ch; padding: 0 60px 26px 0; color: var(--ink-2); }
.home-a a { text-underline-offset: 3px; }

/* closing */
.home-closing { padding: 0 var(--gut) 24px; }
.home-closing-in { position: relative; overflow: hidden; max-width: 1360px; margin: 0 auto; padding: clamp(48px, 7vw, 110px) clamp(28px, 6vw, 96px); border-radius: 44px; background: var(--green); color: var(--green-ink); transform-origin: 50% 100%; }
.home-closing-title { position: relative; color: var(--green-ink); max-width: 12ch; font-family: var(--sans); font-size: clamp(46px, 6.4vw, 96px); font-weight: 650; line-height: 0.98; letter-spacing: -0.05em; }
.home-closing-row { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; margin-top: 48px; }
.home-closing-row p { max-width: 40ch; font-size: 18.5px; color: #e4ecd9; }
.home-closing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-closing-glow { position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgb(214 242 106 / 32%), rgb(214 242 106 / 0%) 65%); pointer-events: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  body.home-studio { --pair-scale: 0.8; }
  .home-panels { grid-template-columns: 1fr; }
  .home-section-head { grid-template-columns: 1fr; }
  .home-process-pin { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 820px) {
  .home-care, .home-founder, .home-faq { grid-template-columns: 1fr; gap: 40px; }
  .home-section { padding: 96px 0; }
  .home-process { padding-bottom: 96px; }
  .home-step { grid-template-columns: 1fr; }
  .home-step dl { grid-column: 1; grid-row: auto; margin-top: 12px; }
}
@media (max-width: 600px) {
  .home-hero { padding-top: 118px; }
  .home-display { font-size: 10.6vw; }
  .home-hero-copy { font-size: 17px; }
  .home-stage-wrap { margin-top: 48px; }
  .home-section-head { grid-template-columns: minmax(0, 1fr) auto; gap: 20px 12px; margin-bottom: 36px; }
  /* the clay phone moves beside the heading: the aside's lead takes the full row
     below, and the phone is drawn at --clay-s of its desktop size. The negative
     margins shrink its layout box to the drawn size; margin-top lets it rise into
     the section's top padding instead of pushing the heading down. */
  .home-section-head > .home-heading { grid-column: 1; grid-row: 1; }
  .home-section-aside { display: contents; }
  .home-section-aside .home-lead { grid-column: 1 / -1; grid-row: 2; }
  .home-clay { --clay-s: 0.6; grid-column: 2; grid-row: 1; align-self: end; margin: -40px 0 calc(220px * (var(--clay-s) - 1)) calc(118px * (var(--clay-s) - 1)); transform: scale(var(--clay-s)); transform-origin: right top; }
  .home-panel { padding: 28px 24px; border-radius: 28px; }
  .home-panel h3 { white-space: normal; }
  .home-panel-preview { height: 250px; }
  /* the sample phones keep desktop's share of the preview, so neither is cut off */
  .home-pv-phone { width: 122px; height: 232px; padding: 6px; border-radius: 25px; }
  .home-pv-phone > div { gap: 8px; padding: 24px 11px 11px; border-radius: 20px; }
  .home-pv-phone b { height: 50px; }
  .home-q summary { padding: 22px 0; font-size: 18px; }
  .home-a p { padding-right: 0; }
  .home-closing-in { border-radius: 32px; }
  .home-step dl div { grid-template-columns: 84px 1fr; }
  /* the green box sits in from its edges like the closing box: 48px, not a section's */
  .home-process { padding: 48px 0; }
  /* one spacing unit between phone sections: two units between plain sections,
     one unit beside a card (the layer stack, the closing box) */
  body.home-studio { --home-space: 64px; }
  .home-section, .home-founder-section { padding: var(--home-space) 0; }
  .home-stage-wrap { padding-bottom: 0; }
}

/* ---------- founder, single column ----------
   Laid out as one block for the narrow screen: the photo and the name and role
   sit side by side like a byline, then the quote, the intro and the button run
   the full width beneath them. */
@media (max-width: 820px) {
  .home-founder { grid-template-columns: 136px minmax(0, 1fr); gap: 0 22px; align-items: end; }
  .home-founder-copy { display: contents; }
  .home-founder-photo { grid-column: 1; grid-row: 1; width: 100%; border-radius: 22px; }
  .home-founder-copy > .home-founder-sign { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding-bottom: 4px; font-size: 15px; line-height: 1.35; }
  .home-founder-sign strong { font-size: 21px; letter-spacing: -0.02em; line-height: 1.15; }
  .home-founder-dot { display: none; }
  .home-founder-place { display: block; }
  .home-founder-copy blockquote { grid-column: 1 / -1; grid-row: 2; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); font-size: clamp(25px, 7vw, 34px); }
  .home-founder-copy > p { grid-column: 1 / -1; grid-row: 3; max-width: 40ch; margin-top: 20px; font-size: 17px; }
  .home-founder-copy .public-pill { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
}
@media (max-width: 400px) {
  .home-founder { grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; }
  .home-founder-photo { border-radius: 20px; }
}
@media (max-width: 359px) {
  .home-founder { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
  .home-founder-sign strong { font-size: 19px; }
}

/* ---------- phone stage ----------
   Redrawn for the phone screen rather than shrunk: the chosen business's web
   screen leads at full size, its phone screen overlaps the lower corner, and the
   tilted wall of other screens stays behind them. Nothing here moves layout:
   swaps and the load-in rise only animate transform and opacity. */
@media (max-width: 600px) {
  .home-stage { height: 738px; border-radius: 28px; }
  .home-tilt { transform: translate(-50%, -50%) perspective(1600px) rotateX(20deg) rotateZ(var(--tilt, -12deg)) scale(0.62); }
  .home-pairs::before { background: radial-gradient(90% 46% at 50% 34%, rgb(233 229 220 / 94%) 50%, rgb(233 229 220 / 0%) 100%); }
  .home-pair { left: 14px; right: 14px; top: 78px; display: block; transform: none; }
  .home-pair .home-k { font-size: 10px; }
  .home-pair .home-chip { padding: 3px 9px; font-size: 10.5px; }
  .home-pair .home-row { padding: 6px 0; }
  .home-pair .home-btnx { margin-top: 10px; padding: 9px 10px; }
  .home-pair-win { width: 100%; height: 304px; border-radius: 14px; font-size: 12px; }
  .home-pair-win .home-win-bar span { font-size: 10px; }
  .home-pair-win .home-win-body { padding: 14px; }
  .home-pair-win .home-h { font-size: 23px; }
  .home-pair-win .home-h-lg { font-size: 26px; }
  .home-pair-win .home-grid2 { grid-template-columns: minmax(0, 1fr) 28%; gap: 12px; }
  .home-pair-win .home-slots { gap: 5px; }
  .home-pair-win .home-slots b { padding: 7px 0; }
  .home-pair-phone { width: 188px; height: 330px; margin: -36px 0 0 auto; padding: 9px; border-radius: 32px; }
  .home-pair-phone .home-scr { padding: 30px 12px 12px; border-radius: 24px; font-size: 11.5px; }
  .home-pair-phone .home-scr::before { top: 8px; width: 54px; height: 15px; }
  .home-pair-phone .home-k { font-size: 9.5px; letter-spacing: 0.05em; }
  .home-pair-phone .home-h { margin-bottom: 8px; font-size: 19px; }
  .home-pair-phone .home-ph { height: 64px; }
  .home-pair-phone .home-member { height: 104px; padding: 12px; }
  .home-pair-phone .home-member b { font-size: 20px; }
  .home-pair-phone .home-member-soft { height: auto; }
  .home-pair-phone .home-stamps { gap: 5px; }
  .home-pair-phone .home-stamps i { flex: none; width: 19px; height: 19px; }
  .home-picker { top: 12px; left: 12px; right: 12px; max-width: none; padding: 4px; transform: none; }
  .home-picker-label { flex: none; padding: 0 6px 0 12px; font-size: 13.5px; }
  .home-picker-track { display: flex; flex: 1; min-width: 0; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 999px; }
  .home-picker-track::-webkit-scrollbar { display: none; }
  .home-picker-track.is-more-after { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .home-picker-track.is-more-before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
  .home-picker-track.is-more-before.is-more-after { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 44px), transparent); }
  .home-picker button { flex: none; min-height: 44px; padding: 0 14px; font-size: 14.5px; }
  .home-stage-tag { left: 14px; bottom: 16px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-pv-win, .home-pv-phone, .home-q::details-content { transition: none; }
  .home-clay-body, .home-clay-shadow { animation: none; }
}
@media (max-width: 400px) {
  .home-panel { padding: 24px 18px; }
  .home-panel-actions .public-pill { max-width: 100%; white-space: normal; text-align: center; }
  .home-process { margin: 0 8px; border-radius: 28px; }
}
@media (max-width: 359px) {
  /* "built properly." needs about 225px; keep the phone in the room beside it */
  .home-section-head { column-gap: 8px; }
  .home-clay { --clay-s: 0.42; margin-top: -8px; }
}

/* ---------- phone and tablet layer stack ----------
   Layered mode below 1081px, laid out for a narrow, tall screen. The heading and
   lead scroll in normally; then a stage exactly one screen tall pins: progress bar,
   plates, the current step and its detail card. home.js measures the heading's
   height into --head so the pin can stick with the heading scrolled away. svh keeps
   the stage from jumping when the browser bars show and hide. The plate size comes
   from the space left on the stage, so everything fits from 320x568 up. */
@media (max-width: 1080px) {
  .home-process.is-layered { --stage-top: 92px; height: calc(var(--head, 0px) + 280vh); height: calc(var(--head, 0px) + 280svh); padding: 0; }
  .home-process.is-layered .home-process-pin { position: sticky; top: calc(-1 * var(--head, 0px)); display: flex; flex-direction: column; align-items: stretch; gap: 0; height: calc(var(--head, 0px) + 100vh); height: calc(var(--head, 0px) + 100svh); min-height: 0; padding-top: 96px; padding-bottom: 16px; }
  .home-process.is-layered .home-process-copy, .home-process.is-layered .home-layers { display: contents; }
  .home-process.is-layered .home-progress { flex: none; margin-top: var(--stage-top); }
  .home-process.is-layered .home-progress i { max-width: none; }
  .home-process.is-layered .home-plates { order: 1; position: relative; inset: auto; flex: 1 1 0; min-height: 0; margin-top: 12px; container-type: size; }
  .home-process.is-layered .home-plate { --pw: min(420px, 80cqw, 60cqh); left: calc(50% - var(--pw) / 2); top: calc(50% - var(--pw) * 0.776); width: var(--pw); height: auto; aspect-ratio: 380 / 220; }
  .home-process.is-layered .home-steps { order: 2; position: relative; inset: auto; display: grid; flex: none; margin-top: 12px; }
  .home-process.is-layered .home-step { grid-area: 1 / 1; position: relative; top: auto; will-change: transform, opacity; }
  .home-process.is-layered .home-step h3 { font-size: 22px; }
  .home-process.is-layered .home-step > p { max-width: 46ch; font-size: 14.5px; line-height: 1.45; }
  .home-process.is-layered .home-step-detail { order: 3; display: grid; flex: none; min-height: 0; margin-top: 14px; padding: 6px 16px; border-radius: 20px; }
  .home-process.is-layered .home-step-detail-swap { grid-area: 1 / 1; opacity: 0; animation: none; }
  .home-process.is-layered .home-step-detail-swap.is-current { opacity: 1; animation: home-detail-in .6s var(--ease); }
  .home-process.is-layered .home-step-detail h3 { display: none; }
  .home-process.is-layered .home-step-detail dl { margin-top: 0 !important; }
  .home-process.is-layered .home-step-detail dl div { grid-template-columns: 78px 1fr; gap: 10px; padding: 8px 0; font-size: 14px; line-height: 1.4; }
  .home-process.is-layered .home-step-detail dl div:first-child { border-top: 0; }
}
@media (max-width: 600px) {
  .home-process.is-layered { --stage-top: 80px; }
  .home-process.is-layered .home-process-pin { padding-top: 48px; padding-bottom: 12px; }
  .home-process.is-layered .home-step h3 { font-size: 20px; gap: 10px; }
  .home-process.is-layered .home-step > p { font-size: 14px; }
  .home-process.is-layered .home-step-detail { padding: 4px 14px; border-radius: 18px; }
  .home-process.is-layered .home-step-detail dl div { grid-template-columns: 70px 1fr; padding: 7px 0; font-size: 13.5px; }
  .home-process.is-layered .home-step-detail dt { font-size: 12.5px; }
}
/* Short phones (320x568 and similar): tighten the step text and detail card so the
   plate stack keeps a readable size above them. */
@media (max-width: 600px) and (max-height: 700px) {
  .home-process.is-layered .home-step h3 { font-size: 18px; }
  .home-process.is-layered .home-step > p { margin-top: 2px; font-size: 13px; line-height: 1.4; }
  .home-process.is-layered .home-step-detail { margin-top: 10px; padding: 2px 12px; border-radius: 16px; }
  .home-process.is-layered .home-step-detail dl div { grid-template-columns: 58px 1fr; gap: 8px; padding: 5px 0; font-size: 12.5px; line-height: 1.35; }
  .home-process.is-layered .home-step-detail dt { font-size: 11.5px; }
}