/* Isharo's public landing page (design B on the Isharo design canvas). Plain CSS, no build step. */
@font-face {
  font-family: "Sora";
  src: url("/fonts/sora.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --base: #3d1e22;
  --ink: #ffffff;
  --soft: rgba(255, 255, 255, 0.78);
  --mute: rgba(255, 255, 255, 0.62);
  --line: rgba(255, 255, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.1);
  --amber: #ffc77a;
  --coral: #e07468;
  --live: #7be0a6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--base);
  color: var(--ink);
  font-family: "Sora", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* The warm glow from the Reel cover's coral and amber, all the way down */
.glow {
  background:
    radial-gradient(70% 1100px at 12% 0px, rgba(224, 116, 104, 0.62), transparent 72%),
    radial-gradient(55% 1000px at 88% 380px, rgba(229, 154, 42, 0.45), transparent 72%),
    radial-gradient(65% 1200px at 78% 42%, rgba(224, 116, 104, 0.48), transparent 72%),
    radial-gradient(60% 1200px at 14% 64%, rgba(229, 154, 42, 0.4), transparent 72%),
    radial-gradient(70% 1200px at 55% 100%, rgba(224, 116, 104, 0.5), transparent 72%),
    var(--base);
  min-height: 100vh;
}
a { color: var(--amber); }
a:hover { color: #ffd9a3; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.kicker { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.soft { color: var(--soft); font-weight: 300; line-height: 1.6; }
h1, h2 { font-weight: 600; margin: 0; }
h2 { font-size: 48px; letter-spacing: -1.6px; line-height: 1.05; margin-top: 12px; }
/* Space below each section (more specific than .wrap, which sets the sides) */
main > section.wrap { padding-bottom: 120px; }
main > section.hero { padding-bottom: 96px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 18px;
  font: 700 15px "Sora", system-ui, sans-serif; text-decoration: none; border: 0; cursor: pointer;
}
.btn.primary { background: var(--amber); color: var(--base); }
.btn.primary:hover { background: #ffd9a3; color: var(--base); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.34); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* Header */
.top { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; }
.top .logo img { height: 30px; width: auto; display: block; }
.top .signin { margin-left: auto; color: var(--soft); text-decoration: none; font-size: 15px; }
.top .btn { min-height: 44px; }
.top .short { display: none; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 40px; align-items: center; padding-top: 72px; }
.hero h1 { font-size: 88px; letter-spacing: -3px; line-height: 0.98; margin-top: 18px; }
.hero .lede { font-size: 20px; margin: 28px 0 0; max-width: 620px; }
.hero .for { font-size: 15px; color: var(--ink); margin: 14px 0 0; }
.hero .actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

/* The animation: Isharo in the middle, one approved post flying out to each platform */
.stage { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1; margin: 0 auto; container-type: size; }
.stage .lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .lines line { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.5; stroke-dasharray: 4 8; }
.stage .lines line.on { stroke: rgba(255, 255, 255, 0.34); animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.core {
  position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 0 90px rgba(255, 199, 122, 0.45); z-index: 3;
}
.core img { width: 40%; height: auto; }
.core span { font-size: 11px; font-weight: 700; color: var(--amber); letter-spacing: 0.08em; }
.ring { position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 1 / 1; border-radius: 50%; border: 1.5px solid rgba(255, 199, 122, 0.7); transform: translate(-50%, -50%); animation: pulse 2.5s ease-out infinite; z-index: 1; }
.ring.later { animation-delay: 1.25s; }
@keyframes pulse { from { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
.node {
  position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: 14px; font-weight: 600; white-space: nowrap; z-index: 3; animation: land 2.5s ease-out infinite;
}
.node .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
@keyframes land {
  0%, 70% { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 rgba(255, 199, 122, 0); }
  80% { border-color: var(--amber); box-shadow: 0 0 30px rgba(255, 199, 122, 0.6); }
  100% { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 rgba(255, 199, 122, 0); }
}
.post {
  position: absolute; left: 50%; top: 50%; width: 6%; aspect-ratio: 9 / 16; border-radius: 5px;
  background: linear-gradient(180deg, var(--amber), var(--coral)); border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); transform: translate(-50%, -50%); opacity: 0; z-index: 2;
  animation-duration: 2.5s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}
/* Instagram and Facebook above, Threads and TikTok below */
.at-ig { left: 20%; top: 26%; }
.at-fb { left: 80%; top: 26%; }
.at-th { left: 20%; top: 74%; }
.at-tt { left: 80%; top: 74%; }
.d1 { animation-delay: 0.625s; } .d2 { animation-delay: 1.25s; } .d3 { animation-delay: 1.875s; }
.to-ig { animation-name: to-ig; } .to-fb { animation-name: to-fb; } .to-th { animation-name: to-th; } .to-tt { animation-name: to-tt; }
@keyframes to-ig { 0% { transform: translate(-50%, -50%); opacity: 0; } 12% { opacity: 1; } 78% { transform: translate(calc(-50% - 30cqw), calc(-50% - 24cqh)); opacity: 1; } 90%, 100% { transform: translate(calc(-50% - 30cqw), calc(-50% - 24cqh)); opacity: 0; } }
@keyframes to-fb { 0% { transform: translate(-50%, -50%); opacity: 0; } 12% { opacity: 1; } 78% { transform: translate(calc(-50% + 30cqw), calc(-50% - 24cqh)); opacity: 1; } 90%, 100% { transform: translate(calc(-50% + 30cqw), calc(-50% - 24cqh)); opacity: 0; } }
@keyframes to-th { 0% { transform: translate(-50%, -50%); opacity: 0; } 12% { opacity: 1; } 78% { transform: translate(calc(-50% - 30cqw), calc(-50% + 24cqh)); opacity: 1; } 90%, 100% { transform: translate(calc(-50% - 30cqw), calc(-50% + 24cqh)); opacity: 0; } }
@keyframes to-tt { 0% { transform: translate(-50%, -50%); opacity: 0; } 12% { opacity: 1; } 78% { transform: translate(calc(-50% + 30cqw), calc(-50% + 24cqh)); opacity: 1; } 90%, 100% { transform: translate(calc(-50% + 30cqw), calc(-50% + 24cqh)); opacity: 0; } }
/* Off-screen, the animation rests (landing.js) */
.stage.paused *, .stage.paused .lines line { animation-play-state: paused !important; }
.stage-caption { text-align: center; font-size: 14px; color: var(--soft); margin: 18px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .stage .lines line, .stage .lines line.on, .ring, .node { animation: none; }
  .post { display: none; }
  html { scroll-behavior: auto; }
}

/* What you get */
.plats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.plat { border-radius: 22px; background: var(--glass); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-height: 150px; }
.plat .name { font-size: 19px; font-weight: 600; line-height: 1.3; }
.plat p { margin: 0; font-size: 14px; color: var(--soft); font-weight: 300; line-height: 1.5; }

/* Made by Isharo: real posts */
.work { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 20px; margin-top: 32px; }
.piece { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); }
.piece img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; border: 1px solid var(--line); }
.piece b { font-size: 16px; font-weight: 600; }
.piece span { font-size: 13px; color: var(--soft); }
.piece:hover b { color: var(--amber); }

/* How you start */
.start { list-style: none; counter-reset: s; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.start li { counter-increment: s; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.start li::before { content: counter(s, decimal-leading-zero); font-size: 14px; font-weight: 700; color: var(--amber); }
.start b { font-size: 18px; font-weight: 600; }
.start p { margin: 0; font-size: 15px; }

/* A week */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.22); margin: 40px 0 0; padding: 0; list-style: none; }
.week li { padding: 18px 14px 0 0; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.week li.you { border-top: 3px solid var(--amber); margin-top: -2px; }
.week .day { font-size: 13px; color: var(--mute); }
.week li.you .day { color: var(--amber); }
.week b { font-size: 17px; font-weight: 600; }
.week p { margin: 0; font-size: 14px; }

/* Why */
.why { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; margin-top: 40px; }
.why > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 26px 0; border-top: 1px solid var(--line); }
.why .n { font-size: 15px; color: var(--amber); font-weight: 700; }
.why b { font-size: 19px; font-weight: 600; }
.why p { margin: 6px 0 0; font-size: 15px; }
.proof { font-size: 14px; color: var(--mute); margin: 28px 0 0; }

/* Waitlist */
.join { max-width: 720px; }
.join form { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--soft); }
.field input {
  height: 52px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.07);
  color: var(--ink); padding: 0 16px; font: 400 16px "Sora", system-ui, sans-serif;
}
.field input::placeholder { color: rgba(255, 255, 255, 0.45); }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
legend { font-size: 13px; color: var(--soft); margin-bottom: 10px; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); font-size: 14px; cursor: pointer; }
.chip input { accent-color: var(--amber); width: 16px; height: 16px; margin: 0; }
.chip:has(input:checked) { border-color: var(--amber); background: rgba(255, 199, 122, 0.12); }
.send { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.send small { font-size: 13px; color: var(--mute); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: #ffd2c4; font-size: 14px; margin: 0; }
.joined { border-radius: 24px; background: var(--glass); border: 1px solid rgba(255, 199, 122, 0.55); padding: 28px; margin-top: 32px; }
.joined b { font-size: 22px; font-weight: 600; }
.joined p { margin: 8px 0 0; }

/* Footer */
/* Footer C: logo and links, then the company line and Back to top */
footer { display: flex; flex-direction: column; gap: 40px; padding-top: 56px; padding-bottom: 36px; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.foot-logo { display: inline-flex; }
.foot-logo img { width: 116px; height: auto; }
.foot-nav { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; font-size: 15px; }
.foot-nav a { color: var(--soft); text-decoration: none; }
.foot-nav a:hover { color: var(--amber); }
.foot-nav .foot-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.28); color: var(--ink); font-weight: 600; }
.foot-nav .foot-signin:hover { border-color: var(--amber); color: var(--amber); }
.foot-legal { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--mute); }
.foot-legal a { color: var(--soft); text-decoration: none; }
.foot-legal a:hover { color: var(--amber); }
.foot-legal .foot-up { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--mute); }

/* A plain page (privacy, the no-JavaScript waitlist answer) */
.note-page { padding-top: 96px; padding-bottom: 96px; max-width: 760px; }
.note-page h1 { font-size: 48px; letter-spacing: -1.6px; line-height: 1.05; margin-bottom: 20px; }
.note-page h2 { font-size: 22px; letter-spacing: 0; margin-top: 36px; }
.note-page p, .note-page li { font-size: 16px; }

@media (max-width: 1100px) {
  .plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { font-size: 68px; letter-spacing: -2.2px; }
}
@media (max-width: 820px) {
  .wrap { padding: 0 16px; }
  .hero, .why { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 32px; gap: 48px; }
  .hero h1 { font-size: 46px; letter-spacing: -1.6px; }
  .hero .lede { font-size: 17px; }
  h2 { font-size: 34px; letter-spacing: -1px; }
  main > section.wrap { padding-bottom: 88px; }
  main > section.hero { padding-bottom: 72px; }
  .plats { grid-template-columns: minmax(0, 1fr); }
  .plat { min-height: 0; }
  .week { grid-template-columns: minmax(0, 1fr); }
  .week li { min-height: 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .stage { max-width: 360px; }
  .node { font-size: 12px; padding: 8px 12px; gap: 6px; }
  /* Sign in stays reachable; the waitlist button shortens to fit */
  .top .signin { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; }
  .top .long { display: none; }
  .top .short { display: inline; }
  .top .btn { padding: 0 16px; }
  .work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .start { grid-template-columns: minmax(0, 1fr); }
  footer { padding-top: 44px; padding-bottom: 32px; gap: 28px; }
  .foot-top { flex-direction: column; align-items: stretch; gap: 20px; }
  .foot-logo img { width: 108px; }
  .foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; }
  .foot-nav a { display: flex; align-items: center; min-height: 44px; }
  .foot-nav .foot-signin { grid-column: 1 / -1; justify-content: center; min-height: 48px; margin-top: 8px; }
  .foot-legal { flex-direction: column; align-items: flex-start; gap: 6px; }
  .foot-co { display: flex; flex-direction: column; gap: 6px; }
  .foot-co .dot { display: none; }
}
/* The privacy policy: lists and inline links */
.legal ul, .legal ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; line-height: 1.6; }
.legal b { color: var(--ink); font-weight: 600; }