/* Shell, the blueprint frame, topbar, section rhythm, footer, breakpoints. */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- the blueprint frame -------------------------------------------------
   Two hairlines standing exactly on the shell's content edge — the same line
   every heading, every section rule and the estimator's left edge align to.
   Fixed, so they hold still while the page scrolls and pass straight through
   the sticky topbar (z 150 clears the topbar's z 100; the skip link's z 200
   still clears them). Firecrawl's landing page does this at 1112px and it is
   the single device that makes a flat monochrome ground read as measured
   rather than as empty. Decorative only: aria-hidden in the markup,
   pointer-events:none here, and deleted outright below 768px where the
   gutter is too narrow for the line to mean anything. */
.blueprint {
  position: fixed;
  inset: 0;
  /* Below the topbar (100) and the mobile menu (99), above everything in the
     document flow. It was 150 — above the topbar, so the rules ran through it
     the way Firecrawl's do. Measured, the rules cleared the open language
     menu at both 1440 and 1024, but a decorative layer painting over an
     interactive overlay is a bug waiting for a wider menu or a narrower
     gutter, and .topbar creates a stacking context so nothing inside it can
     ever be raised past a sibling at 150. Dropping to 90 removes the class of
     fault; the topbar below is opaque so the rules terminate on a hard edge
     instead of smearing through frosted glass. */
  z-index: 90;
  pointer-events: none;
}
.blueprint__col {
  width: 100%;
  max-width: var(--shell);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.blueprint__col > i {
  display: block;
  height: 100%;
  border-inline: var(--frame-w) solid var(--frame-rule);
}

/* --- topbar -------------------------------------------------------------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--topbar-h);
  /* Opaque, not frosted. A translucent blurred bar over a 9px dot field turns
     the dots to mush as they pass under it, and it is what forced the
     blueprint frame above the topbar in the first place. Firecrawl's header
     is opaque from first paint for the same reason. */
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.topbar__inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.topbar__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  pointer-events: none;
}
.topbar__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transform-origin: left;
}

.wordmark { display: inline-flex; align-items: center; gap: var(--s3); flex: none; }
.wordmark:hover { color: inherit; }
.wordmark__mark {
  width: 18px; height: 18px;
  display: block;
  background-color: var(--dot);
  /* four dots, the exemplar's 6px unit at 1:3 scale */
  -webkit-mask: radial-gradient(circle 3px at 4px 4px, #000 99%, transparent) 0 0/9px 9px;
          mask: radial-gradient(circle 3px at 4px 4px, #000 99%, transparent) 0 0/9px 9px;
  transition: transform var(--dur) var(--ease);
}
.wordmark:hover .wordmark__mark { transform: rotate(45deg); }
.wordmark__name {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: var(--track-tight);
  white-space: nowrap;
}

.topnav { display: flex; align-items: center; gap: var(--s5); }
.jump {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-2);
  padding-block: var(--s2);
  transition: color var(--dur-fast) var(--ease);
}
.jump:hover, .jump[aria-current='true'] { color: var(--ink); }
.jump__fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) linear;
}

.topbar .menubtn { display: none; }

.mobilemenu {
  position: fixed;
  inset: var(--topbar-h) 0 auto 0;
  z-index: 99;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  padding: var(--s5) var(--gutter) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  font-size: 1.125rem;
  font-weight: 500;
}
.mobilemenu__accent { color: var(--accent-text); }

/* --- sections ------------------------------------------------------------ */
main { padding-top: var(--topbar-h); }
#top { display: block; height: 0; }

/* One scroll down, total: the hero takes the first screen, pricing the
   second, the footer rides along.

   The hero stays centred: every one of the seven AI-builder landing pages
   surveyed centres it, and breaking a convention that total reads as
   off-category rather than as distinctive. What changes is the balance —
   the headline gives room back to the control beneath it (D-006). */
/* Two asymmetric corner blooms — a loose, flattened echo of the reference's
   mirrored wireframe wave-mesh flanking its hero (D-018 follow-up). No mesh,
   no image: two radial-gradients on a ::before, positioned outside the
   measure so they never sit under text, coloured neutral on one side and
   accent-tinted on the other the way the exemplar runs cool grey against a
   warm ember field. Purely decorative: aria-hidden by virtue of being a
   pseudo-element, pointer-events none, and it scrolls away with the hero
   rather than pinning like the blueprint frame. */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute;
  inset: -10% 0 auto 0;
  height: 70%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 65% at 8% 20%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 70%),
    radial-gradient(40% 60% at 94% 28%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
/* A second, fainter reference motif: thin light rays fanning down from
   directly above the headline (seen behind "The ___ for Modern Dev Teams").
   A repeating conic-gradient makes the spokes; a radial mask keeps them out
   of the corners so they read as one light source, not a sunburst pattern
   across the whole hero (D-019 follow-up). */
.hero::after {
  content: '';
  position: absolute;
  left: 50%; top: -12%;
  width: 140%; height: 85%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(from -90deg at 50% 0%,
              color-mix(in srgb, var(--ink) 6%, transparent) 0deg 1.2deg,
              transparent 1.2deg 7deg);
  -webkit-mask-image: radial-gradient(55% 65% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(55% 65% at 50% 0%, #000 0%, transparent 72%);
}

.hero {
  padding-block: clamp(var(--s6), 6vh, var(--s8)) var(--s7);
  text-align: center;
}
.hero h1 { margin-bottom: var(--s5); max-width: 20ch; margin-inline: auto; }
.hero__last { font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; }
/* Sorts Mill Goudy draws a diamond for '.', not a round dot; force the sans period. */
.hero__period { font-family: var(--sans); }
.hero__eyebrow { margin-bottom: var(--s5); }
.procedure > h3 { margin-bottom: var(--s3); }
.urlbar { width: min(100%, 560px); margin-inline: auto; }

/* The line under the URL bar. Every competitor puts a volume claim here —
   Same's "over 600,000+ projects built with Same" sits 24px under its
   composer. We have no volume to claim and will not invent one, so the slot
   carries the one thing we can say that they cannot: what the field does NOT
   do. See D-007. */
.hero__assurance { margin-top: var(--s4); }

.section { padding-block: var(--s6); border-top: 1px solid var(--rule); }
.section__head { margin-bottom: var(--s5); }

/* The reference lights its closing CTA from directly above — a soft radial
   fade descending onto "Ready to Revolutionize Your Workflow?". Pricing is
   this page's equivalent close (it ends in the same Start-a-clone action),
   so it gets the same single soft light, not a new section (D-018 follow-up,
   D-002 still holds: no new content). */
#pricing { position: relative; }
#pricing::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%,
              color-mix(in srgb, var(--ink) 6%, transparent), transparent 75%);
}
.section__head .eyebrow { display: block; margin-bottom: var(--s3); }

/* The demo pair. Left pane = the site as it was walked; right pane = the
   artifact that came back. Firecrawl runs the same argument under its hero —
   a skeleton of the input page beside the machine-readable output — and it
   is the clearest one-glance statement of what a transformation product
   does. Ours has the advantage that both halves are real. The gap is a
   single hairline so the two panes read as one instrument, not two cards
   (D-009). */
.walk {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--rule);
  gap: 1px;
  /* A second, lit hairline along the top inside edge — still a hairline, not
     a drop shadow (D-005 rules out the latter, not the former): the
     reference bezels every dark panel with a light source from above. 1px,
     no blur, so it reads as an edge catching light rather than a shadow. */
  box-shadow: inset 0 1px 0 0 var(--rule-strong);
}

/* The estimate panel. It was a 20px-radius, drop-shadowed, 48px-padded card
   with a 260px floor, which meant its resting state was a 260x1210 box
   holding two em-dashes. It is now an instrument: hairline, 6px, no shadow,
   no height floor, and sized by its content. Firecrawl's plan columns and
   Base44's pricing cards — the two most technical pages surveyed — are both
   shadowless and hairline-ruled, so this is the category's own convention for
   a page that wants to be believed rather than admired. See D-005 and D-008. */
.est {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--raised);
  box-shadow: inset 0 1px 0 0 var(--rule-strong);
}
.est__result {
  display: grid;
  /* the spec is the wide half; the price column is a fixed readout beside it */
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.52fr);
  align-items: stretch;
}

/* --- footer -------------------------------------------------------------- */
.footer {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-block: var(--s6);
  padding-bottom: calc(var(--s6) + var(--s5));
  overflow: hidden;
}
.footer__inner { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; position: relative; z-index: 1; }
.footer__nav { display: flex; gap: var(--s5); font-size: var(--fs-small); color: var(--ink-2); }
.footer__legal { margin-left: auto; }

/* The reference closes on a giant ghost wordmark, dot-screened, bleeding off
   the bottom edge. Ours reuses the page's own dot-ground technique instead
   of an image: the brand name set huge, then clipped to the same repeating
   radial-gradient dot texture that already tiles <body> (base.css), so the
   letters are made of the page's own ground rather than a new asset
   (D-018 follow-up). Generated content, not a duplicate DOM node — inert to
   assistive tech and to `verify.mjs`'s content-count checks. */
.footer::after {
  content: 'CloneLaunch';
  position: absolute;
  left: 50%; bottom: -0.5em;
  transform: translateX(-50%);
  z-index: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  white-space: nowrap;
  pointer-events: none;
  background-image: radial-gradient(circle 1.5px at 1px 1px, var(--ink-3) 99%, transparent 100%);
  background-size: 6px 6px;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0.6;
}
@media (max-width: 768px) { .footer::after { display: none; } }

/* --- breakpoints --------------------------------------------------------- */
@media (max-width: 1024px) {
  .walk { grid-template-columns: 1fr; }
  .est__result { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --topbar-h: 56px; }
  .topnav,
  .topbar__right .btn--ghost,
  .topbar__right .langpick { display: none; }
  .topbar .menubtn { display: inline-flex; }
  .section { padding-block: var(--s6); }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: var(--s5); }
  .footer__legal { margin-left: 0; }
  /* One rule deletes the whole decorative layer on small screens, the way
     Builder.io kills its hero ornament at 899px. Below this width the gutter
     is 20px and a rule standing in it reads as an accident, not a frame. */
  .blueprint { display: none; }
}

@media (max-width: 560px) {
  .topbar__right .btn--accent { display: none; }
}