/* Layouts for the two landing variants: .v-tabs (one doghouse, tabbed) and .v-yard (yard with kennels). */

/* ---------- shared ---------- */
.pop { animation: pop-up .5s cubic-bezier(.2,1.3,.4,1) var(--d, 0ms) backwards; }
@keyframes pop-up { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.dirt.slim { padding: 14px 16px 16px; }
.dirt.slim p { font-size: 14px; }

/* =========================================================
   TABS INSIDE THE DOGHOUSE
   ========================================================= */
.v-tabs .house { margin-top: 14px; min-height: calc(100vh - 14px); display: flex; flex-direction: column; }

/* roof sits right on the walls; the logo lives in the gable */
.v-tabs .roof { padding-top: 22px; }
.v-tabs .roof-row { height: 20px; }
.v-tabs .roof-row.eave { height: 22px; }
.v-tabs .chimney { top: 6px; left: 74%; height: 80px; }
.v-tabs .roof-badge { top: 52px; }
.v-tabs .logo-sign { padding: 10px 14px 6px; animation: none; }
.v-tabs .logo-img { width: clamp(150px, 15vw, 210px); }

/* menu = a wooden beam under the eave */
.tab-signs {
  position: relative; z-index: 3; margin: 0 18px; padding: 10px 12px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  background: var(--post);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.08), inset 0 -6px 0 rgba(0,0,0,.3), -14px 0 0 0 var(--post), 14px 0 0 0 var(--post), -18px 0 0 0 var(--ink), 18px 0 0 0 var(--ink), 0 4px 0 0 var(--ink);
}
.tab-signs .sign { padding-top: 0; animation: none; }
.tab-signs .sign::before, .tab-signs .sign::after { display: none; }
.tab-signs .sign span { padding: 11px 14px; font-size: 10px; box-shadow: inset -4px -4px 0 rgba(0,0,0,.25), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink); transition: background-color .2s, color .2s, transform .25s cubic-bezier(.2,1.6,.4,1); }
.tab-signs .sign:hover span { transform: translateY(-3px); }
.tab-signs .sign.on span { background-color: var(--gold); color: var(--ink); transform: translateY(-3px); box-shadow: inset -4px -4px 0 var(--gold-2), 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 0 22px rgba(255,210,63,.5); }
.tab-signs .sign.ext span { background-color: var(--panel-2); }

.v-tabs .tab-walls { margin-top: 0; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.v-tabs .view { flex: 1; }
.v-tabs .view[hidden] { display: none !important; }
.v-tabs .view:not(.hero) { display: flex; flex-direction: column; justify-content: center; padding-top: 44px; padding-bottom: 44px; }
.v-tabs .section-head { margin-bottom: 28px; }
.v-tabs .big-formula { margin-bottom: 28px; }
.v-tabs .ref-steps { margin-bottom: 26px; }
.v-tabs .ground { margin-top: auto; }

/* CHECK: one screen; copy centered on the left, a big door filling the right */
.v-tabs .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; gap: clamp(20px, 4vw, 56px); padding: 24px clamp(18px, 4vw, 56px) 0; }
.v-tabs .hero-copy { padding: 20px 0 34px; align-self: center; }
.v-tabs .hero h1 { font-size: clamp(22px, 2.9vw, 38px); margin: 14px 0 16px; padding: 14px 18px; }
.v-tabs .hero .lede { font-size: 18px; margin-bottom: 18px; }
.v-tabs .door-wrap { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-self: stretch; }
.v-tabs .door-frame { width: clamp(280px, calc((100vh - 330px) * .82), 470px); max-width: 100%; margin-top: 30px; }
.v-tabs .dog-stage { width: 84%; }
.v-tabs .nameplate { display: none; } /* the logo on the roof already names the house */
.v-tabs .bubble { top: auto; bottom: 62%; right: -2%; }
.v-tabs .floating-bone.b1 { bottom: 40%; }
.v-tabs .floating-bone.b2 { top: auto; bottom: 62%; }

/* plank wipe between views */
.plank-wipe { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: flex; flex-direction: column; }
.plank-wipe i {
  flex: 1; transform: translateX(-101%);
  background: var(--wood-2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.08) 0 4px, transparent 4px calc(100% - 4px), var(--wood-3) calc(100% - 4px));
}
.plank-wipe.run i { animation: plank .8s cubic-bezier(.7,0,.3,1) calc(var(--i) * 35ms) both; }
.plank-wipe.run i:nth-child(even) { animation-direction: reverse; }
@keyframes plank { 0% { transform: translateX(-101%); } 45%, 55% { transform: none; } 100% { transform: translateX(101%); } }
.view.enter { animation: view-in .45s ease both; }
@keyframes view-in { from { opacity: 0; } }

@media (max-width: 960px) {
  .v-tabs .hero { grid-template-columns: minmax(0, 1fr); }
  .v-tabs .hero-copy { padding-bottom: 40px; }
  .v-tabs .door-wrap { order: 0; }
}
@media (max-width: 560px) {
  .v-tabs .roof-row { height: 15px; }
  .v-tabs .roof-badge { top: 40px; }
  .v-tabs .logo-img { width: 150px; }
  .tab-signs { margin: 0 10px; gap: 8px; padding: 8px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.3), -8px 0 0 0 var(--post), 8px 0 0 0 var(--post), -12px 0 0 0 var(--ink), 12px 0 0 0 var(--ink), 0 4px 0 0 var(--ink); }
  .tab-signs .sign span { font-size: 8px; padding: 9px 8px; }
}

/* =========================================================
   FIXED STAGE (≥ 900px wide): the doghouse is drawn at one
   design size (1200×1000) and scaled as a whole to fit the window,
   so it looks identical on every desktop / tablet screen.
   Phones keep the fluid layout above.
   ========================================================= */
html.fixed body.v-tabs { overflow: hidden; height: 100vh; }
html.fixed .v-tabs .house {
  position: absolute; left: 50%; top: 0; margin: 0;
  width: 1200px; height: 1000px; min-height: 0;
  transform: translateX(-50%) scale(var(--s, 1)); transform-origin: top center;
}
html.fixed .v-tabs .tab-walls { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--wood-3) transparent; }
html.fixed .v-tabs .tab-walls::-webkit-scrollbar { width: 8px; }
html.fixed .v-tabs .tab-walls::-webkit-scrollbar-thumb { background: var(--wood-3); }
html.fixed .v-tabs .logo-img { width: 210px; }
html.fixed .v-tabs .section { padding: 40px 52px; }
html.fixed .v-tabs .section-head h2 { font-size: 30px; }
html.fixed .v-tabs .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; padding: 22px 52px 0; }
html.fixed .v-tabs .hero h1 { font-size: 32px; }
html.fixed .v-tabs .hero-copy { padding: 16px 0 30px; }
html.fixed .v-tabs .door-wrap { order: 0; }
html.fixed .v-tabs .door-frame { width: 390px; margin-top: 24px; }
html.fixed .v-tabs .stat b { font-size: 24px; }
html.fixed .v-tabs .tiers { grid-template-columns: repeat(4, 1fr); }
html.fixed .v-tabs .metrics { grid-template-columns: repeat(3, 1fr); }
html.fixed .v-tabs .ref-steps { grid-template-columns: repeat(4, 1fr); }
html.fixed .v-tabs .stats { grid-template-columns: repeat(4, 1fr); }
html.fixed .v-tabs .chimney { left: 74%; }
/* compact spacing so every tab fits inside the fixed walls */
html.fixed .v-tabs .view:not(.hero) { padding-top: 24px; padding-bottom: 24px; justify-content: center; }
html.fixed .v-tabs .hero-copy { padding: 10px 0 22px; }
html.fixed .v-tabs .section-head { margin-bottom: 16px; }
html.fixed .v-tabs .section-head h2 { font-size: 24px; margin: 10px 0 8px; padding: 12px 16px; }
html.fixed .v-tabs .section-head p { font-size: 16px; padding: 8px 14px; }
html.fixed .v-tabs .note { font-size: 15px; padding: 8px 14px; margin-top: 14px; }
html.fixed .v-tabs .big-formula { margin-bottom: 18px; }
html.fixed .v-tabs .bf-cell { padding: 12px 18px; }
html.fixed .v-tabs .bf-cell small { font-size: 14px; margin-bottom: 6px; }
html.fixed .v-tabs .metrics { gap: 12px; }
html.fixed .v-tabs .metric { padding: 14px 16px; }
html.fixed .v-tabs .metric p { margin: 8px 0 0; font-size: 14px; }
html.fixed .v-tabs .ref-steps { gap: 14px; margin-bottom: 18px; }
html.fixed .v-tabs .ref-steps .step { padding: 16px; }
html.fixed .v-tabs .ref-steps .step .n { font-size: 22px; }
html.fixed .v-tabs .ref-steps .step h4 { margin: 10px 0 6px; }
html.fixed .v-tabs .ref-steps .step p { font-size: 14px; }
html.fixed .v-tabs .rung { padding: 8px 4px; }
html.fixed .v-tabs .tiers { gap: 12px; }
html.fixed .v-tabs .tier-card { padding: 14px 14px 12px; }
html.fixed .v-tabs .tier-card h3 { margin: 8px 0 6px; font-size: 11px; }
html.fixed .v-tabs .tier-card .range { font-size: 10px; padding: 5px 7px; }
html.fixed .v-tabs .tier-card .icon { width: 26px; top: 12px; right: 12px; }
html.fixed .v-tabs .perks { margin-top: 10px; gap: 3px; }
html.fixed .v-tabs .perks li { font-size: 13px; padding-bottom: 2px; }
.v-tabs .section-head .tag { display: table; margin: 0 auto; }
html.fixed .v-tabs .hero { padding-top: 14px; }
html.fixed .v-tabs .hero-copy { padding: 6px 0 16px; }
html.fixed .v-tabs .hero { overflow: clip; }