/* ============ Fonts ============ */
@font-face {
  font-family: "Jakarta Sans Display";
  src: url("assets/JakartaSansDisplay-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta Sans Display";
  src: url("assets/JakartaSansDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta Sans Display";
  src: url("assets/JakartaSansDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta Sans Display";
  src: url("assets/JakartaSansDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ============ Tokens / base ============ */
:root {
  --bg-a: #1A1A1A;      /* hero, features, pricing */
  --bg-b: #121212;      /* made, designed, closing, footer */
  --card: #2A2A2A;
  --accent: #C7D9EA;
  --banner: #F6F563;
  --text: #FEFEFE;
  --muted: #B9B9B9;
  --dim: #6A6A6A;
  --radius: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: "Jakarta Sans Display", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  background: var(--bg-a);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  max-width: 1208px;
  margin: 0 auto;
  padding: 0 24px;
}

::selection { background: rgba(199, 217, 234, 0.25); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 24px;
  border-radius: 19px;
  /* Longhands on purpose: `font: 500 14px/1 inherit` is invalid (a CSS-wide keyword
     can't sit inside the shorthand), so links fell back to 15px and <button> to the
     UA's 13.3px — which is why "Coming Soon" read smaller than "Learn More". */
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--accent);
  color: #16181c;
}
.btn-primary:hover { background: #d8e5f2; }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--text);
}
.btn-outline:hover { background: rgba(199, 217, 234, 0.12); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* "Coming Soon" placeholders: keep the pill exactly as designed, just inert */
.btn[disabled] {
  cursor: default;
  opacity: 1;
  color: var(--text);
}
.btn-outline[disabled]:hover { background: transparent; }
.btn-row {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ Banner ============ */
.banner {
  display: block;
  background: var(--banner);
  color: #111;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 16px;
  line-height: 1.35;
}
.banner u { text-underline-offset: 2px; }
.banner:hover u { text-decoration-thickness: 2px; }

/* ============ Header ============ */
.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 21px 0;
}
.logo-svg {
  display: block;
  width: 68px;
  height: 20px;
  fill: #fff;
}
.cart-svg {
  display: block;
  width: 24px;
  height: 22px;
  fill: #fff;
}
.header-cart { padding: 4px; }
.header-cart:hover .cart-svg,
.header-logo:hover .logo-svg { fill: var(--accent); }

/* ============ Hero ============ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-a);
  min-height: 864px;
}
.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 205px 24px 60px;
}
.hero-logo-wrap { line-height: 0; }
.hero-logo {
  width: clamp(220px, 22vw, 319px);
  height: auto;
  aspect-ratio: 318.6 / 93.5;
  fill: var(--text);
}
.tagline {
  margin-top: 54px;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--muted);
  letter-spacing: 0.005em;
}
.tagline em {
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
}
.hero .btn-row { margin-top: 38px; }
.hero-note {
  margin-top: 22px;
  font-size: 13px;
  color: var(--dim);
}

.hero-shot {
  position: absolute;
  z-index: 1;
  width: 320px;
  height: auto;
  border-radius: var(--radius);
}
.hero-shot-left {
  left: max(40px, calc(50% - 580px));
  top: 169px;
}
.hero-shot-right {
  right: max(40px, calc(50% - 580px));
  top: -785px;
}
.hero-shot-mobile { display: none; }

/* ============ Made by- and for creators ============ */
.made {
  position: relative;
  overflow: hidden;
  background: var(--bg-b);
  /* 500 at 1440; scales with the laptop so the band keeps trimming it in proportion */
  min-height: clamp(360px, 34.7vw, 500px);
  display: flex;
  align-items: center;
}
.made-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 90px;
  padding-bottom: 90px;
}
.made-text { max-width: 440px; }
.made-text h2 {
  font-size: clamp(31px, 2.9vw, 40px);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: 0.002em;
}
.made-text p {
  margin-top: 18px;
  font-size: 15.5px;
  color: var(--muted);
  max-width: 340px;
}
.made-text .btn { margin-top: 30px; }
/* Framing fitted to the design: 832 wide at 1440, right edge just past the container's
   content edge, sitting low enough that the 500pt band trims 60 off the top and 89 off
   the base. Measured against the mockup — don't eyeball these. */
.laptop {
  position: absolute;
  z-index: 1;
  right: max(24px, calc(50% - 582px));
  top: 50%;
  transform: translateY(calc(-50% + 14px));
  width: clamp(440px, 57.8vw, 832px);
  height: auto;
}

/* ============ Giant headings ============ */
.giant {
  font-size: clamp(64px, 9vw, 130px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.005em;
  color: var(--text);
}
.giant .l2 {
  display: block;
  padding-left: clamp(44px, 6.3vw, 90px);
}

/* ============ Key Features ============ */
.features {
  background: var(--bg-a);
  padding: 140px 0 120px;
}
.features .giant { margin-bottom: 64px; }

/* Single stack — the shape the markup ships in, and the no-JS fallback at every width */
.fgrid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fgrid > .card { width: min(560px, 100%); }

/* Columns dealt by the inline script: each is a real flex column, so cards stack tight
   against one another and their uneven heights stagger the way the design intends. */
.fgrid.is-columns {
  flex-direction: row;
  align-items: stretch; /* lets the 3-column bottom-alignment below have slack to absorb */
}
.fcol {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card h3 {
  font-size: 20px;
  font-weight: 400;
  margin: 28px 10.5% 10px; /* 40px at the design's 380px card = the image frames' inset */
}
.card p {
  font-size: 15px;
  color: var(--muted);
  margin: 0 10.5% 0;
}
/* Frames are 340pt wide (card minus the 40pt inset), content bottom-anchored with a
   baked alpha fade on top. The image stays in flow and is pulled up under the copy by
   a width-relative margin, so the gap from text to visible UI is identical at every
   width and the card simply grows when the copy wraps to another line. */
.card img {
  width: 89.474%;
  height: auto;
  align-self: flex-end;
  margin-top: -12.24%; /* lands the frame top 89pt below the card top, as in the design */
}
/* Keep the three columns bottom-aligned when copy wraps differently per card: the slack
   goes above the last card's title, never into the text-to-image gap. */
@media (min-width: 1080px) {
  .fcol > .card:last-child {
    flex: 1;
    justify-content: flex-end;
  }
}
.features-cta { margin-top: 64px; }

/* ============ Designed ============ */
.designed {
  background: var(--bg-b);
  padding: 110px 0;
}
.designed-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
.designed-text h2 {
  font-size: clamp(30px, 2.9vw, 40px);
  font-weight: 300;
  line-height: 1.22;
  max-width: 480px;
}
.designed-text h2 em {
  font-style: normal;
  font-weight: 400; /* matches "narrowed" in the hero */
  color: var(--accent);
}
.designed-text p {
  margin-top: 24px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 500px;
}
.designed-text strong {
  color: var(--text);
  font-weight: 500;
}
.designed-text .btn { margin-top: 32px; }
.designed-points {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.point h3 {
  font-size: 19px;
  font-weight: 400;
}
.point p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}

/* ============ Pricing ============ */
.pricing {
  background: var(--bg-a);
  padding: 140px 0 120px;
}
.pricing .giant { margin-bottom: 64px; }
.pgrid {
  display: grid;
  grid-template-columns: 2.03fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.price-card,
.req-card {
  background: var(--card);
  border-radius: 12px;
}
.price-card {
  padding: 48px 51px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.badge {
  display: inline-block;
  background: var(--accent);
  color: #16181c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
}
.price-row {
  margin-top: 26px;
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.price {
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
}
.price-old {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 300;
  color: var(--dim);
}
.price-sub {
  margin-top: 14px;
  font-size: 15px;
  color: var(--dim);
}
.checks {
  margin-top: 30px;
  display: grid;
  gap: 13px;
}
.checks li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: #e8e8e8;
}
.check-svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--text);
}
.price-card .btn { margin-top: 36px; }

.req-card { padding: 38px 40px; }
.req-card h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 24px;
}
.req {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 14px 0;
}
.req dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.req dd {
  margin-top: 6px;
  font-size: 15px;
  color: var(--text);
}

/* ============ Closing ============ */
.closing {
  background: var(--bg-b);
  padding: 185px 0 150px;
  text-align: center;
}
.closing h2 {
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 300;
  line-height: 1.12;
}
.closing-sub {
  margin-top: 26px;
  font-size: 16px;
  color: var(--muted);
}
.closing .btn { margin-top: 36px; }
.closing-note {
  margin-top: 46px;
  font-size: 13px;
  color: var(--dim);
}
.closing-note .dot {
  margin: 0 10px;
  font-size: 10px;
  vertical-align: 1px;
}

/* ============ Footer ============ */
footer {
  background: var(--bg-b);
  padding: 46px 0 44px;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 22px;
}
.footer-logo {
  width: 68px;
  height: 20px;
  fill: #5A5A5A;
}
.footer-left span {
  font-size: 14px;
  color: var(--dim);
}
.footer-links {
  display: flex;
  align-items: center;
  gap: clamp(28px, 6.5vw, 96px);
  flex-wrap: wrap;
}
.footer-links a {
  font-size: 14px;
  color: var(--dim);
  transition: color 0.15s ease;
}
.footer-links a:hover { color: var(--muted); }

/* ============ Responsive ============ */
/* The copy stops clearing the laptop's screen edge (a constant 42.4% into its box) at
   about this width, so the side-by-side composition holds until here, then stacks. */
@media (max-width: 800px) {
  .made {
    display: block;
    min-height: 0;
    overflow: visible;
    padding-bottom: 56px;
  }
  .made-grid { padding-top: 72px; padding-bottom: 0; }
  /* Whole laptop, nothing trimmed, right edge on the container's padding. The negative
     top margin slides it up beside the copy so the screen sits level with the button
     instead of dropping below it — its left third is transparent, so nothing collides. */
  .laptop {
    position: static;
    transform: none;
    height: auto;
    width: min(600px, calc(100% - 48px));
    margin: max(-9vw, -56px) 24px 0 auto;
  }
}

/* The two hero shots are mirrored around centered copy, so they live and die together:
   below this the pair is replaced by one centered shot. */
@media (max-width: 1120px) {
  .hero { min-height: 0; }
  .hero-inner { padding-top: 96px; padding-bottom: 0; }
  .hero-shot-left,
  .hero-shot-right { display: none; }
  .hero-shot-mobile {
    display: block;
    width: min(320px, 82vw);
    max-height: 440px;
    overflow: hidden;
    margin: 64px auto 0;
    border-radius: var(--radius) var(--radius) 0 0;
    -webkit-mask-image: linear-gradient(#000 55%, transparent 98%);
    mask-image: linear-gradient(#000 55%, transparent 98%);
  }
  .hero-shot-mobile img { width: 100%; height: auto; }
}

/* The script deals cards into 3 / 2 / 1 columns at these same widths; the single-column
   case needs no rules of its own (it is the .fgrid default above). */
@media (max-width: 1079px) {
  .fgrid.is-columns .card { width: auto; }
}
}

@media (max-width: 960px) {
  .features { padding: 96px 0 88px; }
  .features .giant,
  .pricing .giant { margin-bottom: 44px; }
  .designed-grid { grid-template-columns: 1fr; gap: 56px; }
  .designed-points { justify-content: flex-start; gap: 30px; }
  .pgrid { grid-template-columns: 1fr; }
  .pricing { padding: 96px 0 88px; }
  .closing { padding: 120px 0 100px; }
  .footer-row { justify-content: center; text-align: center; }
}

@media (max-width: 640px) {
  .banner { font-size: 12px; }
  .price-card { padding: 36px 28px; }
  .req-card { padding: 30px 28px; }
  .made-grid { padding-top: 64px; }
  .designed { padding: 80px 0; }
  .closing-note .dot { margin: 0 6px; }
}