/* Kerno Sovereign Tech Day 2026 — RSVP landing
   Implements Figma frames "iPhone 17 - RSVP landing 1 / Success / Maybe / NoSuccess" (402px wide). */

@font-face {
  font-family: "Euclid Square";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/static/fonts/EuclidSquare-Light.woff2") format("woff2"),
       url("/static/fonts/EuclidSquare-Light.woff") format("woff");
}
@font-face {
  font-family: "Euclid Square";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/static/fonts/EuclidSquare-Regular.woff2") format("woff2"),
       url("/static/fonts/EuclidSquare-Regular.woff") format("woff");
}
@font-face {
  font-family: "Outfit";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/static/fonts/Outfit-Light-latin.woff2") format("woff2");
}

:root {
  --toxic-green: #b0ff45;   /* Figma style "Toxic Green" */
  --grey-001: #ffffff;      /* Figma style "Grey 001" */
  --grey-090: #232325;      /* Figma style "Grey 090 - back & text" */
  --grey-050: #848484;      /* Figma style "Grey 050" */
  --error: #ff6b81;
  --frame-width: 402px;
  --gutter: 30px;
  --font-euclid: "Euclid Square", "Helvetica Neue", Arial, sans-serif;
  --font-outfit: "Outfit", var(--font-euclid);
}

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

html, body {
  margin: 0;
  background: var(--grey-090);
  color: var(--grey-001);
  font-family: var(--font-euclid);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, p { margin: 0; font-weight: inherit; }
img { display: block; }
[hidden] { display: none !important; }

.page {
  width: 100%;
  max-width: var(--frame-width);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
}

.view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ------------------------------------------------ hero (LOGO rsvp main, 330×290 crop of a 330×330 PNG) */

.view--landing { padding-top: 50px; }
.hero {
  position: relative;
  width: 330px;
  height: 290px;
  overflow: hidden;
}
.hero img {
  position: absolute;
  left: 0;
  top: -22.77px;                       /* -6.9% of 330 */
  width: 330px;
  height: 330px;
  max-width: none;
}

/* ------------------------------------------------ typography */

.title-gradient {
  display: inline-block;
  font-size: 32px;
  line-height: 34px;
  letter-spacing: 0.96px;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(to right, var(--grey-001), var(--toxic-green));
  -webkit-background-clip: text;
  background-clip: text;
}

.body-17 {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0.51px;
  text-align: center;
  white-space: nowrap;
}

.heading-28 {
  font-family: var(--font-outfit);
  font-weight: 300;
  font-size: 28px;
  line-height: 32px;
  outline: none;
}
.accent { color: var(--toxic-green); }

.body-15 {
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.45px;
}

.link-chevron {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--toxic-green);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0.51px;
  text-decoration: none;
  border-radius: 4px;
}
.link-chevron img { width: 6px; height: 13.5px; margin-top: 0.5px; }
.link-chevron:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------ landing */

.landing__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 0 var(--gutter) 40px;
}
.landing__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.landing__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.notice {
  color: var(--error);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}

.logo--landing { width: 158px; height: 122px; }
.logo--footer { width: 158px; height: 162px; }

/* ------------------------------------------------ buttons (RSVP pill) */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 11.2px 24px;               /* 12px in Figma minus the 0.8px border */
  border: 0.8px solid var(--grey-001);
  border-radius: 40px;
  background: transparent;
  color: var(--grey-001);
  font-family: var(--font-euclid);
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.54px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background-color: rgba(255, 255, 255, 0.08); }
.btn--primary {
  border-color: transparent;
  background: linear-gradient(90deg, var(--grey-001) 0%, var(--toxic-green) 100%);
  color: var(--grey-090);
  font-weight: 400;
}
.btn--primary:hover { background: linear-gradient(90deg, var(--grey-001) 0%, var(--toxic-green) 100%); opacity: 0.92; }
.btn--ghost { border-color: transparent; }
.btn[disabled] { cursor: progress; opacity: 0.6; }

/* Keyboard focus (WCAG 2.4.7) — invisible for mouse and touch users */
.btn:focus-visible,
.link-chevron:focus-visible {
  outline: 2px solid var(--toxic-green);
  outline-offset: 3px;
}

/* ------------------------------------------------ result screens */

.view--result { padding: 0 var(--gutter); }
.result__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-top: 100px;
}
.result__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding-bottom: 40px;
  overflow: hidden;
  border-radius: 12px;
}
.badge { width: 330px; height: 330px; max-width: 100%; }
.result__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.result__buttons {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  height: 180px;
}

/* ------------------------------------------------ calendar sheet */

.sheet {
  width: 100%;
  max-width: var(--frame-width);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--grey-090);
  color: var(--grey-001);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2);
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
.sheet__inner { padding: 30px var(--gutter) calc(30px + env(safe-area-inset-bottom)); }
.sheet__title {
  font-family: var(--font-outfit);
  font-size: 28px;
  line-height: 32px;
  margin-bottom: 24px;
}
.sheet__buttons { display: flex; flex-direction: column; gap: 16px; }

/* Narrow phones (< 402px): keep one-line texts from overflowing */
@media (max-width: 380px) {
  .body-17 { white-space: normal; }
  .title-gradient { font-size: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------ schedule page (RSVP Schedule) */

.schedule {
  align-items: stretch;
  padding: 140px var(--gutter) 60px;
}
.schedule__header {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-bottom: 20px;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, var(--grey-001) 34.135%, var(--toxic-green)) 1;
}
.schedule__meta { display: flex; justify-content: space-between; align-items: flex-start; }
.grad-text {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.48px;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(to right, var(--grey-001) 34.135%, var(--toxic-green));
  -webkit-background-clip: text;
  background-clip: text;
}
.schedule__meta-right { text-align: right; }
.schedule__slogan { width: 100%; height: auto; }

.schedule__title {
  padding: 64px 0 24px;
  color: var(--toxic-green);
  font-size: 28px;
  line-height: 24px;
  letter-spacing: 0.84px;
}
.schedule__part {
  margin: 0;
  padding: 8px;
  background: #3a3a3c;                /* Figma "Grey 085 - card" */
  color: var(--grey-001);
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-align: center;
}
.schedule__part--second { margin-bottom: 12px; }

.schedule__list { list-style: none; margin: 0; padding: 0; }

.sline {
  display: flex;
  flex-direction: column;
  padding: 12px 0 20px;
  border-top: 1px solid var(--grey-050);
}
.schedule__list .sline:first-child { border-top: 0; }   /* first item sits right under the section bar */
.sline--last { padding-bottom: 40px; }
.schedule__list:last-of-type .sline:last-child { padding-bottom: 32px; }
.sline__time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--toxic-green);
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 2.08px;
  text-transform: uppercase;
  white-space: nowrap;
}
.sline__name {
  margin-top: 6px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.48px;
}

.sline--expandable { padding-bottom: 12px; }
.sline__details { margin-top: 16px; }
.sline__desc { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.sgroup { display: flex; flex-direction: column; gap: 7px; }
.sgroup__label {
  align-self: flex-start;             /* tag hugs its text */
  margin-bottom: 1px;                 /* 8px from label to names, 7px between names */
  padding: 4px 8px;
  border-radius: 12px;
  background: #444446;                /* Grey 080 - shade 01 */
  color: var(--toxic-green);
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.36px;
}
.sgroup__label--single { font-size: 13px; letter-spacing: 0.39px; }   /* "Speaker" */
.sgroup__label--moderator { margin-bottom: 5px; border-radius: 16px; color: var(--grey-001); }   /* dark tag, white text */   /* 12px to names */
.sgroup dd {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.42px;
}
.sgroup .muted { color: #b8b8b8; }    /* Figma "Grey 040" */

.sline__toggle {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #d0d0d0;                     /* Figma "Grey 030" */
  font-family: var(--font-euclid);
  font-weight: 300;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 0.39px;
  cursor: pointer;
}
.sline__toggle img { width: 10px; height: 6px; margin-top: 3px; transition: transform 0.2s ease; }
.sline__toggle[aria-expanded="true"] img { transform: rotate(180deg); }
.sline__details:not([hidden]) + .sline__toggle { margin-top: 20px; }
.sline__toggle:focus-visible { outline: 2px solid var(--toxic-green); outline-offset: 3px; }

.schedule__buttons { padding-top: 60px; }


/* ================================================ desktop agenda (Kerno Tech Day Agenda 1, ≥1024px) */

.agenda { display: none; }

@media (min-width: 1024px) {
  .page--program { max-width: none; }
  .schedule--mobile { display: none; }
  .agenda { display: block; }
}

.agenda__content {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: min(1780px, 100% - 140px);
  margin: 0 auto;
  padding: 60px 0 120px;
}
.agenda__title { color: var(--toxic-green); font-size: 80px; line-height: 76px; }
.agenda__list { list-style: none; margin: 0; padding: 0; }

.apart {
  display: flex;
  align-items: center;
  padding: 40px 0;
  border-radius: 4px;
  background: #3a3a3c;                /* Grey 085 - card */
}
.apart__spacer { flex: none; width: 336px; }
.apart h3 {
  margin: 0;
  font-weight: 300;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 3.6px;
  text-transform: uppercase;
}

.aline { display: flex; gap: 16px; padding: 32px 0; border-top: 1px solid var(--grey-050); }
.aline--first { border-top: 0; }
.aline--expandable { padding-bottom: 40px; }
.agenda__list > .aline:last-child { border-bottom: 1px solid var(--grey-050); }
.aline__time {
  flex: none;
  display: flex;
  align-items: center;
  width: 320px;
  height: 40px;
  margin: 0;
  color: var(--toxic-green);
  font-weight: 400;
  font-size: 24px;
  line-height: 29.5px;
  letter-spacing: 3.84px;
  text-transform: uppercase;
}
.aline__right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.aline__head { display: flex; align-items: flex-start; gap: 80px; }
.aline__name { flex: 1; margin: 0; font-size: 32px; line-height: 40px; letter-spacing: 0.96px; }
.aline__toggle { flex: none; width: 40px; height: 34px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.aline__toggle img { display: block; width: 40px; height: 34px; transition: transform 0.2s ease; }
.aline__toggle[aria-expanded="false"] img { transform: rotate(180deg); }
.aline__toggle:focus-visible { outline: 2px solid var(--toxic-green); outline-offset: 3px; }

.aline__desc { display: flex; flex-direction: column; gap: 28px; margin: 0; }
.aline__desc[hidden] { display: none; }
.agroup { display: grid; grid-template-columns: 136px 1fr; column-gap: 20px; row-gap: 12px; align-items: start; }
.agroup__label {
  grid-column: 1;
  justify-self: start;
  padding: 7px 16px;
  border-radius: 41px;
  background: #444446;                /* Grey 080 - shade 01 */
  color: var(--toxic-green);
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.48px;
}
.agroup__label--moderator { color: var(--grey-001); }   /* dark tag, white text */
.agroup dd { grid-column: 2; margin: 0; font-size: 22px; line-height: 30px; letter-spacing: 0.66px; }
.agroup dt + dd { grid-row: 1; }
.agroup .muted { color: #b8b8b8; }

.agenda__back { align-self: flex-start; width: auto; min-width: 342px; }

/* ------------------------------------------------ desktop agenda: compact layout with side margins (proposal) */

.agenda__content { width: var(--agenda-width); gap: 40px; padding: 48px 0 96px; }
.agenda__title { font-size: 56px; line-height: 56px; }

.apart { padding: 22px 0; }
.apart__spacer { width: 256px; }                 /* time column + gap */
.apart h3 { font-size: 18px; line-height: 24px; letter-spacing: 2.7px; }

.aline { gap: 16px; padding: 24px 0; }
.aline--expandable { padding-bottom: 28px; }
.aline__time { width: 240px; height: 32px; font-size: 18px; line-height: 24px; letter-spacing: 2.88px; }
.aline__right { gap: 20px; }
.aline__head { gap: 48px; }
.aline__name { font-size: 24px; line-height: 32px; letter-spacing: 0.72px; }
.aline__toggle, .aline__toggle img { width: 32px; height: 27px; }

.aline__desc { gap: 20px; }
.agroup { grid-template-columns: 112px 1fr; column-gap: 16px; row-gap: 8px; }
.agroup__label { padding: 6px 12px; font-size: 14px; line-height: 14px; letter-spacing: 0.42px; }
.agroup dd { font-size: 18px; line-height: 26px; letter-spacing: 0.54px; }

/* ------------------------------------------------ desktop agenda header (Kerno Tech Day Agenda 3 behaviour)
   The header is the Figma "E-Logo horizontal3" box at its design size (1780×589), centred on the page.
   Wider screens only add side space while the glow and rings run to the window edges (and fade down
   under the program title, as in Figma). Narrower than 1920px, the whole box scales down proportionally.
   All sizes inside the box are cqw of the 1780px box. */
.agenda { --agenda-width: min(960px, 100% - 160px); --hero-width: var(--agenda-width); }   /* header box = content column */
.agenda-hero { position: relative; width: 100%; overflow-x: clip; overflow-y: visible; }
.agenda-hero__box {
  position: relative;
  width: var(--hero-width);
  margin: 0 auto;
  aspect-ratio: 1780 / 589;
  container-type: inline-size;
}
.agenda-hero__bg {                    /* glow export 3177×987; the 1780 box starts 693px into it */
  position: absolute;
  top: 0;
  left: -38.93cqw;
  width: 178.48cqw;
  height: 55.45cqw;
  max-width: none;
  pointer-events: none;
}
.agenda__content { position: relative; z-index: 1; }
.agenda-hero__box > p {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.agenda-hero__event {                 /* x 637, y 119, 42px */
  left: 35.79cqw; top: 6.69cqw;
  font-size: 2.36cqw; line-height: 1.048; letter-spacing: 0.03em;
  background-image: linear-gradient(90deg, var(--grey-001) 34.135%, var(--toxic-green));
}
.agenda-hero__slogan {                /* x 630, y 260, 120px */
  left: 35.39cqw; top: 14.61cqw;
  font-size: 6.742cqw; line-height: 0.833; letter-spacing: 0.03em;
  background-image: linear-gradient(90deg, var(--grey-001) 34.135%, var(--toxic-green));
}
.agenda-hero__when {                  /* x 637, y 472, 42px */
  left: 35.79cqw; top: 26.52cqw;
  font-size: 2.36cqw; line-height: 0.857; letter-spacing: 0.03em;
  background-image: linear-gradient(90deg, var(--grey-001) 34.135%, var(--toxic-green));
}

/* ------------------------------------------------ desktop agenda: narrower 960px column (fits ~a laptop screen) */
.agenda__content { gap: 32px; padding: 40px 0 80px; }
.agenda__title { font-size: 44px; line-height: 44px; }

.apart { padding: 16px 0; }
.apart__spacer { width: 208px; }                 /* time column + gap */
.apart h3 { font-size: 15px; line-height: 20px; letter-spacing: 2.25px; }

.aline { gap: 16px; padding: 18px 0; }
.aline--expandable { padding-bottom: 22px; }
.aline__time { width: 192px; height: 26px; font-size: 15px; line-height: 20px; letter-spacing: 2.4px; }
.aline__right { gap: 14px; }
.aline__head { gap: 40px; }
.aline__name { font-size: 20px; line-height: 26px; letter-spacing: 0.6px; }
.aline__toggle, .aline__toggle img { width: 26px; height: 22px; }

.aline__desc { gap: 14px; }
.agroup { grid-template-columns: 96px 1fr; column-gap: 12px; row-gap: 6px; }
.agroup__label { padding: 5px 10px; font-size: 12px; line-height: 12px; letter-spacing: 0.36px; }
.agroup dd { font-size: 15px; line-height: 22px; letter-spacing: 0.45px; }

/* ================================================ Tech Forum update (Figma "iPhone 17 - RSVP Schedule" /
   "Kerno Tech Day Agenda 3", Oct 2026): new header, Details timeline, no "Back to event page" button */

.schedule { padding-bottom: 142px; }
.schedule__header { gap: 60px; }
.schedule__logo { display: flex; align-items: center; gap: 20px; height: 40px; }
.schedule__logo img { flex: none; width: 107px; height: 34px; }
.schedule__event {
  position: relative;
  padding-left: 16.5px;
  font-size: 17.33px;
  line-height: 20px;
  letter-spacing: 0.52px;
}
.schedule__event::before {            /* Figma "Vector 57": 0.5px #b8b8b8 divider, 36px tall */
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  height: 36px;
  border-left: 0.5px solid #b8b8b8;
}

.schedule__subtitle {
  margin: 0;
  padding: 60px 0 24px;
  color: var(--toxic-green);
  font-weight: 300;
  font-size: 28px;
  line-height: 24px;
  letter-spacing: 0.84px;
}
.timeline { margin: 0; }
.tline { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--grey-050); }
.tline:first-child { border-top: 1px solid var(--grey-050); }
.tline dt {
  color: var(--toxic-green);
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 2.08px;
  text-transform: uppercase;
}
.tline dd { margin: 0; font-size: 16px; line-height: 20px; letter-spacing: 0.48px; }
/* "iPhone 17 - RSVP Schedule 3": no "Details" title, the block sits right under the header line */
.timeline--top .tline:first-child { border-top: 0; padding-top: 16px; }

/* desktop header: "Kerno Sovereign / Tech Forum 2026" (x 637, y 136, 48px) + "Dare. Build. Lead." (x 629, y 371, 145px) */
.agenda-hero__event {
  left: 35.79cqw; top: 7.64cqw;
  font-size: 2.697cqw; line-height: 1.208; letter-spacing: 0.03em;
}
.agenda-hero__slogan {
  left: 35.34cqw; top: 20.84cqw;
  font-size: 8.146cqw; line-height: 0.69; letter-spacing: -0.01em;
  /* background-clip:text paints only inside the box: give the glyphs room (line box is shorter than the
     letters) and pull the box back so the text stays at the Figma position */
  padding: 0.25em 0.1em 0.2em 0;
  margin-top: -0.25em;
}

/* desktop Date / Time / Venue (Figma rows 1780 wide → 960px column, ×0.54) */
.atimeline { margin: 20px 0 44px; }
.atline { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--grey-050); }
.atline:first-child { border-top: 1px solid var(--grey-050); }
.atline dt {
  flex: none;
  width: 192px;
  color: var(--toxic-green);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}
.atline dd { margin: 0; font-size: 22px; line-height: 28px; letter-spacing: 0.66px; }

/* ------------------------------------------------ "iPhone 17 - RSVP Schedule 3" update: chevrons instead of
   "Show more / Show less", header 80px from the top, last line closed with a divider */
.schedule { padding-top: 80px; padding-bottom: 80px; }
.schedule__list:last-of-type .sline:last-child { padding-bottom: 20px; border-bottom: 1px solid var(--grey-050); }

.sline__head {
  display: grid;
  grid-template-columns: 1fr 16px;     /* Figma: text column + 16px chevron, 16px apart */
  column-gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sline__head .sline__time { grid-column: 1; grid-row: 1; }
.sline__head .sline__name { display: block; grid-column: 1; grid-row: 2; }
.sline__chev {                         /* 16×8 chevron, 1.5px white stroke, 5px below the line top */
  grid-column: 2; grid-row: 1;
  width: 17.5px; height: 9.5px;
  margin: 4.25px 0 0 -0.75px;
  transition: transform 0.2s ease;
}
.sline__head[aria-expanded="true"] .sline__chev { transform: rotate(180deg); }
.sline__head:focus-visible { outline: 2px solid var(--toxic-green); outline-offset: 3px; }