/*
 * THE OLD COMPUTER — MODERN SITE THEME
 * ------------------------------------
 *
 * Shared colours, typography, buttons, header and footer plus the
 * Unlimited membership page's sections.
 *
 * Upload to: /toc-theme/css/toc-theme.css
 * Include on redesigned pages with:
 *   <link rel="stylesheet" href="/toc-theme/css/toc-theme.css">
 *
 * The stylesheet has no framework or JavaScript dependencies.
 * Do not load it globally on unconverted legacy pages: it styles
 * common HTML elements such as headings and links.
 *
 * Heritage artwork: /toc-theme/images/toc-legacy-system-collage.gif
 * is the ORIGINAL repeating background from the old TOC homepage.
 * We keep the image intact and tint/fade it with CSS so this visual
 * connection can be reused consistently on future redesigned pages.
 *
 * Update colour variables in :root to evolve the visual identity.
 */

:root {
  --bg:#0a0e17;
  --bg2:#0e1421;
  --panel:#141c2b;
  --panel2:#1a2534;
  --line:#2a3749;
  --cream:#f6f0e2;
  --text:#f2eee5;
  --muted:#a9b6c4;
  --orange:#ffb85d;
  --cyan:#62d7e6;
  --green:#b4f589;
  --shadow:0 28px 100px rgba(0,0,0,.32)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:84px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  overflow-x:hidden
}

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

button {
  font:inherit
}

::selection {
  background:var(--orange);
  color:#0a0e17
}

.skip {
  position:absolute;
  top:-80px;
  left:15px;
  padding:14px;
  background:var(--orange);
  color:#000;
  z-index:10
}

.skip:focus {
  top:15px
}

.container {
  max-width:1220px;
  margin:auto;
  padding:0 30px
}

.mono {
  font-family:'Space Mono',monospace
}

.eyebrow {
  font-family:'Space Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:700
}

/* SHARED HEADER — The page now begins directly with the TOC logo/menu. */

.site-header {
  height:85px;
  background:rgba(10,14,23,.92);
  backdrop-filter:blur(16px);
  position:sticky;
  top:0;
  z-index:5;
  border-bottom:1px solid rgba(169,182,196,.13)
}

.header-inner {
  height:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px
}

.header-left {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0
}

/*
 * UNIVERSAL TOC DROPDOWN MENU
 * Keep these selectors and the toc-menu.js helper with the shared PHP
 * header on future pages. Native <details> provides a working toggle
 * even if JavaScript is unavailable.
 */
.toc-menu {
  flex:0 1 auto;
  min-width:0
}

.toc-menu-logo {
  width:auto;
  max-width:100%;
  min-height:76px;
  display:inline-flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:11px;
  padding:2px 9px 2px 3px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:var(--green);
  cursor:pointer;
  list-style:none;
  transition:background .2s,border-color .2s
}

.toc-menu-logo::-webkit-details-marker {
  display:none
}

.toc-menu-logo:hover,.toc-menu[open] .toc-menu-logo {
  background:rgba(41,96,79,.14);
  border-color:rgba(106,213,153,.35)
}

.toc-menu-logo:focus-visible {
  outline:2px solid var(--orange);
  outline-offset:3px
}

.toc-menu-logo img {
  display:block;
  width:62px;
  height:62px;
  flex:none;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(85,240,143,.18));
  transition:filter .2s,transform .2s
}

.toc-menu-logo:hover img,.toc-menu[open] .toc-menu-logo img {
  filter:drop-shadow(0 0 15px rgba(85,240,143,.48));
  transform:scale(1.04)
}

.toc-menu-typing {
  display:block;
  flex:0 1 auto;
  width:34ch;
  height:2.75em;
  min-width:0;
  overflow:hidden;
  color:var(--green);
  font:700 15px 'Space Mono',monospace;
  letter-spacing:.035em;
  line-height:1.35;
  text-shadow:0 0 9px rgba(139,243,157,.42)
}

.toc-menu-typed {
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

.toc-menu-cursor {
  display:inline-block;
  width:7px;
  height:15px;
  margin-left:3px;
  vertical-align:-2px;
  background:var(--green);
  box-shadow:0 0 6px rgba(139,243,157,.65);
  animation:toc-cursor-pulse .9s steps(1,end) infinite
}

@keyframes toc-cursor-pulse {
  0%,48% {opacity:1}
  49%,100% {opacity:.12}
}

.toc-menu[open] .toc-menu-cursor {
  animation:none;
  background:var(--orange)
}

.toc-menu-panel {
  position:absolute;
  left:0;
  top:calc(100% - 1px);
  width:100%;
  max-height:calc(100vh - 85px);
  overflow-y:auto;
  background:radial-gradient(circle at 0 0,#15313d,#0f1b2a 55%,#0b1523);
  border-top:1px solid #3d6970;
  border-bottom:1px solid #45666b;
  color:var(--cream);
  box-shadow:0 35px 75px rgba(0,0,0,.6);
  isolation:isolate;
  animation:toc-menu-drop .2s ease-out both
}

.toc-menu-panel:before {
  content:'';
  position:absolute;
  inset:0;
  background:url('/toc-theme/images/toc-legacy-system-collage.gif') center top / 915px 570px repeat;
  filter:brightness(6) sepia(1) saturate(1.2) hue-rotate(128deg);
  opacity:.075;
  pointer-events:none
}

@keyframes toc-menu-drop {
  from {opacity:0;transform:translateY(-9px)}
  to {opacity:1;transform:translateY(0)}
}

.toc-menu-content {
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr 1fr;
  gap:28px 32px;
  padding-top:35px;
  padding-bottom:22px;
  position:relative;
  z-index:1
}

.toc-menu-intro {
  padding:4px 25px 0 0;
  border-right:1px solid #2d4853
}

.toc-menu-kicker {
  display:block;
  margin:0 0 18px;
  color:var(--green);
  font:700 10px 'Space Mono',monospace;
  letter-spacing:.06em
}

.toc-menu-heading {
  font:700 clamp(24px,2.4vw,33px)/1.05 'Space Grotesk',sans-serif;
  letter-spacing:-.055em
}

.toc-menu-heading span {
  color:var(--orange)
}

.toc-menu-intro p {
  margin:19px 0 20px;
  font-size:13px;
  line-height:1.65;
  color:#9eafb9
}

.toc-menu-feature {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--orange);
  font:700 11px 'Space Mono',monospace;
  letter-spacing:.04em
}

.toc-menu-feature:hover,.toc-menu-feature:focus-visible {
  color:var(--cream)
}

.toc-menu-group h2 {
  display:flex;
  align-items:center;
  gap:9px;
  max-width:none;
  margin:4px 0 14px;
  color:var(--orange);
  font:700 12px 'Space Mono',monospace;
  letter-spacing:.015em;
  line-height:1.4
}

.toc-menu-group a {
  display:block;
  margin-left:-10px;
  padding:7px 10px;
  border-radius:4px;
  color:#c0d0d8;
  font-size:13px;
  line-height:1.35;
  transition:background .16s,color .16s,transform .16s
}

.toc-menu-group a:hover,.toc-menu-group a:focus-visible {
  background:#244451;
  color:var(--cream);
  transform:translateX(3px)
}

.toc-menu-utility {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-top:18px;
  border-top:1px solid #2c4954;
  color:#77939d;
  font:700 10px 'Space Mono',monospace;
  letter-spacing:.035em
}

.toc-menu-command {
  color:var(--green);
  text-shadow:0 0 8px rgba(180,245,137,.3)
}

.toc-menu-utility div {
  display:flex;
  flex-wrap:wrap;
  gap:22px
}

.toc-menu-utility a:hover,.toc-menu-utility a:focus-visible {
  color:var(--orange)
}

/* The legacy Google Translate control is retained in the PHP menu only.
   Keep this compact so it can be reused on future redesigned pages. */
.toc-menu-utility .toc-menu-translation {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px
}

.toc-menu-translation .goog-te-combo {
  max-width:170px;
  padding:5px 6px;
  border:1px solid #44606e;
  border-radius:4px;
  background:#0b1c26;
  color:#e5eee9;
  font:12px 'Space Mono',monospace
}

.brand {
  display:flex;
  align-items:center;
  min-width:0
}

.brand-text {
  line-height:.99;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  letter-spacing:-.045em;
  font-size:20px
}

.brand-text span {
  display:block;
  color:var(--orange)
}

.header-nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:13px;
  font-weight:700;
  color:#cad2d9
}

.header-nav>a:not(.small-cta) {
  transition:color .2s
}

.header-nav>a:not(.small-cta):hover {
  color:var(--orange)
}

.small-cta {
  display:flex;
  align-items:center;
  gap:13px;
  background:var(--cream);
  color:#152030;
  padding:14px 18px;
  border-radius:5px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  transition:transform .2s,background .2s
}

.small-cta:hover {
  transform:translateY(-2px);
  background:var(--orange)
}

/* UNLIMITED PAGE: HERO AND COMPUTER ILLUSTRATION */

.hero {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 83% 24%,rgba(44,91,105,.25),transparent 48%),linear-gradient(180deg,#0d1420,#0a0e17);
  padding:72px 0 81px
}

.hero:before {
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(99,145,160,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(99,145,160,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,transparent,black 30%,black 95%);
  pointer-events:none
}

/*
 * TOC heritage collage: the line drawings of original retro systems.
 * Reveal them most strongly behind the computer illustration, while
 * fading them away beneath the headline for comfortable reading.
 */
.hero:after {
  content:'';
  position:absolute;
  inset:0;
  background-image:url('/toc-theme/images/toc-legacy-system-collage.gif');
  background-size:915px 570px;
  background-position:center -20px;
  background-repeat:repeat;
  filter:brightness(8) sepia(1) saturate(1.6) hue-rotate(126deg);
  opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 37%,rgba(0,0,0,.48) 66%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 37%,rgba(0,0,0,.48) 66%,#000 100%);
  pointer-events:none
}

.hero-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:35px;
  align-items:center
}

.hero-copy {
  position:relative;
  z-index:1;
  padding:14px 0 15px
}

.mini-tag {
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid #3b4b4d;
  background:rgba(138,201,169,.07);
  padding:10px 13px;
  border-radius:3px;
  color:var(--green);
  font-size:11px;
  letter-spacing:.11em
}

.signal {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(180,245,137,.11)
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  font-family:'Space Grotesk',sans-serif
}

h1 {
  font-size:clamp(54px,5.1vw,79px);
  line-height:.99;
  letter-spacing:-.075em;
  max-width:710px;
  margin:25px 0 25px;
  font-weight:700
}

h1 .accent {
  color:var(--orange);
  display:block
}

h1 .dot {
  color:var(--cyan)
}

.hero-desc {
  font-size:17px;
  line-height:1.72;
  color:#bec8d0;
  max-width:550px;
  margin-bottom:27px
}

.hero-desc strong {
  color:var(--cream)
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:17px 24px;
  min-height:55px;
  border:1px solid transparent;
  border-radius:5px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:15px;
  transition:transform .2s,box-shadow .2s,background .2s
}

.button:hover {
  transform:translateY(-3px)
}

.button-primary {
  background:var(--orange);
  color:#18202d;
  box-shadow:0 14px 28px rgba(255,184,93,.13)
}

.button-primary:hover {
  background:#ffca82;
  box-shadow:0 20px 38px rgba(255,184,93,.21)
}

.button-ghost {
  color:var(--cream);
  border-color:#425063;
  background:rgba(255,255,255,.02)
}

.button-ghost:hover {
  background:#1b2736
}

.hero-note {
  margin-top:20px;
  color:#9aaaba;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:10px
}

.hero-note .check {
  color:var(--green)
}

.hero-purpose {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:10px;
  color:#a7d3bb;
  font-size:12px;
  line-height:1.5
}

.hero-purpose span {
  color:var(--green);
  font-size:14px
}

.machine-stage {
  height:560px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate
}

.machine-stage:before {
  content:'';
  width:540px;
  height:540px;
  border:1px solid rgba(98,215,230,.11);
  border-radius:50%;
  position:absolute;
  z-index:-2;
  box-shadow:0 0 0 50px rgba(98,215,230,.018),0 0 0 100px rgba(98,215,230,.012)
}

.machine-stage:after {
  content:'';
  position:absolute;
  width:410px;
  height:120px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  bottom:5px;
  filter:blur(24px);
  z-index:-1
}

.corner-label {
  position:absolute;
  top:15px;
  right:0;
  color:rgba(169,182,196,.55);
  font-size:10px;
  letter-spacing:.17em
}

.crt {
  width:445px;
  max-width:100%;
  transform:rotate(-3deg);
  filter:drop-shadow(0 34px 30px rgba(0,0,0,.35));
  margin-top:-25px
}

.crt-shell {
  padding:26px 26px 20px;
  border-radius:20px 20px 12px 12px;
  border:2px solid #8b959a;
  background:linear-gradient(125deg,#d2d2be,#777f80 70%,#505b62);
  box-shadow:inset 7px 7px 2px rgba(255,255,255,.25),inset -7px -8px 8px rgba(0,0,0,.25),0 0 0 4px #3a4249
}

.crt-screen {
  height:305px;
  border-radius:33px / 25px;
  background:radial-gradient(ellipse at center,#193a2d,#051d1c 72%);
  border:13px solid #27343a;
  box-shadow:inset 0 0 28px #020e0e,0 0 0 2px #6c7778;
  position:relative;
  overflow:hidden;
  padding:24px 26px;
  color:#a4f9a3;
  font:13px/1.6 'Space Mono',monospace;
  text-shadow:0 0 10px rgba(164,249,163,.65)
}

.crt-screen:after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 4px),linear-gradient(115deg,rgba(255,255,255,.07),transparent 40%);
  opacity:.52
}

.screen-top {
  border-bottom:1px dashed rgba(164,249,163,.35);
  padding-bottom:8px;
  margin-bottom:15px;
  font-size:11px;
  letter-spacing:.08em
}

.screen-cmd {
  margin-bottom:18px;
  color:#d4ffc5
}

.screen-info {
  font-size:11px;
  line-height:2.1;
  opacity:.9
}

.screen-info span {
  display:block
}

.cursor {
  display:inline-block;
  width:9px;
  height:14px;
  background:var(--green);
  vertical-align:middle;
  animation:blink 1.1s step-end infinite
}

@keyframes blink {
  50% {
    opacity:0
  }

}

.crt-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 10px 0;
  color:#303b42;
  font:700 11px 'Space Mono',monospace;
  letter-spacing:.1em
}

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

.power i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#54e8ab;
  box-shadow:0 0 8px rgba(84,232,171,.7)
}

.power b {
  width:23px;
  height:16px;
  border-radius:4px;
  background:#455057;
  border:1px solid #303b42;
  box-shadow:inset 0 2px 2px #28343c
}

.crt-neck {
  width:240px;
  height:28px;
  margin:auto;
  background:linear-gradient(#858b87,#626e72);
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)
}

.crt-base {
  height:19px;
  width:320px;
  margin:auto;
  background:linear-gradient(#a8aaa0,#6c7475);
  border-radius:5px 5px 12px 12px;
  box-shadow:0 5px 0 #3c464f
}

/*
 * An authentic-looking 5.25-inch floppy jacket, built only with CSS.
 * Its warm Unlimited label echoes the small cyan 3.5-inch disk nearby.
 */
.floppy-five {
  position:absolute;
  bottom:16px;
  right:-4px;
  width:216px;
  height:226px;
  transform:rotate(8deg);
  background:linear-gradient(155deg,#2d3742,#121b26 60%,#0b121b);
  border:3px solid #4b5962;
  border-radius:7px;
  box-shadow:0 19px 34px rgba(0,0,0,.54),inset 0 0 0 7px rgba(7,13,20,.6);
  z-index:2;
  isolation:isolate
}

.floppy-five:before {
  content:'';
  position:absolute;
  inset:10px;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(147,161,164,.12) 10px 11px);
  opacity:.4;
  pointer-events:none
}

.floppy-five-notch {
  position:absolute;
  top:42px;
  right:-3px;
  width:17px;
  height:25px;
  background:#09131e;
  border:2px solid #657179;
  border-right:0;
  border-radius:4px 0 0 4px;
  box-shadow:inset 4px 1px 4px rgba(0,0,0,.5);
  z-index:2
}

.floppy-five-window {
  position:absolute;
  /* The magnetic spindle must sit at the true centre of the jacket. */
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:105px;
  height:105px;
  border-radius:50%;
  border:8px solid #394651;
  background:radial-gradient(circle,#081119 48%,#121d29 49%,#09121b 78%);
  box-shadow:inset 0 4px 16px rgba(0,0,0,.9),0 2px 1px rgba(130,149,151,.25);
  display:grid;
  place-items:center
}

.floppy-five-window:before {
  content:'';
  position:absolute;
  inset:7px;
  border:2px dashed rgba(150,170,169,.28);
  border-radius:50%
}

.floppy-five-hub {
  width:45px;
  height:45px;
  position:relative;
  border-radius:50%;
  border:2px solid #6c7b7d;
  background:radial-gradient(circle at 38% 35%,#b8c3be,#899693 57%,#3d4b50 59%,#25343c);
  box-shadow:0 3px 8px rgba(0,0,0,.6)
}

.floppy-five-hub:after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:20px;
  height:20px;
  border-radius:50%;
  border:3px solid #99a4a1;
  background:#14212b
}

.floppy-five-label {
  position:absolute;
  bottom:8px;
  left:11px;
  right:11px;
  height:50px;
  padding:5px 10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid #fce3b2;
  border-radius:3px;
  background:linear-gradient(175deg,#ffe2a6,#ffca77 53%,#f0a64c);
  color:#202a34;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
  z-index:3;
  overflow:hidden
}

.floppy-five-label:before {
  content:'';
  position:absolute;
  right:8px;
  top:5px;
  width:18px;
  height:18px;
  border:2px solid rgba(67,64,54,.14);
  border-radius:50%
}

.floppy-five-brand {
  position:relative;
  font:700 7px 'Space Mono',monospace;
  letter-spacing:.02em
}

.floppy-five-label strong {
  position:relative;
  font:700 21px 'Space Grotesk',sans-serif;
  line-height:1;
  letter-spacing:-.055em
}

.floppy-five-life {
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:7px;
  font:700 7px 'Space Mono',monospace
}

.floppy-five-life b {
  white-space:nowrap;
  font-size:7px
}

.floating-floppy {
  position:absolute;
  bottom:43px;
  left:-12px;
  transform:rotate(-12deg);
  width:102px;
  height:108px;
  background:#4cc4d3;
  border-radius:5px 5px 10px 10px;
  border:5px solid #2f98aa;
  box-shadow:7px 14px 20px rgba(0,0,0,.3)
}

.floating-floppy:before {
  content:'';
  display:block;
  background:#22394b;
  height:35px;
  margin:0 15px;
  border-radius:0 0 5px 5px;
  border-left:5px solid #cde7df;
  border-right:9px solid #cde7df
}

.floating-floppy:after {
  content:'TOC / 01';
  display:grid;
  place-items:center;
  background:#e5ddc8;
  color:#27414e;
  height:42px;
  margin:9px 10px 0;
  border-radius:3px;
  font:700 10px 'Space Mono',monospace
}

/* MEMBERSHIP HIGHLIGHTS */

.proof-strip {
  border-top:1px solid #263340;
  border-bottom:1px solid #263340;
  background:#101824
}

.proof-inner {
  display:grid;
  grid-template-columns:repeat(3,1fr)
}

.proof-item {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  padding:24px 18px;
  border-right:1px solid #283443
}

.proof-item:last-child {
  border:0
}

.proof-icon {
  font:700 23px 'Space Mono',monospace;
  color:var(--orange);
  line-height:1
}

.proof-copy strong {
  display:block;
  font:700 15px 'Space Grotesk',sans-serif
}

.proof-copy span {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:3px
}

/* BENEFIT CARDS */

.section {
  padding:110px 0
}

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

.section-kicker {
  color:var(--orange);
  margin-bottom:17px;
  display:block
}

h2 {
  font-size:clamp(37px,4.1vw,57px);
  line-height:1.05;
  letter-spacing:-.06em;
  max-width:740px;
  margin-bottom:0
}

.section-intro {
  max-width:330px;
  line-height:1.65;
  color:var(--muted);
  font-size:15px;
  margin:0 0 4px
}

.benefit-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.benefit {
  border:1px solid #2a3848;
  background:linear-gradient(145deg,#162032,#121b2a);
  padding:29px 28px 33px;
  min-height:243px;
  position:relative;
  overflow:hidden;
  transition:transform .2s,border-color .2s
}

.benefit:hover {
  transform:translateY(-5px);
  border-color:#536579
}

.benefit-num {
  color:#617689;
  font:700 11px 'Space Mono',monospace;
  position:absolute;
  top:27px;
  right:28px
}

.benefit-glyph {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid #42606a;
  background:#1b3845;
  border-radius:7px;
  color:var(--cyan);
  font-size:23px;
  margin-bottom:27px
}

.benefit:nth-child(2) .benefit-glyph,.benefit:nth-child(5) .benefit-glyph {
  background:#3a322a;
  border-color:#69513a;
  color:var(--orange)
}

.benefit:nth-child(3) .benefit-glyph,.benefit:nth-child(6) .benefit-glyph {
  background:#283e2f;
  border-color:#425e43;
  color:var(--green)
}

.benefit h3 {
  font-size:22px;
  letter-spacing:-.04em;
  margin-bottom:12px
}

.benefit p {
  font-size:14px;
  line-height:1.65;
  color:var(--muted);
  margin:0
}

/* PRESERVATION STORY AND TOC LOGO */

.value-story {
  padding:95px 0;
  background:var(--cream);
  color:#142031;
  position:relative;
  overflow:hidden
}

.value-story:before {
  content:'"';
  font-family:Georgia,serif;
  font-size:650px;
  color:rgba(22,34,49,.035);
  position:absolute;
  left:-80px;
  top:-140px;
  line-height:1
}

.story-grid {
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:100px;
  align-items:center;
  position:relative
}

.story-kicker {
  color:#90642f;
  display:block;
  margin-bottom:20px
}

.story-grid h2 {
  max-width:610px
}

.story-grid h2 em {
  font-style:normal;
  color:#cc7b31
}

.story-grid p {
  font-size:16px;
  line-height:1.8;
  color:#56616c;
  max-width:550px;
  margin-top:25px
}

/* The preservation pledge is a key reason members choose to contribute. */
.preservation-pledge {
  display:flex;
  align-items:flex-start;
  gap:15px;
  margin-top:25px;
  padding:18px 19px;
  background:#e9f0e9;
  border:1px solid #bfd4c7;
  border-left:4px solid #2f8b70;
  border-radius:8px;
  max-width:590px
}

.pledge-symbol {
  flex:none;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#cce5d6;
  color:#1e7052;
  font-size:18px
}

.preservation-pledge strong {
  display:block;
  margin-top:2px;
  color:#20594a;
  font:700 12px 'Space Mono',monospace;
  letter-spacing:.04em
}

.preservation-pledge p {
  margin:7px 0 0;
  font-size:13px;
  line-height:1.68;
  color:#425851
}

.story-feature {
  background:#092426;
  border:1px solid #28504e;
  border-radius:11px;
  padding:20px 33px 31px;
  box-shadow:0 20px 50px rgba(18,43,49,.15);
  color:#e8f4e7
}

.story-logo {
  display:block;
  width:min(270px,80%);
  height:auto;
  margin:-5px auto 7px;
  filter:drop-shadow(0 0 18px rgba(55,223,126,.09))
}

.story-note {
  border-left:3px solid var(--green);
  padding:0 0 0 22px;
  font-size:20px;
  line-height:1.5;
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  letter-spacing:-.03em
}

.story-note small {
  display:block;
  font:700 10px 'Space Mono',monospace;
  color:#8da9a0;
  letter-spacing:.08em;
  margin-top:16px
}

/* AUTHENTIC COMMUNITY COMMENTS */

.reviews {
  padding:101px 0;
  background:#0c121d
}

.reviews-heading {
  text-align:center;
  max-width:760px;
  margin:0 auto 43px
}

.reviews-heading h2 {
  margin:auto
}

.reviews-heading p {
  margin:18px auto 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.65
}

.review-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:17px
}

.review-card {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:225px;
  padding:30px 31px;
  background:linear-gradient(145deg,#172438,#121c2b);
  border:1px solid #2d4252;
  border-radius:6px;
  position:relative;
  margin:0
}

.review-card:before {
  content:'“';
  position:absolute;
  right:24px;
  top:6px;
  font:95px Georgia,serif;
  color:rgba(98,215,230,.12);
  line-height:1
}

.review-label {
  color:var(--orange);
  font:700 10px 'Space Mono',monospace;
  letter-spacing:.11em;
  margin-bottom:18px
}

.review-quote {
  font:500 22px/1.4 'Space Grotesk',sans-serif;
  letter-spacing:-.035em;
  max-width:480px;
  position:relative;
  margin:0 0 25px
}

.review-author {
  display:flex;
  gap:9px;
  align-items:center;
  color:#98afbf;
  font:700 11px 'Space Mono',monospace;
  letter-spacing:.04em
}

.review-author:before {
  content:'';
  width:18px;
  height:1px;
  background:var(--cyan)
}

.reviews-footer {
  text-align:center;
  margin-top:29px;
  font-size:13px;
  color:var(--muted)
}

.reviews-footer a {
  color:var(--cyan);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px
}

/* LIFETIME MEMBERSHIP OFFER */

.pricing {
  padding:110px 0;
  background:linear-gradient(180deg,#0f1724,#0b101a)
}

.pricing-shell {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  border:1px solid #52626b;
  border-radius:11px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#162131
}

.pricing-left {
  padding:54px 50px;
  background:linear-gradient(155deg,#faca83,#ffaf4f);
  color:#192532;
  position:relative
}

.pricing-left:after {
  content:'✦';
  position:absolute;
  bottom:-45px;
  right:2px;
  font-size:240px;
  line-height:1;
  color:rgba(255,255,255,.15)
}

.pricing-left .eyebrow {
  color:#6a4c2a
}

.pricing-left h2 {
  font-size:44px;
  line-height:1.02;
  margin:22px 0 35px
}

.amount {
  display:flex;
  align-items:start;
  gap:5px;
  font:700 94px 'Space Grotesk',sans-serif;
  letter-spacing:-.1em;
  line-height:1
}

.amount small {
  font-size:20px;
  letter-spacing:-.02em;
  margin:14px 0 0 7px
}

.price-note {
  font-size:14px;
  font-weight:700;
  position:relative;
  z-index:1;
  margin:14px 0 0
}

.pricing-right {
  padding:48px 55px 51px
}

.pricing-right h3 {
  font-size:26px;
  letter-spacing:-.04em;
  margin-bottom:22px
}

.pricing-list {
  margin:0 0 28px;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:24px;
  row-gap:18px
}

.pricing-list li {
  display:flex;
  gap:9px;
  font-size:14px;
  color:#d1dbe1;
  line-height:1.35
}

.pricing-list li span {
  color:var(--green);
  font-weight:700;
  flex:none
}

.pricing-button {
  width:100%;
  justify-content:space-between
}

.pricing-purpose {
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin:15px 0 0;
  color:#b9dfc6;
  font-size:12px;
  line-height:1.5
}

.pricing-purpose span {
  color:var(--green)
}

.pricing-fine {
  color:#8e9fae;
  font-size:12px;
  line-height:1.55;
  margin:8px 0 0
}

/* FOUR-STEP VERTICAL UPGRADE PROCESS */

.steps-section {
  padding:112px 0 105px
}

.steps-heading {
  text-align:center;
  max-width:700px;
  margin:0 auto 53px
}

.steps-heading h2 {
  margin:auto
}

.steps-heading p {
  color:var(--muted);
  line-height:1.7;
  margin:18px auto 0;
  max-width:560px
}

.steps {
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
  max-width:890px;
  margin:0 auto
}

.steps:before {
  content:'';
  position:absolute;
  left:29px;
  top:32px;
  bottom:42px;
  border-left:1px dashed #536a74;
  z-index:0
}

.step {
  position:relative;
  display:grid;
  grid-template-columns:60px 1fr;
  column-gap:27px;
  text-align:left;
  z-index:1;
  padding:0 0 22px
}

.step:last-child {
  padding-bottom:0
}

.step-number {
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  margin:17px 0 0;
  background:#213342;
  border:1px solid #567787;
  color:var(--orange);
  font:700 19px 'Space Mono',monospace;
  box-shadow:0 0 0 9px var(--bg);
  border-radius:50%
}

.step-body {
  background:#152131;
  border:1px solid #2c4050;
  border-radius:7px;
  padding:24px 30px 25px
}

.step-body .eyebrow {
  display:block;
  color:#7da7b2;
  font-size:10px;
  margin-bottom:8px
}

.step h3 {
  font-size:25px;
  letter-spacing:-.04em;
  margin-bottom:8px
}

.step p {
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  max-width:690px;
  margin:0
}

.step a {
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px
}

.important-note {
  max-width:960px;
  margin:54px auto 0;
  padding:19px 23px;
  display:flex;
  align-items:start;
  gap:15px;
  border:1px solid #64583b;
  background:#25251d;
  border-radius:5px;
  color:#dddfcf;
  font-size:13px;
  line-height:1.65
}

.important-note strong {
  color:var(--orange)
}

.important-note .symbol {
  color:var(--orange);
  font:700 23px 'Space Mono',monospace
}

/* FREQUENTLY ASKED QUESTIONS */

.faq-section {
  padding:100px 0 115px;
  background:#111a28;
  border-top:1px solid #243344
}

.faq-grid {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:80px
}

.faq-grid h2 {
  font-size:46px
}

.faq-grid .section-intro {
  margin-top:20px
}

.faq-list {
  border-top:1px solid #39485a
}

.faq-list details {
  border-bottom:1px solid #39485a;
  padding:0 0 1px
}

.faq-list summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:23px 0;
  font:700 17px 'Space Grotesk',sans-serif
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary:after {
  content:'+';
  font:400 27px 'Space Grotesk',sans-serif;
  color:var(--orange);
  flex:none;
  transition:transform .2s
}

.faq-list details[open] summary:after {
  transform:rotate(45deg)
}

.faq-list details p {
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
  margin:-3px 35px 22px 0
}

.faq-list details p a {
  text-decoration:underline;
  color:var(--cyan)
}

/* FINAL CALL TO ACTION */

.final-cta {
  background:linear-gradient(100deg,#17313e,#1a3437);
  border-top:1px solid #365960;
  border-bottom:1px solid #365960;
  padding:60px 0
}

.final-flex {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}

.final-flex h2 {
  font-size:39px;
  margin:9px 0 0
}

.final-flex .eyebrow {
  color:var(--green)
}

/* SHARED SITE FOOTER — REUSE ON OTHER PAGES */

.site-footer {
  background:radial-gradient(circle at 2% 0,rgba(34,94,89,.18),transparent 35%),#080d16;
  border-top:1px solid #30434c;
  position:relative;
  overflow:hidden
}

/* A quieter repeat of the old homepage motif across the shared footer. */
.site-footer:before {
  content:'';
  position:absolute;
  inset:0;
  background:url('/toc-theme/images/toc-legacy-system-collage.gif') center top / 915px 570px repeat;
  filter:brightness(7) sepia(1) saturate(1.5) hue-rotate(125deg);
  opacity:.11;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 30%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 30%,#000 100%);
  pointer-events:none
}

.site-footer > * {
  position:relative;
  z-index:1
}

/*
 * COMPACT ARCHIVE STATISTICS
 * Values use the data-toc-stat hooks so the shared PHP footer can read
 * the existing homepage statistics rather than maintaining duplicates.
 */
.toc-stats-bar {
  padding:22px 0 24px;
  background:rgba(10,28,34,.82);
  border-bottom:1px solid #2d4b53
}

.toc-stats-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-bottom:17px;
  color:var(--green);
  font:700 10px 'Space Mono',monospace;
  letter-spacing:.09em
}

.toc-stats-heading small {
  color:#77969b;
  font:500 10px 'Space Mono',monospace;
  letter-spacing:0
}

.toc-stats-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr))
}

.toc-stat {
  padding:0 12px;
  border-right:1px solid #2b454e;
  min-width:0
}

.toc-stat:first-child {
  padding-left:0
}

.toc-stat:last-child {
  border-right:0;
  padding-right:0
}

.toc-stat strong {
  display:block;
  white-space:nowrap;
  color:#e8f1e9;
  font:700 clamp(16px,1.55vw,22px) 'Space Grotesk',sans-serif;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums
}

.toc-stat span {
  display:block;
  margin-top:4px;
  color:#9bb2ba;
  font:600 10px 'DM Sans',sans-serif;
  white-space:nowrap
}

.footer-main {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:42px;
  padding-top:74px;
  padding-bottom:65px
}

.footer-about .footer-logo {
  width:154px;
  height:auto;
  display:block;
  margin:-13px 0 4px;
  filter:drop-shadow(0 0 18px rgba(74,219,131,.06))
}

.footer-tagline {
  color:var(--green);
  font:700 12px 'Space Mono',monospace;
  letter-spacing:.03em;
  margin:4px 0 18px
}

.footer-desc {
  font-size:13px;
  line-height:1.75;
  color:#93a7b3;
  max-width:295px
}

.footer-column h3 {
  font:700 12px 'Space Mono',monospace;
  letter-spacing:.1em;
  color:var(--orange);
  text-transform:uppercase;
  margin:6px 0 24px
}

.footer-column nav {
  display:flex;
  flex-direction:column;
  gap:13px
}

.footer-column a {
  font-size:13px;
  color:#a7b8c5;
  transition:color .2s,transform .2s;
  display:inline-block
}

.footer-column a:hover {
  color:var(--cream);
  transform:translateX(3px)
}

/* Keep the safety report at the far right, level with the social icons. */
.footer-column:last-child {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.footer-column:last-child .toc-safety-badge {
  display:flex;
  align-self:flex-end;
  margin-top:auto
}
.footer-column .toc-safety-badge:hover {transform:none}

.footer-social {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px
}

/*
 * Reusable social buttons for EVERY redesigned TOC page.
 * The icon shapes come from the same SVG sprite; each brand supplies its own
 * restrained base colour and brighter hover glow. No JavaScript is needed.
 */
.footer-social .toc-social {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:none;
  padding:0;
  border:1px solid rgba(var(--social-rgb),.6);
  border-radius:4px;
  color:#fff;
  background:rgba(var(--social-rgb),.17);
  box-shadow:inset 0 0 0 2px rgba(6,13,20,.4);
  transition:transform .2s,border-color .2s,background .2s,box-shadow .2s
}

.footer-social .toc-social-icon {
  display:block;
  width:27px;
  height:27px;
  overflow:visible;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
  transition:transform .2s
}

.footer-social a.toc-social:hover {
  transform:translateY(-3px);
  border-color:rgb(var(--social-rgb));
  background:rgba(var(--social-rgb),.29);
  box-shadow:inset 0 0 0 2px rgba(6,13,20,.5),0 0 19px rgba(var(--social-rgb),.35)
}
.footer-social a.toc-social:hover .toc-social-icon {transform:scale(1.09)}
.footer-social a.toc-social:focus-visible {outline:2px solid var(--cream);outline-offset:4px}

.footer-social .toc-social--facebook {--social-rgb:24,119,242;background:#1877f2}
.footer-social .toc-social--x {--social-rgb:180,190,201;background:#080b12}
.footer-social .toc-social--youtube {--social-rgb:255,0,51}
.footer-social .toc-social--discord {--social-rgb:88,101,242;background:#5865f2}
.footer-social .toc-social--tiktok {--social-rgb:37,244,238;background:#070c12}
.footer-social .toc-social--instagram {
  --social-rgb:240,96,157;
  background:linear-gradient(135deg,#5a32cb 0%,#b13599 45%,#ed4956 73%,#f8ad51 100%);
  border-color:#d371c0
}

/* Official TikTok and Instagram URLs are not known yet. Keep their artwork
 * visible, but don't offer a misleading link or a clickable hover effect. */
.footer-social .toc-social.social-placeholder {
  border-style:dashed;
  opacity:.78;
  cursor:default
}

/* Quiet linked Sur.ly safety report, not a frozen or third-party-served widget. */
.toc-safety-badge {
  display:flex;
  align-items:center;
  gap:11px;
  width:max-content;
  max-width:100%;
  margin-top:25px;
  padding:11px 14px 10px 12px;
  border:1px solid rgba(135,163,162,.28);
  border-radius:6px;
  background:linear-gradient(120deg,rgba(33,51,57,.32),rgba(20,31,42,.22));
  color:#9aafad;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(184,205,201,.035);
  transition:color .2s,border-color .2s,background .2s
}
.toc-safety-badge-icon {
  display:block;
  flex:none;
  width:31px;
  height:35px;
  fill:none;
  stroke:#849d97;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.8
}
.toc-safety-badge-copy {
  display:flex;
  flex-direction:column;
  gap:3px
}
.toc-safety-badge-heading {
  color:#839b99;
  font:700 9px 'Space Mono',monospace;
  letter-spacing:.11em
}
.toc-safety-badge-copy strong {
  color:#b8c8c2;
  font:700 13px 'Space Grotesk',sans-serif;
  letter-spacing:.035em
}
.toc-safety-badge-source {
  color:#839a9d;
  font:500 10px 'DM Sans',sans-serif
}
.toc-safety-badge:hover {
  border-color:rgba(170,215,176,.6);
  color:#bde1bf;
  background:rgba(42,69,65,.37)
}
.toc-safety-badge:hover .toc-safety-badge-icon {stroke:#afd5bb;opacity:1}
.toc-safety-badge:hover .toc-safety-badge-copy strong {color:#d8f0dc}
.toc-safety-badge:focus-visible {outline:2px solid var(--green);outline-offset:4px}

@media(prefers-reduced-motion:reduce) {
  .footer-social .toc-social,.footer-social .toc-social-icon {transition:none}
  .toc-safety-badge {transition:none}
}

.footer-bottom {
  border-top:1px solid #25323f;
  padding:27px 0 35px
}

.footer-bottom-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px
}

.footer-bottom p {
  font-size:12px;
  color:#8297a4;
  line-height:1.5;
  margin:0
}

.footer-legal {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  font-size:12px;
  color:#96aebd
}

.footer-legal a:hover {
  color:var(--orange)
}

.preview-stamp {
  font:700 10px 'Space Mono',monospace;
  letter-spacing:.08em;
  color:#7d938f;
  margin-top:11px
}

/* RESPONSIVE LAYOUT RULES */

@media(max-width:1080px) {
  .toc-stats-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:21px
  }

  .toc-stat:nth-child(3n) {
    border-right:0
  }

  .toc-stat:nth-child(4) {
    padding-left:0
  }

  .header-left {
    gap:8px
  }

  .toc-menu-content {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .toc-menu-intro {
    display:none
  }

  .header-nav {
    gap:20px
  }

  .hero-grid {
    gap:0
  }

  .machine-stage {
    transform:scale(.89);
    margin-left:-22px
  }

  .floating-floppy {
    left:15px
  }

  .floppy-five {
    right:0
  }

  .hero {
    padding:54px 0 58px
  }

  .benefit {
    padding:25px 23px
  }

  .pricing-left {
    padding:44px 34px
  }

  .pricing-right {
    padding:43px 36px
  }

}

@media(max-width:850px) {
  .toc-menu-content {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:27px
  }

  /* Keep the vintage outlines behind the illustration, not the text. */
  .hero:after {
    opacity:.34;
    background-position:right -180px top 140px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 26%,#000 72%);
    mask-image:linear-gradient(180deg,transparent 0%,transparent 26%,#000 72%)
  }

  .header-nav>a:not(.small-cta) {
    display:none
  }

  .hero-grid {
    grid-template-columns:1fr
  }

  .hero-copy {
    max-width:720px
  }

  .hero-desc {
    max-width:620px
  }

  .machine-stage {
    transform:none;
    height:495px;
    margin:8px auto 0;
    width:min(560px,100%)
  }

  .crt {
    width:380px
  }

  .crt-screen {
    height:260px
  }

  .floating-floppy {
    left:15px;
    bottom:25px
  }

  .floppy-five {
    right:0;
    bottom:19px
  }

  .proof-item {
    gap:10px
  }

  .section-heading {
    align-items:start;
    flex-direction:column;
    gap:18px
  }

  .section-intro {
    max-width:600px
  }

  .benefit-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .story-grid {
    gap:42px
  }

  .pricing-shell {
    grid-template-columns:1fr 1fr
  }

  .pricing-list {
    grid-template-columns:1fr
  }

  .faq-grid {
    grid-template-columns:1fr;
    gap:30px
  }

  .footer-main {
    grid-template-columns:repeat(2,1fr);
    row-gap:43px
  }

  .review-card {
    min-height:255px
  }

}

@media(max-width:620px) {
  .toc-stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px 0
  }

  .toc-stat {
    padding:0 12px
  }

  .toc-stat:nth-child(odd) {
    padding-left:0;
    border-right:1px solid #2b454e
  }

  .toc-stat:nth-child(even) {
    padding-right:0;
    border-right:0
  }

  .toc-stat strong {
    font-size:20px
  }

  .header-inner {
    gap:8px
  }

  .header-left {
    gap:6px
  }

  .toc-menu-logo {
    min-height:64px;
    gap:7px;
    padding:1px 4px 1px 0
  }

  .toc-menu-logo img {
    width:49px;
    height:49px
  }

  .toc-menu-typing {
    width:28ch;
    font-size:10px;
    line-height:1.35
  }

  .toc-menu-typed {
    white-space:pre-wrap
  }

  .toc-menu-cursor {
    width:5px;
    height:11px;
    vertical-align:-1px
  }

  .toc-menu-panel {
    max-height:calc(100dvh - 70px)
  }

  .toc-menu-content {
    grid-template-columns:1fr;
    gap:19px;
    padding-top:24px;
    padding-bottom:24px
  }

  .toc-menu-group {
    padding-bottom:13px;
    border-bottom:1px solid #2a4550
  }

  .toc-menu-group h2 {
    margin-bottom:7px
  }

  .toc-menu-utility {
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
    border-top:0;
    padding-top:0
  }

  .hero:after {
    opacity:.26;
    background-size:760px auto
  }

  .site-footer:before {
    opacity:.08
  }

  .container {
    padding:0 21px
  }

  .site-header {
    height:70px
  }

  .brand {
    min-width:0;
    gap:0
  }

  .brand-text {
    font-size:16px
  }

  .small-cta {
    font-size:12px;
    padding:12px 13px;
    gap:5px
  }

  .hero {
    padding:45px 0 40px
  }

  .mini-tag {
    font-size:9px
  }

  h1 {
    font-size:clamp(47px,12vw,65px)
  }

  .hero-desc {
    font-size:15px;
    line-height:1.72
  }

  .hero-actions {
    gap:10px
  }

  .hero-actions .button {
    flex:1 1 auto;
    padding:15px 16px;
    font-size:14px
  }

  .hero-note {
    font-size:11px
  }

  .machine-stage {
    width:100%;
    height:405px;
    transform:scale(.77);
    transform-origin:top center;
    margin:40px auto -40px
  }

  .machine-stage:before {
    width:420px;
    height:420px
  }

  .crt {
    width:395px;
    min-width:395px
  }

  .crt-screen {
    height:275px
  }

  .floppy-five {
    right:-19px;
    bottom:12px;
    transform:rotate(8deg) scale(.79);
    transform-origin:right bottom
  }

  .floating-floppy {
    left:-32px
  }

  .proof-inner {
    grid-template-columns:1fr
  }

  .proof-item {
    justify-content:start;
    padding:17px 20px;
    border-right:0;
    border-bottom:1px solid #283443
  }

  .proof-item:last-child {
    border:0
  }

  .proof-icon {
    width:34px;
    text-align:center
  }

  .section {
    padding:72px 0
  }

  .section-heading {
    margin-bottom:27px
  }

  h2 {
    font-size:39px
  }

  .benefit-grid {
    grid-template-columns:1fr;
    gap:11px
  }

  .benefit {
    min-height:0;
    padding:25px 24px 27px
  }

  .benefit-glyph {
    margin-bottom:17px
  }

  .value-story {
    padding:70px 0
  }

  .story-grid {
    grid-template-columns:1fr;
    gap:35px
  }

  .story-grid p {
    font-size:15px
  }

  .story-feature {
    padding:14px 22px 28px
  }

  .story-logo {
    max-width:215px
  }

  .story-note {
    font-size:18px
  }

  .reviews {
    padding:72px 0
  }

  .review-grid {
    grid-template-columns:1fr
  }

  .review-card {
    min-height:190px;
    padding:25px
  }

  .review-quote {
    font-size:20px
  }

  .pricing {
    padding:72px 0
  }

  .pricing-shell {
    grid-template-columns:1fr
  }

  .pricing-left {
    padding:37px 31px
  }

  .pricing-left h2 {
    font-size:39px;
    margin:15px 0 25px
  }

  .amount {
    font-size:80px
  }

  .pricing-right {
    padding:34px 28px
  }

  .pricing-list {
    grid-template-columns:1fr 1fr;
    font-size:12px;
    gap:15px
  }

  .pricing-list li {
    font-size:12px
  }

  .steps-section {
    padding:77px 0
  }

  .steps-heading {
    margin-bottom:38px
  }

  .steps:before {
    left:23px
  }

  .step {
    grid-template-columns:48px 1fr;
    column-gap:14px;
    padding-bottom:15px
  }

  .step-number {
    width:48px;
    height:48px;
    margin-top:15px;
    box-shadow:0 0 0 5px var(--bg);
    font-size:16px
  }

  .step-body {
    padding:19px 20px
  }

  .step h3 {
    font-size:20px
  }

  .step p {
    font-size:13px
  }

  .important-note {
    margin-top:38px
  }

  .faq-section {
    padding:72px 0
  }

  .faq-grid h2 {
    font-size:40px
  }

  .final-cta {
    padding:49px 0
  }

  .final-flex {
    align-items:start;
    flex-direction:column
  }

  .final-flex h2 {
    font-size:34px
  }

  .final-flex .button {
    width:100%
  }

  .footer-main {
    grid-template-columns:repeat(2,1fr);
    gap:35px 20px;
    padding-top:56px;
    padding-bottom:50px
  }

  .footer-about {
    grid-column:1/-1
  }

  .footer-column h3 {
    font-size:11px
  }

  .footer-column nav {
    gap:12px
  }

  .footer-bottom-inner {
    align-items:start;
    flex-direction:column;
    gap:15px
  }

}

@media(max-width:410px) {
  .toc-menu-logo {
    gap:6px
  }

  .toc-menu-logo img {
    width:45px;
    height:45px
  }

  .toc-menu-typing {
    font-size:9px
  }

  .brand-text {
    font-size:13px
  }

  .small-cta {
    padding:11px 10px;
    font-size:11px
  }
}

@media(prefers-reduced-motion:reduce) {
  .toc-menu-cursor {
    opacity:1!important
  }

  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

}

/*
 * TOC ANALYTICS PREFERENCES — NO POPUP IN THE INTERIM DESIGN
 * Footer link and a reversible analytics choice on the Privacy Policy page.
 */
.footer-cookie-settings {
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer
}
.footer-cookie-settings:hover {color:var(--orange)}
.footer-cookie-settings:focus-visible {outline:2px solid var(--green);outline-offset:5px}

.toc-cookie-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:6px;
  border:1px solid #83b6a0;
  cursor:pointer;
  font:700 12px 'Space Grotesk',sans-serif;
  letter-spacing:.02em
}
.toc-cookie-button--essential {background:#b4f589;color:#102419;border-color:#b4f589}
.toc-cookie-button--analytics {background:#b4f589;color:#102419;border-color:#b4f589}
.toc-cookie-button--essential:hover {background:#d0ffab}
.toc-cookie-button--analytics:hover {background:#d0ffab}
.toc-cookie-button:focus-visible {
  outline:2px solid #fff;
  outline-offset:3px
}
.toc-analytics-preferences {
  margin-top:18px;
  padding:19px;
  border:1px solid #466b5b;
  border-radius:9px;
  background:linear-gradient(130deg,rgba(22,54,39,.8),rgba(17,28,33,.82))
}
.toc-analytics-preferences h4 {
  margin:0 0 9px;
  color:#d9ffbf;
  font:700 17px 'Space Grotesk',sans-serif
}
.toc-analytics-preferences p {margin:0 0 12px;line-height:1.6}
.toc-analytics-preferences .toc-analytics-status {
  color:#d3e5d5;
  font:600 11px/1.6 'Space Mono',monospace
}
.toc-analytics-pref-actions {display:flex;flex-wrap:wrap;gap:11px}
.toc-analytics-pref-actions .toc-cookie-button:disabled {opacity:.6;cursor:default}
.toc-analytics-pref-actions .toc-cookie-button--essential {
  color:#e3f4e8;background:#244339;border-color:#6d9889
}
.toc-analytics-pref-actions .toc-cookie-button--essential:not(:disabled):hover {background:#315b49}
@media(max-width:690px) {
  .toc-cookie-button {padding:9px 11px;min-height:46px}
}
@media(max-width:420px) {
  .toc-cookie-button {font-size:11px}
}