/* Cigar Locker: the website's one stylesheet (redone 2026-10-29, his words:
   "modern and sleek with moving tiles and icons and make it feel special
   and expensive", "use stock images"). Deep espresso and gold, the logo's
   colours, in every scheme. The home page moves (tiles that drift, icons
   that draw themselves, screens that rise into place, numbers that count);
   site.js starts it, and nothing moves for anyone who asks for less motion.
   Support, privacy and terms share the header, type and footer. */

:root {
  color-scheme: dark;

  --bg: #0f0906;
  --bg-2: #160e09;
  --bg-3: #1e140d;
  --card: rgba(255, 236, 210, 0.035);
  --card-2: rgba(255, 236, 210, 0.07);
  --line: rgba(227, 188, 140, 0.14);
  --line-2: rgba(227, 188, 140, 0.32);
  --text: #f7eddf;
  --muted: #c4ae95;
  --dim: #8f7b66;
  --gold: #e3bc8c;
  --gold-hi: #f8e2bf;
  --gold-lo: #a8763f;
  --green: #86c497;
  --amber: #e5a24c;

  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 26px;
  --radius-sm: 16px;
  --gutter: 16px;
  --wide: 1160px;
  --narrow: 740px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.9  0 0 0 0 0.8  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A fine film grain over everything, as on a printed page. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.07;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: overlay;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--gold-hi);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(227, 188, 140, 0.35);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip:focus {
  left: var(--gutter);
  top: var(--gutter);
  z-index: 200;
  background: var(--bg-3);
  padding: 8px 14px;
  border-radius: 10px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap.narrow {
  max-width: calc(var(--narrow) + 2 * var(--gutter));
}

/* ---------- Type ---------- */

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(50px, 11.5vw, 96px);
  line-height: 1;
}

h2 {
  font-size: clamp(40px, 8.5vw, 76px);
  line-height: 1.04;
}

h3 {
  font-size: 28px;
  line-height: 1.2;
}

h1 em,
h2 em {
  font-style: italic;
  background: linear-gradient(100deg, var(--gold-lo) 0%, var(--gold) 30%, var(--gold-hi) 50%, var(--gold) 70%, var(--gold-lo) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
  animation: shimmer 7s ease-in-out infinite;
}

@keyframes shimmer {
  0%,
  100% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0% 0;
  }
}

p {
  margin: 0 0 1em;
}

.overline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.overline::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}

.lead {
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 34em;
}

.fine {
  font-size: 14px;
  color: var(--dim);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 9, 6, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* On the home page it starts clear over the photo and turns to glass once scrolled. */
.home .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home .site-header.scrolled {
  background: rgba(15, 9, 6, 0.72);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

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

.brand-tile {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(160deg, #2f1e15, #1e130d);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(227, 188, 140, 0.28) inset, 0 6px 18px -6px rgba(227, 188, 140, 0.35);
  flex: none;
}

.brand-tile img {
  height: 24px;
  width: auto;
}

.brand-name {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-pill {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 14px !important;
  color: var(--gold) !important;
}

.nav-pill::after {
  display: none;
}

/* ---------- Buttons ---------- */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: 34px 0 20px;
}

/* A placeholder until Apple's own badge artwork goes in (it links nowhere yet). */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 22px 8px 18px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255, 236, 210, 0.1), rgba(255, 236, 210, 0.03));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  text-decoration: none;
  cursor: default;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9);
}

/* A slow sheen across it. */
.store-badge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(248, 226, 191, 0.22), transparent);
  animation: sheen 5.5s ease-in-out infinite 1.5s;
}

@keyframes sheen {
  0%,
  60% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}

.store-badge svg {
  width: 24px;
  height: 24px;
  color: var(--gold);
  flex: none;
}

.store-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.store-badge small {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.store-badge strong {
  font-size: 18px;
  font-weight: 600;
}

.text-link {
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.text-link::after {
  content: "\2192";
  color: var(--gold);
  transition: transform 0.3s var(--ease);
}

.text-link:hover::after {
  transform: translateX(5px);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0 64px;
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  animation: drift 26s ease-in-out infinite alternate;
  transform-origin: 70% 60%;
}

@keyframes drift {
  from {
    transform: scale(1.12) translate3d(1.5%, 0, 0);
  }
  to {
    transform: scale(1.02) translate3d(-1%, -1%, 0);
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 80% 30%, rgba(227, 188, 140, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(15, 9, 6, 0.55) 0%, rgba(15, 9, 6, 0.35) 35%, rgba(15, 9, 6, 0.9) 82%, var(--bg) 100%),
    linear-gradient(90deg, rgba(15, 9, 6, 0.92) 0%, rgba(15, 9, 6, 0.6) 48%, rgba(15, 9, 6, 0.2) 100%);
}

.hero .wrap {
  display: grid;
  gap: 56px;
  align-items: center;
}

.hero h1 {
  margin-bottom: 26px;
}

.hero h1 .line {
  display: block;
}

.hero .fine {
  max-width: 34em;
}

.hero-phones {
  position: relative;
  height: 560px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  perspective: 1400px;
}

.hero-phones .phone {
  position: absolute;
  width: 250px;
}

.hero-phones .phone.front {
  left: 50%;
  top: 0;
  transform: translateX(-38%) rotateY(var(--ry, -8deg)) rotateX(var(--rx, 4deg));
  z-index: 2;
  animation: float 7s ease-in-out infinite;
}

.hero-phones .phone.back {
  left: 50%;
  top: 46px;
  transform: translateX(-104%) rotateY(12deg) scale(0.86);
  opacity: 0.75;
  filter: saturate(0.9) brightness(0.8);
  z-index: 1;
  animation: float-back 8s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -14px;
  }
}

@keyframes float-back {
  0%,
  100% {
    translate: 0 6px;
  }
  50% {
    translate: 0 -8px;
  }
}

.hero-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(227, 188, 140, 0.28), transparent);
  filter: blur(10px);
  animation: breathe 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  display: none;
}

.scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold);
  animation: cue 2.2s ease-in-out infinite;
}

@keyframes cue {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ---------- The phone ---------- */

.phone {
  position: relative;
  border-radius: 46px;
  padding: 9px;
  background: linear-gradient(145deg, #3a332e 0%, #141110 38%, #0a0908 62%, #2a2420 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 0 2px #050404,
    0 50px 80px -30px rgba(0, 0, 0, 0.9),
    0 30px 60px -40px rgba(227, 188, 140, 0.35);
}

.phone img {
  width: 100%;
  height: auto;
  aspect-ratio: 660 / 1431;
  border-radius: 38px;
  background: #0b0705;
}

/* The island. */
.phone::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 50%;
  width: 30%;
  height: 7%;
  max-height: 30px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  height: 26px;
}

/* A glint along the glass. */
.phone::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 38px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, transparent 28%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Moving tiles ---------- */

.marquee-band {
  padding: 26px 0 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  display: grid;
  gap: 14px;
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Two copies of each row side by side (site.js adds the second), moved left by one copy's width, round and round. */
.marquee-track {
  display: flex;
  width: max-content;
}

.js .marquee-track {
  animation: slide 60s linear infinite;
}

.marquee-group {
  display: flex;
  gap: 14px;
  padding-right: 14px;
}

.js .marquee.reverse .marquee-track {
  animation-direction: reverse;
  animation-duration: 70s;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.tile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 14px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line) inset;
  white-space: nowrap;
  font-size: 15px;
  color: var(--text);
}

.tile .ic {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(227, 188, 140, 0.2), rgba(227, 188, 140, 0.05));
  box-shadow: 0 0 0 1px rgba(227, 188, 140, 0.25) inset;
  color: var(--gold);
  flex: none;
}

.tile .ic svg {
  width: 19px;
  height: 19px;
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding: 96px 0;
  overflow-x: clip;
}

.section-head {
  max-width: 46em;
  margin-bottom: 44px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head.center .overline {
  justify-content: center;
}

.section-head.center .overline::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
}

.section-head p:not(.overline) {
  color: var(--muted);
  margin-top: 20px;
  font-size: 19px;
}

.section-head.center p:not(.overline) {
  margin-left: auto;
  margin-right: auto;
  max-width: 36em;
}

/* A feature: words on one side, the screen on the other. */
.showcase .wrap {
  display: grid;
  gap: 56px;
  align-items: center;
}

.showcase .copy .num {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--gold);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.showcase .copy .num::after {
  content: "";
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.showcase h2 {
  margin-bottom: 22px;
}

.showcase .copy > p {
  color: var(--muted);
  font-size: 18.5px;
  max-width: 30em;
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
}

.stage .phone {
  width: min(280px, 72vw);
  z-index: 1;
}

.stage::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  max-width: 110vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(227, 188, 140, 0.2), transparent);
}

/* Thin gold rings drawn behind a screen, turning slowly. */
.orbit {
  position: absolute;
  width: 470px;
  height: 470px;
  max-width: 120vw;
  max-height: 120vw;
  border-radius: 50%;
  border: 1px solid var(--line);
  animation: spin 50s linear infinite;
}

.orbit.two {
  width: 360px;
  height: 360px;
  border-style: dashed;
  border-color: rgba(227, 188, 140, 0.18);
  animation-duration: 80s;
  animation-direction: reverse;
}

.orbit::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px 3px rgba(227, 188, 140, 0.6);
}

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

/* Small glass cards that hover beside a screen. */
.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(30, 20, 13, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 24px 40px -20px rgba(0, 0, 0, 0.9);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--muted);
  animation: bob 6s ease-in-out infinite;
}

.float-card strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.float-card .ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(227, 188, 140, 0.14);
  color: var(--gold);
  flex: none;
}

.float-card .ic svg {
  width: 18px;
  height: 18px;
}

.float-card.a {
  left: 0;
  top: 18%;
}

.float-card.b {
  right: 0;
  bottom: 18%;
  animation-delay: -3s;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* What a feature does, as a list with drawn icons. */
.marks {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  gap: 14px;
}

.marks li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--text);
}

.marks .ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(227, 188, 140, 0.18), rgba(227, 188, 140, 0.04));
  box-shadow: 0 0 0 1px rgba(227, 188, 140, 0.24) inset;
  color: var(--gold);
  flex: none;
}

.marks .ic svg {
  width: 19px;
  height: 19px;
}

.marks span small {
  display: block;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- A section over a photo ---------- */

.photo-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.photo-band .bg {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
}

.photo-band .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(15, 9, 6, 0.72) 22%, rgba(15, 9, 6, 0.8) 78%, var(--bg) 100%);
}

/* A section where the photo is the point: clear at the top, dark under the words. */
.photo-band.vivid {
  padding-top: min(52vh, 460px);
}

.photo-band.vivid .bg img {
  object-position: 50% 30%;
}

.photo-band.vivid::before {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(15, 9, 6, 0.1) 14%, rgba(15, 9, 6, 0.2) 30%, rgba(15, 9, 6, 0.74) 48%, rgba(15, 9, 6, 0.94) 78%, var(--bg) 100%);
}

.photo-band.vivid .section-head {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
}

/* The humidity rings. */
.climate {
  display: grid;
  gap: 28px;
  align-items: center;
  justify-items: center;
}

.gauges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 460px;
}

.gauge {
  text-align: center;
  padding: 18px 8px 16px;
  border-radius: var(--radius-sm);
  background: rgba(30, 20, 13, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--line) inset;
}

.gauge svg {
  width: 84px;
  height: 84px;
  margin: 0 auto 10px;
  transform: rotate(-90deg);
}

.gauge circle {
  fill: none;
  stroke-width: 6;
}

.gauge .track {
  stroke: rgba(227, 188, 140, 0.14);
}

.gauge .fill {
  stroke: var(--green);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2s var(--ease);
}

.gauge .fill.amber {
  stroke: var(--amber);
}

.gauge.on .fill {
  stroke-dashoffset: calc(100 - var(--v));
}

.gauge b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
}

.gauge span {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Stars ---------- */

.stars {
  display: flex;
  gap: 6px;
  margin: 26px 0 6px;
}

.stars svg {
  width: 26px;
  height: 26px;
  color: rgba(227, 188, 140, 0.22);
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}

.stars svg.lit,
html:not(.js) .stars svg:nth-child(-n + 9) {
  color: var(--gold);
}

.stars svg.lit {
  animation: pop 0.5s var(--ease);
}

@keyframes pop {
  50% {
    transform: scale(1.3);
  }
}

.stars-note {
  color: var(--dim);
  font-size: 14px;
}

/* ---------- Figures ---------- */

.figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line) inset;
}

.figure {
  background: var(--bg-2);
  padding: 30px 22px;
}

.figure b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 8vw, 68px);
  line-height: 1.1;
  color: var(--text);
}

.figure span {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- The styles gallery ---------- */

.screens {
  overflow: hidden;
  padding: 20px 0 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.js .screens .marquee-track {
  animation-duration: 90s;
}

.screens .marquee-group {
  gap: 34px;
  padding-right: 34px;
  align-items: flex-end;
}

.screens figure {
  margin: 0;
  width: 220px;
  flex: none;
}

.screens figure:nth-child(even) {
  margin-bottom: 40px;
}

.screens figcaption {
  text-align: center;
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 22px;
}

.screens figcaption small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

.palettes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  margin-top: 34px;
}

.palette {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--muted);
}

.palette i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 6px 16px -6px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s var(--ease);
}

.palette:hover i {
  transform: scale(1.18);
}

/* ---------- Cards ---------- */

.cards {
  display: grid;
  gap: 16px;
}

.card {
  position: relative;
  padding: 30px 26px 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 236, 210, 0.06), rgba(255, 236, 210, 0.02));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--line) inset, 0 30px 50px -36px rgba(0, 0, 0, 0.9);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 40px 60px -36px rgba(0, 0, 0, 0.95);
}

.card .ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(227, 188, 140, 0.22), rgba(227, 188, 140, 0.05));
  box-shadow: 0 0 0 1px rgba(227, 188, 140, 0.28) inset;
  color: var(--gold);
  margin-bottom: 22px;
}

.card .ic svg {
  width: 23px;
  height: 23px;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--muted);
  margin: 0;
  font-size: 16px;
}

/* ---------- Closing ---------- */

.closing {
  text-align: center;
  padding: 130px 0 120px;
}

.closing .mark {
  width: 76px;
  height: auto;
  margin: 0 auto 30px;
  filter: drop-shadow(0 0 26px rgba(227, 188, 140, 0.45));
  animation: breathe-mark 5s ease-in-out infinite;
}

@keyframes breathe-mark {
  0%,
  100% {
    filter: drop-shadow(0 0 18px rgba(227, 188, 140, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 34px rgba(227, 188, 140, 0.6));
  }
}

.closing .cta {
  justify-content: center;
}

.closing h2 {
  margin-bottom: 16px;
}

.closing .lead {
  margin: 0 auto;
}

/* ---------- Drawn icons ---------- */

/* Every drawn icon's lines have pathLength="1", and the dash settings are
   inherited into the icon's <use>, so the lines draw in as they come into view. */
.js .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .draw.on {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.8s var(--ease) var(--d, 0s);
}

/* ---------- Coming into view ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s);
}

.js .reveal.rise {
  transform: translateY(80px) scale(0.96);
}

.js .reveal.on {
  opacity: 1;
  transform: none;
}

/* ---------- Support (questions) ---------- */

.contact-card {
  background: linear-gradient(180deg, rgba(255, 236, 210, 0.06), rgba(255, 236, 210, 0.02));
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: 0 0 0 1px var(--line) inset;
  margin: 28px 0 8px;
}

.contact-card h2 {
  font-size: 34px;
  margin-bottom: 8px;
}

.contact-card p:last-child {
  margin-bottom: 0;
}

.faq-group {
  margin-top: 52px;
}

.faq-group h2 {
  font-size: 36px;
  margin-bottom: 14px;
}

details {
  border-bottom: 1px solid var(--line);
}

details:first-of-type {
  border-top: 1px solid var(--line);
}

summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  font-weight: 600;
  position: relative;
  transition: color 0.3s var(--ease);
}

summary:hover {
  color: var(--gold-hi);
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 13px;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--gold);
  transition: transform 0.35s var(--ease);
}

details[open] summary::after {
  transform: rotate(45deg);
}

details > div {
  padding: 0 0 20px;
  color: var(--muted);
}

details > div p:last-child,
details > div ul:last-child,
details > div ol:last-child {
  margin-bottom: 0;
}

details ul,
details ol {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.path {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* ---------- Legal pages ---------- */

.page-head {
  padding: 64px 0 12px;
}

.page-head h1 {
  font-size: clamp(46px, 9vw, 76px);
  margin-bottom: 14px;
}

.draft {
  border: 1px dashed var(--line-2);
  background: rgba(227, 188, 140, 0.08);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin: 24px 0 8px;
}

.draft strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

.draft p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.toc {
  margin: 28px 0 8px;
  padding: 20px 22px;
  background: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--line) inset;
}

.toc p {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.toc ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 2 15em;
  column-gap: 2em;
  font-size: 15px;
}

.toc li {
  break-inside: avoid;
  padding: 2px 0;
}

.toc a {
  color: var(--text);
  text-decoration: none;
}

.toc a:hover {
  color: var(--gold);
}

.legal {
  padding-bottom: 56px;
}

.legal h2 {
  font-size: 36px;
  margin: 48px 0 12px;
}

.legal h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 650;
  margin: 24px 0 8px;
  letter-spacing: 0;
}

.legal ul,
.legal ol {
  padding-left: 1.3em;
  margin: 0 0 1em;
}

.legal li + li {
  margin-top: 6px;
}

.legal .summary {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 20px 22px 6px;
  box-shadow: 0 0 0 1px var(--line) inset;
  margin-top: 24px;
}

.legal .summary h2 {
  margin-top: 0;
  font-size: 30px;
}

.table-scroll {
  overflow-x: auto;
  margin: 0 0 1em;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--line) inset;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 15px;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

th {
  font-weight: 600;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

/* A point a lawyer or the owner must settle before this is published. */
.decide {
  display: inline;
  background: rgba(227, 188, 140, 0.1);
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.92em;
  color: var(--text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.decide::before {
  content: "To decide: ";
  font-weight: 700;
  color: var(--gold);
}

.caps {
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.01em;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 44px 0 52px;
  font-size: 14px;
  color: var(--dim);
  background: var(--bg);
}

.site-footer .wrap {
  display: grid;
  gap: 20px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.site-footer nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--gold);
}

.site-footer p {
  margin: 0;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px !important;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--text);
}

.foot-brand img {
  height: 26px;
  width: auto;
}

/* ---------- Phones ---------- */

@media (max-width: 759px) {
  .hero {
    padding-top: 120px;
  }

  .hero-phones {
    height: 470px;
  }

  .hero-phones .phone {
    width: 210px;
  }

  .hero-phones .phone.back {
    transform: translateX(-96%) rotateY(12deg) scale(0.86);
  }

  .float-card {
    font-size: 12.5px;
    padding: 10px 12px;
  }

  .float-card.a {
    left: -4px;
  }

  .float-card.b {
    right: -4px;
  }

  .site-nav .hide-small {
    display: none;
  }

  .site-header .wrap {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .site-nav {
    flex-wrap: nowrap;
    gap: 14px;
  }

  .brand-name {
    font-size: 23px;
  }

  .stage {
    min-height: 520px;
  }
}

/* ---------- Wider screens ---------- */

@media (min-width: 760px) {
  :root {
    --gutter: 32px;
  }

  .section {
    padding: 140px 0;
  }

  .hero .wrap {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
  }

  .hero-phones {
    height: 640px;
  }

  .hero-phones .phone {
    width: 290px;
  }

  .scroll-cue {
    display: block;
  }

  .showcase .wrap {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }

  .showcase.flip .copy {
    order: 2;
  }

  .stage {
    min-height: 680px;
  }

  .stage .phone {
    width: 310px;
  }

  .figures {
    grid-template-columns: repeat(4, 1fr);
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .climate {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }

  .screens figure {
    width: 250px;
  }

  .contact-card {
    padding: 32px 34px;
  }

  .site-footer .wrap {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Less motion ---------- */

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

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

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .js .draw {
    stroke-dashoffset: 0;
  }

  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee-track {
    width: auto;
  }

  .marquee-group {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 var(--gutter);
  }

  .marquee-group[aria-hidden="true"] {
    display: none;
  }

  .gauge .fill {
    stroke-dashoffset: calc(100 - var(--v));
  }

  .stars svg:nth-child(-n + 9) {
    color: var(--gold);
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }

  body::after,
  .site-header nav,
  .skip,
  .toc {
    display: none;
  }
}