:root {
    --black: #050506; --black-2: #111114; --black-3: #1A1A1E; --grey: #F5F5F7; --white: #FFFFFF;
    --ink: #0E0E11; --muted: #5F6068; --muted-dark: #A1A1AA; --line: #E4E4E8; --line-dark: rgba(255,255,255,0.12);
    --accent: #B0001C; --accent-hover: #93001A; --gold: #D4A832;
    --head: 'Inter Tight', 'Inter', system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  button { font: inherit; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  svg.lucide { width: 18px; height: 18px; stroke-width: 1.75; flex-shrink: 0; }
  .wrap { width: min(1280px, calc(100% - 96px)); margin: 0 auto; }
  h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
  h1 { font-size: 56px; line-height: 1.05; }
  h2 { font-size: 48px; line-height: 1.06; }
  .sub { font-size: 18px; color: var(--muted); max-width: 46ch; margin: 18px 0 0; }
  .dark { background: var(--black); color: var(--white); }
  .dark .sub { color: var(--muted-dark); }
  .grey { background: var(--grey); }
  .btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
  .btn.primary { background: var(--accent); color: var(--white); }
  .btn.primary:hover { background: var(--accent-hover); }
  .btn.white { background: var(--white); color: var(--ink); }
  .btn.outline { border-color: rgba(255,255,255,0.5); color: var(--white); background: transparent; }
  .btn.outline:hover { border-color: var(--white); }
  .btn.outline-dark { border-color: var(--line); color: var(--ink); background: var(--white); }
  .link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; }
  .link:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* nav: sits on the black hero */
  .nav { position: sticky; top: 0; z-index: 40; background: rgba(5,5,6,0.9); backdrop-filter: blur(12px); color: var(--white); }
  .nav .wrap { display: flex; align-items: center; height: 72px; gap: 40px; }
  .logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--head); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; }
  .logo img { height: 24px; }
  .nav nav { display: flex; gap: 30px; margin: 0 auto; font-size: 15px; }
  .nav nav a { text-decoration: none; color: #E4E4E7; }
  .nav nav a:hover { color: var(--white); }
  .nav .right { display: flex; gap: 10px; }
  .nav .btn { height: 40px; font-size: 14px; }

  /* hero */
  .hero { position: relative; overflow: hidden; }
  .hero > .wrap { position: relative; }
  .hero > .wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 620px; padding: 40px 0 80px; gap: 40px; }
  .hero .ctas { display: flex; gap: 12px; margin-top: 32px; }
  .stage { position: relative; height: 520px; }
  .fan { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --r: 150px; }
  .fcard { --s: 1; position: absolute; left: -52px; top: -72px; width: 104px; height: 144px; padding: 0; border: none; background: none; color: inherit; cursor: pointer;
    transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(22deg) scale(var(--s)); transition: transform 240ms ease-out; }
  .fcard:hover, .fcard:focus-visible { --s: 1.25; z-index: 5; outline: none; }
  .fface { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; background: #1C1C20; border: 1px solid rgba(255,255,255,0.1); box-shadow: -3px 5px 10px -3px rgba(0,0,0,0.7); }
  .fcard:hover .fface { border-color: rgba(255,255,255,0.6); }
  .fface b { position: absolute; left: 7px; right: 20px; top: 6px; height: 30px; display: flex; align-items: center; font-family: var(--head); font-size: 11px; font-weight: 600; line-height: 1.1; }
  .fface .pic { position: absolute; left: 6px; right: 6px; top: 38px; bottom: 6px; border-radius: 5px; overflow: hidden; }
  .fface .pic svg { display: block; width: 100%; height: 100%; }
  .fan-mid { position: absolute; left: 50%; top: 50%; translate: -50% -50%; text-align: center; pointer-events: none; }
  .fan-mid img { height: 30px; display: block; margin: 0 auto 6px; }
  .fan-mid span { font-size: 12px; color: var(--muted-dark); display: block; min-height: 32px; max-width: 120px; }
  /* floating UI cards over the visual, as on Lifted's hero */
  .float { position: absolute; background: var(--white); color: var(--ink); border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6); font-size: 13px; }
  .float.matched { right: -10px; top: 40px; width: 250px; padding: 14px 14px 8px; }
  .float.matched h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
  .float.matched .row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); }
  .float.matched .row .av { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
  .float.matched .row .av svg { width: 100%; height: 100%; display: block; }
  .float.matched .row div { flex: 1; line-height: 1.25; } .float.matched .row small { color: var(--muted); font-size: 11.5px; }
  .status { font-size: 11px; font-weight: 600; border-radius: 5px; padding: 3px 7px; }
  .status.ok { background: #E7F6EC; color: #11652F; } .status.pend { background: #EEF1F8; color: #334C8A; }
  .float.lic { left: 0; bottom: 36px; width: 240px; padding: 12px 14px; }
  .float.lic .top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 8px; }
  .float.lic dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 12px; }
  .float.lic dt { color: var(--muted); } .float.lic dd { margin: 0; text-align: right; }


  /* how it works band */
  .how { padding: 90px 0 110px; border-top: 1px solid var(--line-dark); }
  .how .panel { margin-top: 48px; border-radius: 16px; background: var(--black-3); display: grid; grid-template-columns: 1fr 1.25fr; overflow: hidden; }
  .how .panel .txt { padding: 48px; }
  .how .panel h3 { font-size: 34px; line-height: 1.1; }
  .how .panel p { color: var(--muted-dark); margin: 14px 0 26px; }
  .how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .how ol li { display: grid; grid-template-columns: 44px 1fr; padding: 16px 0; border-top: 1px solid var(--line-dark); }
  .how ol li span { font-family: var(--head); color: var(--muted-dark); }
  .how ol b { font-weight: 600; } .how ol p { margin: 4px 0 0; font-size: 14.5px; }
  .how .visual { position: relative; background: #0C0C0E; min-height: 460px; }

  /* engagement models: sticky list left, one panel per model right */
  .models { padding: 100px 0 60px; }
  .mgrid { display: grid; grid-template-columns: 380px 1fr; gap: 60px; }
  .mside { position: sticky; top: 110px; align-self: start; }
  .mside h3 { font-size: 40px; line-height: 1.08; }
  .mside ul { list-style: none; padding: 0; margin: 30px 0 0; }
  .mside li a { display: block; padding: 11px 0 11px 16px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; font-size: 16px; }
  .mside li a.on { border-left-color: var(--ink); color: var(--ink); font-weight: 500; }
  .mpanels { display: grid; gap: 28px; }
  .mp { background: var(--white); border-radius: 16px; overflow: hidden; }
  .mp .vis { height: 300px; position: relative; overflow: hidden; }
  .mp .body { padding: 32px 36px 36px; }
  .mp h4 { font-family: var(--head); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
  .mp .body > p { color: var(--muted); margin: 10px 0 18px; max-width: 60ch; }
  .mp .facts { display: flex; gap: 28px; font-size: 14px; margin-bottom: 20px; }
  .mp .facts span { color: var(--muted); display: block; font-size: 12.5px; }
  .mp .stories { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
  .story { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; }
  .story p { margin: 0; font-size: 14.5px; font-weight: 500; grid-column: 1 / -1; }
  .story .num { font-family: var(--head); font-size: 28px; font-weight: 600; line-height: 1; }
  .story .num small { display: block; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 5px; }
  .story .tag { align-self: end; font-size: 12px; color: var(--muted); }
  /* model visuals: flat compositions of the creatives' own work, no stock photos */
  .comp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
  .comp .tile { width: 150px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5); color: var(--white); padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; font-family: var(--head); font-weight: 600; font-size: 15px; line-height: 1.15; }
  .comp .tile small { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10.5px; opacity: 0.75; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
  .comp .tile:nth-child(2) { translate: 0 -18px; } .comp .tile:nth-child(3) { translate: 0 10px; }
  .comp .doc { background: var(--white); color: var(--ink); border-radius: 10px; padding: 16px 18px; width: 250px; font-size: 13px; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5); }
  .comp .doc b { display: block; font-family: var(--head); font-size: 15px; margin-bottom: 8px; }
  .comp .doc div { display: flex; justify-content: space-between; gap: 18px; text-align: right; padding: 6px 0; border-top: 1px solid var(--line); }
  .comp .doc span { color: var(--muted); text-align: left; flex-shrink: 0; }

  /* for creatives row */
  .makers { padding: 60px 0 110px; }
  .makers .box { border-radius: 16px; background: var(--black); color: var(--white); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
  .makers .txt { padding: 56px; }
  .makers h3 { font-size: 40px; line-height: 1.08; }
  .makers p { color: var(--muted-dark); }
  .makers ul { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 10px; }
  .makers li { display: flex; gap: 10px; } .makers li svg { color: var(--gold); margin-top: 3px; }
  .makers .vis { position: relative; background: #0C0C0E; min-height: 420px; }

  /* template library */
  .library { padding: 110px 0; }
  .lhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
  .filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
  .filters button { border: 1px solid var(--line); background: var(--white); border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer; color: var(--ink); }
  .filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .lgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .item { text-align: left; background: none; border: none; padding: 0; cursor: pointer; color: inherit; }
  .item .cov { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; transition: transform 200ms ease-out; }
  .item .cov .cv { position: absolute; inset: 0; }
  .item:hover .cov, .item:focus-visible .cov { transform: scale(1.03); }
  .item .cov small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
  .item .cov b { font-family: var(--head); font-weight: 600; font-size: 20px; line-height: 1.12; margin-top: 4px; }
  .item h4 { font-family: var(--head); font-size: 16px; font-weight: 600; margin: 14px 0 2px; }
  .item .meta { font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; }

  /* licence drawer */
  .scrim { position: fixed; inset: 0; z-index: 60; background: rgba(5,5,6,0.5); display: flex; justify-content: flex-end; }
  .drawer { width: min(500px, 100%); height: 100%; overflow-y: auto; background: var(--white); padding: 30px 32px 40px; }
  .drawer .close { float: right; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); cursor: pointer; display: grid; place-items: center; }
  .drawer h3 { font-size: 28px; line-height: 1.1; margin: 22px 0 6px; }
  .drawer .by { color: var(--muted); font-size: 14px; }
  .drawer ul { padding-left: 18px; margin: 18px 0; color: var(--ink); font-size: 15px; }
  .drawer li { margin: 4px 0; }
  .tiers { display: grid; gap: 8px; margin: 20px 0; }
  .tiers label { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; cursor: pointer; }
  .tiers label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .tiers input { margin-top: 3px; accent-color: var(--ink); }
  .tiers b { display: block; font-weight: 600; } .tiers small { color: var(--muted); font-size: 13px; }
  .tiers .p { font-weight: 600; }
  .split { background: var(--grey); border-radius: 10px; padding: 16px 18px; font-size: 14px; }
  .split .bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin: 10px 0; }
  .split .bar i:first-child { background: var(--gold); } .split .bar i:last-child { background: var(--ink); }
  .split .rows { display: flex; justify-content: space-between; color: var(--muted); }
  .fine { font-size: 12.5px; color: var(--muted); }

  /* licensing model */
  .ipsec { padding: 110px 0; }
  .ipflow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-top: 50px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); }
  .ipflow > div { padding: 32px 32px 34px; position: relative; }
  .ipflow > div + div { border-left: 1px solid var(--line); }
  .ipflow .n { font-family: var(--head); color: var(--muted); font-size: 14px; }
  .ipflow h3 { font-size: 24px; margin: 10px 0 10px; }
  .ipflow p { color: var(--muted); margin: 0; }
  .ipflow .arrow { margin-top: 20px; font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
  .ipflow .mid { background: var(--black); color: var(--white); } .ipflow .mid p, .ipflow .mid .n { color: var(--muted-dark); }
  .notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
  .notes b { display: block; font-family: var(--head); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
  .notes p { margin: 0; color: var(--muted); font-size: 15px; }
  .notes a { color: var(--ink); }

  /* CTA band + trust */
  .band { padding: 110px 0 90px; text-align: left; }
  .band .wrap > div { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
  .trust { padding: 0 0 110px; }
  .trust .wrap { border-top: 1px solid var(--line-dark); padding-top: 70px; display: grid; grid-template-columns: 380px 1fr; gap: 60px; }
  .tlist { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 50px; }
  .tlist h3 { font-size: 22px; margin-bottom: 8px; }
  .tlist p { margin: 0; color: var(--muted-dark); font-size: 15px; }
  .tlist .soon { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--gold); }

  /* contact */
  .contact { padding: 110px 0; }
  .contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
  form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
  form .full { grid-column: 1 / -1; }
  form input, form select, form textarea { font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid #CFCFD6; border-radius: 8px; background: var(--white); color: var(--ink); }
  form textarea { min-height: 110px; resize: vertical; }
  form .send { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }

  footer { background: var(--black); color: var(--muted-dark); padding: 70px 0 40px; font-size: 14px; }
  footer .cols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 30px; }
  footer h4 { color: var(--white); font-size: 14px; font-weight: 600; margin: 0 0 14px; }
  footer .cols a { display: block; text-decoration: none; padding: 4px 0; }
  footer .cols a:hover { color: var(--white); }
  footer .bottom { display: flex; justify-content: space-between; border-top: 1px solid var(--line-dark); margin-top: 50px; padding-top: 24px; font-size: 13px; }
  footer .logo { color: var(--white); margin-bottom: 14px; }

  .toast { position: fixed; left: 50%; bottom: 28px; translate: -50% 0; z-index: 80; background: var(--ink); color: var(--white); padding: 12px 18px; border-radius: 8px; font-size: 14px; box-shadow: 0 16px 30px -12px rgba(0,0,0,0.5); }


  /* ---------- creative 30% ----------
     Kept to its own sections so the corporate structure stays clean: the hero fan, the
     "Work from the network" gallery, the discipline band, the creatives section and the
     library covers. Colours come from the creatives' industries. */
  :root { --cream: #F3EDE3; --serif: 'Fraunces', Georgia, serif; --cond: 'Barlow Condensed', 'Inter Tight', sans-serif; }
  .hero-wash { position: absolute; right: -8%; top: 8%; width: 58%; height: 84%; pointer-events: none; opacity: 0.55; filter: blur(60px);
    background: radial-gradient(circle at 30% 30%, #9C0018 0, transparent 38%), radial-gradient(circle at 70% 40%, #4B2E83 0, transparent 36%), radial-gradient(circle at 45% 75%, #B4541A 0, transparent 34%), radial-gradient(circle at 80% 80%, #2E6B5E 0, transparent 30%); }

  /* project cover styles, shared by the gallery and the library */
  .cv { position: relative; overflow: hidden; color: #FFFFFF; }
  .cv .in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8% 9%; }
  .cv.v0 .in { align-items: center; justify-content: center; text-align: center; }
  .cv.v0 b { font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 0.95; letter-spacing: 0.01em; }
  .cv.v1 .in { justify-content: flex-end; }
  .cv.v1 b { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 24px; line-height: 1.05; }
  .cv.v2 .in { align-items: center; justify-content: center; }
  .cv.v2 .mock { width: 72%; aspect-ratio: 16 / 10; background: #FFFFFF; color: var(--ink); border-radius: 6px; padding: 7%; display: flex; flex-direction: column; justify-content: space-between; rotate: -4deg; box-shadow: 0 16px 28px -12px rgba(0,0,0,0.55); }
  .cv.v2 .mock i { display: block; width: 36%; height: 5px; border-radius: 3px; }
  .cv.v2 .mock b { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 16px; line-height: 1.1; }
  .cv small { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; margin-bottom: 5px; }
  .cv.v0 small { margin: 0 0 8px; }

  /* gallery: two rows drifting in opposite directions; hover pauses the row and zooms a cover */
  .gallery { background: var(--cream); padding: 100px 0 90px; overflow: hidden; }
  .gallery .ghead { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
  .rowmove { display: flex; gap: 16px; width: max-content; padding: 18px 0; animation: drift 70s linear infinite; }
  .rowmove.rev { animation-direction: reverse; animation-duration: 80s; }
  .rowmove:hover { animation-play-state: paused; position: relative; z-index: 2; }
  @keyframes drift { to { transform: translateX(-50%); } }
  .gtile { flex-shrink: 0; width: 280px; aspect-ratio: 4 / 3; border-radius: 10px; transition: scale 220ms ease-out, box-shadow 220ms; cursor: pointer; border: none; padding: 0; }
  .gtile.tall { width: 210px; aspect-ratio: 3 / 4; }
  .gtile:hover, .gtile:focus-visible { scale: 1.25; z-index: 3; box-shadow: 0 24px 44px -18px rgba(0,0,0,0.5); outline: none; }
  .gtile .by { position: absolute; left: 10px; bottom: 9px; font-size: 11.5px; font-weight: 500; opacity: 0; transition: opacity 200ms; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
  .gtile:hover .by, .gtile:focus-visible .by { opacity: 1; }

  /* discipline band */
  .disc { background: var(--black); color: var(--white); padding: 90px 0; overflow: hidden; }
  .disc .words { font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: 96px; line-height: 0.95; letter-spacing: 0.005em; display: flex; flex-wrap: wrap; gap: 0 26px; }
  .disc .words span:nth-child(even) { font-family: var(--serif); font-style: italic; font-weight: 600; text-transform: none; font-size: 88px; }
  .disc .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 40px; color: var(--muted-dark); }
  .disc .foot p { max-width: 50ch; margin: 0; font-size: 17px; }

  /* creatives section: warm, collage of portraits */
  .makers .box.warm { background: #EFE3D1; color: var(--ink); }
  .makers .box.warm p { color: #5E554A; }
  .makers .box.warm li svg { color: var(--accent); }
  .makers .box.warm h3 { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 46px; letter-spacing: -0.01em; }
  .makers .box.warm .vis { background: #E5D5BE; }
  .collage { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 118px); gap: 16px; place-content: center; }
  .collage .pc { width: 118px; aspect-ratio: 3 / 4; border-radius: 9px; overflow: hidden; background: #FFFFFF; padding: 5px 5px 0; box-shadow: 0 14px 26px -14px rgba(0,0,0,0.45); }
  .collage .pc:nth-child(odd) { rotate: -3deg; } .collage .pc:nth-child(3n) { rotate: 4deg; translate: 0 10px; }
  .collage .pc svg { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; }
  .collage .pc span { display: block; font-size: 11px; font-weight: 600; padding: 6px 2px; line-height: 1.2; }

  @media (max-width: 1100px) { .disc .words { font-size: 56px; } .disc .words span:nth-child(even) { font-size: 52px; } }
  @media (prefers-reduced-motion: reduce) { .rowmove { animation: none; } .gallery .track { overflow-x: auto; } }

  @media (max-width: 1100px) {
    .wrap { width: calc(100% - 48px); }
    .nav nav { display: none; }
    .hero > .wrap, .how .panel, .makers .box, .contact .wrap, .trust .wrap, .mgrid { grid-template-columns: 1fr; }
    .mside { position: static; }
    .ipflow > div + div { border-left: none; border-top: 1px solid var(--line); }
    .lgrid { grid-template-columns: repeat(2, 1fr); }
    footer .cols { grid-template-columns: 1fr 1fr; }
    h1 { font-size: 44px; } h2 { font-size: 38px; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fcard, .item .cov { transition: none; } }

  /* ---------- multi-page additions ---------- */
  .phero { padding: 96px 0 80px; }
  .phero h1 { max-width: 18ch; }
  .explore { padding: 100px 0; }
  .explore .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
  .xcard { display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; background: var(--white); transition: border-color 150ms; }
  .xcard:hover { border-color: var(--ink); }
  .xcard h3 { font-size: 22px; }
  .xcard p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
  .xcard .go { align-self: flex-end; width: 38px; height: 38px; border-radius: 8px; background: var(--ink); color: var(--white); display: grid; place-items: center; }
  .how.solo { border-top: none; padding-top: 0; }
  .how.solo .panel { margin-top: 0; }
  .library.solo, .ipsec.solo { padding-top: 70px; }
  .makers.solo { padding-top: 70px; }
  .contact.solo { padding-top: 80px; }
  @media (max-width: 1100px) { .explore .grid { grid-template-columns: repeat(2, 1fr); } }

  /* hero fits the window: height follows the viewport, the fan scales to its stage (see fitFan) */
  .hero > .wrap { min-height: min(640px, calc(100vh - 72px)); padding: 24px 0 40px; }
  .stage { height: min(520px, calc(100vh - 150px)); min-height: 360px; }
  .fan, .fan-mid { scale: var(--fs, 1); }
  .float.matched { top: auto; bottom: 8%; right: 0; }
  .lbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 26px; }
  .lbar .filters { margin-bottom: 0; }

  /* ---------- Why Seaport ---------- */
  .why-hero { background-color: #101216; background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1.2px); background-size: 22px 22px; color: var(--white); }
  .why-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; min-height: min(640px, calc(100vh - 72px)); padding: 48px 0; }
  .why-hero .pill { display: inline-block; background: var(--gold); color: var(--ink); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 6px; }
  .why-hero h1 { font-size: 60px; font-weight: 700; line-height: 1.04; margin: 22px 0 18px; }
  .why-hero .lead { font-size: 18px; line-height: 1.6; color: #D4D4D8; max-width: 52ch; margin: 0; }
  .why-hero .lead b { color: var(--white); font-weight: 600; }
  .why-hero .ctas { display: flex; gap: 14px; margin-top: 34px; }
  .why-hero .made { display: flex; align-items: center; gap: 8px; margin: 30px 0 0; font-size: 14.5px; color: #B4B4BC; }
  .why-hero .made svg { color: var(--gold); width: 17px; height: 17px; }
  .why-visual { height: min(520px, calc(100vh - 220px)); min-height: 380px; border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; background: #0B0C0F; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); }
  .why-visual .cv { height: 100%; }
  .why-visual .cv.v0 b { font-size: 24px; } .why-visual .cv.v1 b { font-size: 20px; } .why-visual .cv.v2 .mock b { font-size: 13px; }
  .compare { padding: 100px 0 110px; }
  .ctable { margin-top: 36px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .crow { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 24px; padding: 20px 28px; border-top: 1px solid var(--line); align-items: center; font-size: 15.5px; }
  .crow:first-child { border-top: none; }
  .crow span:nth-child(2) { color: var(--muted); }
  .crow span:nth-child(3) { font-weight: 500; }
  .chead { background: var(--grey); font-size: 13px; font-weight: 600; color: var(--muted); padding: 14px 28px; }
  .chead span:nth-child(3) { color: var(--ink); }
  @media (max-width: 1100px) { .why-hero .wrap { grid-template-columns: 1fr; } .why-hero h1 { font-size: 44px; } .crow { grid-template-columns: 1fr; gap: 6px; } .chead { display: none; } }

  /* ---------- nav mega menus: open on hover or keyboard focus (Lifted layout) ---------- */
  .nav nav { gap: 4px; }
  .dd { position: relative; }
  .ddtop { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: #E4E4E7; transition: background 120ms; }
  .ddtop .chev { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 160ms; }
  .ddtop[aria-current="page"] { color: var(--white); font-weight: 500; }
  .dd.open .ddtop { background: rgba(255,255,255,0.1); color: var(--white); }
  .dd.open .ddtop .chev { transform: rotate(180deg); }
  .mega { position: absolute; left: 0; top: calc(100% + 10px); display: none; background: var(--white); color: var(--ink); border-radius: 14px; box-shadow: 0 24px 50px -18px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.04); z-index: 50; }
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* keeps hover alive across the gap */
  .dd.open .mega { display: flex; animation: megaIn 140ms ease-out; }
  @keyframes megaIn { from { opacity: 0; transform: translateY(-4px); } }
  .mcol { padding: 26px 30px 18px; min-width: 330px; }
  .mcol + .mcol { border-left: 1px solid var(--line); }
  .mlab { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6F6F78; margin: 0 0 12px 10px; }
  .mega a { display: block; padding: 11px 10px; border-radius: 8px; text-decoration: none; }
  .mega a:hover, .mega a:focus-visible { background: var(--grey); }
  .mega a b { display: block; font-weight: 500; font-size: 16.5px; }
  .mega a span { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
  .dd:nth-last-child(-n+2) .mega { left: auto; right: 0; } /* the last menus open leftwards so they stay on screen */
  .nav .mega a, .nav .mega a:hover { color: var(--ink); }
  .nav .mega a span { color: var(--muted); }

  /* ---------- lifecycle tabs (home) ---------- */
  .life { padding: 100px 0 110px; }
  /* step names as plain text tabs; the active one is underlined */
  .lbar2 { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 36px 0 22px; border-bottom: 1px solid var(--line); }
  .ltabs { display: flex; gap: 34px; }
  .ltabs button { position: relative; border: none; background: none; padding: 14px 0 16px; cursor: pointer; font-family: var(--head); font-size: 17px; font-weight: 500; color: var(--muted); }
  .ltabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 250ms ease-out; }
  .ltabs button:hover { color: var(--ink); }
  .ltabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
  .ltabs button[aria-selected="true"]::after { transform: scaleX(1); }
  .larrows { display: flex; gap: 8px; }
  .larrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #C9C9D1; background: var(--white); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
  .larrow:hover { border-color: var(--ink); }
  .larrow:disabled { opacity: 0.35; cursor: default; }
  .larrow svg { width: 18px; height: 18px; }
  /* the slider: every step is a full-width slide that snaps into place */
  .ltrack { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
  .ltrack::-webkit-scrollbar { display: none; }
  .ltrack.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .ltrack .lpanel { flex: 0 0 100%; scroll-snap-align: start; }
  .lpanel { background: var(--white); border-radius: 20px; padding: 40px; display: grid; grid-template-columns: 1fr 1.12fr; gap: 48px; min-height: 480px; }
  .lpanel .txt { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding-top: 8px; }
  .lpanel .eb { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .lpanel .eb svg { width: 18px; height: 18px; }
  .lpanel h3 { font-size: 34px; line-height: 1.1; margin: 14px 0 12px; }
  .lpanel p { color: var(--muted); font-size: 17px; margin: 0; max-width: 44ch; }
  .lpanel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-size: 15px; }
  .lpanel li { display: flex; gap: 12px; } .lpanel li svg { width: 18px; height: 18px; margin-top: 2px; }
  .lphoto { position: relative; border-radius: 14px; overflow: hidden; min-height: 420px; background: #D9D9DE; }
  .lphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .lphoto .credit { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: rgba(255,255,255,0.85); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
  .lphoto .credit a { color: inherit; }
  /* floating UI cards over the photo */
  .lfloat { position: absolute; right: 22px; bottom: 22px; width: min(310px, 78%); display: grid; gap: 8px; }
  .lchip { justify-self: end; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.95); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 500; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.5); }
  .lchip svg { width: 16px; height: 16px; }
  .lcard { background: var(--white); border-radius: 12px; padding: 14px 16px; font-size: 13px; box-shadow: 0 18px 36px -14px rgba(0,0,0,0.55); }
  .lcard > b { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 8px; }
  .lcard .r { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-top: 1px solid var(--line); }
  .lcard .r span { color: var(--muted); }
  .lcard .ppl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .lcard .pp { border: 1px solid var(--line); border-radius: 8px; padding: 8px 6px; text-align: center; font-size: 11.5px; line-height: 1.25; }
  .lcard .pp svg { width: 40px; height: 40px; border-radius: 50%; display: block; margin: 0 auto 6px; }
  .lcard .pp small { color: var(--muted); display: block; }
  .lbtn { justify-self: center; background: var(--accent); color: var(--white); border-radius: 999px; padding: 10px 40px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 22px -10px rgba(176,0,28,0.8); }
  .lcard .bar { display: flex; height: 7px; border-radius: 99px; overflow: hidden; margin: 8px 0 6px; }
  .lcard .bar i:first-child { background: var(--gold); } .lcard .bar i:last-child { background: var(--ink); }
  @media (max-width: 1100px) { .ltabs { gap: 20px; overflow-x: auto; } .ltabs button { font-size: 15px; white-space: nowrap; } .lpanel { grid-template-columns: 1fr; } }

  /* ---------- themes: data-theme="light" (white version) or "dark", set on <html> ---------- */
  .nav .right { align-items: center; }
  .themebox { display: flex; gap: 2px; padding: 3px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.22); margin-right: 6px; }
  .themebox button { width: 32px; height: 32px; border: none; border-radius: 7px; background: none; color: #A1A1AA; cursor: pointer; display: grid; place-items: center; }
  .themebox svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .themebox button[aria-pressed="true"] { background: rgba(255,255,255,0.14); color: var(--white); }
  .themebox button:hover { color: var(--white); }
  html { color-scheme: light; }
  body, .nav, .dark, .grey, .xcard, .mp, .lpanel, .ctable, .ipflow > div, .drawer, .mega, footer { transition: background-color 200ms, color 200ms, border-color 200ms; }

  /* ---- white version: the black bands turn light ---- */
  html[data-theme="light"] .nav { background: rgba(255,255,255,0.94); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
  html[data-theme="light"] .ddtop { color: #3F3F46; }
  html[data-theme="light"] .ddtop[aria-current="page"], html[data-theme="light"] .dd.open .ddtop { color: var(--ink); }
  html[data-theme="light"] .dd.open .ddtop { background: #EFEFF2; }
  html[data-theme="light"] .nav .btn.white { background: var(--ink); color: var(--white); }
  html[data-theme="light"] .themebox { border-color: var(--line); }
  html[data-theme="light"] .themebox button { color: #71717A; }
  html[data-theme="light"] .themebox button[aria-pressed="true"] { background: #EFEFF2; color: var(--ink); }
  html[data-theme="light"] .themebox button:hover { color: var(--ink); }
  html[data-theme="light"] .dark { background: #F5F5F7; color: var(--ink); }
  html[data-theme="light"] .hero.dark { background: #FAFAFB; }
  html[data-theme="light"] .dark .sub, html[data-theme="light"] .disc .foot, html[data-theme="light"] .tlist p { color: var(--muted); }
  html[data-theme="light"] .dark .btn.outline { border-color: #C9C9D1; color: var(--ink); }
  html[data-theme="light"] .dark .btn.outline:hover { border-color: var(--ink); }
  html[data-theme="light"] .dark .btn.white { background: var(--ink); color: var(--white); }
  html[data-theme="light"] .fan-mid span { color: var(--muted); }
  html[data-theme="light"] .hero-wash { opacity: 0.28; }
  html[data-theme="light"] .phero { background: #F5F5F7; border-bottom: 1px solid var(--line); }
  html[data-theme="light"] .disc { background: var(--white); }
  html[data-theme="light"] .disc .words span[style*="#C9B79C"] { color: #8C6A12 !important; }
  html[data-theme="light"] .trust .wrap { border-top-color: var(--line); }
  html[data-theme="light"] .why-hero { background-color: #F5F5F7; background-image: radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1.2px); color: var(--ink); }
  html[data-theme="light"] .why-hero .lead { color: var(--muted); }
  html[data-theme="light"] .why-hero .lead b { color: var(--ink); }
  html[data-theme="light"] .why-hero .made { color: var(--muted); }
  html[data-theme="light"] .why-hero .btn.outline { border-color: #C9C9D1; color: var(--ink); }

  /* ---- dark mode: the light sections and cards turn dark ---- */
  html[data-theme="dark"] { color-scheme: dark; }
  html[data-theme="dark"] body { background: #0B0B0D; color: #EDEDF0; }
  html[data-theme="dark"] .grey, html[data-theme="dark"] .gallery { background: #121215; }
  html[data-theme="dark"] .sub, html[data-theme="dark"] .mp .body > p, html[data-theme="dark"] .mp .facts span, html[data-theme="dark"] .story .num small, html[data-theme="dark"] .story .tag,
  html[data-theme="dark"] .xcard p, html[data-theme="dark"] .item .meta, html[data-theme="dark"] .ipflow p, html[data-theme="dark"] .notes p, html[data-theme="dark"] .lpanel p,
  html[data-theme="dark"] .lpanel .eb, html[data-theme="dark"] .crow span:nth-child(2), html[data-theme="dark"] .fine, html[data-theme="dark"] .drawer .by, html[data-theme="dark"] .tiers small { color: #A1A1AA; }
  html[data-theme="dark"] .xcard, html[data-theme="dark"] .mp, html[data-theme="dark"] .lpanel, html[data-theme="dark"] .ctable, html[data-theme="dark"] .ipflow,
  html[data-theme="dark"] .drawer { background: #18181B; border-color: rgba(255,255,255,0.1); color: #EDEDF0; }
  html[data-theme="dark"] .ipflow > div + div, html[data-theme="dark"] .crow, html[data-theme="dark"] .story, html[data-theme="dark"] .tiers label, html[data-theme="dark"] .mcol + .mcol { border-color: rgba(255,255,255,0.1); }
  html[data-theme="dark"] .ipflow .mid { background: #0B0B0D; }
  html[data-theme="dark"] .xcard:hover { border-color: rgba(255,255,255,0.5); }
  html[data-theme="dark"] .xcard .go { background: #EDEDF0; color: #0B0B0D; }
  html[data-theme="dark"] .chead { background: #202024; color: #A1A1AA; }
  html[data-theme="dark"] .chead span:nth-child(3) { color: #EDEDF0; }
  html[data-theme="dark"] .notes a, html[data-theme="dark"] .link { color: #EDEDF0; }
  html[data-theme="dark"] .filters button { background: #18181B; border-color: rgba(255,255,255,0.14); color: #EDEDF0; }
  html[data-theme="dark"] .filters button[aria-pressed="true"] { background: #EDEDF0; border-color: #EDEDF0; color: #0B0B0D; }
  html[data-theme="dark"] .ltabs button { color: #A1A1AA; }
  html[data-theme="dark"] .ltabs button[aria-selected="true"] { color: #EDEDF0; }
  html[data-theme="dark"] .makers .box.warm { background: #231E18; color: #EDEDF0; }
  html[data-theme="dark"] .makers .box.warm p { color: #BDB3A5; }
  html[data-theme="dark"] .makers .box.warm .vis { background: #2C251D; }
  html[data-theme="dark"] .mside li a { color: #A1A1AA; border-left-color: rgba(255,255,255,0.14); }
  html[data-theme="dark"] .mside li a.on { color: #EDEDF0; border-left-color: #EDEDF0; }
  html[data-theme="dark"] .mega { background: #18181B; box-shadow: 0 24px 50px -18px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08); }
  html[data-theme="dark"] .nav .mega a, html[data-theme="dark"] .nav .mega a:hover { color: #EDEDF0; }
  html[data-theme="dark"] .nav .mega a span, html[data-theme="dark"] .mlab { color: #A1A1AA; }
  html[data-theme="dark"] .mega a:hover, html[data-theme="dark"] .mega a:focus-visible { background: #232327; }
  html[data-theme="dark"] form input, html[data-theme="dark"] form select, html[data-theme="dark"] form textarea { background: #18181B; border-color: #3A3A40; color: #EDEDF0; }
  html[data-theme="dark"] .split { background: #232327; }
  html[data-theme="dark"] .split .bar i:last-child { background: #EDEDF0; }
  html[data-theme="dark"] .tiers label:has(input:checked) { border-color: #EDEDF0; box-shadow: inset 0 0 0 1px #EDEDF0; }
  html[data-theme="dark"] .drawer .close { background: #232327; border-color: rgba(255,255,255,0.14); color: #EDEDF0; }
  html[data-theme="dark"] .btn.outline-dark { background: #18181B; border-color: rgba(255,255,255,0.14); color: #EDEDF0; }
  html[data-theme="dark"] .comp { filter: brightness(0.92); }
  html[data-theme="dark"] .toast { background: #EDEDF0; color: #0B0B0D; }
  .fface b { color: #F4F1EB; } /* names stay light on the dark cards in both themes */
  /* white UI cards over photos and in collages keep dark text in both themes */
  .lcard, .lchip, .collage .pc { color: var(--ink); }

  /* ---------- photo backgrounds (Unsplash): photo in ::before, readability shade in ::after ---------- */
  .photo-bg { position: relative; isolation: isolate; overflow: hidden; color: var(--white); }
  .photo-bg::before { content: ""; position: absolute; inset: 0; z-index: -2; background: #111 var(--img) center / cover no-repeat; }
  .photo-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,5,6,0.9) 0%, rgba(5,5,6,0.72) 38%, rgba(5,5,6,0.3) 72%, rgba(5,5,6,0.15) 100%); }
  .phero.photo-bg::after { background: linear-gradient(90deg, rgba(5,5,6,0.88) 0%, rgba(5,5,6,0.6) 50%, rgba(5,5,6,0.35) 100%); }
  .disc.photo-bg::after { background: rgba(5,5,6,0.8); }
  .photo-bg .sub { color: #E4E4E7; }
  .pcredit { position: absolute; right: 16px; bottom: 12px; font-size: 11px; color: rgba(255,255,255,0.75); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
  .pcredit a { color: inherit; }
  .hero.photo-bg > .wrap { grid-template-columns: minmax(0, 640px); min-height: min(680px, calc(100vh - 72px)); }
  .phero.photo-bg { padding: 130px 0 110px; }
  .why-visual.photo { display: block; position: relative; }
  .why-visual.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* photo sections stay light-on-dark in the white version too */
  html[data-theme="light"] .dark.photo-bg, html[data-theme="light"] .disc.photo-bg { color: var(--white); }
  html[data-theme="light"] .photo-bg .sub, html[data-theme="light"] .disc.photo-bg .foot { color: #E4E4E7; }
  html[data-theme="light"] .photo-bg .btn.outline { border-color: rgba(255,255,255,0.6); color: var(--white); }
  html[data-theme="light"] .photo-bg .btn.white { background: var(--white); color: var(--ink); }
  html[data-theme="light"] .disc.photo-bg .words span[style*="#C9B79C"] { color: #C9B79C !important; }
  html[data-theme="light"] .phero.photo-bg { border-bottom: none; }
  /* small screens: keep the nav inside the window and let the band's text use the full width */
  @media (max-width: 1100px) { .disc .foot { flex-direction: column; align-items: flex-start; } }
  @media (max-width: 700px) { .nav .wrap { gap: 12px; } .nav .right .btn.white { display: none; } .wrap { width: calc(100% - 32px); } .hero h1, .phero h1 { font-size: 38px; } }
  html[data-theme="dark"] .lbar2 { border-bottom-color: rgba(255,255,255,0.12); }
  html[data-theme="dark"] .larrow { background: #18181B; border-color: #3A3A40; color: #EDEDF0; }
  html[data-theme="dark"] .larrow:hover { border-color: #EDEDF0; }
  .ltabs { scrollbar-width: none; } .ltabs::-webkit-scrollbar { display: none; }
  /* footer stays black in both themes */

  /* ---------- side pop-ups: slide in from the left, icon pops, text types letter by letter ---------- */
  .type.typing::after { content: ""; display: inline-block; width: 2px; height: 0.9em; margin-left: 3px; vertical-align: -0.08em; background: currentColor; animation: caret 700ms steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
  @keyframes iconPop { 0% { transform: scale(0.3); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
  /* gallery: the heading sits on the pictures */
  .gallery { padding: 70px 0; }
  .gstage { position: relative; }
  .gpop { position: absolute; z-index: 4; left: max(24px, calc((100% - 1280px) / 2)); top: 50%; width: min(470px, calc(100% - 48px)); display: flex; gap: 18px; align-items: flex-start;
    background: rgba(255,255,255,0.96); color: var(--ink); border-radius: 18px; padding: 26px 28px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.45);
    transform: translate(-40px, -50%); opacity: 0; transition: transform 600ms cubic-bezier(.2,1,.3,1), opacity 400ms; }
  .gpop.show { transform: translate(0, -50%); opacity: 1; }
  .gpop .pic, .lpop .pic { flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--white); transform: scale(0); }
  .gpop .pic { width: 48px; height: 48px; }
  .gpop.show .pic, .lpop.show .pic { animation: iconPop 480ms cubic-bezier(.2,1.4,.4,1) 250ms forwards; }
  .gpop h2 { font-size: 36px; line-height: 1.08; min-height: 1.08em; }
  .gpop .sub { margin-top: 10px; font-size: 16px; color: var(--muted); }
  .gpop .link { margin-top: 14px; color: var(--ink); }
  .gpop .after { opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 400ms; }
  .gpop.done .after { opacity: 1; transform: none; }
  .gpop.done .link { transition-delay: 120ms; }
  /* lifecycle photos: a small pop-up badge */
  .lpop { position: absolute; left: 18px; top: 18px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.96); color: var(--ink); border-radius: 999px; padding: 7px 18px 7px 7px;
    font-family: var(--head); font-size: 16px; font-weight: 600; box-shadow: 0 14px 30px -12px rgba(0,0,0,0.55); transform: translateX(-30px); opacity: 0; transition: transform 500ms cubic-bezier(.2,1,.3,1), opacity 300ms; }
  .lpop.show { transform: none; opacity: 1; }
  .lpop .pic { width: 34px; height: 34px; }
  .lpop .pic svg, .gpop .pic svg { width: 18px; height: 18px; }
  .lpop .type { min-width: 1ch; white-space: nowrap; }
  html[data-theme="dark"] .gpop, html[data-theme="dark"] .lpop { background: rgba(24,24,27,0.96); color: #EDEDF0; }
  html[data-theme="dark"] .gpop .sub { color: #A1A1AA; }
  html[data-theme="dark"] .gpop .link { color: #EDEDF0; }
  @media (max-width: 700px) { .gpop { position: relative; top: auto; left: auto; margin: 0 16px 20px; width: auto; transform: translateX(-30px); } .gpop.show { transform: none; } .gstage { display: flex; flex-direction: column-reverse; } .gpop h2 { font-size: 28px; } }
  @media (prefers-reduced-motion: reduce) { .gpop, .lpop, .gpop .after { transition: none; } .gpop.show .pic, .lpop.show .pic { animation: none; transform: none; } }

  /* ---------- feature panels (PlanHub-style): each sticks, the next slides up over it ---------- */
  .features { position: relative; }
  .fx { position: sticky; top: 72px; z-index: calc(1 + var(--i)); min-height: min(720px, calc(100vh - 72px)); display: flex; align-items: center; background: var(--white); }
  .fx + .fx { border-top: 1px solid var(--line); box-shadow: 0 -24px 40px -30px rgba(0,0,0,0.35); border-radius: 22px 22px 0 0; }
  .fx:nth-child(even) { background: #F7F7F9; }
  .fxin { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; padding: 56px 0; }
  .fxeb { font-family: var(--head); font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .fx h2 { font-size: 40px; line-height: 1.1; margin: 8px 0 18px; }
  .fxsub { font-family: var(--head); font-size: 22px; font-weight: 600; margin: 0 0 22px; }
  .fxul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; font-size: 17px; line-height: 1.55; color: #3F3F46; }
  .fxul li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
  .fxul b { color: var(--ink); font-weight: 600; }
  .hex { width: 16px; height: 18px; margin-top: 4px; background: var(--accent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0.85; }
  .fxlink { font-family: var(--head); font-size: 18px; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
  .fxlink:hover { text-decoration: underline; text-underline-offset: 4px; }
  /* text eases in as each panel arrives */
  .fx .fxt > * { opacity: 0; transform: translateY(18px); transition: opacity 500ms, transform 500ms cubic-bezier(.2,1,.3,1); }
  .fx.in .fxt > * { opacity: 1; transform: none; }
  .fx.in .fxt > :nth-child(2) { transition-delay: 80ms; } .fx.in .fxt > :nth-child(3) { transition-delay: 160ms; } .fx.in .fxt > :nth-child(4) { transition-delay: 240ms; } .fx.in .fxt > :nth-child(5) { transition-delay: 320ms; }
  .fx .app { opacity: 0; transform: translateX(-24px); transition: opacity 600ms, transform 600ms cubic-bezier(.2,1,.3,1); }
  .fx.in .app { opacity: 1; transform: none; }

  /* ---------- drawn app screens ---------- */
  .app { display: grid; grid-template-columns: 150px 1fr; height: 420px; border-radius: 12px; overflow: hidden; background: #FFFFFF; color: var(--ink); font-size: 11.5px; line-height: 1.3;
    box-shadow: 0 50px 90px -40px rgba(176,0,28,0.45), 0 24px 50px -24px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06); }
  .app .side { background: #141417; color: #D4D4D8; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
  .app .side .lg { display: flex; align-items: center; gap: 6px; font-family: var(--head); font-weight: 700; font-size: 14px; color: #FFFFFF; margin: 2px 4px 14px; }
  .app .side .lg img { height: 16px; }
  .app .side .it { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 7px; }
  .app .side .it svg { width: 13px; height: 13px; }
  .app .side .it.on { background: var(--accent); color: #FFFFFF; font-weight: 600; }
  .app .side .lab { font-size: 9px; letter-spacing: 0.1em; color: #8A8A93; margin: 10px 8px 4px; }
  .app .main { background: #F7F7F9; padding: 16px 18px; overflow: hidden; }
  .app .ttl { font-family: var(--head); font-size: 16px; font-weight: 600; margin-bottom: 10px; }
  .app .bar { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid #E4E4E8; border-radius: 8px; padding: 7px 8px; margin-bottom: 10px; }
  .app .srch { flex: 1; color: #71717A; border: 1px solid #E4E4E8; border-radius: 6px; padding: 5px 8px; }
  .app .pill { border-radius: 999px; padding: 4px 9px; font-weight: 600; font-size: 10.5px; white-space: nowrap; }
  .app .pill.red { background: var(--accent); color: #FFFFFF; } .app .pill.soft { background: #F6E3E5; color: var(--accent); } .app .pill.ok { background: #E7F6EC; color: #11652F; } .app .pill.gr { background: #EEF0F3; color: #52525B; }
  .app .row { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; align-items: center; background: #FFFFFF; border: 1px solid #ECECEF; border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; opacity: 0; transform: translateY(6px); transition: opacity 350ms, transform 350ms; }
  .fx.in .app .row { opacity: 1; transform: none; }
  .app .row .av { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; } .app .row .av svg { width: 100%; height: 100%; display: block; }
  .app .row small { color: #71717A; display: block; }
  .app .star { color: #A1A1AA; width: 14px; height: 14px; }
  .app .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .app .grid .cv { aspect-ratio: 4 / 3; border-radius: 7px; }
  .app .grid .cv b { font-size: 12px !important; } .app .grid .cv small { font-size: 8px; } .app .grid .cv.v2 .mock b { font-size: 9px !important; } .app .grid .cv.v2 .mock { padding: 6%; } .app .grid .cv .in { padding: 8%; }
  .app table { width: 100%; border-collapse: separate; border-spacing: 0 5px; }
  .app th { text-align: left; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #8A8A93; font-weight: 600; padding: 0 8px; }
  .app td { background: #FFFFFF; padding: 8px; border-top: 1px solid #ECECEF; border-bottom: 1px solid #ECECEF; }
  .app td:first-child { border-left: 1px solid #ECECEF; border-radius: 7px 0 0 7px; font-family: var(--head); font-weight: 600; }
  .app td:last-child { border-right: 1px solid #ECECEF; border-radius: 0 7px 7px 0; }
  .app .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
  .app .kpi { background: #FFFFFF; border: 1px solid #ECECEF; border-radius: 8px; padding: 9px 10px; }
  .app .kpi b { display: block; font-family: var(--head); font-size: 18px; margin-top: 3px; }
  .app .kpi small { color: #71717A; }
  .app .chart { background: #FFFFFF; border: 1px solid #ECECEF; border-radius: 8px; padding: 10px 12px 8px; height: 150px; display: flex; align-items: flex-end; gap: 8px; }
  .app .chart i { flex: 1; background: linear-gradient(#D93A52, var(--accent)); border-radius: 4px 4px 0 0; height: 0; transition: height 700ms cubic-bezier(.2,1,.3,1); }
  .app .chart i:nth-child(even) { background: linear-gradient(#E8C45A, var(--gold)); }
  .app .chart span { font-size: 9px; color: #8A8A93; }
  html[data-theme="dark"] .fx { background: #0B0B0D; } html[data-theme="dark"] .fx:nth-child(even) { background: #121215; }
  html[data-theme="dark"] .fx + .fx { border-top-color: rgba(255,255,255,0.1); }
  html[data-theme="dark"] .fxul { color: #C4C4CC; } html[data-theme="dark"] .fxul b { color: #EDEDF0; }
  @media (max-width: 1000px) { .fx { position: relative; top: auto; min-height: 0; border-radius: 0 !important; box-shadow: none !important; } .fxin { grid-template-columns: 1fr; gap: 36px; } .fx h2 { font-size: 32px; } }
  @media (max-width: 700px) { .app { grid-template-columns: 1fr; height: auto; } .app .side { display: none; } }
  @media (prefers-reduced-motion: reduce) { .fx .fxt > *, .fx .app, .app .row, .app .chart i { transition: none; opacity: 1; transform: none; } }

  /* ---------- Licensing page (Shutterstock / Envato licence-page pattern) ---------- */
  .lic-glance, .lic-compare, .lic-sides, .lic-faq { padding: 100px 0; }
  .lic-flow, .lic-record { padding: 100px 0; }
  .glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 44px; }
  .glance .gi { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #F6E3E5; color: var(--accent); margin-bottom: 18px; }
  .glance .gi svg { width: 24px; height: 24px; }
  .glance h3 { font-size: 20px; margin-bottom: 8px; }
  .glance p { margin: 0; color: var(--muted); font-size: 15.5px; }
  .lflow { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
  .lflow li { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px 26px; display: flex; flex-direction: column; }
  .lflow li:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 50%; width: 12px; height: 12px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-50%) rotate(45deg); z-index: 1; }
  .lflow li.core { background: var(--black); color: var(--white); border-color: var(--black); }
  .lflow .st { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #F6E3E5; color: var(--accent); font-family: var(--head); font-weight: 700; margin-bottom: 16px; }
  .lflow li.core .st { background: var(--accent); color: var(--white); }
  .lflow h3 { font-size: 22px; margin-bottom: 8px; }
  .lflow p { margin: 0 0 18px; color: var(--muted); flex: 1; }
  .lflow li.core p { color: #C4C4CC; }
  .lflow .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
  .lflow li.core .tag { color: #FF8A94; }
  .lflow .tag svg { width: 15px; height: 15px; }
  .money { margin-top: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px 28px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px 32px; align-items: center; }
  .money .mtxt b { display: block; font-family: var(--head); font-size: 18px; } .money .mtxt span { color: var(--muted); font-size: 15px; }
  .mbar { display: flex; height: 44px; border-radius: 10px; overflow: hidden; font-size: 13px; font-weight: 600; }
  .mbar i { display: flex; align-items: center; padding: 0 14px; color: var(--white); font-style: normal; }
  .mbar i:first-child { background: var(--gold); color: var(--ink); } .mbar i:last-child { background: var(--ink); }
  .money .fine { grid-column: 2; margin: 0; }
  .ltable { margin-top: 40px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
  .lr { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); border-top: 1px solid var(--line); }
  .lr:first-child { border-top: none; }
  .lr > span { padding: 16px 18px; font-size: 14.5px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
  .lr > span[role="rowheader"] { font-weight: 600; background: #FAFAFB; }
  .lr small { color: var(--muted); font-size: 12.5px; }
  .lh > span { padding: 20px 18px; background: #FAFAFB; }
  .lh b { font-family: var(--head); font-size: 19px; }
  .lr .hl { background: #FFF6F7; }
  .lh .hl { background: var(--accent); color: var(--white); } .lh .hl small { color: rgba(255,255,255,0.8); }
  .yes { width: 26px; height: 26px; border-radius: 50%; background: #E7F6EC; color: #11652F; display: grid; place-items: center; }
  .yes svg { width: 15px; height: 15px; stroke-width: 3; }
  .no { font-size: 18px; color: #A1A1AA; line-height: 1; }
  .lf > span { padding-top: 18px; padding-bottom: 20px; }
  .recgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .fields { margin: 30px 0 0; display: grid; gap: 0; }
  .fields div { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); }
  .fields dt { font-weight: 600; } .fields dd { margin: 0; color: var(--muted); }
  .licdoc { background: var(--white); color: var(--ink); border-radius: 16px; padding: 26px 28px; box-shadow: 0 40px 80px -40px rgba(176,0,28,0.4), 0 20px 40px -24px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.05); font-size: 14.5px; }
  .licdoc .lhd { display: flex; justify-content: space-between; align-items: center; font-family: var(--head); font-size: 20px; font-weight: 600; margin-bottom: 12px; }
  .licdoc .lrow { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid var(--line); }
  .licdoc .lrow span { color: var(--muted); }
  .licdoc .lsig { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #D6D6DC; color: #11652F; font-weight: 600; font-size: 13.5px; }
  .licdoc .lsig svg { width: 17px; height: 17px; }
  .sides { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .side-c { border-radius: 20px; padding: 40px; background: var(--black); color: var(--white); }
  .side-c.warmside { background: #EFE3D1; color: var(--ink); }
  .side-c h2 { font-size: 34px; margin-bottom: 20px; }
  .side-c ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; font-size: 16px; }
  .side-c li { display: flex; gap: 10px; } .side-c li svg { color: var(--gold); margin-top: 3px; }
  .side-c.warmside li svg { color: var(--accent); }
  .faqgrid { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 60px; align-items: start; }
  .faq details { border-top: 1px solid var(--line); }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-family: var(--head); font-size: 18px; font-weight: 600; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--accent); transition: transform 200ms; }
  .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
  .faq details p { margin: 0 0 20px; color: var(--muted); max-width: 64ch; }
  html[data-theme="dark"] .lflow li, html[data-theme="dark"] .money, html[data-theme="dark"] .ltable { background: #18181B; border-color: rgba(255,255,255,0.1); }
  html[data-theme="dark"] .lflow li.core { background: #050506; }
  html[data-theme="dark"] .lr { border-top-color: rgba(255,255,255,0.1); }
  html[data-theme="dark"] .lr > span[role="rowheader"], html[data-theme="dark"] .lh > span { background: #1F1F23; }
  html[data-theme="dark"] .lr .hl { background: #241317; } html[data-theme="dark"] .lh .hl { background: var(--accent); }
  html[data-theme="dark"] .glance .gi, html[data-theme="dark"] .lflow .st { background: #2A1418; color: #FF8A94; }
  html[data-theme="dark"] .fields div, html[data-theme="dark"] .faq details { border-color: rgba(255,255,255,0.12); }
  html[data-theme="dark"] .side-c.warmside { background: #231E18; color: #EDEDF0; }
  html[data-theme="dark"] .mbar i:last-child { background: #EDEDF0; color: #0B0B0D; }
  @media (max-width: 1100px) { .glance { grid-template-columns: repeat(2, 1fr); } .lflow, .recgrid, .sides, .faqgrid, .money { grid-template-columns: 1fr; } .lflow li::after { display: none; } .money .fine { grid-column: 1; }
    .ltable { overflow-x: auto; } .lr { min-width: 820px; } }

  /* feature panels as one sideways swipe section (replaces the sticky stack) */
  .features { padding: 70px 0 30px; }
  .fbar { margin: 0 auto 22px; }
  .ftrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
  .ftrack::-webkit-scrollbar { display: none; }
  .ftrack.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .ftrack .fx { position: relative; top: auto; z-index: auto; flex: 0 0 100%; min-height: 0; scroll-snap-align: start; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; }
  .ftrack .fxin { padding: 30px 0 60px; }
  .ftrack img { -webkit-user-drag: none; }

  /* ---------- Getting started: two-sided switch + three numbered step cards ---------- */
  .howit { padding: 100px 0 90px; }
  .hhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
  .hhead h2 { font-size: 44px; }
  .hhead .sub { margin-top: 10px; }
  .seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: #EFEFF2; border-radius: 12px; padding: 5px; }
  .seg-ind { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 9px; background: var(--accent); box-shadow: 0 8px 18px -8px rgba(176,0,28,0.7); transition: transform 280ms cubic-bezier(.2,1,.3,1); }
  .seg[data-on="1"] .seg-ind { transform: translateX(100%); }
  .seg button { position: relative; z-index: 1; border: none; background: none; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; color: #52525B; transition: color 200ms; white-space: nowrap; }
  .seg button[aria-selected="true"] { color: var(--white); }
  .hcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; animation: hcIn 350ms ease-out; }
  @keyframes hcIn { from { opacity: 0; transform: translateY(8px); } }
  .hcard { text-decoration: none; color: inherit; display: block; border-radius: 22px; padding: 10px 10px 22px; transition: background 200ms; }
  .hcard:hover { background: #F5F5F7; }
  .hmedia { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #EEE; }
  .hmedia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease-out; }
  .hcard:hover .hmedia img { transform: scale(1.04); }
  .stepno { position: absolute; left: 14px; top: 14px; z-index: 2; font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; background: rgba(255,255,255,0.92); color: var(--ink); border-radius: 8px; padding: 6px 9px; }
  .hcard h3 { font-family: var(--head); font-size: 22px; font-weight: 600; margin: 18px 6px 6px; }
  .hcard p { margin: 0 6px; color: var(--muted); font-size: 15px; }
  .brandcard { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 24px; background: radial-gradient(circle at 85% 15%, rgba(176,0,28,0.9) 0%, transparent 55%), radial-gradient(circle at 10% 110%, rgba(212,168,50,0.35) 0%, transparent 45%), #141417; color: var(--white); }
  .brandcard .stepno { background: rgba(255,255,255,0.14); color: var(--white); }
  .brandcard .bl { position: absolute; right: 22px; top: 20px; width: 64px; height: auto; transition: transform 300ms; }
  .brandcard .bc { font-family: var(--head); font-size: 26px; font-weight: 600; }
  .brandcard .go { position: absolute; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; transition: transform 250ms; }
  .brandcard .go svg { width: 20px; height: 20px; }
  .hcard:hover .brandcard .go { transform: rotate(45deg); }
  .hcard:hover .brandcard .bl { transform: rotate(-8deg) scale(1.06); }
  html[data-theme="dark"] .seg { background: #1F1F23; } html[data-theme="dark"] .seg button { color: #A1A1AA; } html[data-theme="dark"] .seg button[aria-selected="true"] { color: var(--white); }
  html[data-theme="dark"] .hcard:hover { background: #18181B; }
  @media (max-width: 1000px) { .hcards { grid-template-columns: 1fr; } .hhead { flex-direction: column; align-items: flex-start; } }
  @media (prefers-reduced-motion: reduce) { .hcards { animation: none; } .hmedia img, .brandcard .bl, .brandcard .go, .seg-ind { transition: none; } }
  .hcards[hidden] { display: none; }

  /* ---------- Open briefs (creatives page): a corporate job-board panel ---------- */
  .makers .box.warm .vis.briefvis { min-height: 0; display: grid; place-items: center; padding: 34px 28px; background: #E5D5BE; }
  .briefs { width: 100%; max-width: 580px; background: var(--white); color: var(--ink); border-radius: 16px; padding: 22px 22px 14px; box-shadow: 0 30px 60px -30px rgba(40,22,10,0.45), 0 0 0 1px rgba(0,0,0,0.05); }
  .brhead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
  .brhead h4 { margin: 0; font-family: var(--head); font-size: 20px; font-weight: 600; }
  .brhead #brCount { font-size: 13px; color: var(--muted); }
  .brhead .sample { font-size: 11.5px; color: var(--muted); background: var(--grey); border-radius: 6px; padding: 4px 8px; }
  .brfilter { display: flex; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .brfilter button { border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
  .brfilter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .brlist { list-style: none; margin: 0; padding: 0; }
  .brlist li { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); animation: brIn 300ms ease-out backwards; }
  .brlist li:last-child { border-bottom: none; }
  @keyframes brIn { from { opacity: 0; transform: translateY(4px); } }
  .brlist .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--white); }
  .brlist .ic svg { width: 18px; height: 18px; }
  .brlist b { display: block; font-family: var(--head); font-size: 15px; font-weight: 600; }
  .brlist small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
  .brlist .terms { font-size: 12px; color: #52525B; text-align: right; max-width: 150px; }
  .brlist .view { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); text-decoration: none; }
  .brlist .view:hover { border-color: var(--ink); }
  .brlist .view svg { width: 15px; height: 15px; }
  .brlist .status { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; border-radius: 5px; padding: 2px 7px; }
  .brlist .status.open { background: #E7F6EC; color: #11652F; } .brlist .status.short { background: #FDF3DC; color: #8A5B00; } .brlist .status.done { background: #F6E3E5; color: var(--accent); }
  html[data-theme="dark"] .briefs { background: #18181B; color: #EDEDF0; }
  html[data-theme="dark"] .brlist li, html[data-theme="dark"] .brfilter { border-color: rgba(255,255,255,0.1); }
  html[data-theme="dark"] .brfilter button, html[data-theme="dark"] .brlist .view { background: #18181B; border-color: rgba(255,255,255,0.14); color: #EDEDF0; }
  html[data-theme="dark"] .brfilter button[aria-pressed="true"] { background: #EDEDF0; color: #0B0B0D; }
  html[data-theme="dark"] .brlist .terms { color: #A1A1AA; } html[data-theme="dark"] .brhead .sample { background: #232327; }
  @media (max-width: 700px) { .brlist li { grid-template-columns: 38px 1fr auto; } .brlist .terms { display: none; } }
  @media (prefers-reduced-motion: reduce) { .brlist li { animation: none; } }
  .makers .briefs .brlist .ic svg { color: #FFFFFF; margin: 0; }
  .makers .briefs .brlist .view svg { color: var(--ink); margin: 0; }
  html[data-theme="dark"] .makers .briefs .brlist .view svg { color: #EDEDF0; }
  /* nav: Log in */
  .nav .btn.navlogin { background: transparent; border: 1px solid rgba(255,255,255,0.35); color: var(--white); }
  .nav .btn.navlogin:hover { border-color: var(--white); }
  html[data-theme="light"] .nav .btn.navlogin { border-color: #CFCFD6; color: var(--ink); }
  html[data-theme="light"] .nav .btn.navlogin:hover { border-color: var(--ink); }
  @media (max-width: 700px) { .nav .btn.navlogin { padding: 0 12px; } }

  /* hidden for now: the licensing page stays online but is not linked */
  .dd[hidden], a[hidden] { display: none !important; }

  /* open briefs panel: short list, terms under the title instead of a wrapping column */
  .makers .box.warm .vis.briefvis { padding: 40px 36px; }
  .briefs { max-width: 520px; padding: 22px 22px 16px; }
  .brlist li { grid-template-columns: 40px 1fr 32px; gap: 14px; padding: 13px 2px; }
  .brlist .bt { min-width: 0; }
  .brlist .bmeta { display: flex; align-items: center; gap: 8px; margin-top: 7px; min-width: 0; }
  .brlist .bmeta .status { margin-top: 0; flex-shrink: 0; }
  .brlist .bmeta .terms { max-width: none; text-align: left; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brmore { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .brmore a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; text-decoration: none; }
  .brmore a:hover { text-decoration: underline; }
  .brmore svg { width: 15px; height: 15px; }
  html[data-theme="dark"] .brmore { border-color: rgba(255,255,255,0.1); }
  @media (max-width: 700px) { .brlist .bmeta .terms { display: none; } }

  /* sign-up pages */
  .phero .eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
  html[data-theme] .phero.dark:not(.photo-bg) { background: #0B0B0D; color: #FFFFFF; border-bottom: none; }
  html[data-theme] .phero.warmhero { background: #EFE3D1; color: var(--ink); border-bottom: none; }
  .warmhero h1 { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -0.01em; }
  .warmhero .sub { color: #5E554A; }
  html[data-theme="dark"] .phero.warmhero { background: #231E18; color: #EDEDF0; }
  html[data-theme="dark"] .warmhero .sub { color: #BDB3A6; }
  .signside h2 { font-size: 26px; margin: 0 0 22px; }
  .nextsteps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 20px; counter-reset: st; }
  .nextsteps li { position: relative; padding-left: 52px; counter-increment: st; }
  .nextsteps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 13px; background: var(--grey); color: var(--accent); }
  .nextsteps b { display: block; font-family: var(--head); font-size: 17px; }
  .nextsteps span { display: block; margin-top: 3px; color: var(--muted); font-size: 15px; line-height: 1.5; }
  html[data-theme="dark"] .nextsteps li::before { background: #232327; }
  form .check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 400 !important; line-height: 1.45; }
  form .check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
  form .send .fine a { color: var(--accent); }
  html[data-theme] .phero.dark:not(.photo-bg) .sub { color: #B4B4BC; }

  /* "Talk to our team" chooser */
  .chooser { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(5,5,6,0.6); backdrop-filter: blur(4px); animation: chFade 180ms ease-out; }
  @keyframes chFade { from { opacity: 0; } }
  .chbox { position: relative; width: min(1080px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--white); color: var(--ink); border-radius: 22px; padding: 38px 38px 34px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7); animation: chIn 260ms cubic-bezier(.2,1,.3,1); }
  @keyframes chIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
  .chbox h2 { margin: 0; font-size: 34px; letter-spacing: -0.02em; }
  .chbox .sub { margin: 6px 0 26px; }
  .chx { position: absolute; right: 18px; top: 18px; width: 40px; height: 40px; border: none; border-radius: 12px; background: var(--grey); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
  .chx svg { width: 19px; height: 19px; }
  .chgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .chcard { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 360px; padding: 24px; border-radius: 16px; overflow: hidden; color: #FFFFFF; text-decoration: none; }
  .chcard::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img) center / cover; transition: transform 600ms cubic-bezier(.2,1,.3,1); }
  .chcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,6,0.05) 25%, rgba(5,5,6,0.85) 100%); transition: background 300ms; }
  .chcard:hover::before, .chcard:focus-visible::before { transform: scale(1.06); }
  .chcard:hover::after, .chcard:focus-visible::after { background: linear-gradient(180deg, rgba(120,0,20,0.15) 20%, rgba(60,0,10,0.9) 100%); }
  .chcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  .chtxt { display: grid; gap: 6px; padding-right: 50px; }
  .chtxt b { font-family: var(--head); font-size: 24px; letter-spacing: -0.01em; }
  .chtxt span { font-size: 14.5px; color: #E4E4E7; line-height: 1.4; }
  .chtxt small { font-size: 12.5px; color: #C4C4CC; }
  .chcard .go { position: absolute; right: 20px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; color: var(--ink); display: grid; place-items: center; transition: transform 250ms; }
  .chcard:hover .go { transform: rotate(45deg); }
  .chcard .go svg { width: 18px; height: 18px; }
  .chcard .pc { position: absolute; right: 14px; top: 12px; font-size: 10.5px; color: rgba(255,255,255,0.75); }
  html[data-theme="dark"] .chbox { background: #141417; color: #EDEDF0; }
  html[data-theme="dark"] .chx { background: #232327; color: #EDEDF0; }
  @media (max-width: 800px) { .chgrid { grid-template-columns: 1fr; } .chcard { min-height: 200px; } .chbox { padding: 26px 20px; } }
  @media (prefers-reduced-motion: reduce) { .chooser, .chbox, .chcard::before, .chcard .go { animation: none; transition: none; } }

  /* general information page: FAQ */
  .infofaq { padding: 90px 0 110px; border-top: 1px solid var(--line); }
  .infofaq h2 { font-size: 40px; letter-spacing: -0.02em; margin: 0; }
  .infofaq .faqgrid > div:first-child { position: sticky; top: 100px; }
  .infofaq .faq .faqlab { margin: 34px 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .infofaq .faq .faqlab:first-child { margin-top: 0; }
  .infofaq .faq .faqlab + details { border-top: 1px solid var(--line); }
  .infofaq .faq details:has(+ .faqlab) { border-bottom: 1px solid var(--line); }
  .infofaq .faq a { color: var(--accent); }
  html[data-theme="dark"] .infofaq { border-color: rgba(255,255,255,0.1); }
  html[data-theme="dark"] .infofaq .faq details:has(+ .faqlab) { border-color: rgba(255,255,255,0.12); }
  @media (max-width: 1100px) { .infofaq .faqgrid > div:first-child { position: static; } }

  /* footer contact: which inbox is which */
  footer .flab { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; margin-bottom: 2px; }

  /* marketplace hero: white call to action on the dark photo (red was too loud) */
  .btn.hero-cta { background: #FFFFFF; color: #0B0B0D; font-weight: 600; transition: background 160ms, transform 160ms; }
  .btn.hero-cta:hover { background: #E9E9EC; }
  .btn.hero-cta svg { transition: transform 200ms; }
  .btn.hero-cta:hover svg { transform: translateX(3px); }

  /* Getting started switch (marketplace): a different colour for each side instead of red */
  .howit .seg-ind { background: #0B0B0D; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.55); transition: transform 280ms cubic-bezier(.2,1,.3,1), background 280ms, box-shadow 280ms; }
  .howit .seg[data-on="1"] .seg-ind { background: #C98A1B; box-shadow: 0 8px 18px -8px rgba(201,138,27,0.75); }
  html[data-theme="dark"] .howit .seg-ind { background: #EDEDF0; }
  html[data-theme="dark"] .howit .seg[data-on="0"] button[aria-selected="true"], html[data-theme="dark"] .howit .seg:not([data-on]) button[aria-selected="true"] { color: #0B0B0D; }
  html[data-theme="dark"] .howit .seg[data-on="1"] .seg-ind { background: #C98A1B; }

  /* ---------- tablets and phones: a ☰ menu instead of the hidden top menu (button added by seaport.js) ---------- */
  .navburger { display: none; }
  @media (max-width: 1100px) {
    .navburger { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: inherit; cursor: pointer; }
    .navburger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
    html[data-theme="light"] .navburger { border-color: #CFCFD6; }
    /* the header's backdrop blur traps position:fixed, so the panel hangs off the (sticky) header instead */
    .nav.menu-open nav { display: block; position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 72px); height: calc(100dvh - 72px); margin: 0; z-index: 60; overflow-y: auto; padding: 8px 24px 40px; background: #0B0B0D; border-top: 1px solid rgba(255,255,255,0.1); }
    html[data-theme="light"] .nav.menu-open nav { background: #FFFFFF; border-color: var(--line); }
    .nav.menu-open nav .dd { display: block; padding: 6px 0 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    html[data-theme="light"] .nav.menu-open nav .dd { border-color: var(--line); }
    .nav.menu-open nav .dd[hidden] { display: none; }
    .nav.menu-open .ddtop { font-size: 18px; font-weight: 600; padding: 12px 0 6px; background: none !important; }
    .nav.menu-open .ddtop .chev { display: none; }
    .nav.menu-open .mega { display: block !important; position: static; background: none; box-shadow: none; padding: 0; animation: none; }
    .nav.menu-open .mega .mcol { padding: 4px 0; }
    .nav.menu-open .mega a { padding: 8px 0; }
    html[data-theme="dark"] .nav.menu-open .mega, html:not([data-theme="light"]) .nav.menu-open .mega { background: none; box-shadow: none; }
    html:not([data-theme="light"]) .nav.menu-open .mega a { color: #EDEDF0; }
    html:not([data-theme="light"]) .nav.menu-open .mega a span, html:not([data-theme="light"]) .nav.menu-open .mlab { color: #A1A1AA; }
    body.menu-lock { overflow: hidden; }
  }
  /* phones: keep the header on one line */
  @media (max-width: 560px) {
    .nav .right .themebox { display: none; }
    .nav .right { gap: 8px; }
    .nav .logo { font-size: 18px; }
  }
  /* phones: forms in one column, so fields never push the page sideways */
  @media (max-width: 700px) {
    form, .contact .wrap { grid-template-columns: minmax(0, 1fr); }
    .contact .wrap > * { min-width: 0; }
    form > *, form input, form select, form textarea { min-width: 0; max-width: 100%; }
    form .send { flex-wrap: wrap; }
    .notes { grid-template-columns: minmax(0, 1fr); gap: 28px; } .notes a { overflow-wrap: anywhere; }
  }