/* Issue 02: a magazine-like Catpad shell and a carefully aligned launch desk. */
:root, [data-theme="light"], [data-theme="dark"] {
  --page-max: 1600px;
  --gutter: clamp(20px, 3.2vw, 64px);
  --topbar-h: 76px;
}

@media (min-width: 1025px) {
  .app { display: block; }
  .sidebar, .nav-scrim { display: none; }
  .topbar .brand-top { display: inline-flex; flex: none; }
  .topbar .brand-top .brand-name { display: inline; }
  .topbar .burger { display: none; }
}
.topbar { border-bottom: 2px solid #171a14; background: #faf8ef; gap: clamp(18px,2.2vw,38px); }
.catpad-topnav { display: flex; align-items: stretch; align-self: stretch; gap: clamp(16px,2vw,34px); }
.catpad-topnav a { display: grid; align-items: center; position: relative; white-space: nowrap; font-weight: 800; font-size: 14px; }
.catpad-topnav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 17px; height: 3px; background: #171a14; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.catpad-topnav a:hover::after, .catpad-topnav a[aria-current="page"]::after { transform: scaleX(1); }
.topbar .search { width: min(310px, 23vw); margin-left: auto; }
.topbar-actions { margin-left: 0; }
.topbar .btn-create { border-radius: 4px; }
.topbar .search-field { border-radius: 4px; }
.site-footer { margin-top: 0; }
.site-footer .ft-in { max-width: none; }

/* A full-width cover instead of a dashboard hero. */
.catpad-home { max-width: none; }
.catpad-ticker { height: 34px; }
.catpad-hero {
  display: block; position: relative; min-height: clamp(660px, calc(100vh - 110px), 820px);
  background: #f4f1e7; border-bottom: 3px solid #171a14;
}
.catpad-hero::before { content: 'CATPAD'; position: absolute; z-index: 0; right: 7%; bottom: -4%; font: 800 clamp(180px,23vw,440px)/.8 var(--font); letter-spacing: -.1em; color: rgba(23,26,20,.055); pointer-events: none; }
.catpad-hero-meta { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(23,26,20,.35); padding: 13px var(--gutter); font: 500 11px/1.2 var(--mono); letter-spacing: .06em; }
.catpad-hero-copy { position: relative; z-index: 5; width: min(67%, 920px); min-height: inherit; padding: clamp(90px,9vw,145px) 0 37px var(--gutter); }
.catpad-kicker { background: #dcffb0; border-radius: 4px; font-size: 12px; }
.catpad-hero h1 { font-size: clamp(80px,10vw,166px); line-height: .94; letter-spacing: -.055em; max-width: none; margin: 35px 0 28px; position: relative; z-index: 4; }
.catpad-hero h1 em { color: #b8f46a; letter-spacing: -.025em; -webkit-text-stroke: 2px #171a14; text-shadow: 4px 5px 0 #171a14; }
.catpad-hero-copy > p { max-width: 500px; font-size: clamp(18px,1.35vw,22px); line-height: 1.5; }
.catpad-actions { margin-top: 32px; }
.catpad-hero-foot { border-top: 1px solid #171a14; max-width: 570px; padding-top: 18px; gap: 20px; justify-content: space-between; }
.catpad-hero-art { position: absolute; z-index: 2; right: 0; top: 0; width: 55%; height: 100%; min-height: 0; overflow: hidden; }
.catpad-hero-halo { inset: auto -12% -25% auto; width: 98%; height: 112%; border-radius: 50%; border-width: 3px; background: #b8f46a; transform: rotate(18deg); }
.catpad-hero-art > img { left: auto; right: 4%; bottom: -6%; width: auto; height: 112%; max-height: none; max-width: 100%; object-position: bottom; filter: drop-shadow(10px 15px 0 rgba(23,26,20,.18)); }
.catpad-orbit { top: 30%; left: 5%; }
.orbit-two { top: 53%; left: -12%; }
.catpad-sticker { bottom: 9%; right: 6%; transform: rotate(14deg); }
.catpad-hero-side { position: absolute; z-index: 5; right: 0; top: 9%; writing-mode: vertical-rl; font: 500 11px var(--mono); letter-spacing: .08em; border-left: 1px solid #171a14; padding: 20px 10px; }
.catpad-status { position: relative; z-index: 8; margin: -27px 16px 0; min-height: 60px; padding: 12px 20px; background: #fffdf4; border: 2px solid #171a14; box-shadow: 5px 5px 0 #171a14; }

/* The story reads like a clipped page from a notebook. */
.catpad-story { padding: clamp(75px,7vw,112px) 0; grid-template-columns: 1fr 1fr; gap: clamp(44px,7vw,120px); }
.catpad-story-art { max-width: 690px; transform: rotate(-3deg); box-shadow: 16px 18px 0 #b8f46a, 18px 20px 0 2px #171a14; }
.catpad-story-copy { padding: 20px 0; }
.catpad-story h2 { max-width: 670px; }
.catpad-story p { max-width: 48ch; }
.catpad-steps { background: #e4e7d6; padding-top: clamp(70px,7vw,110px); padding-bottom: clamp(74px,7vw,115px); }
.catpad-section-heading { align-items: start; }
.catpad-section-heading h2 { margin: -12px 4% 0 0; }
.catpad-step-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 12px; align-items: start; margin-top: 24px; }
.catpad-step-grid article { grid-row: 1; min-height: 300px; padding: 25px 29px; border-radius: 3px; }
.catpad-step-grid article:nth-child(1) { grid-column: 1 / 6; z-index: 1; }
.catpad-step-grid article:nth-child(2) { grid-column: 5 / 10; z-index: 2; margin-top: 92px; transform: rotate(3deg); }
.catpad-step-grid article:nth-child(2):hover { transform: rotate(1deg) translateY(83px); }
.catpad-step-grid article:nth-child(3) { grid-column: 9 / 13; z-index: 3; margin-top: 184px; transform: rotate(-3deg); }
.catpad-step-grid article:nth-child(3):hover { transform: rotate(-1deg) translateY(176px); }
.catpad-step-grid p { max-width: 34ch; }
.catpad-den { padding: 82px 0 100px; }
.catpad-den-head { align-items: end; }
.catpad-den h2 { font-size: clamp(54px,6vw,106px); }
.catpad-outro { min-height: 345px; padding-top: 55px; padding-bottom: 50px; background: #ffc58c; color: #171a14; border-top: 3px solid #171a14; }
.catpad-outro > div { max-width: 720px; }
.catpad-outro h2 { font-size: clamp(58px,6vw,96px); }
.catpad-outro h2 i { color: #4d822e; }
.catpad-outro p { line-height: 1.5; }
.catpad-outro > img { height: 162%; max-width: 43%; bottom: -80%; right: 3%; opacity: .92; transform: rotate(-8deg); }
.catpad-action-lime { background: #171a14; border-color: #171a14; color: #fffdf4; margin-top: 18px; }
.catpad-action-lime:hover { background: #39442f; box-shadow: 4px 5px 0 #fffdf4; }

/* Launch desk: section labels form a stable left rail; inputs share one baseline. */
body[data-page="launch"] .page { max-width: 1460px; padding-top: clamp(32px,4vw,64px); padding-bottom: 90px; }
body[data-page="launch"] .page-head { margin-bottom: 28px; }
body[data-page="launch"] .page-head h1 { font-size: clamp(54px,6vw,92px); line-height: .95; letter-spacing: -.075em; margin-top: 12px; }
body[data-page="launch"] .page-head p { max-width: 67ch; font-size: 17px; line-height: 1.5; margin-top: 16px; }
.catpad-pair-warning { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 22px; align-items: start; padding: 17px 21px; margin-bottom: 28px; border-radius: 3px; border-width: 1px 1px 1px 7px; line-height: 1.5; font-weight: 500; }
.catpad-pair-warning strong { font: 500 11px/1.5 var(--mono); letter-spacing: .06em; padding-top: 2px; }
.catpad-pair-warning p { margin: 0; max-width: 92ch; }
.launch-layout { grid-template-columns: minmax(0,1fr) minmax(305px,350px); gap: 26px; }
.launch-layout .form { padding: 0 30px 28px; border: 2px solid #171a14; border-radius: 3px; box-shadow: 8px 8px 0 #d8edbd; }
.fieldset:not([hidden]) { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 17px 26px; align-items: start; padding: 30px 0; }
.fieldset > .legend-title { grid-column: 1; grid-row: 1; display: block; font-size: 22px; line-height: 1.1; letter-spacing: -.04em; }
.fieldset > .legend-title::before { content: '✳'; display: block; color: #669d3b; font-size: 22px; margin-bottom: 10px; }
.fieldset > .legend-title small { display: block; margin-top: 9px; font-size: 12px; line-height: 1.4; letter-spacing: 0; }
.fieldset > .form-row { grid-column: 2; }
.form-row.two { gap: 18px; }
.form-row.two > .form-row { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 7px; }
.form-row.two > .form-row .label { min-height: 22px; }
.label { align-items: baseline; line-height: 1.4; }
.input, .textarea { background: #f7f5ed; border-color: #c9cbbd; border-radius: 4px; font-size: 14px; }
.input { height: 50px; }
.input-wrap { min-height: 50px; }
.input-wrap .input { height: 50px; }
.textarea { min-height: 115px; padding: 12px; }
.hint { line-height: 1.5; }
.form-foot { padding-top: 27px; }
.summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 24px; }
.summary-line { border-bottom: 1px solid #d5d8ca; padding-bottom: 9px; }
.summary-line b { white-space: nowrap; }
.launch-side { top: calc(var(--topbar-h) + 18px); gap: 15px; }
.launch-side > .card { border: 2px solid #171a14; border-radius: 3px; box-shadow: 5px 5px 0 #d8edbd; }
.launch-side > .card:first-child { background: #e3ffba; }
.launch-side .side-title { color: #171a14; font-family: var(--mono); font-size: 11px; }
.launch-side .bullets { gap: 15px; }
.launch-side .bullets li { font-size: 13px; line-height: 1.5; }

@media (max-width: 1200px) {
  .catpad-hero h1 { font-size: clamp(74px,9vw,125px); }
  .catpad-hero-art { width: 54%; }
  .catpad-hero-art > img { right: -8%; }
  .catpad-topnav { gap: 14px; }
  .topbar .search { width: min(250px,20vw); }
  .fieldset:not([hidden]) { grid-template-columns: 120px minmax(0,1fr); gap: 16px 20px; }
}
@media (max-width: 1024px) {
  .catpad-topnav { display: none; }
  .topbar .search { width: min(350px,38vw); }
  .catpad-hero-copy { width: 64%; }
  .catpad-hero h1 { font-size: clamp(70px,9vw,102px); }
  .catpad-hero-art { width: 54%; }
  .launch-layout { grid-template-columns: 1fr; }
  .launch-side { grid-template-columns: repeat(2,minmax(0,1fr)); position: static; }
}
@media (max-width: 760px) {
  :root { --gutter: 18px; --topbar-h: 64px; }
  html, body { overflow-x: clip; }
  .topbar { gap: 10px; }
  .topbar .search { width: auto; }
  .catpad-hero { min-height: 0; padding-top: 0; }
  .catpad-hero-meta { position: relative; font-size: 9px; }
  .catpad-hero-meta span:last-child { display: none; }
  .catpad-hero-copy { width: 100%; min-height: 0; padding: 38px var(--gutter) 26px; }
  .catpad-hero h1 { font-size: clamp(58px,13vw,90px); line-height: 1; letter-spacing: -.035em; margin: 26px 0 22px; max-width: 650px; }
  .catpad-hero h1 em { -webkit-text-stroke: 1.5px #171a14; text-shadow: 3px 4px 0 #171a14; }
  .catpad-hero-copy > p { max-width: 48ch; font-size: 17px; }
  .catpad-hero-foot { margin-top: 34px; gap: 10px; font-size: 9px; }
  .catpad-hero-art { position: relative; width: 100%; height: min(500px,110vw); min-height: 0; }
  .catpad-hero-halo { inset: auto 0 -34% auto; width: 100%; height: 124%; }
  .catpad-hero-art > img { right: 5%; left: auto; bottom: -4%; height: 106%; width: auto; max-width: 88%; }
  .catpad-hero-side { display: none; }
  .catpad-sticker { bottom: 7%; right: 7%; }
  .catpad-status { margin: -15px 0 0; padding: 16px; box-shadow: 4px 4px 0 #171a14; }
  .catpad-story { grid-template-columns: 1fr; gap: 42px; padding: 75px 0; }
  .catpad-story-copy { padding: 0; }
  .catpad-section-heading { display: block; }
  .catpad-section-heading h2 { margin: 18px 0 0; }
  .catpad-step-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .catpad-step-grid article, .catpad-step-grid article:nth-child(1), .catpad-step-grid article:nth-child(2), .catpad-step-grid article:nth-child(3) { grid-column: 1; grid-row: auto; margin: 0; transform: none; min-height: 225px; }
  .catpad-step-grid article:nth-child(2):hover,.catpad-step-grid article:nth-child(3):hover { transform: translateY(-5px); }
  .catpad-step-grid article { padding: 23px; }
  .catpad-step-icon { font-size: 58px; }
  .catpad-den { padding: 72px 0 80px; }
  .catpad-outro { min-height: 420px; padding-top: 48px; }
  .catpad-outro > img { height: 88%; max-width: 80%; bottom: -37%; opacity: .48; }
  body[data-page="launch"] .page { padding-top: 36px; padding-bottom: 70px; }
  body[data-page="launch"] .page-head h1 { font-size: clamp(50px,12vw,74px); }
  body[data-page="launch"] .page-head p { font-size: 15px; }
  .catpad-pair-warning { grid-template-columns: 1fr; gap: 8px; }
  .launch-layout .form { padding: 0 17px 20px; }
  .fieldset:not([hidden]) { display: block; padding: 25px 0; }
  .fieldset > .legend-title { margin-bottom: 18px; font-size: 22px; }
  .fieldset > .legend-title::before { display: inline; margin: 0 8px 0 0; font-size: 17px; }
  .fieldset > .legend-title small { margin-left: 26px; }
  .fieldset > .form-row + .form-row { margin-top: 16px; }
  .form-row.two { grid-template-columns: 1fr; gap: 16px; }
  .form-row.two > .form-row { gap: 6px; }
  .summary { grid-template-columns: 1fr; gap: 9px; }
  .launch-side { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .catpad-step-grid article, .catpad-topnav a::after { transition: none; } }