/* Home page only. Shared chrome lives in site.css. */

.hero-block { padding: 3.2rem 0 4.6rem; }
.desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
@media (max-width: 900px) { .desk { grid-template-columns: 1fr; gap: 2.2rem; } }

.offer { padding: 2.3rem 2rem 2rem; box-shadow: var(--shadow); }
.page-home h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); line-height: 1.06; }
.cred { margin: 0 0 1.15rem; color: var(--ice); font-size: .92rem; }
.page-home .lede { margin: 0 0 1.4rem; max-width: 42ch; }
.price-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.chip { border: 1px solid var(--line); border-radius: 3px; padding: .3rem .55rem; font-size: .86rem; font-weight: 700; }
.fine { margin: 1.3rem 0 0; color: var(--muted); font-size: .88rem; max-width: 40ch; }

.sample-col { min-width: 0; }
.sample-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.status { font-size: .78rem; color: var(--muted); margin: 0 0 8px; font-family: var(--mono); }
.status b { color: var(--live); }

/* Hero example loads like a browser when it comes into view (home.js).
   The frame opens, a gold bar runs across, the site appears, and the status line shows
   how fast this real page was ready on the visitor's connection. Under 1 second total. */
[data-load] { transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .3, 1); }
[data-load].is-waiting { opacity: 0; transform: translateY(12px) scale(.97); animation: load-fallback 0s 2s forwards; }
[data-load] [data-load-content] { transition: opacity .3s ease .32s, filter .3s ease .32s; }
[data-load].is-waiting [data-load-content] { opacity: 0; filter: blur(6px); animation: load-fallback 0s 2s forwards; }
@keyframes load-fallback { to { opacity: 1; transform: none; filter: none; } }
.load-bar { display: block; height: 2px; margin: -6px 0 6px; border-radius: 2px; background: linear-gradient(90deg, var(--star), #fff3d6); transform: scaleX(0); transform-origin: left; opacity: 0; }
[data-load].is-loading .load-bar { animation: load-bar .45s cubic-bezier(.3, .7, .3, 1) .1s forwards; }
@keyframes load-bar { 0% { opacity: 1; transform: scaleX(0); } 85% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
[data-load].is-swap [data-load-content] { animation: load-swap .35s ease; }
@keyframes load-swap { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
.status .ready { color: var(--live); font-weight: 500; }
.status .ready::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .4em .1em 0; border-radius: 50%; background: var(--live); box-shadow: 0 0 6px var(--live); }
@media (prefers-reduced-motion: reduce) {
  [data-load].is-waiting, [data-load].is-waiting [data-load-content] { opacity: 1; transform: none; filter: none; }
}
.viewport-wrap { position: relative; background: #05070c; border-radius: 5px; }
.viewport {
  container-type: inline-size;
  container-name: site;
  width: min(100%, 640px);
  max-width: 100%;
  min-width: 260px;
  background: #fff;
  color: #161616;
  border-radius: 5px;
  overflow: hidden;
}
.break-note { margin: .85rem 0 0; font-size: .82rem; color: var(--ice); font-weight: 600; }
.mobile-shot { display: none; }

@media (max-width: 700px) {
  .desktop-sample { display: none; }
  .mobile-shot { display: block; }
  .hero-block { padding: 3.4rem 0 3.6rem; }
  .offer { padding: 1.5rem 1.2rem 1.35rem; }
}


.shot { overflow: hidden; }

.steps, .pack-grid, .inc-grid, .concept-grid { display: grid; gap: 1.35rem; }
.steps { grid-template-columns: repeat(3, 1fr); }
.pack-grid { grid-template-columns: repeat(2, 1fr); }
.inc-grid { grid-template-columns: 1fr 1fr; }
.concept-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .steps, .pack-grid, .concept-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .inc-grid, .concept-grid { grid-template-columns: 1fr; } }

.step, .inc, .pack, .concept { padding: 1.45rem 1.3rem; }
.step span { display: block; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--star); margin-bottom: .5rem; }
.step p { margin: 0; }
.pack.featured { border-color: color-mix(in oklab, var(--star) 55%, var(--line)); }
.pack h3, .concept h3 { margin: 0; font-family: var(--serif); font-size: 1.55rem; font-weight: 400; }
.pack .amt { margin: .35rem 0 .25rem; font-family: var(--mono); color: var(--star); }
.pack .what { margin: 0 0 .7rem; color: var(--muted); font-size: .92rem; }
.pack ul, .inc ul { margin: 0 0 .7rem; padding-left: 1.1rem; color: var(--muted); }
.pack li, .inc li { margin: .34rem 0; }
.inc h3 { margin: 0 0 .6rem; }
.concept > p { margin: .4rem 0 0; color: var(--muted); font-size: .92rem; }
a.concept { display: block; color: var(--ink); text-decoration: none; }
a.concept:hover { border-color: color-mix(in oklab, var(--star) 55%, var(--line)); }
.concept > .kicker { margin: 0 0 .55rem; color: var(--star); }
/* Mini working examples on the Design examples cards. home.js fills them from the hero specimens. */
.concept-mini {
  position: relative;
  height: 210px;
  margin: -1.45rem -1.3rem 1.2rem;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: #fff;
  color: #161616;
  pointer-events: none;
}
.concept-mini:empty { display: none; }
/* Each card shows the top of the real site at half size, like a thumbnail. */
.mini-zoom { zoom: .5; container: site / inline-size; }
.concept-mini::after { content: ""; position: absolute; inset: auto 0 0; height: 48px; background: linear-gradient(rgb(12 19 32 / 0), rgb(12 19 32 / .28)); }
a.concept { overflow: hidden; }

/* Start here: the form, and what happens next beside it */
.start-grid { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.next { position: sticky; top: 100px; padding: 1.4rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.next h3 { margin: 0 0 .9rem; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.next ol { display: grid; gap: .75rem; margin: 0; padding-left: 1.25rem; color: var(--muted); }
.next li::marker { color: var(--star); font-family: var(--mono); }
.next b { color: var(--ink); font-weight: 650; }
.next p { margin: 1.1rem 0 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 900px) { .start-grid { grid-template-columns: 1fr; } .next { position: static; } }
.concept-more { margin-top: 1.4rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; }