:root {
  --navy: #102d3c;
  --navy-deep: #09212d;
  --ink: #193a46;
  --muted: #506773;
  --teal: #087d83;
  --teal-bright: #1cb4a7;
  --mint: #d7f3eb;
  --cream: #f5f4ed;
  --paper: #fcfdfb;
  --line: #d5e4df;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; margin: 0; }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: .2rem solid #e9b53d; outline-offset: .25rem; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--navy); }
.shell { margin: 0 auto; max-width: 78rem; padding-left: 1.75rem; padding-right: 1.75rem; }
.skip-link { background: #fff; color: var(--navy); font-weight: 800; left: 1rem; padding: .75rem 1rem; position: absolute; top: -5rem; z-index: 10; }
.skip-link:focus { top: 1rem; }
.eyebrow { align-items: center; color: var(--teal); display: flex; font-size: .73rem; font-weight: 800; gap: .55rem; letter-spacing: .13em; line-height: 1.35; margin: 0 0 1.2rem; text-transform: uppercase; }
.eyebrow__line { background: var(--teal-bright); display: inline-block; height: 2px; width: 1.6rem; }

.site-header { background: rgba(252, 253, 251, .96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.site-header__inner { align-items: center; display: flex; gap: 2rem; justify-content: space-between; min-height: 5rem; }
.brand { align-items: center; display: inline-flex; flex: 0 0 auto; gap: .65rem; text-decoration: none; }
.brand__mark { background: transparent url("279-space-logo.png") center / 175% no-repeat; display: inline-block; height: 2.65rem; width: 2.65rem; }
.brand__copy { display: grid; gap: .12rem; }
.brand__copy strong { color: var(--navy); font-size: .98rem; letter-spacing: -.025em; }
.brand__copy small { color: var(--muted); font-size: .7rem; }
.site-nav { align-items: center; display: flex; font-size: .85rem; font-weight: 800; gap: clamp(.7rem, 2vw, 1.8rem); }
.site-nav > a { color: var(--navy); text-decoration: none; white-space: nowrap; }
.site-nav > a:hover { color: var(--teal); }
.site-nav .site-nav__login { background: var(--navy); border-radius: .35rem; color: #fff; padding: .78rem 1rem; }
.site-nav .site-nav__login:hover { background: var(--teal); color: #fff; }

.hero { background: radial-gradient(circle at 90% 20%, rgba(183, 236, 218, .55), transparent 37%), linear-gradient(125deg, #f5f7ed 0%, #f7fbf8 60%, #e4f4ee 100%); border-bottom: 1px solid var(--line); overflow: hidden; padding: clamp(4.5rem, 7vw, 7.1rem) 0 clamp(4.3rem, 6vw, 6.2rem); }
.hero__grid { align-items: center; display: grid; gap: clamp(2.5rem, 5vw, 5rem); grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); }
.hero h1 { font-size: clamp(3.15rem, 5.8vw, 5.35rem); letter-spacing: -.066em; line-height: .99; margin-bottom: 1.5rem; max-width: 13ch; }
.hero h1 span { color: var(--teal); }
.hero__lede { color: #395763; font-size: clamp(1.05rem, 1.5vw, 1.19rem); line-height: 1.68; margin-bottom: 1.8rem; max-width: 35rem; }
.hero__actions { align-items: center; display: flex; flex-wrap: wrap; gap: .7rem; }
.button { align-items: center; border-radius: .4rem; display: inline-flex; font-size: .91rem; font-weight: 800; gap: .6rem; justify-content: center; min-height: 3.3rem; padding: .8rem 1.1rem; text-decoration: none; }
.button--primary { background: var(--navy); box-shadow: 0 .65rem 1.35rem rgba(16, 45, 60, .17); color: #fff; }
.button--primary:hover { background: var(--teal); }
.button--quiet { color: var(--navy); }
.button--quiet:hover { color: var(--teal); text-decoration: underline; text-underline-offset: .2rem; }
.hero__note { color: var(--muted); font-size: .78rem; margin: 1rem 0 0; }
.hero__proof { border-top: 1px solid #c6dfd7; color: #386568; display: flex; flex-wrap: wrap; font-size: .73rem; font-weight: 800; gap: .6rem 1.35rem; letter-spacing: .01em; margin-top: 2.6rem; max-width: 35rem; padding-top: 1.25rem; }
.hero__proof span::before { color: var(--teal); content: "✓"; margin-right: .4rem; }

.example { background: #fff; border: 1px solid #c6dbd5; border-radius: 1rem; box-shadow: 0 1.8rem 4rem rgba(15,67,65,.14); overflow: hidden; }
.example__topbar { align-items: center; background: #f6faf7; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem; padding: 1.1rem; font-size: .83rem; font-weight: 700; }
.example__topbar-mark { background: var(--navy); border-radius: .35rem; color: var(--mint); padding: .25rem .4rem; }
.example__topbar-tag { background: #e5f5ee; border-radius: 99px; color: #176c65; font-size: .68rem; margin-left: auto; padding: .35rem .6rem; }
.example__body { padding: 1.4rem; }
.example__step { display: flex; gap: .85rem; margin-bottom: 1.35rem; }
.step-number { color: var(--teal); font-size: .7rem; font-weight: 800; padding-top: .15rem; }
.example__label { color: #506773; font-size: .67rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .45rem; }
.example__step p:not(.example__label), .example__feedback p:not(.example__label) { font-size: .9rem; line-height: 1.55; margin-bottom: 0; }
.draft-copy { color: #61757c; }
.example__feedback { display: flex; gap: .75rem; padding: 1rem; background: #f6f2e9; border: 1px solid #e5ddcb; border-radius: .5rem; }
.example__avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.7rem; height: 1.7rem; background: #e2d9f0; color: #5b467e; border-radius: 50%; font-size: .75rem; font-weight: 800; }
.example__request { color: var(--muted); font-size: .75rem; line-height: 1.6; margin: .9rem .2rem; }
.example__revision { background: #eaf6ef; border: 1px solid #c2dfd0; border-radius: .5rem; padding: 1.15rem; }
.example__revision > p:last-child { color: var(--navy); font-size: 1.4rem; line-height: 1.3; letter-spacing: -.03em; margin: 0; }
.example__footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; line-height: 1.5; padding: .9rem 1.4rem; }

.how-it-works { background: var(--white); padding: clamp(4.5rem, 7vw, 7rem) 0; }
.section-heading { max-width: 42rem; }
.section-heading h2, .ready-section h2 { font-size: clamp(2.15rem, 4vw, 3.35rem); letter-spacing: -.053em; line-height: 1.08; margin-bottom: 1rem; }
.section-heading > p:last-child { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0; }
.workflow { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 2.7rem 0 0; padding: 0; }
.workflow li { background: #f7faf7; border: 1px solid var(--line); border-radius: .75rem; min-height: 16.25rem; padding: 1.7rem; }
.workflow__number { color: var(--teal); font-size: .71rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.workflow h3 { font-size: 1.35rem; letter-spacing: -.035em; line-height: 1.18; margin: 2.3rem 0 .65rem; }
.workflow p { color: var(--muted); font-size: .92rem; line-height: 1.57; margin-bottom: 0; }

.outcomes { background: var(--cream); border-bottom: 1px solid #e2e6da; border-top: 1px solid #e2e6da; padding: clamp(4.6rem, 7vw, 7rem) 0; }
.outcomes__cards { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.7rem; }
.outcome-card { background: #fff; border: 1px solid #e1e7dd; border-radius: .65rem; display: flex; flex-direction: column; min-height: 16rem; padding: 1.4rem; }
.outcome-card__icon { align-items: center; background: #e0f3ea; border-radius: .4rem; color: #087d83; display: inline-flex; font-size: .7rem; font-weight: 900; height: 2rem; justify-content: center; margin-bottom: 1.4rem; width: 2rem; }
.outcome-card h3 { font-size: 1.16rem; letter-spacing: -.035em; margin-bottom: .45rem; }
.outcome-card p { color: var(--muted); font-size: .86rem; line-height: 1.55; margin-bottom: 1.4rem; }
.outcome-card .text-link { margin-top: auto; font-size: .85rem; }

.text-link { color: var(--teal); display: inline-block; font-size: .92rem; font-weight: 800; margin-top: .45rem; text-decoration-thickness: .08rem; text-underline-offset: .23rem; }
.text-link:hover { color: var(--navy); }

.ai-section { background: var(--white); padding: clamp(4.6rem, 7vw, 7rem) 0; }
.boundary-grid { border: 1px solid var(--line); border-radius: .7rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; overflow: hidden; }
.boundary-grid > div { border-left: 1px solid var(--line); padding: 1.6rem; }
.boundary-grid > div:first-child { border-left: 0; }
.boundary-grid__mark { color: var(--teal); font-size: .7rem; font-weight: 900; }
.boundary-grid h3 { font-size: 1.14rem; letter-spacing: -.03em; margin: 1.2rem 0 .55rem; }
.boundary-grid p { color: var(--muted); font-size: .87rem; line-height: 1.55; margin-bottom: 0; }
.faq { margin-top: 5rem; }
.ai-section__details { border-top: 1px solid var(--line); margin-top: 2rem; }
.ai-section__details details { border-bottom: 1px solid var(--line); }
.ai-section__details summary { color: var(--navy); cursor: pointer; font-size: .96rem; font-weight: 800; list-style: none; padding: 1.2rem 2rem 1.2rem 0; position: relative; }
.ai-section__details summary::-webkit-details-marker { display: none; }
.ai-section__details summary::after { color: var(--teal); content: "+"; font-size: 1.35rem; font-weight: 400; position: absolute; right: .3rem; top: .95rem; }
.ai-section__details details[open] summary::after { content: "−"; }
.ai-section__details details p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin-bottom: 1.25rem; max-width: 45rem; }
code { background: #e9f3ef; border-radius: .2rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; overflow-wrap: anywhere; padding: .1rem .25rem; }

.ready-section { background: var(--navy); color: #d9ece8; padding: clamp(3.5rem, 6vw, 5rem) 0; }
.ready-section__inner { align-items: center; display: flex; gap: 2rem; justify-content: space-between; }
.ready-section .eyebrow { color: #9ee2d2; }
.ready-section h2 { color: #fff; margin-bottom: .6rem; max-width: 35rem; }
.ready-section p:last-child { line-height: 1.6; margin-bottom: 0; }
.button--light { background: #fff; color: var(--navy); flex: 0 0 auto; }
.button--light:hover { background: var(--mint); }
.site-footer { background: var(--navy-deep); color: #bad4d1; font-size: .78rem; }
.site-footer .shell { align-items: center; display: flex; gap: 1rem; justify-content: space-between; min-height: 4.5rem; }
.site-footer span:first-child { color: #fff; font-weight: 800; }
.site-footer a { color: #b8e8dc; font-weight: 800; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .2rem; }

/* Readable, public sample deliverables; no account or scripts required. */
.sample-main { max-width: 64rem; padding-top: 4rem; padding-bottom: 4rem; }
.sample-intro { max-width: 46rem; }
.sample-intro h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); letter-spacing: -.055em; line-height: 1.06; }
.sample-intro > p { line-height: 1.7; }
.sample-notice, .sample-note { color: var(--muted); font-size: .85rem; line-height: 1.65; }
.sample-notice { border-left: 3px solid #9fcabd; padding-left: 1rem; }
.sample-nav { display: flex; flex-wrap: wrap; gap: .65rem; margin: 2rem 0; }
.sample-nav a { border: 1px solid var(--line); background: white; border-radius: 99px; color: var(--teal); padding: .7rem 1rem; font-size: .85rem; font-weight: 700; text-decoration: none; }
.sample-nav a:hover { background: var(--mint); }
.sample-document { background: #fff; border: 1px solid var(--line); border-radius: .8rem; padding: clamp(1.2rem, 4vw, 2.8rem); margin: 1.5rem 0; }
.sample-document h2 { font-size: 2rem; letter-spacing: -.04em; margin-bottom: .5rem; }
.sample-document h3 { font-size: 1.15rem; line-height: 1.4; }
.sample-document p, .sample-document li { line-height: 1.7; }
.sample-document li + li { margin-top: .6rem; }
.sample-document ul { padding-left: 1.25rem; }
.document-meta { color: var(--muted); font-size: .8rem; margin-bottom: 1.8rem; }
.sample-note { margin: 1.3rem 0 0; }
.revision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sample-before, .sample-feedback, .sample-after { background: #f5f6f2; border-radius: .6rem; padding: 1.3rem; }
.sample-feedback { background: #f6f2e9; }
.sample-after { background: #eaf6ef; margin: 1.5rem 0; }
.sample-after h3 { font-size: 1.6rem; letter-spacing: -.035em; }
.sample-before p, .sample-feedback p, .sample-after p:last-child { margin-bottom: 0; }
.sample-detail { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.sample-detail summary { cursor: pointer; color: var(--teal); font-weight: 700; padding: .35rem 0; }
.sample-detail p { margin: 1rem 0 0; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
caption { text-align: left; color: var(--muted); font-size: .8rem; margin-bottom: .8rem; }
th, td { text-align: left; padding: .9rem; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6; }
thead { background: #edf5ef; }
.concept-preview { background: #f4f2e7; border: 1px solid #e0decc; border-radius: .65rem; overflow: hidden; }
.concept-brand { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem; border-bottom: 1px solid #e0decc; font-weight: 800; }
.concept-brand span { font-size: .75rem; font-weight: 400; }
.concept-content { padding: clamp(1.2rem, 4vw, 3rem); }
.concept-content h3 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.05em; line-height: 1.1; }
.concept-content > p { max-width: 34rem; }
.concept-cta { display: inline-block; background: var(--navy); color: white; border-radius: .35rem; padding: .8rem 1rem; font-weight: 700; }
.concept-content small { display: block; color: var(--muted); margin-top: .7rem; }
.concept-benefits { display: flex; flex-wrap: wrap; gap: 1.2rem; padding: 1.2rem; border-top: 1px solid #e0decc; color: var(--teal); font-size: .8rem; font-weight: 700; }
.sample-end { padding: 3rem 0 1rem; }
.sample-end .text-link { margin: 1rem; }

@media (max-width: 960px) {
  .site-nav > a:not(.site-nav__login) { display: none; }
  .hero__grid { gap: 3rem; grid-template-columns: 1fr; }
  .example { max-width: 40rem; width: 100%; }
  .hero h1 { max-width: 16ch; }
}
@media (max-width: 760px) {
  .workflow, .boundary-grid, .outcomes__cards { grid-template-columns: 1fr; }
  .workflow li, .outcome-card { min-height: 0; }
  .workflow h3 { margin-top: 1.6rem; }
  .boundary-grid > div { border-left: 0; border-top: 1px solid var(--line); }
  .boundary-grid > div:first-child { border-top: 0; }
  .ready-section__inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .shell { padding-left: 1.1rem; padding-right: 1.1rem; }
  .site-header__inner { min-height: 4.5rem; gap: 1rem; }
  .brand__copy small { display: none; }
  .site-nav .site-nav__login { font-size: .77rem; padding: .65rem .7rem; }
  .hero { padding: 3.4rem 0; }
  .hero h1 { font-size: clamp(2.8rem, 11vw, 3.75rem); }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button { width: 100%; }
  .hero__proof { gap: .8rem; }
  .example__body { padding: 1rem; }
  .example__topbar { font-size: .75rem; }
  .revision-grid { grid-template-columns: 1fr; }
  .concept-brand { flex-direction: column; gap: .4rem; }
  th, td { padding: .6rem; font-size: .8rem; }
  .site-footer .shell { align-items: flex-start; flex-direction: column; gap: .55rem; padding-bottom: 1.3rem; padding-top: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}