:root {
  --ink: #090B10;
  --panel: #12151D;
  --panel-2: #181C26;
  --panel-3: #1E2330;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #EEF1F6;
  --dim: #9BA3B5;
  --faint: #656D80;
  --brass: #D6A24A;
  --brass-2: #F0C378;
  --brass-ink: #1C1204;
  --teal: #5FC0B4;
  --ease: cubic-bezier(.22, .9, .32, 1);
  --max: 1180px;
}

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

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis.lenis-smooth {
  scroll-behavior: auto;
}

html.lenis.lenis-stopped {
  overflow: hidden;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 1000;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal), var(--brass-2));
  pointer-events: none;
}

::selection {
  background: var(--brass);
  color: var(--brass-ink);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

body {
  margin: 0;
  position: relative;
  background:
    radial-gradient(900px 650px at 9% 0%, rgba(214, 162, 74, .09), transparent 65%),
    radial-gradient(850px 620px at 92% 13%, rgba(95, 192, 180, .07), transparent 63%),
    var(--ink);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding:10px;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
}

::selection {
  background: var(--brass);
  color: var(--brass-ink);
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.ambient {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .25;
}

.ambient-a {
  width: 300px;
  height: 300px;
  background: rgba(214, 162, 74, .13);
  top: 450px;
  left: -180px;
}

.ambient-b {
  width: 340px;
  height: 340px;
  background: rgba(95, 192, 180, .09);
  top: 1500px;
  right: -170px;
}

.site-header {
  width: min(calc(100% - 48px), var(--max));
  height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  position: relative;
  z-index: 10;
  border-bottom: 1.5px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex-shrink: 1;
}

.brand strong,
.brand small {
  white-space: nowrap;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--brass-2), var(--brass) 55%, #8a6a2c);
  box-shadow: 0 4px 14px -4px rgba(214, 162, 74, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px; /**/
  color: var(--brass-ink);
}

.brand strong {
  display: block;
  font: 700 18px "Space Grotesk", sans-serif;
  letter-spacing: -.03em;
}

.brand small {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font: 500 8px "JetBrains Mono", monospace;
  letter-spacing: .11em;
}

.nav {
  display: flex;
  gap: 30px;
}

.nav a {
  color: var(--dim);
  font-size: 14px; /**/
  transition: .25s ease;
}

.nav a:hover {
  color: var(--text);
}

.nav-cta {
  padding: 10px 15px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px; /**/
  background: rgba(255, 255, 255, .025);
  transition: .25s var(--ease);
}

.nav-cta:hover {
  border-color: rgba(214, 162, 74, .4);
  transform: translateY(-2px);
}


.hero-copy,
.hero-copy-top,
.hero-copy-bottom,
.hero-visual,
.editor-copy,
.editor-stage,
.starter-panel,
.university-panel {
  min-width: 0;
  overflow: hidden;
}

.hero {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 clamp(16px, 3vw, 32px);
  margin-top: 10px;
}

.hero-copy {
  flex: 1.02 1 0%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.hero-visual {
  flex: .98 1 0%;
}

.eyebrow,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brass-2);
  font: 600 10px "JetBrains Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(95, 192, 180, .1);
  animation: pulse 2s infinite;
}

.hero h1 {
  max-width: 720px;
  margin: 20px auto 18px;
  font: 700 clamp(25px, 6.4vw, 66px)/.94 "Space Grotesk", sans-serif;
  letter-spacing: -.065em;
}

.hero h1 em,
.editor-copy h2 em,
.final-cta em {
  color: var(--brass-2);
  font-style: normal;
}

.hero-lead {
  max-width: 550px;
  margin: 0;
  color: var(--dim);
  font-size: 16px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 32px;
}

.primary-btn,
.continue-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 11px;
  padding: 14px 19px;
  cursor: pointer;
  background: linear-gradient(140deg, var(--brass-2), var(--brass));
  color: var(--brass-ink);
  font-weight: 700;
  font-size: 14px; /**/
  box-shadow: 0 14px 35px -18px rgba(214, 162, 74, .75);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.primary-btn:hover,
.continue-btn:hover,
.secondary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 19px 42px -18px rgba(214, 162, 74, .8);
}

.text-btn {
  color: var(--dim);
  font-size: 14px; /**/
}

.text-btn i {
  margin-left: 5px;
  transition: .25s;
}

.text-btn:hover i {
  transform: translateY(3px);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 38px;
  color: var(--faint);
  font: 500 9px "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.trust-row i {
  color: var(--brass);
  margin-right: 5px;
}

.hero-visual {
  height: 520px;
  width: 100%;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
}

.orbit-1 {
  width: min(520px, 94vw);
  height: min(520px, 94vw);
  animation: spin 25s linear infinite;
}

.orbit-2 {
  width: min(380px, 72vw);
  height: min(380px, 72vw);
  border-style: dashed;
  animation: spinReverse 18s linear infinite;
}

/* Sparks are children of their orbit ring (see markup), pinned to the
   ring's own edge. The orbit's existing spin/spinReverse animation
   carries the dot around, so the radius never has to be computed by
   hand and can't drift out of sync at any screen size. */
.spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
}

/* spark-1 rides orbit-1 (spin 25s) — sits at the top of the ring */
.spark-1 {
  top: -2.5px;
  background: var(--brass-2);
  box-shadow: 0 0 12px 3px rgba(214, 162, 74, .7);
}

/* spark-2 rides orbit-2 (spinReverse 18s) — sits at the bottom of the ring */
.spark-2 {
  top: auto;
  bottom: -2.5px;
  background: var(--teal);
  box-shadow: 0 0 12px 3px rgba(95, 192, 180, .7);
}

.preview-paper {
  height: 74%;
  aspect-ratio: 210/297;
  position: relative;
  z-index: 2;
  container-type: inline-size;
  font-size: clamp(5px, .95vh, 9px);
  padding: 4.875em 3.75em 3.375em;
  background: #f9f5ec;
  color: #25201b;
  box-shadow: 28px 35px 65px -25px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .2);
  transform: rotate(4deg);
  animation: paperFloat 5.5s ease-in-out infinite;
}

.paper-shadow {
  position: absolute;
  height: 69%;              /* was: width: clamp(160px, 32vw, 265px); */
  aspect-ratio: 210/297;
  background: rgba(214, 162, 74, .14);
  transform: rotate(-6deg) translate(8px, 25px);
  filter: blur(5px);
}

.paper-topline {
  height: 1.4cqw;
  background: linear-gradient(90deg, #20273a, var(--brass), #20273a);
  margin-bottom: 9.12cqw;
}

.paper-logo {
  width: 13.33cqw;
  height: 13.33cqw;
  border: 1px solid #222;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 3.86cqw;
  font: 700 4.56cqw "Space Grotesk";
}

.paper-university {
  text-align: center;
  font: 700 2.81cqw "JetBrains Mono";
  letter-spacing: .16em;
}

.paper-rule {
  height: 1px;
  background: #bdb6aa;
  margin: 7.72cqw 0 10.53cqw;
}

.paper-label {
  color: #8d6b2d;
  font: 700 2.46cqw "JetBrains Mono";
  letter-spacing: .18em;
}

.paper-title {
  margin-top: 2.46cqw;
  font: 700 8.77cqw/1.05 "Space Grotesk";
  letter-spacing: -.045em;
}

.paper-meta {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1.75cqw 3.51cqw;
  margin-top: 15.09cqw;
  font-size: 2.46cqw;
}

.paper-meta span {
  color: #8c867d;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.paper-footer {
  position: absolute;
  bottom: 9.47cqw;
  left: 10.53cqw;
  right: 10.53cqw;
  display: flex;
  justify-content: space-between;
  font: 600 2.11cqw "JetBrains Mono";
  color: #777;
}

.floating-tag {
  position: absolute;
  z-index: 5;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(18, 21, 29, .55);   /* was: rgba(18, 21, 29, .82) */
  backdrop-filter: blur(12px);
  color: var(--dim);
  font-size: 12px;/**/
  box-shadow: 0 15px 35px -25px #000;
  animation: tagFloat 4s ease-in-out infinite;
  white-space: nowrap;
  max-width: calc(100% - 16px);
}

.floating-tag i {
  color: var(--brass-2);
  margin-right: 6px;
}

.tag-top {
  top: 105px;
  left: 22px;
}

.tag-bottom {
  right: 6px;
  bottom: 105px;
  animation-delay: -1.5s;
}

.mini-card {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(18, 21, 29, .6);   /* was: rgba(18, 21, 29, .88) */
  backdrop-filter: blur(10px);
  border-radius: 11px;
  box-shadow: 0 18px 45px -28px #000;
  animation: tagFloat 4.5s ease-in-out infinite;
}

.mini-card-a {
  right: 12px;
  top: 170px;
}

.mini-card-b {
  left: 8px;
  bottom: 175px;
  animation-delay: -2s;
}

.mini-icon {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(95, 192, 180, .11);
  color: var(--teal);
  font-size: 11px; /**/
}

.mini-card b,
.mini-card small {
  display: block;
}

.mini-card b {
  font-size: 11px; /**/
}

.mini-card small {
  margin-top: 2px;
  color: var(--faint);
  font-size: 10px; /**/
}

.quick-start,
.workflow,
.editor-feature,
.final-cta {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
}

.quick-start {
  padding: clamp(40px, 5vw, 56px) 0 clamp(48px, 6vw, 72px);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-bottom: 32px;
}

.section-heading h2,
.editor-copy h2,
.final-cta h2 {
  margin: 9px 0 0;
  font: 700 clamp(34px, 4vw, 51px)/1.02 "Space Grotesk";
  letter-spacing: -.055em;
}

.section-heading-desc {
  max-width: 390px;
  margin: 0;
  color: var(--dim);
  font-size: 14px; /**/
  line-height: 1.7;
  text-align: right;
}

.starter-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 12px;
}

.starter-panel,
.university-panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), var(--panel);
  border-radius: 17px;
  padding: 25px;
}

.step-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-no {
  color: var(--brass-2);
  font: 600 9px "JetBrains Mono";
}

.step-title {
  font: 600 13px "Space Grotesk";
}

.directory-pill {
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid rgba(95, 192, 180, .18);
  background: rgba(95, 192, 180, .06);
  color: var(--teal);
  border-radius: 99px;
  font: 500 8px "JetBrains Mono";
}

.directory-pill i {
  margin-right: 4px;
}

.type-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 21px 0 23px;
}

.type-option[data-type="group"] {
  grid-column: 1 / -1;
}

.type-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px;
  border-radius: 11px;
  color: var(--dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: .25s var(--ease);
}

.type-option:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}

.type-option.active {
  border-color: rgba(214, 162, 74, .45);
  background: rgba(214, 162, 74, .07);
  color: var(--text);
  box-shadow: 0 12px 30px -25px rgba(214, 162, 74, .7);
}

.type-option.active>.option-icon {
  border-color: rgba(214, 163, 74, 0.219);
  background: rgba(85, 85, 85, 0.07);
}

.option-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--panel-3);
  color: var(--brass-2);
  font-size: 12px;/**/
  border: 1px solid var(--line);
}


.type-option b,
.type-option small {
  display: block;
}

.type-option b {
  font-size: 12px;/**/
}

.type-option small {
  margin-top: 3px;
  color: var(--faint);
  font-size: 10px; /**/
}

.option-check {
  display: none;
  position: absolute;
  right: 9px;
  top: 9px;
  color: var(--brass-2);
  font-size: 10px; /**/
}

.type-option.active .option-check {
  display: block;
}

.field {
  margin-top: 13px;
}

.field label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--dim);
  font-size: 11px; /**/
  font-weight: 600;
}

.field label span {
  color: var(--faint);
  font-weight: 400;
}

.input-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--panel-2);
}

.input-wrap:focus-within {
  border-color: rgba(214, 162, 74, .55);
  box-shadow: 0 0 0 3px rgba(214, 162, 74, .1);
}

.input-wrap i {
  color: var(--faint);
  font-size: 12px;/**/
}

.input-wrap input {
  width: 100%;
  background: none;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 13px;/**/
}

.input-wrap input::placeholder {
  color: var(--faint);
}

.panel-copy {
  color: var(--faint);
  font-size: 12px;/**/
  line-height: 1.6;
  margin: 17px 0 13px;
  max-width: 520px;
}

.uni-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  border-radius: 10px;
}

.uni-search:focus-within {
  border-color: rgba(95, 192, 180, .45);
  box-shadow: 0 0 0 3px rgba(95, 192, 180, .08);
}

.uni-search>i {
  color: var(--teal);
  font-size: 12px;/**/
}

.uni-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font-size: 13px;/**/
}

.uni-search input::placeholder {
  color: var(--faint);
}

.uni-search kbd {
  color: var(--faint);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 3px 5px;
  font: 500 8px "JetBrains Mono";
}

.uni-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.uni-result {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  padding: 9px;
  text-align: left;
  color: var(--dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: .2s ease;
}

.uni-result:hover, .uni-result:hover>.uni-avatar {
  background: rgba(255, 255, 255, .025);
  border-color: var(--line);
}

.uni-result.active, .uni-result.active>.uni-avatar {
  background: rgba(95, 192, 180, .045);
  border-color: rgba(95, 192, 180, .18);
}

.uni-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 7px;
  background: var(--panel-3);
  color: var(--brass-2);
  font: 600 7px "JetBrains Mono";
  border: 1px solid transparent;
}

.uni-result > span:not(.uni-avatar) {
  flex: 1;
  min-width: 0;            /* lets the text column shrink so it can wrap */
}

.uni-result b,
.uni-result small {
  display: block;
}

.uni-result b {
  font-size: 10.5px;/**/
  line-height: 1.35;
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere; /* wrap long names instead of overflowing */
}

.uni-result small {
  margin-top: 3px;
  font-size: 9.5px; /**/
  color: var(--faint);
}

.uni-result>i {
  flex: none;
  margin-left: auto;
  color: var(--faint);
  font-size: 10px; /**/
}

.uni-manual {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 11px; /**/
}

.uni-manual button {
  background: none;
  color: var(--brass-2);
  cursor: pointer;
  font-size: 11px; /**/
}

.auto-match-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
  cursor: pointer;
}

.auto-match-check input {
  accent-color: var(--brass-2);
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  cursor: pointer;
}

.auto-match-check span {
  display: block;
}

.auto-match-check small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 400;
}

.continue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .018);
  border-radius: 13px;
}

.selection-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.selection-summary > div {
  min-width: 0;
}

.summary-orb {
  flex: none;
}

.continue-btn {
  flex: none;
}

.summary-orb {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(214, 162, 74, .1);
  color: var(--brass-2);
  font-size: 12px;/**/
}

.selection-summary small,
.selection-summary b {
  display: block;
}

.selection-summary small {
  color: var(--faint);
  font: 500 7px "JetBrains Mono";
  letter-spacing: .08em;
}

.selection-summary b {
  margin-top: 3px;
  font-size: 12px;/**/
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.workflow {
  padding: clamp(56px, 7vw, 72px) 0 clamp(48px, 6vw, 64px);
  border-top: 1px solid var(--line);
}

.centered {
  display: block;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 45px;
}

.centered p {
  margin: 16px auto 0;
  max-width: 510px;
  color: var(--dim);
  font-size: 14px; /**/
  line-height: 1.7;
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.flow-card {
  min-height: 290px;
  position: relative;
  padding: 26px 25px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(214, 162, 74, .10), transparent 55%),
    linear-gradient(175deg, var(--panel-2), var(--panel) 65%);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    0 24px 48px -34px rgba(0, 0, 0, .7);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.flow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(240, 195, 120, .4), rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 58%, rgba(95, 192, 180, .22));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}

.flow-card:hover {
  transform: translateY(-7px);
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 30px 60px -26px rgba(214, 162, 74, .18),
    0 24px 50px -30px rgba(0, 0, 0, .75);
}

.flow-card:hover::before {
  opacity: 1;
}

.flow-number {
  position: absolute;
  top: -8px;
  right: 12px;
  z-index: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .09);
  font: 700 64px "Space Grotesk", sans-serif;
  letter-spacing: -.03em;
  user-select: none;
  transition: -webkit-text-stroke-color .45s var(--ease);
}

.flow-card:hover .flow-number {
  -webkit-text-stroke-color: rgba(240, 195, 120, .3);
}

.flow-icon {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin-top: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: linear-gradient(155deg, var(--panel-3), var(--panel-2));
  color: var(--brass-2);
  font-size: 14px;
  box-shadow:
    0 10px 20px -12px rgba(0, 0, 0, .65),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

.flow-card:hover .flow-icon {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(240, 195, 120, .4);
  box-shadow:
    0 12px 24px -10px rgba(214, 162, 74, .35),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}

.flow-card h3 {
  position: relative;
  z-index: 2;
  margin: 24px 0 9px;
  font: 600 20px "Space Grotesk";
  letter-spacing: -.01em;
}

.flow-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 94%;
  color: var(--dim);
  font-size: 13px;/**/
  line-height: 1.85;
}

.flow-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--faint);
  font-size: 15px; /**/
  background: rgba(255, 255, 255, .02);
  transition: transform .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), background .45s var(--ease);
}

.flow-card:hover .flow-arrow {
  transform: translateX(4px);
  border-color: rgba(240, 195, 120, .45);
  color: var(--brass-2);
  background: rgba(240, 195, 120, .1);
}

.editor-feature {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 72px);
}

.editor-copy>p {
  max-width: 500px;
  margin: 22px 0;
  color: var(--dim);
  font-size: 14px; /**/
  line-height: 1.8;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin: 26px 0 30px;
}

.feature-list>div {
  display: flex;
  gap: 11px;
  align-items: center;
}

.feature-list>div>i {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(214, 162, 74, .08);
  color: var(--brass-2);
  font-size: 11px; /**/
}

.feature-list b,
.feature-list small {
  display: block;
}

.feature-list b {
  font-size: 12px;/**/
}

.feature-list small {
  margin-top: 2px;
  color: var(--faint);
  font-size: 10px; /**/
}

.secondary-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
  box-shadow: none;
}

.secondary-btn:hover {
  border-color: rgba(214, 162, 74, .45);
  box-shadow: none;
}

.editor-stage {
  position: relative;
  min-height: 440px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.editor-window {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--line-2);
  border-radius: 15px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 30px 35px 80px -45px #000;
  transform: rotate(.8deg);
}

.window-bar {
  height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.window-brand {
  font: 600 9px "Space Grotesk";
}

.window-brand i {
  color: var(--brass-2);
  margin-right: 5px;
}

.window-status {
  color: var(--teal);
  font: 500 7px "JetBrains Mono";
}

.window-status i {
  font-size: 7px;/**/
  margin-right: 4px;
}

.editor-body {
  display: grid;
  grid-template-columns: 145px 1fr;
  min-height: 370px;
}

.fake-sidebar {
  padding: 15px;
  border-right: 1px solid var(--line);
  background: #10131a;
}

.fake-brand {
  width: 80px;
  height: 8px;
  background: var(--line-2);
  border-radius: 5px;
  margin-bottom: 20px;
}

.fake-line {
  height: 7px;
  width: 80%;
  background: var(--line);
  border-radius: 4px;
  margin: 10px 0;
}

.fake-line.wide {
  width: 100%;
  background: rgba(214, 162, 74, .18);
}

.fake-line.short {
  width: 50%;
}

.fake-card {
  height: 37px;
  margin-top: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .02);
}

.fake-canvas {
  display: grid;
  place-items: center;
  padding: 25px;
  background: radial-gradient(500px 300px at 50% 40%, rgba(214, 162, 74, .06), transparent 70%);
}

.fake-paper {
  width: 175px;
  aspect-ratio: 210/297;
  background: #f8f4ec;
  padding: 22px 18px;
  color: #28231e;
  box-shadow: 16px 20px 35px -20px #000;
  position: relative;
}

.fake-paper-mark {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #333;
  border-radius: 50%;
  margin: auto;
  font: 700 7px "Space Grotesk";
}

.fake-paper-line {
  height: 2px;
  background: #a69d91;
  margin-top: 12px;
}

.fake-paper-line.long {
  width: 100%;
}

.fake-paper-title {
  width: 78%;
  height: 10px;
  background: #27231f;
  margin-top: 30px;
  border-radius: 3px;
}

.fake-paper-title.short {
  width: 56%;
  margin-top: 5px;
}

.fake-paper-block {
  height: 4px;
  width: 82%;
  background: #d0c8bd;
  margin-top: 33px;
}

.fake-paper-block.small {
  width: 65%;
  margin-top: 7px;
}

.editor-glow {
  position: absolute;
  width: 370px;
  height: 250px;
  background: rgba(214, 162, 74, .11);
  filter: blur(65px);
}

.final-cta {
  padding: clamp(48px, 7vw, 72px) 20px clamp(56px, 7vw, 80px);
  text-align: center;
}

.final-spark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 23px;
  border-radius: 15px;
  background: rgba(214, 162, 74, .08);
  border: 1px solid rgba(214, 162, 74, .15);
  color: var(--brass-2);
  animation: pulse 2.5s infinite;
}

.final-cta h2 {
  margin-top: 10px;
}

.final-cta p {
  color: var(--dim);
  font-size: 14px; /**/
  margin: 17px auto 27px;
}

.site-footer {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 25px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--faint);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.footer-brand .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;/**/
}

.footer-brand b,
.footer-brand small {
  display: block;
}

.footer-brand b {
  color: var(--text);
  font: 600 10px "Space Grotesk";
}

.footer-brand small {
  margin-top: 2px;
  font-size: 9px; /**/
}

.footer-note {
  font: 500 8px "JetBrains Mono";
  letter-spacing: .08em;
  text-transform: uppercase;
}

.footer-copy {
  font-size: 10px; /**/
}

.reveal {
  opacity: 0;
  transform: translateY(34px) scale(.975);
  filter: blur(4px);
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1),
    filter .9s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity, filter;
}

.reveal.visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
  overflow: visible;
}

.delay-1 {
  transition-delay: .09s;
}

.delay-2 {
  transition-delay: .16s;
}

.delay-3 {
  transition-delay: .23s;
}

/* Elements that have scrolled back out of view above the viewport get a
   quicker, subtler retreat so re-entering (scrolling back down) still reads
   as a fresh, intentional reveal rather than a jump-cut. */
.reveal.leaving {
  transition-duration: .5s;
  transform: translateY(-18px) scale(.985);
}

/* Mirror of .reveal.leaving for elements that exit off the bottom of the
   viewport (scrolled up past them). Keeps the reset symmetric so the
   reveal animation replays the same way on the way back down, too. */
.reveal.leaving-down {
  transition-duration: .5s;
  transform: translateY(18px) scale(.985);
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(95, 192, 180, .22)
  }

  50% {
    box-shadow: 0 0 0 7px rgba(95, 192, 180, 0)
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes spinReverse {
  to {
    transform: rotate(-360deg)
  }
}

@keyframes paperFloat {

  0%,
  100% {
    transform: rotate(4deg) translateY(0)
  }

  50% {
    transform: rotate(2deg) translateY(-10px)
  }
}

@keyframes tagFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-7px)
  }
}

@media (max-width:1099px) {
  .flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:900px) {
  .nav {
    display: none;
  }

  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    min-height: auto;
  }

  .hero-copy {
    display: contents;
  }

  .hero-copy-top,
  .hero-copy-bottom {
    text-align: center;
  }

  .hero-copy-top {
    order: 1;
  }

  .hero-visual {
    flex: none;
    order: 2;
    height: 480px;
  }

  .hero-visual.reveal.visible {
    overflow: visible;
    max-height: 60%;
  }

  .hero-copy-bottom {
    order: 3;
  }

  .hero-lead {
    margin: 0 auto;
  }

  .hero-actions,
  .trust-row {
    justify-content: center;
  }

  .starter-grid,
  .editor-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor-feature {
    gap: 35px;
  }
}

@media (max-width:620px) {

  .site-header,
  .hero,
  .quick-start,
  .final-cta,
  .site-footer {
    width: min(calc(100% - 30px), var(--max));
  }

  .workflow,
  .editor-feature {
    width: min(calc(100% - 30px), var(--max));
  }

  .site-header {
    height: 70px;
  }

  .nav-cta {
    padding: 9px 11px;
  }

  .hero {
    padding-top: 30px;
    min-height: auto;
  }

  .hero h1 {
    font-size: clamp(28px, 9vw, 43px);
  }

  .hero-lead {
    font-size: 15px; /**/
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 14px;
  }

  .hero-visual {
    height: 420px;
  }

  .quick-start,
  .workflow,
  .editor-feature {
    padding: 48px 0 52px;
  }

  .section-heading {
    display: block;
  }

  .section-heading-desc {
    margin-top: 15px;
    text-align: left;
  }

  .starter-panel,
  .university-panel {
    padding: 18px;
  }

  .type-options,
  .uni-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .continue-row {
    align-items: stretch;
    flex-direction: column;
  }

  .continue-btn {
    width: 100%;
  }

  .flow-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow-card {
    min-height: 0;
    padding-bottom: 64px;   /* keeps text clear of the arrow badge */
  }

  .editor-body {
    grid-template-columns: 105px 1fr;
  }

  .fake-sidebar {
    padding: 10px;
  }

  .fake-paper {
    width: 145px;
  }

  .site-footer {
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-note {
    order: 3;
    width: 100%;
  }
}

/* ── floating-tag clamp on tiny viewports ── */
@media (max-width:480px) {
  .floating-tag {
    font-size: 11px; /**/
    padding: 7px 9px;
  }

  .tag-top {
    top: 75px;
    left: 8px;
  }

  .tag-bottom {
    right: 4px;
    bottom: 75px;
  }

  .mini-card-a {
    right: 4px;
    top: 140px;
  }

  .mini-card-b {
    left: 4px;
    bottom: 145px;
  }

  /* smaller floating badges on small screens */
  .floating-tag {
    font-size: 10px;
    padding: 6px 8px;
    border-radius: 8px;
  }

  .floating-tag i {
    margin-right: 4px;
  }

  .mini-card {
    gap: 7px;
    padding: 7px 9px;
    border-radius: 9px;
  }

  .mini-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 9px;
  }

  .mini-card b {
    font-size: 9.5px;
  }

  .mini-card small {
    margin-top: 1px;
    font-size: 8.5px;
  }
}

@media (max-width:400px) {
  .hero h1 {
    font-size: 30px;
  }

  .hero-visual {
    height: 360px;
  }

  .floating-tag {
    font-size: 9px;
    padding: 5px 7px;
  }

  .mini-card {
    gap: 6px;
    padding: 6px 8px;
  }

  .mini-icon {
    width: 18px;
    height: 18px;
    font-size: 8px;
  }

  .mini-card b {
    font-size: 9px;
  }

  .mini-card small {
    font-size: 8px;
  }

  .continue-row {
    padding: 13px;
  }

  .selection-summary b {
    font-size: 11px; /**/
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal,
  .reveal.leaving,
  .reveal.leaving-down {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .scroll-progress {
    display: none;
  }
}

.home-faq{max-width:820px;margin:0 auto;padding:60px 24px}
.home-faq h2{margin-bottom:20px}
.home-faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 18px;margin:10px 0}
.home-faq summary{cursor:pointer;font-weight:600;color:var(--text)}
.home-faq p{color:var(--dim);margin:10px 0 0}

/* Section 04 + FAQ side by side (CTA left, FAQ right); FAQ first on small screens */
.faq-cta{width:min(calc(100% - 48px),var(--max));margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.faq-cta>.final-cta,.faq-cta>.home-faq{width:auto;max-width:none;margin:0;min-width:0}
.faq-cta>.home-faq{padding:clamp(48px,7vw,72px) 0;order:1}
.faq-cta>.final-cta{order:2}
@media (max-width:900px){
  .faq-cta{grid-template-columns:1fr;gap:0}
  .faq-cta>.home-faq{order:1;padding:40px 0 8px}
  .faq-cta>.final-cta{order:2}
}

/* FAQ polish */
.home-faq h2{margin:8px 0 22px}
.home-faq details{position:relative;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--panel);padding:0;margin:12px 0;overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.home-faq details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brass);opacity:0;transition:opacity .25s var(--ease)}
.home-faq details:hover{border-color:rgba(214,162,74,.35);transform:translateY(-1px)}
.home-faq details[open]{border-color:rgba(214,162,74,.45);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.home-faq details[open]::before{opacity:1}
.home-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;cursor:pointer;font-weight:600;font-size:15px;color:var(--text)}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(214,162,74,.1);border:1px solid rgba(214,162,74,.25);color:var(--brass);font-size:18px;line-height:1;transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.home-faq details[open] summary::after{transform:rotate(45deg);background:var(--brass);color:var(--brass-ink)}
.home-faq summary:focus-visible{outline:2px solid var(--brass);outline-offset:-2px;border-radius:14px}
.home-faq details p{margin:0;padding:0 20px 18px;font-size:14px;line-height:1.65;color:var(--dim);animation:faqIn .3s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.home-faq details,.home-faq summary::after,.home-faq details p{transition:none;animation:none}}

/* ==========================================================================
   FAQ accordion (.home-faq on the home page, .seo-faq on SEO pages)
   Pure CSS. The +/x icon is two centred bars (not a text glyph), so it is
   exactly centred and rotates about its true centre. Icon rules use higher
   specificity + !important because seo-pages.css loads after this file.
   ========================================================================== */
:root { interpolate-size: allow-keywords; }
:is(.home-faq, .seo-faq) details { overflow: hidden; }
:is(.home-faq, .seo-faq) details > summary { -webkit-tap-highlight-color: transparent; }

:is(html .home-faq, html .seo-faq) details > summary::after {
  content: "" !important;
  box-sizing: border-box !important;
  flex: none;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: block !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: var(--brass, #d6a24a) !important;
  border: 1px solid rgba(214, 162, 74, .25) !important;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    rgba(214, 162, 74, .1) !important;
  transform: rotate(0deg) !important;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .25s ease, background-color .25s ease !important;
}
:is(html .home-faq, html .seo-faq) details[open] > summary::after {
  transform: rotate(45deg) !important;
  color: var(--brass-ink, #1a1206) !important;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    var(--brass, #d6a24a) !important;
}

/* Smooth answer open/close (Chrome/Edge 131+, Safari, recent Firefox;
   older browsers open instantly). */
:is(.home-faq, .seo-faq) details p { animation: none; }
:is(.home-faq, .seo-faq) details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s cubic-bezier(.22, 1, .36, 1), content-visibility .35s allow-discrete;
}
:is(.home-faq, .seo-faq) details[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  :is(html .home-faq, html .seo-faq) details > summary::after { transition: none !important; }
  :is(.home-faq, .seo-faq) details::details-content { transition: none; }
}

/* quiet footer links */
.footer-seo{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;opacity:.7}
.footer-seo a{color:var(--faint);text-decoration:none;transition:color .2s}
.footer-seo a:hover{color:var(--brass-2)}
@media (max-width:900px){.footer-seo{order:4;width:100%}}