/* Felia website. One typeface (the system font, same as the app), the app's light background,
   color only from the app icon and the class card auras. These tokens also drive the Instagram templates. */
:root {
  --bg: #F4F3EE;
  --surface: #FFFFFF;
  --ink: #29100C;
  --ink-soft: rgba(41, 16, 12, 0.62);
  --line: rgba(41, 16, 12, 0.12);

  /* Accents from the app icon */
  --oxblood: #5A1D22;
  --butter: #F0E8C8;
  --sky: #A1B8DA;
  --red: #C2412D;
  --olive: #6F7442;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --radius: 28px;
  --gutter: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 14px; border-radius: 10px; z-index: 50; }
.skip:focus { left: 8px; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
mark { background: var(--butter); color: var(--ink); padding: 0 4px; border-radius: 4px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.label { font-size: 12px; font-weight: 500; color: var(--ink-soft); margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin: 0; }
.accent { color: var(--red); }

/* Header */
header.site { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px var(--gutter); }
header.site a.brand { text-decoration: none; font-weight: 600; font-size: 22px; letter-spacing: -0.05em; }
header.site a.brand img { display: none; }
header.site nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; font-size: 14px; }
header.site nav a { text-decoration: none; color: var(--ink-soft); }
header.site nav a:hover { color: var(--ink); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 6px 6px 6px 20px; font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid transparent; }
.pill span.dot { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.pill.solid { background: var(--ink); color: var(--bg); }
.pill.solid span.dot { background: var(--bg); color: var(--ink); }
.pill.ghost { padding: 12px 20px; border-color: var(--line); color: var(--ink-soft); }
.hero .pill.solid { background: var(--butter); color: var(--oxblood); }
.hero .pill.solid span.dot { background: var(--oxblood); color: var(--butter); }
.hero .pill.ghost { color: var(--butter); border-color: rgba(240, 232, 200, 0.4); }

/* Auras: the app's gradients (Theme.swift) */
.aura { position: relative; overflow: hidden; color: #fff; }
.aura.icon { background:
  radial-gradient(circle at 78% 34%, rgba(161, 184, 218, 0.95) 0, rgba(161, 184, 218, 0.95) 13%, rgba(161, 184, 218, 0) 27%),
  radial-gradient(circle at 63% 46%, rgba(240, 232, 200, 1) 0, rgba(240, 232, 200, 1) 12%, rgba(240, 232, 200, 0) 27%),
  #5A1D22; }
.aura.pilates { background: radial-gradient(ellipse 50% 62% at 10% 95%, rgba(154,58,34,0.8), rgba(154,58,34,0)), radial-gradient(ellipse 35% 44% at 95% 60%, rgba(142,174,220,0.7), rgba(142,174,220,0)), radial-gradient(ellipse 55% 69% at 78% 30%, rgba(169,192,203,1), rgba(169,192,203,0)), #5A1D22; }
.aura.friends { background: radial-gradient(ellipse 50% 62% at 30% 30%, rgba(90,29,34,0.8), rgba(90,29,34,0)), radial-gradient(ellipse 45% 56% at 10% 90%, rgba(242,232,201,0.35), rgba(242,232,201,0)), radial-gradient(ellipse 55% 69% at 85% 15%, rgba(154,58,34,0.9), rgba(154,58,34,0)), #29100C; }
.aura.merlot { background: radial-gradient(ellipse 45% 56% at 88% 85%, rgba(227,196,196,0.6), rgba(227,196,196,0)), radial-gradient(ellipse 55% 69% at 20% 15%, rgba(154,58,72,0.45), rgba(154,58,72,0)), #6B1F2A; }
.aura.rose { background: radial-gradient(ellipse 45% 56% at 88% 85%, rgba(244,218,223,0.6), rgba(244,218,223,0)), radial-gradient(ellipse 55% 69% at 20% 15%, rgba(204,130,153,0.45), rgba(204,130,153,0)), #B0607A; }
.aura.strength { background: radial-gradient(ellipse 30% 38% at 92% 5%, rgba(242,232,201,0.5), rgba(242,232,201,0)), radial-gradient(ellipse 50% 62% at 90% 90%, rgba(194,65,45,0.85), rgba(194,65,45,0)), radial-gradient(ellipse 60% 75% at 20% 20%, rgba(142,174,220,1), rgba(142,174,220,0)), #34528F; }

/* Hero */
.hero { margin: 0 var(--gutter); border-radius: 32px; min-height: calc(100svh - 90px); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 4vw, 48px); color: var(--butter); }
.hero .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.hero .label { color: rgba(240, 232, 200, 0.8); }
.hero .intro { max-width: 22em; font-size: 17px; line-height: 1.45; margin: 0; }
.hero h1 { font-size: clamp(48px, 15vw, 250px); line-height: 0.84; letter-spacing: -0.07em; color: var(--butter); margin-bottom: 28px; }
.hero .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }

/* Sections */
.section { max-width: 1400px; margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--gutter); }
.section-head { display: grid; gap: 18px; margin-bottom: 44px; }
@media (min-width: 900px) { .section-head { grid-template-columns: 1fr 1fr; align-items: end; } }
.section-head h2 { font-size: clamp(44px, 6.5vw, 96px); }
.section-head p { margin: 0; max-width: 28em; color: var(--ink-soft); font-size: 17px; }

/* Note from Luise */
.note { display: grid; gap: 24px; }
@media (min-width: 900px) { .note { grid-template-columns: 1fr 2fr; } }
.letter { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.28; letter-spacing: -0.03em; font-weight: 500; }
.letter p { margin: 0 0 0.75em; }
.letter .accent { color: var(--red); }
.letter .sign { color: var(--ink-soft); }

/* Class cards, like in the app */
.cards-row { display: flex; gap: 14px; overflow-x: auto; padding: 0 var(--gutter) 10px; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: none; }
.cards-row::-webkit-scrollbar { display: none; }
.cc { flex: none; width: 300px; height: 360px; border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; scroll-snap-align: start; }
.cc .top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; }
.chip { background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 5px 12px; }
.cc .aud { margin-top: auto; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.cc .t { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; margin: 4px 0 2px; }
.cc .s { font-size: 14px; opacity: 0.8; }
.cc .bottom { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; font-weight: 500; }
.faces { display: inline-flex; }
.faces i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.7); margin-left: -7px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink); background: var(--sky); }
.faces i:first-child { margin-left: 0; background: var(--butter); }
.faces i:nth-child(3) { background: #E3C4C4; }
.join { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 5px 5px 14px; }
.join span { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.join.on { background: rgba(255, 255, 255, 0.22); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.join.on span { background: #fff; color: var(--ink); }
.cards-note { padding: 14px var(--gutter) 0; }

/* Feature list */
.features { display: grid; gap: 40px; }
@media (min-width: 900px) { .features { grid-template-columns: repeat(3, 1fr); } }
.features h3 { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--olive); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.features dl { margin: 0; }
.features dl > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.features dt { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.features dd { margin: 4px 0 0; color: var(--ink-soft); font-size: 15px; }

/* Closing */
.closing { display: grid; gap: 30px; align-items: end; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .closing { grid-template-columns: 2fr 1fr; } }
.closing h2 { font-size: clamp(64px, 11vw, 170px); letter-spacing: -0.065em; line-height: 0.9; }
.closing p { margin: 0 0 20px; color: var(--ink-soft); }
.fine { font-size: 12px; color: var(--ink-soft); text-align: center; padding: 0 var(--gutter); margin: 0; }

/* Reveal on scroll (site.js adds .in; without JS everything is visible) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* Legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 30px 0 0; }
.legal h1 { font-size: clamp(44px, 8vw, 76px); letter-spacing: -0.05em; margin: 30px 0 14px; hyphens: auto; }
.legal h2 { font-size: 24px; letter-spacing: -0.03em; margin: 44px 0 10px; }
.legal h3 { font-size: 17px; letter-spacing: -0.01em; margin: 26px 0 6px; }
.legal p, .legal li { color: #4a3530; }
.legal .stand { font-size: 13px; color: var(--ink-soft); }
.legal ul, .legal ol { padding-left: 20px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 10px 0 18px; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal th { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.note-box { background: var(--surface); border-radius: 18px; padding: 16px 18px; }
.legal .note { display: block; background: var(--surface); border-radius: 18px; padding: 16px 18px; }
.muted { color: var(--ink-soft); font-size: 14px; }

/* Invite page */
.invite-hero { border-radius: var(--radius); padding: 56px 28px 40px; margin-top: 24px; color: var(--butter); }
.invite-hero h1 { font-size: clamp(40px, 8vw, 68px); letter-spacing: -0.05em; margin: 8px 0 16px; }
.invite-hero .label { color: rgba(240, 232, 200, 0.8); }
.invite-hero .pill.solid { background: var(--butter); color: var(--oxblood); }
.invite-hero .pill.solid span.dot { background: var(--oxblood); color: var(--butter); }
.code { display: inline-block; font-size: 34px; font-weight: 600; letter-spacing: 6px; background: var(--butter); color: var(--oxblood); border-radius: 18px; padding: 10px 22px; margin: 6px 0 18px; }

/* Footer */
footer.site { padding: 50px 0 40px; margin-top: 70px; border-top: 1px solid var(--line); display: grid; gap: 26px; }
footer.site .brandline { font-size: clamp(90px, 22vw, 300px); font-weight: 600; line-height: 0.8; letter-spacing: -0.08em; }
footer.site .links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; }
footer.site .links a, footer.site .links span { text-decoration: none; color: var(--ink-soft); }
footer.site .links a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Full-bleed color blocks (no boxes) */
.page-home header.site { position: absolute; left: 0; right: 0; z-index: 5; color: var(--butter); }
.page-home header.site nav a { color: rgba(240, 232, 200, 0.75); }
.page-home header.site nav a:hover { color: var(--butter); }
.hero { margin: 0; border-radius: 0; min-height: 100svh; padding: 110px var(--gutter) clamp(28px, 4vw, 48px); }
.block { padding: clamp(90px, 12vw, 170px) var(--gutter); }
.block .inner { max-width: 1400px; margin: 0 auto; }
.block h2 { font-size: clamp(48px, 7.5vw, 120px); letter-spacing: -0.06em; line-height: 0.92; max-width: 12em; }
.block.butter-text { color: var(--butter); }
.block.butter-text .label { color: rgba(240, 232, 200, 0.75); }
.trio { display: grid; gap: 30px; margin-top: clamp(50px, 7vw, 90px); }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio div { border-top: 1px solid rgba(240, 232, 200, 0.4); padding-top: 18px; }
.trio h3 { font-size: 26px; letter-spacing: -0.035em; margin-bottom: 8px; }
.trio p { margin: 0; opacity: 0.85; max-width: 22em; }
.block.closing-block { min-height: 80svh; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.block.closing-block h2 { font-size: clamp(72px, 14vw, 230px); letter-spacing: -0.07em; line-height: 0.85; max-width: none; }
.closing-block .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.closing-block .bottom p { margin: 0; max-width: 26em; }
.closing-block .pill.solid { background: var(--butter); color: var(--oxblood); }
.closing-block .pill.solid span.dot { background: var(--oxblood); color: var(--butter); }
.closing-block .pill.ghost { color: var(--butter); border-color: rgba(240, 232, 200, 0.4); }
.page-home footer.site { margin-top: 0; }
.page-home .fine { padding: 18px var(--gutter) 0; }
.hero .row { flex-direction: column; gap: 14px; }
.note.personal { border-top: 1px solid var(--line); }
.note.personal .letter { font-size: clamp(20px, 2vw, 27px); line-height: 1.35; font-weight: 400; letter-spacing: -0.02em; max-width: 32em; }

/* Navigation: section links, a resources dropdown (no JS), language, test button */
header.site nav { align-items: center; gap: 6px 26px; }
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; color: var(--ink-soft); }
details.menu summary::-webkit-details-marker { display: none; }
details.menu summary::after { content: " ▾"; font-size: 10px; }
details.menu[open] summary, details.menu summary:hover { color: var(--ink); }
.dropdown { position: absolute; right: 0; top: calc(100% + 12px); min-width: 230px; background: var(--surface); color: var(--ink); border-radius: 18px; padding: 8px; box-shadow: 0 20px 50px -12px rgba(41, 16, 12, 0.3); display: grid; z-index: 30; }
.dropdown a { padding: 10px 12px; border-radius: 12px; color: var(--ink) !important; text-decoration: none; }
.dropdown a:hover { background: var(--bg); }
.nav-cta { background: var(--ink); color: var(--bg) !important; padding: 8px 16px; border-radius: 999px; text-decoration: none; }
.page-home details.menu summary { color: rgba(240, 232, 200, 0.75); }
.page-home details.menu[open] summary, .page-home details.menu summary:hover { color: var(--butter); }
.page-home .nav-cta { background: var(--butter); color: var(--oxblood) !important; }
@media (max-width: 640px) { header.site nav a:not(.nav-cta):not([hreflang]), header.site nav details { display: none; } }

/* FAQ: native disclosure, no JS */
.faq-list { border-top: 1px solid var(--ink); max-width: 1000px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: clamp(19px, 2vw, 24px); font-weight: 500; letter-spacing: -0.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--red); font-weight: 400; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: 0 0 24px; max-width: 42em; color: var(--ink-soft); font-size: 16px; }
.section-head a { color: var(--red); }

/* White on color like the app's class cards; butter only as a rare accent */
.hero, .hero h1, .block.butter-text { color: #fff; }
.hero .label, .block.butter-text .label { color: rgba(255, 255, 255, 0.75); }
.trio div { border-top-color: rgba(255, 255, 255, 0.4); }
.hero .pill.solid, .closing-block .pill.solid { background: #fff; color: var(--ink); }
.hero .pill.solid span.dot, .closing-block .pill.solid span.dot { background: var(--ink); color: #fff; }
.hero .pill.ghost, .closing-block .pill.ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.page-home header.site { color: #fff; }
.page-home header.site nav a, .page-home details.menu summary { color: rgba(255, 255, 255, 0.8); }
.page-home header.site nav a:hover, .page-home details.menu[open] summary, .page-home details.menu summary:hover { color: #fff; }
.page-home .nav-cta { background: #fff; color: var(--ink) !important; }
.aura.moss { background: radial-gradient(ellipse 45% 56% at 88% 85%, rgba(201,207,160,0.6), rgba(201,207,160,0)), radial-gradient(ellipse 55% 69% at 20% 15%, rgba(94,107,48,0.45), rgba(94,107,48,0)), #3E4A1C; }

/* Feature showcase: small real pieces of the app UI, no phone frames, no boxes */
.show { display: grid; gap: clamp(50px, 6vw, 80px) 40px; }
@media (min-width: 760px) { .show { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .show { grid-template-columns: repeat(3, 1fr); } }
.show article { display: flex; flex-direction: column; gap: 22px; }
.show .ui { min-height: 230px; display: flex; flex-direction: column; justify-content: center; gap: 8px; font-size: 14px; }
.show h3 { font-size: 24px; letter-spacing: -0.035em; }
.show p { margin: 6px 0 0; color: var(--ink-soft); max-width: 24em; }

.ui-white { background: var(--surface); border-radius: 18px; padding: 13px 16px; box-shadow: 0 10px 30px -18px rgba(41, 16, 12, 0.35); }
.ui-row { display: flex; align-items: center; justify-content: space-between; font-weight: 500; }
.ui-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); }
.ui-check.on { background: var(--ink); border-color: var(--ink); position: relative; }
.ui-check.on::after { content: "✓"; color: #fff; font-size: 11px; position: absolute; inset: 0; display: grid; place-items: center; }
.ui-seg { display: flex; gap: 6px; }
.ui-seg span { flex: 1; text-align: center; padding: 10px; border-radius: 999px; background: var(--surface); font-weight: 500; }
.ui-seg span.on { background: var(--ink); color: #fff; }

.ui-card { border-radius: 24px; padding: 18px; min-height: 200px; display: flex; flex-direction: column; color: #fff; }
.ui-card .t { margin-top: auto; font-size: 24px; font-weight: 500; letter-spacing: -0.03em; }
.ui-card .s { font-size: 13px; opacity: 0.8; }
.ui-card .bottom { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 500; }

.ui-bubble { max-width: 80%; padding: 10px 14px; border-radius: 20px; background: var(--surface); box-shadow: 0 10px 30px -20px rgba(41, 16, 12, 0.35); position: relative; }
.ui-bubble b { display: block; font-size: 11px; color: var(--red); margin-bottom: 1px; }
.ui-bubble.me { align-self: flex-end; background: var(--ink); color: #fff; }
.ui-bubble .react { position: absolute; right: -6px; bottom: -12px; background: var(--surface); border-radius: 999px; padding: 2px 7px; font-size: 12px; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.3); }

.ui-poll .q { font-weight: 600; margin-bottom: 4px; }
.ui-opt { position: relative; overflow: hidden; border-radius: 12px; padding: 10px 12px; background: rgba(41, 16, 12, 0.05); display: flex; justify-content: space-between; margin-top: 6px; }
.ui-opt::before { content: ""; position: absolute; inset: 0; width: 0; background: rgba(161, 184, 218, 0.55); }
.ui-opt.w1::before { width: 72%; } .ui-opt.w2::before { width: 28%; } .ui-opt.w3::before { width: 8%; }
.ui-opt span { position: relative; }

.ui-month { background: var(--ink); color: #fff; border-radius: 24px; padding: 20px; }
.ui-month .lbl { font-size: 11px; letter-spacing: 0.1em; opacity: 0.7; }
.ui-month .big { font-size: 64px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; margin: 8px 0 14px; }
.ui-month .big small { font-size: 20px; letter-spacing: -0.02em; }
.ui-month .row { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-month .row span { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 6px 10px; font-size: 12px; }

.ui-push { display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, 0.85); border-radius: 22px; padding: 12px 14px; box-shadow: 0 16px 40px -18px rgba(41, 16, 12, 0.4); }
.ui-push img { width: 38px; height: 38px; border-radius: 9px; }
.ui-push b { display: block; font-size: 13px; }
.ui-push .time { margin-left: auto; align-self: flex-start; font-size: 11px; color: var(--ink-soft); }
.ui-push.faded { opacity: 0.55; transform: scale(0.95); }

.also { margin-top: clamp(60px, 8vw, 100px); padding-top: 22px; border-top: 1px solid var(--ink); display: grid; gap: 18px; }
@media (min-width: 900px) { .also { grid-template-columns: 1fr 3fr; } }
.also h3 { font-size: 13px; color: var(--olive); }
.also ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.also li { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 14px; }

/* Luise's note in handwriting (Apple's Bradley Hand / Noteworthy), the only place with a second typeface */
.note.personal .letter { font-family: "Bradley Hand", "Noteworthy", "Segoe Print", "Comic Sans MS", cursive; font-weight: 400; font-size: clamp(24px, 2.4vw, 33px); line-height: 1.4; letter-spacing: 0; transform: rotate(-0.6deg); }
.note.personal .letter .sign { font-size: 1.5em; color: var(--ink); margin-top: 0.4em; }
/* No red highlights in running text */
.accent, .letter .accent { color: inherit; }
.section-head a { color: inherit; }
.faq-list summary::after { color: var(--ink-soft); }

/* Handwriting for Luise's note, self-hosted (OFL), see /fonts/LICENSE.txt */
@font-face { font-family: "Felia Hand"; src: url("/fonts/nothing-you-could-do.woff2") format("woff2"); font-display: swap; }
.note.personal .letter { font-family: "Felia Hand", "Bradley Hand", cursive; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.5; transform: rotate(-1deg); }
.note.personal .letter .sign { font-size: 1.6em; }
.note.personal { display: flex; justify-content: center; }
.note.personal .letter { font-size: clamp(19px, 1.8vw, 25px); max-width: 30em; transform: rotate(-3deg); }

/* Feature tiles (bento): one color per tile, small tag top left, UI piece in the middle */
.show { gap: 14px; }
.show article.tile { border-radius: var(--radius); padding: 22px 24px 26px; gap: 18px; min-height: 440px; justify-content: space-between; }
.show article.tile .ui { min-height: 0; flex: 1; justify-content: center; }
.tile.sand { background: #E9E4D8; color: var(--ink); }
.tile.aura h3, .tile.aura p { color: #fff; }
.tile.aura p { opacity: 0.85; }
.tile .tag { align-self: flex-start; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 999px; border: 1px solid currentColor; opacity: 0.8; }
.tile.aura .ui-card { box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5); }
.tile .ui-bubble, .tile .ui-white, .tile .ui-push { color: var(--ink); }
.tile .ui-bubble.me { color: #fff; }
.tile.aura .ui-white.ui-poll { box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.45); }
.tile .ui-seg span { color: var(--ink); }
.tile .ui-seg span.on { color: #fff; }

/* Phones */
@media (max-width: 640px) {
  .hero h1 { font-size: 24vw; line-height: 0.86; }
  .hero { min-height: 92svh; }
  header.site nav details { display: block; }
  .dropdown { right: -60px; }
  .show article.tile { min-height: 0; }
  .note.personal .letter { transform: rotate(-2deg); }
  .closing-block .bottom { flex-direction: column; align-items: flex-start; }
  footer.site .brandline { font-size: 34vw; }
}