/* Axogame shared styles.
   Color story: A (mint) = Hakkımda, X (yellow) = Support, O (red) = Oyunlar.
   Text rule: blue text on mint / yellow / white, white text on red / blue.
   Dark and translucent tones live only in the header controls and quick panes.
   Materials: .lg = liquid glass (refracts what is behind it, quick panes only),
              .soft = satin glass (soft, blurred behind, no gloss). */
:root {
  --blue: #533fff;
  --red: #ff3366;
  --white: #f4f2ff;
  --mint: #22e6a4;
  --yellow: #ffff19;
  --blue-deep: #2e2299;
  --font: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.35, .5, 1);
  --pad: max(24px, env(safe-area-inset-left, 0px));
  --padr: max(24px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--blue); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--blue); color: var(--white); font-family: var(--font);
  font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.p-mint { background: var(--mint); color: var(--blue); }
body.p-yellow { background: var(--yellow); color: var(--blue); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.p-mint :focus-visible, .p-yellow :focus-visible { outline-color: var(--blue); }
img { display: block; }

/* ---------- liquid glass: frosted middle, refracting rim ---------- */
.lg { position: relative; isolation: isolate; background: linear-gradient(160deg, rgba(244,242,255,.34), rgba(244,242,255,.16)); }
.lg > .g-frost, .lg > .g-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.lg > .g-frost {
  z-index: -2;
  -webkit-backdrop-filter: blur(7px) saturate(1) brightness(1.03); backdrop-filter: blur(7px) saturate(1) brightness(1.03);
}
.lg > .g-rim {
  z-index: -1; padding: var(--bz, 14px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  box-shadow: inset 1.5px 1.5px 1px -.5px rgba(244,242,255,.95), inset -1.5px -1.5px 1px -.5px rgba(244,242,255,.55), inset 0 0 0 .5px rgba(244,242,255,.25);
}
.refract .lg > .g-rim { -webkit-backdrop-filter: var(--lgf) saturate(1) brightness(1.03); backdrop-filter: var(--lgf) saturate(1) brightness(1.03); }
.lg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; box-shadow: 0 18px 44px rgba(46,34,153,.32); }

/* ---------- soft satin glass ---------- */
.soft {
  background: radial-gradient(120% 130% at 28% -10%, rgba(244,242,255,.34), rgba(244,242,255,0) 58%), rgba(83,63,255,.8);
  -webkit-backdrop-filter: blur(9px) saturate(1.3); backdrop-filter: blur(9px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(244,242,255,.75), inset 0 0 0 1px rgba(244,242,255,.2), inset 0 -8px 12px -6px rgba(46,34,153,.5), 0 8px 22px -6px rgba(46,34,153,.45);
}

/* ---------- top bar ---------- */
.bar {
  position: fixed; z-index: 80; top: 0; left: 0; right: 0;
  height: calc(88px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--padr) 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* progressive blur: many thin layers, strongest at the very top, fading out downward */
.bar-bg { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 80px); z-index: -1; pointer-events: none; }
.bar-bg i { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .7s var(--ease); }
.bar.glass .bar-bg i { opacity: 1; }
.bar-bg .tint { background: linear-gradient(to bottom, rgba(83,63,255,.42), rgba(83,63,255,.18) 45%, rgba(83,63,255,.05) 78%, transparent); }
.bar, .hero-ctl { transition: opacity .9s var(--ease); }
body.intro-on .bar, body.intro-on .hero-ctl { opacity: 0; pointer-events: none; }
.logo { flex: none; }
.logo img { height: 36px; width: auto; }
.tools { display: flex; align-items: center; gap: 12px; }
.btn-c, .dot {
  height: 40px; min-width: 40px; border-radius: 20px; display: inline-grid; place-items: center;
  transition: transform .45s var(--spring), background .3s, color .3s;
}
.btn-c { width: 40px; color: var(--white); }
.btn-c:hover { transform: scale(1.08); }
.btn-c:active { transform: scale(.94); }
.btn-c svg, .pill-items svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-c[aria-expanded="true"] { color: var(--blue); }
.btn-c[aria-expanded="true"] { background: var(--white); box-shadow: 0 10px 26px rgba(46,34,153,.25); }

.dots { display: flex; gap: 8px; }
.dot {
  position: relative; background: var(--c);
  color: var(--blue); display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  font-weight: 600; font-size: 15px; white-space: nowrap;
}
.dot[data-k="red"] { color: var(--white); }
.dot span { max-width: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-width .55s var(--ease), opacity .3s, margin .55s var(--ease); }
@media (hover: hover) { .dot:hover span { max-width: 110px; opacity: 1; margin: 0 18px; } }
.dot:focus-visible span { max-width: 110px; opacity: 1; margin: 0 18px; }
.dot:active { transform: scale(.95); }

.pill { display: flex; align-items: center; border-radius: 24px; padding: 0; transition: padding .4s var(--ease), background .4s, box-shadow .4s; }
.pill.open { padding: 4px; background: radial-gradient(120% 130% at 28% -10%, rgba(244,242,255,.34), rgba(244,242,255,0) 58%), rgba(83,63,255,.8); -webkit-backdrop-filter: blur(9px) saturate(1.3); backdrop-filter: blur(9px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(244,242,255,.75), inset 0 0 0 1px rgba(244,242,255,.2), inset 0 -8px 12px -6px rgba(46,34,153,.5), 0 8px 22px -6px rgba(46,34,153,.45); }
.pill-items { display: flex; align-items: center; max-width: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-width .6s var(--ease), opacity .3s, visibility 0s .6s; }
.pill.open .pill-items { max-width: 200px; opacity: 1; visibility: visible; transition: max-width .6s var(--ease), opacity .4s .1s, visibility 0s; }
.pill-items > * { width: 42px; height: 40px; display: grid; place-items: center; flex: none; color: rgba(244,242,255,.66); border-radius: 20px; transition: color .25s, transform .3s var(--spring); }
.pill-items > *:hover, .pill-items > *[aria-expanded="true"] { color: var(--white); transform: scale(1.12); }
.menu-ico { transition: transform .5s var(--ease); }
.pill.open .menu-ico { transform: rotate(90deg); }

/* ---------- quick panes ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 65; opacity: 0; visibility: hidden; pointer-events: none;
  background: linear-gradient(to left, rgba(83,63,255,.35), rgba(83,63,255,.08) 70%, transparent);
  -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 24%, rgba(0,0,0,.35) 74%, transparent); mask-image: linear-gradient(to left, #000 0%, #000 24%, rgba(0,0,0,.35) 74%, transparent);
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
.scrim.on { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.qp {
  position: fixed; z-index: 70; top: calc(86px + env(safe-area-inset-top, 0px)); right: var(--padr);
  width: min(380px, calc(100vw - 32px)); display: grid; gap: 10px; visibility: hidden; pointer-events: none; color: var(--white);
  padding: 4px; transition: visibility 0s .5s;
}
.qp.open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.qp > *, .qp .rows > * { transform: translateX(44px) scale(.92); transition: transform .45s var(--ease); }
.qp.open > *, .qp.open .rows > * { transform: none; transition: transform .75s var(--spring) calc(var(--i, 0) * 55ms); }
.qp .rows { display: grid; gap: 10px; transform: none !important; }
.qp h2 { margin: 0 8px; font-size: 15px; font-weight: 600; color: var(--white); text-shadow: 0 1px 12px rgba(46,34,153,.55); }
.t { border-radius: 26px; padding: 16px 18px; }
.t p { margin: 0; font-size: 16px; }
.search-field { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: 27px; }
.search-field svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; flex: none; opacity: .75; }
.search-field input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--white); font: inherit; font-size: 17px; }
.search-field input::placeholder { color: rgba(244,242,255,.7); }
.search-field:focus-within > .g-rim { box-shadow: inset 0 0 0 2px var(--white); }
.prow { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; border-radius: 28px; text-align: left; width: 100%; transition: transform .35s var(--spring); }
.prow:hover, .prow:focus-visible { transform: scale(1.025) !important; }
.prow i.dotc { width: 36px; height: 36px; border-radius: 50%; background: var(--c); flex: none; box-shadow: inset 0 1px 0 rgba(244,242,255,.55), inset 0 -6px 10px rgba(83,63,255,.12); }
.prow b { display: block; font-weight: 600; line-height: 1.2; }
.prow small { display: block; font-size: 13px; opacity: .8; line-height: 1.3; }
.prow .ext { margin-left: auto; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; opacity: .7; flex: none; }
.pf { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 34px; font-weight: 600; text-align: left; width: 100%; }
.pf i.dotc { width: 44px; height: 44px; border-radius: 50%; background: var(--c); display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(244,242,255,.55), inset 0 -6px 10px rgba(83,63,255,.12); }
.pf small { display: block; font-weight: 400; font-size: 13px; opacity: .8; }
.pf i.dotc svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 2; stroke-linecap: round; }
.pf.add i.dotc { background: transparent; box-shadow: none; border: 2px dashed rgba(244,242,255,.7); }
.pf.add i.dotc svg { stroke: var(--white); }
.cta { display: block; width: 100%; padding: 15px 18px; border-radius: 27px; background: var(--white); color: var(--blue); font-weight: 700; text-align: center; box-shadow: 0 16px 40px rgba(46,34,153,.3); }
.cta:hover { transform: scale(1.025); }

/* ---------- hero banner ---------- */
main { position: relative; }
.hero { position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 560px; overflow: hidden; background: var(--blue); }
.hero-wrap { position: absolute; inset: 0; transform-origin: 50% 30%; will-change: transform; }
.slide { position: absolute; inset: 0; background: var(--blue); color: var(--white); clip-path: circle(0% at 50% 100%); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.slide.on, .slide.prev { clip-path: circle(150% at 50% 100%); }
.slide.on { z-index: 2; }
.slide.prev { z-index: 1; transition: none; }
.intro-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--blue); }
@media (max-aspect-ratio: 13/10) { .intro-vid { object-fit: contain; } }
.slide .fb { display: none; }
.slide.novid .fb { display: block; }
.slide.novid .intro-vid { display: none; }
.shape { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); transform: translate(calc(var(--mx, 0) * var(--d, 1) * 26px), calc(var(--my, 0) * var(--d, 1) * 26px)); transition: transform .9s var(--ease); }
.shape svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--c); stroke-width: 9; animation: drift var(--t, 14s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
.shape.solid svg { fill: var(--c); stroke: none; }
@keyframes drift { from { transform: translateY(-14px) rotate(calc(var(--r, 6deg) * -1)); } to { transform: translateY(14px) rotate(var(--r, 6deg)); } }
.slide-copy { position: absolute; left: var(--pad); bottom: calc(110px + env(safe-area-inset-bottom, 0px)); max-width: min(620px, calc(100% - 48px)); display: grid; gap: 14px; justify-items: start; }
.slide-copy small { font-size: 16px; font-weight: 500; opacity: .85; }
.slide-copy h2 { margin: 0; font-size: clamp(54px, 10vw, 128px); line-height: .92; font-weight: 700; letter-spacing: -.045em; text-wrap: balance; }
.btn { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border-radius: 24px; background: var(--white); color: var(--blue); font-weight: 700; transition: transform .4s var(--spring); box-shadow: 0 12px 28px rgba(46,34,153,.25); }
.btn:hover { transform: scale(1.05); }
.btn:active { transform: scale(.96); }
.hero-ctl { position: absolute; z-index: 5; left: 50%; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.inds { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; }
.ind { width: 9px; height: 9px; border-radius: 5px; background: rgba(244,242,255,.5); position: relative; overflow: hidden; transition: width .6s var(--ease); padding: 0; }
.ind.on { width: 52px; }
.ind i { position: absolute; inset: 0; background: var(--white); transform-origin: left; transform: scaleX(0); }
.round { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: transform .35s var(--spring); }
.round:hover { transform: scale(1.1); }
.round svg { width: 16px; height: 16px; fill: var(--white); }
.round .alt { display: none; }
.round.alt-on .alt { display: block; }
.round.alt-on .main { display: none; }

/* ---------- full-screen panels ---------- */
.panel {
  position: relative; z-index: 2; min-height: 100svh; border-radius: 40px 40px 0 0; overflow: hidden;
  padding: 140px var(--padr) calc(64px + env(safe-area-inset-bottom, 0px)) var(--pad);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  box-shadow: 0 -16px 50px rgba(46, 34, 153, .22);
}
.panel.red { background: var(--red); color: var(--white); }
.panel.white { background: var(--white); color: var(--blue); }
.panel.blue { background: var(--blue); color: var(--white); }
.panel .shape svg { stroke-width: 7; }
.panel h2 { margin: 0 0 .06em; position: relative; font-size: clamp(72px, 17vw, 260px); line-height: .85; font-weight: 700; letter-spacing: -.055em; }
.panel p { margin: 0; position: relative; font-size: clamp(19px, 2vw, 26px); max-width: 30ch; line-height: 1.3; font-weight: 500; }
.panel .btn { position: relative; width: fit-content; }
.panel.white .btn { background: var(--blue); color: var(--white); box-shadow: 0 12px 28px rgba(83,63,255,.3); }
.panel .tagline { position: relative; font-size: 15px; opacity: .85; font-weight: 400; }
.outro { min-height: 0; padding-top: 80px; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
.outro nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 18px; font-weight: 500; }
.outro nav a { opacity: .85; transition: opacity .2s; }
.outro nav a:hover { opacity: 1; }
.outro small { width: 100%; opacity: .75; }

/* ---------- inner pages ---------- */
.page { position: relative; padding: 150px var(--padr) 90px var(--pad); max-width: 1240px; margin: 0 auto; display: grid; gap: 28px; }
.page > * { position: relative; }
.page h1 { margin: 0; font-size: clamp(72px, 15vw, 220px); line-height: .85; font-weight: 700; letter-spacing: -.055em; padding-bottom: .06em; }
.page .lead { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; font-weight: 500; max-width: 28ch; margin: 0; }
.page h2.sec { margin: 56px 0 0; font-size: clamp(34px, 5vw, 64px); line-height: 1; letter-spacing: -.035em; }
.bgshape { position: absolute; z-index: 0; right: -2vw; top: clamp(200px, 24vw, 330px); width: min(34vw, 440px); aspect-ratio: 1; pointer-events: none; }
.bgshape svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--c); stroke-width: 6; animation: drift 14s ease-in-out infinite alternate; }
.story { display: grid; gap: 14px; }
.srow { display: grid; grid-template-columns: 112px 1fr; gap: 24px; align-items: center; border-radius: 36px; padding: 22px 30px 22px 22px; background: var(--bgc); color: var(--fgc); transition: transform .5s var(--spring); }
.srow:hover { transform: scale(1.012); }
.srow svg { width: 100%; height: auto; aspect-ratio: 1; overflow: visible; fill: none; stroke: var(--fgc); stroke-width: 8; }
.srow h3 { margin: 0 0 4px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1; letter-spacing: -.03em; }
.srow p { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 500; max-width: 46ch; }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.member { display: grid; gap: 14px; justify-items: start; }
.member .av { width: 100%; aspect-ratio: 1; border-radius: 40px; background: var(--white); display: grid; place-items: center; overflow: hidden; }
.member .av svg { width: 46%; height: 46%; overflow: visible; fill: none; stroke: var(--blue); stroke-width: 7; }
.member b { font-size: 21px; line-height: 1.1; display: block; }
.member span { font-weight: 500; opacity: .85; }
.blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.block { border-radius: 36px; padding: 30px; display: grid; gap: 10px; align-content: end; min-height: 280px; min-width: 0; background: var(--bgc); color: var(--fgc); }
.block h2 { margin: 0; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; letter-spacing: -.03em; }
.block p { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 500; }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: 30px; background: var(--white); color: var(--blue); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 30px; font-size: clamp(21px, 2.4vw, 28px); font-weight: 600; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 36px; line-height: 1; font-weight: 400; transition: transform .35s var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 30px 28px; max-width: 54ch; font-size: 18px; font-weight: 500; }
.mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 26px 30px; border-radius: 34px; background: var(--blue); color: var(--white); font-size: clamp(21px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; }
.mailrow code { font: inherit; user-select: all; overflow-wrap: anywhere; }
.mailrow button { margin-left: auto; height: 46px; padding: 0 24px; border-radius: 23px; background: var(--white); color: var(--blue); font-size: 17px; font-weight: 700; letter-spacing: 0; }

@media (max-width: 700px) {
  .bar { height: calc(72px + env(safe-area-inset-top, 0px)); gap: 8px; }
  :root { --pad: max(16px, env(safe-area-inset-left, 0px)); --padr: max(16px, env(safe-area-inset-right, 0px)); }
  .logo img { height: 26px; }
  .tools { gap: 8px; }
  .bar.menu-open .dots { display: none; }
  .bar.menu-open .logo img { height: 22px; }
  .pill-items > * { width: 38px; }
  .pill.open .pill-items { max-width: 160px; }
  .qp { top: calc(66px + env(safe-area-inset-top, 0px)); }
  .panel { border-radius: 28px 28px 0 0; padding-top: 110px; }
  .slide-copy { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .srow { grid-template-columns: 72px 1fr; gap: 16px; padding: 16px 20px 16px 16px; border-radius: 28px; }
  .page { padding-top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-delay: 0s !important; }
}

/* ---------- quick pane geometry (set from the pill / search button by script) ---------- */
.qp { z-index: 90; right: auto; top: auto; width: auto; }
.qp > *, .qp .rows > *, .qp .sc > * { transform: translateX(44px) scale(.92); transition: transform .45s var(--ease); }
.qp.open > *, .qp.open .rows > *, .qp.open .sc > * { transform: none; transition: transform .75s var(--spring) calc(var(--i, 0) * 55ms); }
.qp .rows, .qp .sc { transform: none !important; }
#paneSearch { gap: 8px; }
#paneSearch .rows { gap: 8px; }
.sf { position: relative; justify-self: end; width: 40px; height: 44px; border-radius: 22px; display: flex; align-items: center; padding: 0 46px 0 20px; overflow: hidden; transition: width .6s var(--spring) !important; }
.qp.open .sf { width: 100%; }
.sf input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--white); font: inherit; font-size: 16px; opacity: 0; transition: opacity .3s; }
.qp.open .sf input { opacity: 1; transition-delay: .25s; }
.sf input::placeholder { color: rgba(244,242,255,.7); }
.sf .sclose { position: absolute; right: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); }
.sf .sclose svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.sf:focus-within > .g-rim { box-shadow: inset 0 0 0 2px var(--white); }
#btnSearch[aria-expanded="true"] { opacity: 0; pointer-events: none; }
.prow.c { height: 46px; padding: 0 16px 0 10px; gap: 12px; border-radius: 23px; font-size: 15px; }
.prow.c i.dotc { width: 26px; height: 26px; }
.prow.c span { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.prow.c b { display: inline; white-space: nowrap; }
.prow.c small { display: inline; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .72; }
.t.c { height: 46px; padding: 0 16px; border-radius: 23px; display: flex; align-items: center; font-size: 14px; }
.nt, .pf.c { height: 52px; padding: 0 14px 0 10px; border-radius: 26px; display: flex; align-items: center; gap: 10px; width: 100%; }
.nt i.dotc, .pf.c i.dotc { width: 30px; height: 30px; border-radius: 50%; background: var(--c); flex: none; display: grid; place-items: center; }
.pf.c i.dotc svg { width: 17px; height: 17px; }
.nt span, .pf.c span { font-size: 13.5px; font-weight: 600; line-height: 1.15; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cta.c { height: 52px; padding: 0; display: grid; place-items: center; border-radius: 26px; font-size: 15px; }
.sc { display: grid; gap: 10px; max-height: 246px; overflow-y: auto; padding: 0 20px 0 0; margin-right: -20px; scrollbar-width: thin; scrollbar-color: rgba(244,242,255,.6) rgba(46,34,153,.4); }
.sc::-webkit-scrollbar { width: 8px; }
.sc::-webkit-scrollbar-track { background: rgba(46,34,153,.4); border-radius: 4px; }
.sc::-webkit-scrollbar-thumb { background: rgba(244,242,255,.6); border-radius: 4px; }

/* open pill: plain icons, the active one sits in a dark circle */
.pill.open .btn-c { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: rgba(244,242,255,.66); }
.pill.open .btn-c:hover { color: var(--white); }
.pill.open .menu-ico { transform: none; }
.pill-items > [aria-expanded="true"] { background: var(--blue-deep); color: var(--white); transform: none; }

.sc .lg::after, .rows .lg::after { box-shadow: none; }
.lg > .g-rim { box-shadow: inset 1.5px 1.5px 0 -.5px rgba(244,242,255,1), inset -1.5px -1.5px 0 -.5px rgba(244,242,255,.7), inset 0 0 0 .5px rgba(244,242,255,.35); }

/* panels overlap so the rounded top corners show the previous panel, never the page background */
.panel + .panel { margin-top: -40px; padding-top: 180px; }
.panel:has(+ .panel) { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 700px) { .panel + .panel { margin-top: -28px; padding-top: 138px; } .panel:has(+ .panel) { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }
.pill-items > *:focus-visible, .btn-c:focus-visible { outline-offset: -3px; }

.mailrow a.mail { font: inherit; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: rgba(244,242,255,.4); }
.mailrow a.mail:hover { text-decoration-color: var(--white); }
.mailrow .send { height: 46px; padding: 0 24px; border-radius: 23px; display: inline-flex; align-items: center; background: var(--yellow); color: var(--blue); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.mailrow .send + button { margin-left: 0; }
.mailrow .btns { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.mailrow .btns button { margin-left: 0; }