/* cutveysetrush.com - the Cutvey family palette (the same tokens cutveymeter.com,
   cutveyviewfinder.com and cutveyteleprompter.com use), with the game's own gold
   (#EFB867, the colour that marks a live control on the stage) kept for one thing
   only: the four department labels. Everything else - the type scale, the
   components, the responsive rules - is cutveymeter.com's, so the family reads as
   one hand. The screenshots keep their in-game colours because they are captures
   of the playable. */
:root {
  --ink: #0B0A10;
  --raised: #1A1824;
  --text: #F4F3F8;
  --secondary: #8C86A6;
  --tertiary: #7E7899;
  --quaternary: #4E4963;
  --hairline: rgba(244, 243, 248, 0.14);
  --edge: rgba(244, 243, 248, 0.10);
  --glass: rgba(244, 243, 248, 0.06);
  --panel: rgba(244, 243, 248, 0.04);
  --accent: #6A4BF7;
  --accent-text: #A794FF;
  --accent-soft: #C9BCFF;
  --gold: #EFB867;
  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
  overflow-x: hidden;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-soft); }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--mono); }

.page { position: relative; overflow: clip; }
.glow {
  position: absolute; left: 50%; top: -320px; width: 960px; height: 760px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(106, 75, 247, 0.30) 0%, rgba(106, 75, 247, 0) 55%);
  pointer-events: none;
}
.grain {
  position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
.wrap { position: relative; width: min(1248px, 100% - 48px); margin: 0 auto; }

/* Eyebrows, buttons */
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; color: var(--accent-text); text-transform: uppercase; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 0 26px; border-radius: 999px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  transition: transform 120ms ease, background 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-light { background: var(--text); color: var(--ink); }
.btn-light:hover { background: #FFFFFF; color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--text); }
.btn-dark:hover { background: #1A1824; color: var(--text); }
.btn-accent { background: var(--accent); color: var(--text); height: 44px; padding: 0 20px; font-size: 15px; gap: 10px; }
.btn-accent:hover { background: #7A5DFF; color: var(--text); }
.btn svg { flex: none; }
/* The App Store listing is not live yet, so the badge is the same control with
   nothing behind it: a span, not a link, dimmed and not focusable. When the
   listing exists, every one of these becomes an <a href> and the class goes. */
.btn-soon { background: var(--glass); border: 1px dashed var(--hairline); color: var(--secondary); cursor: default; }
.btn-soon:active { transform: none; }
.btn-accent.btn-soon { background: transparent; border: 1px dashed var(--hairline); color: var(--secondary); }

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; }
.lockup { display: flex; align-items: center; gap: 14px; color: var(--text); }
.lockup .word { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.lockup .bar { width: 1px; height: 22px; background: rgba(244, 243, 248, 0.22); }
.lockup .app { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; color: var(--accent-text); }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a.link { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--secondary); }
.nav-links a.link:hover, .nav-links a.link.current { color: var(--text); }

/* The band. Meter opens on a photograph of a stage; this game IS the stage, so
   the band is the game's own ground with the copy on the left and one real
   portrait screen standing on it. Same boxes, same clamps, no photograph. */
.stage { position: relative; width: 100%; background: radial-gradient(circle at 62% 6%, #1E1A2E 0%, #0B0A10 60%); overflow: hidden; }
.stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(180deg, rgba(11, 10, 16, 0) 0%, var(--ink) 100%); pointer-events: none; }
.stage .nav { position: relative; z-index: 2; padding: clamp(18px, 1.9vw, 30px) 0; }
.band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; padding: clamp(24px, 4vw, 64px) 0 clamp(48px, 6vw, 96px); }
.hero-copy { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 28px); }
.hero-copy h1 { font-size: clamp(38px, 4.8vw, 88px); line-height: 1.0; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.lede { font-size: clamp(15px, 1.3vw, 22px); line-height: 1.45; color: var(--secondary); max-width: 560px; text-wrap: pretty; }
.cta-row { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); margin-top: 4px; flex-wrap: wrap; }
.cta-row .btn { height: clamp(44px, 4vw, 60px); padding: 0 clamp(18px, 2vw, 30px); font-size: clamp(14px, 1.25vw, 18px); }
.price-note { font-family: var(--mono); font-size: clamp(11px, 0.95vw, 14px); line-height: 1.5; color: var(--tertiary); }

/* The phone. The screens are captures of the playable at the iPhone's own
   390 x 844 points, so the frame is a thin bezel and nothing else. */
.phone { position: relative; width: min(340px, 100%); margin: 0 auto; }
.phone::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; height: 120%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(106, 75, 247, 0.30) 0%, rgba(106, 75, 247, 0) 60%); pointer-events: none; }
.phone img { position: relative; width: 100%; height: auto; border-radius: 30px; border: 5px solid #1A1824; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--edge); }
.band .phone { width: min(360px, 100%); }

/* Instrument strip */
.specs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.spec { display: flex; flex-direction: column; gap: 6px; padding: 26px 20px; }
.spec:first-child { padding-left: 0; } .spec:last-child { padding-right: 0; }
.spec + .spec { border-left: 1px solid var(--hairline); }
.spec-v { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.spec-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--tertiary); text-transform: uppercase; }

/* The card that says what the game is not */
.settle { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; margin-top: 120px; padding: 64px 72px; border-radius: 28px; background: var(--glass); border: 1px solid var(--hairline); box-shadow: inset 0 1px 0 var(--edge); overflow: hidden; }
.settle-copy { display: flex; flex-direction: column; gap: 18px; }
.settle h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.settle p { font-size: 19px; line-height: 1.55; color: var(--secondary); text-wrap: pretty; }

/* Departments */
.onset { padding-top: 0; }
.onset-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.onset h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.onset-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.onset-steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.step { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.step-n { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; color: var(--gold); }
.step h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.step p { font-size: 17px; line-height: 1.5; color: var(--secondary); text-wrap: pretty; }

/* Questions */
.questions { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; padding-top: 140px; }
.questions-head { display: flex; flex-direction: column; gap: 14px; }
.questions h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.questions-head p { font-size: 17px; line-height: 1.5; color: var(--secondary); }
.questions .faq details p { max-width: 720px; }

/* Features */
.features { display: flex; flex-direction: column; padding-top: 120px; }
.feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; padding-bottom: 120px; }
.feature-copy { display: flex; flex-direction: column; gap: 22px; max-width: 520px; }
.feature h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.feature p { font-size: 19px; line-height: 1.5; color: var(--secondary); text-wrap: pretty; }
.checks { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.checks li { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.checks li::before {
  content: ""; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); flex: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F3F8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  background-size: 13px 13px; background-position: center; background-repeat: no-repeat;
}
.shot { display: flex; justify-content: center; align-items: center; }
.shot.will-rise { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.shot.will-rise.in { opacity: 1; transform: none; }
.feature.flip .shot { order: -1; }

/* The career band */
.ipad { display: flex; flex-direction: column; align-items: center; gap: 28px; padding-top: 140px; text-align: center; }
.ipad h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; max-width: 760px; text-wrap: balance; }
.ipad p { font-size: 19px; line-height: 1.5; color: var(--secondary); max-width: 620px; text-wrap: pretty; }
.ranks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.rank { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); background: var(--glass); border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 14px; }

/* Unlock */
.unlock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-top: 140px; }
.card { display: flex; flex-direction: column; gap: 22px; padding: 48px; border-radius: 28px; }
.card-light { background: var(--text); color: var(--ink); }
.card-light .eyebrow { color: var(--accent); }
.card-light p { color: var(--quaternary); }
.card-glass { background: var(--glass); border: 1px solid var(--hairline); box-shadow: inset 0 1px 0 var(--edge); }
.card-glass p { color: var(--secondary); }
.card p { font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.price { display: flex; align-items: baseline; gap: 10px; }
.price .amount { font-size: clamp(56px, 5vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -0.035em; }
.price .once { font-family: var(--mono); font-size: 14px; color: #6E6889; }
.card h2 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.card .btn { align-self: flex-start; margin-top: 8px; }
.card-light .btn-soon { background: rgba(11, 10, 16, 0.07); border-color: rgba(11, 10, 16, 0.24); color: #4E4963; }
.textlink { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; margin-top: 8px; }

/* Footer */
.footer { margin-top: 140px; padding: 48px 0 56px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer .lockup .word { font-size: 20px; }
.footer .lockup .app { font-size: 11px; }
.footer .legal { font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--tertiary); }
.footer-cols { display: flex; gap: 72px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col .head { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; color: var(--secondary); }
.footer-col a { font-size: 15px; color: var(--text); }
.footer-col a:hover { color: var(--accent-soft); }
.footer-col a small { display: block; font-size: 12px; color: var(--tertiary); margin-top: 2px; }
.footer-col span.soon { font-size: 15px; color: var(--tertiary); }

/* Support page */
.support-copy { max-width: 620px; }
.support-copy .lede { max-width: 560px; }
.specs.reach { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.spec-v { color: var(--text); }
a.spec-v:hover { color: var(--accent-soft); }
.answers { display: flex; flex-direction: column; gap: 14px; }
.answers h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; margin-bottom: 12px; }
.answers .faq summary h3 { font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0; }
.support-grid form { position: sticky; top: 24px; }
.missing { display: flex; flex-direction: column; gap: 20px; padding: 96px 0 64px; max-width: 720px; }
.missing h1 { font-size: clamp(44px, 5vw, 72px); line-height: 1.0; font-weight: 700; letter-spacing: -0.03em; }
.missing .lede { font-size: 20px; }
.support-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; padding-top: 72px; align-items: start; }
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 16px; height: 16px; flex: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C86A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-size: contain; transition: transform 160ms ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { padding: 0 0 26px; font-size: 16px; line-height: 1.55; color: var(--secondary); }
.form-card { display: flex; flex-direction: column; gap: 22px; padding: 40px; border-radius: 28px; background: var(--glass); border: 1px solid var(--hairline); box-shadow: inset 0 1px 0 var(--edge); }
.form-card h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
.form-card .sub { font-size: 15px; line-height: 1.5; color: var(--secondary); margin-top: 6px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--secondary); text-transform: uppercase; }
.field .help { font-size: 13px; line-height: 1.5; color: var(--secondary); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--glass); border: 1px solid var(--hairline); border-radius: 12px; padding: 0 16px; height: 48px; outline: none;
}
.field textarea { height: 140px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C86A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 44px; }
.field select option { color: #0B0A10; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(106, 75, 247, 0.25); }
.field input::placeholder, .field textarea::placeholder { color: var(--tertiary); }
.field input[type="file"] { height: auto; padding: 14px 16px; border-style: dashed; border-color: rgba(244, 243, 248, 0.22); font-size: 14px; color: var(--tertiary); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-card .btn { width: 100%; margin-top: 6px; border: 0; cursor: pointer; font-family: var(--display); }
.notice { display: none; padding: 16px 18px; border-radius: 12px; font-size: 15px; line-height: 1.5; border: 1px solid var(--hairline); }
.notice.show { display: block; }
.notice.ok { background: rgba(48, 209, 88, 0.10); border-color: rgba(48, 209, 88, 0.35); }
.notice.err { background: rgba(255, 69, 58, 0.10); border-color: rgba(255, 69, 58, 0.35); }

/* Responsive */
@media (max-width: 1000px) {
  .feature, .settle, .unlock, .support-grid, .questions, .band { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { padding: 18px 0 18px 16px !important; }
  .spec:nth-child(odd) { padding-left: 0 !important; border-left: 0; }
  .spec:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .settle { margin-top: 72px; padding: 40px 32px; gap: 28px; }
  .onset-steps, .onset-steps.four { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; }
  .questions { padding-top: 88px; gap: 32px; }
  .support-grid { padding-top: 56px; gap: 56px; }
  .support-grid form { position: static; order: -1; }
  .specs.reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage .nav { padding: 24px 0; }
  .band { gap: 36px; padding-bottom: 56px; }
  .band .phone, .phone { width: min(300px, 78%); }
  .hero-copy h1 { font-size: clamp(40px, 7vw, 64px); }
  .lede { font-size: 18px; }
  .cta-row .btn { height: 52px; font-size: 16px; padding: 0 24px; }
  .price-note { font-size: 13px; }
  .feature.flip .shot { order: 0; }
  .feature { gap: 32px; padding-bottom: 88px; }
  .nav-links a.link { display: none; }
  .nav-links a.link.current { display: none; }
}
@media (max-width: 600px) {
  .wrap { width: min(1248px, 100% - 40px); }
  .nav { padding: 20px 0; }
  .lockup .word { font-size: 22px; }
  .lockup .bar { display: none; }
  .lockup .app { font-size: 11px; }
  .btn-accent { height: 40px; padding: 0 16px; font-size: 14px; }
  .btn-accent span.long { display: none; }
  .stage .nav { padding: 20px 0; }
  .lede { font-size: 17px; }
  .cta-row .btn { width: 100%; }
  .price-note { width: 100%; text-align: center; }
  .features { padding-top: 72px; }
  .feature h2 { font-size: 34px; }
  .feature p { font-size: 16px; }
  .band .phone, .phone { width: min(280px, 86%); }
  .ipad, .unlock { padding-top: 72px; }
  .settle { padding: 32px 22px; border-radius: 22px; }
  .questions { padding-top: 72px; }
  .questions .faq summary { font-size: 17px; padding: 18px 0; }
  .card { padding: 32px; border-radius: 22px; }
  .card .btn { align-self: stretch; }
  .footer { margin-top: 72px; }
  .footer-cols { gap: 32px; }
  .form-card { padding: 24px; }
}