:root {
  --surface: #fff;
  --tint-blue: #eef1ff;
  --accent-text: #1f33c4;
  --on-ink: #fff;
  --cta-bg: #10182b;
  --dark-bg: #10182b;
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .82);
  --header-bg: rgba(255, 255, 255, .9);
  color-scheme: light;
  --ink: #10182b;
  --muted: #56607a;
  --paper: #f6f8fb;
  --white: #fff;
  --blue: #2f4bff;
  --blue-d: #1f33c4;
  --saffron: #24d1f0;
  --line: #dfe4ee;
  --err: #c62828;
  --ok: #1b7f3b;
  --r: 12px;
  --head: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16px
}

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

a {
  color: inherit;
  text-decoration: none
}

:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 3px
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--ink);
  color: var(--on-ink);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100
}

.skip:focus {
  left: 12px
}

.wrap {
  width: min(1160px, 100% - 40px);
  margin-inline: auto
}

h1,
h2,
h3 {
  font-family: var(--head);
  line-height: 1.15;
  letter-spacing: -.01em
}

h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.9rem);
  font-weight: 800
}

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800
}

h3 {
  font-size: 1.2rem;
  font-weight: 600
}

.sub {
  color: var(--muted);
  margin: 8px 0 32px
}

.muted {
  color: var(--muted)
}

.section {
  padding: clamp(56px, 8vw, 96px) 0
}

.section h2 {
  margin-bottom: 8px
}

/* header + menu */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line)
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.05rem
}

.brand img {
  border-radius: 8px;
  object-fit: cover
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto
}

.nav a {
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: .95rem
}

.nav a:hover {
  background: var(--paper)
}

.nav a[aria-current="page"] {
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--saffron);
  border-radius: 0
}

.nav .nav-cta {
  background: var(--cta-bg);
  color: #fff;
  margin-left: 6px;
  border-radius: 8px;
  box-shadow: none
}

.nav .nav-cta:hover {
  background: var(--blue)
}

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  position: relative
}

.menu-btn span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s, opacity .2s, top .25s
}

.menu-btn span:nth-child(1) {
  top: 14px
}

.menu-btn span:nth-child(2) {
  top: 21px
}

.menu-btn span:nth-child(3) {
  top: 28px
}

.menu-btn[aria-expanded="true"] span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg)
}

.menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0
}

.menu-btn[aria-expanded="true"] span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg)
}

/* buttons + links */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.btn {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  border: 2px solid var(--ink);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s
}

.btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

.btn.primary:hover {
  background: var(--blue-d);
  border-color: var(--blue-d)
}

.btn.ghost:hover {
  background: var(--ink);
  color: var(--on-ink)
}

.btn.light {
  background: #fff;
  border-color: #fff;
  color: #10182b
}

.btn.light:hover {
  background: var(--saffron);
  border-color: var(--saffron)
}

.btn.outline {
  border-color: #fff;
  color: #fff
}

.btn.outline:hover {
  background: #fff;
  color: var(--blue-d)
}

.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap
}

.text-link:hover {
  color: var(--blue)
}

.text-link.light {
  color: #fff
}

.text-link.light:hover {
  color: var(--saffron)
}

/* hero + page heads */
.hero {
  padding: clamp(48px, 8vw, 100px) 0;
  background: linear-gradient(180deg, #fff, var(--paper))
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center
}

.lead {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 18px 0 28px
}

.page-head {
  padding: clamp(44px, 7vw, 84px) 0 clamp(28px, 4vw, 48px);
  background: var(--glass);
  border-bottom: 1px solid var(--line)
}

.page-head .lead {
  margin-bottom: 0
}

.launcher {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: 8px 8px 0 var(--saffron)
}

.launcher-title {
  font-family: var(--head);
  font-weight: 600;
  margin-bottom: 8px
}

.launcher a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
  font-weight: 500
}

.launcher a:hover {
  color: var(--blue)
}

.chip {
  display: inline-block;
  min-width: 92px;
  text-align: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--tint-blue);
  color: var(--accent-text);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap
}

/* tools */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.tool {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  transition: border-color .2s, transform .2s
}

.tool:hover {
  border-color: var(--blue);
  transform: translateY(-3px)
}

.tool h3 {
  margin: 16px 0 6px
}

.tool p {
  color: var(--muted);
  font-size: .95rem
}

.head-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px
}

.head-row .text-link {
  margin-bottom: 32px
}

/* slider */
.dark {
  background: var(--dark-bg);
  color: #fff
}

.dark .sub {
  color: #aab3cc
}

.arrows {
  display: flex;
  gap: 10px;
  margin-bottom: 32px
}

.arrows button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s
}

.arrows button:hover {
  background: var(--saffron);
  border-color: var(--saffron);
  color: var(--ink)
}

.track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
  overscroll-behavior-x: contain
}

.track::-webkit-scrollbar {
  display: none
}

.svc {
  flex: 0 0 calc((100% - 40px)/3);
  scroll-snap-align: start;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r);
  padding: 28px
}

.svc svg,
.svc-row svg {
  width: 52px;
  height: 52px;
  padding: 12px;
  border-radius: 50%;
  background: var(--tint-blue);
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none
}

.svc svg {
  margin-bottom: 18px
}

.svc h3 {
  margin-bottom: 8px
}

.svc p {
  color: var(--muted);
  font-size: .95rem
}

.more-row {
  margin-top: 28px
}

/* services page */
.svc-list {
  display: grid;
  gap: 0;
  max-width: 820px
}

.svc-row {
  display: flex;
  gap: 22px;
  padding: 28px 0;
  border-top: 1px solid var(--line)
}

.svc-row:last-child {
  border-bottom: 1px solid var(--line)
}

.svc-row h3 {
  margin-bottom: 6px;
  font-size: 1.35rem
}

.svc-row p+p {
  margin-top: 8px
}

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
  counter-reset: s
}

.steps li {
  counter-increment: s;
  border-top: 3px solid var(--ink);
  padding-top: 14px
}

.steps li::before {
  content: "Step " counter(s);
  display: block;
  font-size: .85rem;
  color: var(--accent-text);
  font-weight: 600;
  margin-bottom: 4px
}

.steps p {
  color: var(--muted);
  font-size: .95rem;
  margin-top: 4px
}

/* billing */
.bill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.bill {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px;
  border-radius: var(--r);
  background: var(--white);
  border: 2px solid var(--ink)
}

.bill.alt {
  background: var(--saffron);
  color: #10182b
}

.bill.alt .more {
  color: #10182b
}

.bill p {
  max-width: 44ch
}

.more {
  margin-top: auto;
  padding-top: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px
}

.bill:hover .more {
  color: var(--accent-text)
}

/* why + about */
.tint {
  background: var(--glass-strong);
  border-block: 1px solid var(--line)
}

.why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
  margin-top: 32px
}

.why div {
  border-top: 3px solid var(--ink);
  padding-top: 14px
}

.why dt {
  font-family: var(--head);
  font-weight: 600;
  font-size: 1.15rem
}

.why dd {
  color: var(--muted);
  margin-top: 4px;
  font-size: .95rem
}

.two-col {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(28px, 6vw, 72px);
  align-items: start
}

.two-col p {
  margin-top: 14px;
  max-width: 60ch
}

.facts {
  display: grid;
  gap: 0;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--saffron)
}

.facts div {
  padding: 20px 24px
}

.facts div+div {
  border-top: 1px solid var(--line)
}

.facts dt {
  font-family: var(--head);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.1
}

.facts dd {
  color: var(--muted)
}

/* cta */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--blue);
  color: #fff;
  border-radius: 20px;
  padding: clamp(28px, 5vw, 56px)
}

.cta p {
  margin-top: 10px;
  color: #e2e7ff
}

/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start
}

.form {
  display: grid;
  gap: 18px
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink)
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue)
}

.field.bad input,
.field.bad textarea {
  border-color: var(--err)
}

.err {
  color: var(--err);
  font-size: .9rem;
  min-height: 0;
  margin-top: 4px
}

.ok {
  color: var(--ok);
  font-weight: 600
}

.form .btn {
  justify-self: start
}

.contact-card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 8px 8px 0 var(--saffron)
}

.contact-card a {
  font-weight: 600;
  overflow-wrap: anywhere
}

.contact-card a:hover {
  color: var(--blue)
}

.contact-card p {
  color: var(--muted);
  margin-top: 6px
}

/* footer */
.footer {
  background: var(--dark-bg);
  color: #c9d0e4;
  padding: 56px 0 0;
  font-size: .95rem
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px
}

.foot-grid nav {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.foot-brand {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 8px
}

.foot-h {
  color: #fff;
  font-weight: 600;
  margin-bottom: 4px
}

.footer a:hover {
  color: var(--saffron)
}

.foot-end {
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid #2a3450;
  font-size: .88rem
}

/* tablet */
@media (max-width:980px) {

  .hero-grid,
  .two-col,
  .contact-grid {
    grid-template-columns: 1fr
  }

  .tool-grid,
  .why {
    grid-template-columns: repeat(2, 1fr)
  }

  .steps {
    grid-template-columns: repeat(2, 1fr)
  }

  .svc {
    flex-basis: calc((100% - 20px)/2)
  }
}

/* mobile menu */
@media (max-width:980px) {
  .menu-btn {
    display: block
  }

  .nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 16px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s
  }

  .nav.open {
    visibility: visible;
    opacity: 1;
    transform: none
  }

  .nav a {
    padding: 14px 8px;
    border-bottom: 1px solid var(--line);
    border-radius: 0
  }

  .nav a[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--saffron);
    padding-left: 14px
  }

  .nav .nav-cta {
    margin: 12px 0 0;
    text-align: center;
    border-radius: 10px;
    border: 0
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr
  }

  .foot-grid>div {
    grid-column: 1/-1
  }
}

@media (max-width:620px) {

  .tool-grid,
  .why,
  .bill-grid,
  .steps {
    grid-template-columns: 1fr
  }

  .svc {
    flex-basis: 88%
  }

  .arrows {
    display: none
  }

  .launcher,
  .facts,
  .contact-card {
    box-shadow: 5px 5px 0 var(--saffron)
  }

  .svc-row {
    flex-direction: column;
    gap: 14px
  }

  .head-row .text-link {
    margin-bottom: 24px
  }
}

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

/* ===== tool pages ===== */
[hidden] {
  display: none !important
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

.tool-ui {
  display: grid;
  gap: 20px
}

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 44px 20px;
  border: 2px dashed var(--ink);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  transition: background .2s, border-color .2s
}

.drop b {
  font-family: var(--head);
  font-size: 1.3rem
}

.drop span {
  color: var(--muted)
}

.drop:hover,
.drop.over,
.drop:focus-within {
  background: var(--tint-blue);
  border-color: var(--blue)
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px
}

.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: end
}

.opts label,
.lab {
  font-weight: 600;
  font-size: .9rem;
  display: grid;
  gap: 6px
}

.opts select,
.opts input,
.panel select,
.panel input[type=number],
.panel input[type=text],
.panel input[type=date] {
  font: inherit;
  font-weight: 400;
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  min-width: 0
}

.opts select:focus,
.opts input:focus,
.panel select:focus,
.panel input:focus {
  outline: none;
  border-color: var(--blue)
}

.opts input[type=range] {
  padding: 0;
  border: 0;
  accent-color: var(--blue)
}

.btn.sm {
  padding: 8px 14px;
  font-size: .9rem;
  border-width: 2px
}

.btn[disabled] {
  opacity: .45;
  cursor: not-allowed
}

.status {
  min-height: 1.5em;
  font-weight: 500
}

.status.err {
  color: var(--err)
}

.status.ok {
  color: var(--ok)
}

.note {
  color: var(--muted);
  font-size: .9rem
}

.privacy {
  margin-top: 20px
}

.results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px
}

.res {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0
}

.res img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: var(--tint-blue)
}

.res figcaption {
  padding: 12px;
  display: grid;
  gap: 8px;
  font-size: .88rem;
  overflow-wrap: anywhere
}

.res .save {
  color: var(--ok);
  font-weight: 600
}

.list {
  list-style: none;
  display: grid;
  gap: 10px
}

.item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px
}

.item .thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--tint-blue);
  flex: none
}

.item .pdfmark {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--tint-blue);
  color: var(--accent-text);
  font-weight: 700;
  font-size: .8rem;
  display: grid;
  place-items: center;
  flex: none
}

.item-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere
}

.item-name small {
  display: block;
  color: var(--muted)
}

.item-btns {
  display: flex;
  gap: 6px;
  flex: none
}

.item-btns button,
.icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink)
}

.item-btns button:hover,
.icon-btn:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.doc-view {
  background: #fff;
  color: #111;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  max-height: 520px;
  overflow: auto;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5
}

.doc-view img {
  max-width: 100%
}

.doc-view table {
  border-collapse: collapse
}

.doc-view td,
.doc-view th {
  border: 1px solid #999;
  padding: 4px 8px
}

.doc-view h1,
.doc-view h2,
.doc-view h3 {
  font-family: Arial, Helvetica, sans-serif;
  margin: .8em 0 .4em
}

.doc-view p {
  margin: 0 0 .8em
}

.steps.three {
  grid-template-columns: repeat(3, 1fr)
}

.more-tools {
  margin-top: 8px
}

.more-tools a {
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-right: 14px;
  white-space: nowrap
}

/* editor */
.editor {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start
}

.stage {
  background: repeating-conic-gradient(#e8ecf3 0 25%, #f6f8fb 0 50%) 0 0/20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  display: grid;
  place-items: center;
  min-height: 280px
}

.stage canvas {
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18)
}

.controls {
  display: grid;
  gap: 14px
}

.controls .row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.controls input[type=range] {
  width: 100%;
  accent-color: var(--blue)
}

.controls .lab span {
  font-weight: 400;
  color: var(--muted);
  float: right
}

.check {
  display: flex !important;
  align-items: center;
  gap: 8px
}

/* gpa */
.sem {
  display: grid;
  gap: 12px
}

.sem-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.sem-head h3 {
  margin: 0
}

.gp-row {
  display: grid;
  grid-template-columns: 1fr 90px 120px 34px;
  gap: 10px
}

.gp-row input,
.gp-row select {
  width: 100%
}

.big {
  font-family: var(--head);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1
}

.gpa-total {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: end;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--saffron)
}

.gpa-total p {
  color: var(--muted)
}

/* bill */
.bill-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.bill-form .full {
  grid-column: 1/-1
}

.fields {
  display: grid;
  gap: 12px
}

.fields input {
  width: 100%
}

.tbl {
  overflow-x: auto
}

.tbl table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px
}

.tbl th {
  text-align: left;
  font-size: .85rem;
  padding: 6px 8px;
  border-bottom: 2px solid var(--ink)
}

.tbl td {
  padding: 6px 4px
}

.tbl input {
  width: 100%
}

.tbl .amt {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  padding-right: 8px
}

.sum {
  margin-left: auto;
  max-width: 340px;
  display: grid;
  gap: 8px
}

.sum div {
  display: flex;
  justify-content: space-between;
  gap: 20px
}

.sum .grand {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.4rem;
  border-top: 2px solid var(--ink);
  padding-top: 8px
}

@media (max-width:980px) {
  .editor {
    grid-template-columns: 1fr
  }

  .steps.three {
    grid-template-columns: 1fr
  }
}

@media (max-width:620px) {
  .bill-form {
    grid-template-columns: 1fr
  }

  .gp-row {
    grid-template-columns: 1fr 70px 100px 34px
  }

  .drop {
    padding: 34px 16px
  }

  .item {
    flex-wrap: wrap
  }
}

/* ===== responsive fixes ===== */
.tool-ui>*,
.bill-form>*,
.editor>*,
.sem>*,
.contact-grid>*,
.two-col>*,
.hero-grid>* {
  min-width: 0
}

.more-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline
}

.more-tools a {
  margin-right: 0
}

.drop b,
.drop span {
  overflow-wrap: anywhere
}

@media (max-width:480px) {
  .panel {
    padding: 16px
  }

  .gp-row {
    grid-template-columns: 1fr 1fr 34px;
    gap: 8px
  }

  .gp-row input[type=text] {
    grid-column: 1/-1
  }

  .gp-total {
    gap: 18px
  }

  .big {
    font-size: 2rem
  }

  .opts {
    gap: 14px
  }

  .opts>label {
    flex: 1 1 140px
  }

  .wrap {
    width: calc(100% - 32px)
  }

  .item-btns button {
    width: 32px;
    height: 32px
  }
}

/* ===== CGPA calculator (scoped) ===== */
.drop {
  position: relative
}

.gpa {
  --g-chip: var(--tint-blue)
}

.gpa>* {
  min-width: 0
}

.g-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  margin-bottom: 12px;
  scrollbar-width: thin
}

.g-tab {
  flex: 0 0 auto;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font: 600 .92rem var(--body);
  transition: background .2s, color .2s, border-color .2s
}

.g-tab:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.g-tab.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink)
}

.g-panel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(16px, 3vw, 26px)
}

.g-panel.on {
  display: block
}

.g-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: start
}

.g-grid>* {
  min-width: 0
}

.gpa label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px
}

.gpa input,
.gpa select {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  min-width: 0
}

.gpa input:focus,
.gpa select:focus {
  outline: none;
  border-color: var(--blue)
}

.g-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px
}

.g-bar>div {
  flex: 1 1 150px;
  min-width: 0
}

.g-row {
  display: grid;
  grid-template-columns: 1.6fr .8fr 1fr 40px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center
}

.g-row.two {
  grid-template-columns: 1.4fr 1fr 1fr 40px
}

.g-head {
  font-size: .75rem;
  color: var(--muted);
  font-weight: 600
}

.g-x {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--err);
  border-radius: 8px;
  height: 42px;
  cursor: pointer;
  font-size: 1.05rem
}

.g-x:hover {
  border-color: var(--err)
}

.g-add {
  width: 100%;
  border: 2px dashed var(--ink);
  background: none;
  color: var(--ink);
  padding: 11px;
  border-radius: 10px;
  font: 600 1rem var(--body);
  cursor: pointer;
  margin-top: 4px
}

.g-add:hover {
  background: var(--tint-blue);
  border-color: var(--blue);
  color: var(--blue)
}

.g-res {
  background: var(--g-chip);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  padding: 20px;
  text-align: center;
  position: sticky;
  top: 84px;
  box-shadow: 6px 6px 0 var(--saffron)
}

.g-ring {
  position: relative;
  width: 170px;
  height: 170px;
  max-width: 100%;
  margin: 0 auto 14px
}

.g-ring svg {
  transform: rotate(-90deg);
  display: block
}

.g-ring .v {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.g-ring b {
  font-family: var(--head);
  font-size: 2.2rem;
  line-height: 1
}

.g-ring span {
  font-size: .8rem;
  color: var(--muted)
}

.g-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: .85rem
}

.g-stats div {
  background: var(--surface);
  border-radius: 10px;
  padding: 8px
}

.g-stats b {
  display: block;
  font-size: 1.05rem;
  color: var(--ok)
}

.g-chip {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  border-radius: 99px;
  padding: 3px 14px;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 10px
}

.g-big {
  font-family: var(--head);
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--ok)
}

.g-h {
  font-size: 1.05rem;
  margin: 18px 0 6px
}

.g-panel h2 {
  font-size: 1.3rem;
  margin-bottom: 12px
}

.g-hint {
  font-size: .85rem;
  color: var(--muted);
  margin-top: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px
}

.g-ok {
  font-size: 1.4rem;
  color: var(--ok)
}

.g-swap {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 11px;
  cursor: pointer;
  font: 600 .95rem var(--body);
  width: 100%;
  margin-top: 10px
}

.g-swap:hover {
  background: var(--blue-d)
}

.g-tbl {
  overflow-x: auto
}

.gpa table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  margin-top: 8px;
  min-width: 420px
}

.gpa th,
.gpa td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  text-align: center
}

.gpa th {
  color: var(--muted)
}

#p-ev tr[data-m] {
  cursor: pointer
}

#p-ev tr[data-m]:hover,
#p-ev tr.act {
  background: var(--tint-blue)
}

.g-fx {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px
}

.g-fc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px
}

.g-fc input {
  margin-bottom: 8px
}

.g-fc .o {
  margin-top: 10px;
  font-family: var(--head);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ok);
  min-height: 2.2rem
}

.g-fc .n {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 4px
}

@media (max-width:760px) {
  .g-grid {
    grid-template-columns: 1fr
  }

  .g-res {
    position: static
  }
}

@media (max-width:480px) {

  .g-row,
  .g-row.two {
    grid-template-columns: 1fr 1fr 40px
  }

  .g-row>:first-child {
    grid-column: 1/-1
  }

  .g-head {
    display: none
  }

  .g-tab {
    padding: 9px 14px
  }
}

@media (max-width:620px) {
  .head-row {
    flex-wrap: wrap
  }
}

/* ===== Billing section on home: animations ===== */
.billing-home .bill {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s
}

.billing-home .bill:hover,
.billing-home .bill:focus-visible {
  transform: translateY(-8px);
  box-shadow: 8px 8px 0 var(--ink)
}

.billing-home .bill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  pointer-events: none
}

.billing-home .bill:hover::after {
  animation: shine .9s ease
}

.b-ico {
  width: 54px;
  height: 54px;
  padding: 12px;
  border-radius: 50%;
  background: var(--tint-blue);
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 6px;
  animation: bob 3.2s ease-in-out infinite
}

.bill.alt .b-ico {
  background: var(--surface);
  animation-delay: .6s
}

.arr {
  display: inline-block;
  font-style: normal;
  transition: transform .3s
}

.bill:hover .arr {
  transform: translateX(8px)
}

@keyframes shine {
  to {
    left: 130%
  }
}

@keyframes bob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-6px)
  }
}

/* scroll reveal (only when JS is running) */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s)
}

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

.js .billing-home .bill.reveal.in:hover {
  transform: translateY(-8px)
}

@media (prefers-reduced-motion:reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none
  }

  .b-ico,
  .billing-home .bill:hover::after {
    animation: none
  }

  .billing-home .bill,
  .arr {
    transition: none
  }
}

/* Word to PDF page-image fallback (same look as the preview) */
.w2p {
  font-family: "Noto Sans", "Nirmala UI", Mangal, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word
}

.w2p img {
  max-width: 100%
}

.w2p table {
  border-collapse: collapse;
  width: 100%
}

.w2p td,
.w2p th {
  border: 1px solid #999;
  padding: 4px 8px;
  vertical-align: top
}

.w2p p {
  margin: 0 0 10px
}

.w2p h1,
.w2p h2,
.w2p h3,
.w2p h4 {
  margin: 14px 0 8px;
  line-height: 1.25
}

.w2p ul,
.w2p ol {
  margin: 0 0 10px;
  padding-left: 28px
}

/* ===== Photo editor: manual crop ===== */
.stage .cropwrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  user-select: none;
  -webkit-user-select: none
}

.stage .cropwrap canvas {
  display: block;
  box-shadow: none
}

.cropcatch {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  touch-action: none
}

.cropsel {
  position: absolute;
  border: 2px solid #fff;
  outline: 1px dashed rgba(0, 0, 0, .55);
  box-shadow: 0 0 0 9999px rgba(10, 16, 40, .55);
  cursor: move;
  touch-action: none;
  background: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) 33.33% 0/1px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) 66.66% 0/1px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) 0 33.33%/100% 1px no-repeat, linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) 0 66.66%/100% 1px no-repeat
}

.cropsel:focus-visible {
  outline: 3px solid var(--saffron)
}

.cropsel i {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 50%;
  touch-action: none
}

.cropsel i::after {
  content: "";
  position: absolute;
  inset: -12px
}

.cropsel i[data-h=nw] {
  left: 0;
  top: 0;
  cursor: nwse-resize
}

.cropsel i[data-h=ne] {
  left: 100%;
  top: 0;
  cursor: nesw-resize
}

.cropsel i[data-h=sw] {
  left: 0;
  top: 100%;
  cursor: nesw-resize
}

.cropsel i[data-h=se] {
  left: 100%;
  top: 100%;
  cursor: nwse-resize
}

.cropsel i[data-h=n] {
  left: 50%;
  top: 0;
  cursor: ns-resize
}

.cropsel i[data-h=s] {
  left: 50%;
  top: 100%;
  cursor: ns-resize
}

.cropsel i[data-h=e] {
  left: 100%;
  top: 50%;
  cursor: ew-resize
}

.cropsel i[data-h=w] {
  left: 0;
  top: 50%;
  cursor: ew-resize
}

.cropsel.lock i.ed {
  display: none
}

.csize {
  position: absolute;
  left: 4px;
  bottom: 4px;
  line-height: 1.2;
  background: rgba(16, 24, 43, .85);
  color: #fff;
  font: 600 .72rem var(--body);
  padding: 2px 7px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap
}

.mcrop {
  display: grid;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line)
}

.mcrop .note {
  margin: 0
}

/* ===== Visual effects (fx.js adds .fx-on; nothing here applies if reduced motion is on) ===== */
.fx-host {
  position: relative;
  overflow: hidden;
  isolation: isolate
}

.fx-host>.wrap {
  position: relative;
  z-index: 1
}

.fx-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none
}

.fx-float {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden
}

.fx-o {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  opacity: .4;
  animation: fxdrift var(--t, 14s) ease-in-out var(--d, 0s) infinite alternate
}

.fx-o.ring {
  border: 3px solid var(--blue);
  border-radius: 50%
}

.fx-o.sq {
  border: 3px solid var(--saffron);
  border-radius: 7px;
  animation-name: fxspin
}

.fx-o.dot {
  background: var(--saffron);
  border-radius: 50%
}

.fx-o.plus {
  color: var(--blue);
  background: linear-gradient(currentColor, currentColor) center/100% 3px no-repeat, linear-gradient(currentColor, currentColor) center/3px 100% no-repeat;
  animation-name: fxspin
}

.fx-o.code {
  width: auto;
  height: auto;
  font: 800 calc(var(--s) * .7)/1 var(--head);
  color: var(--blue);
  opacity: .28
}

@keyframes fxdrift {
  from {
    transform: translate(0, 0) rotate(0)
  }

  to {
    transform: translate(28px, -36px) rotate(40deg)
  }
}

@keyframes fxspin {
  from {
    transform: translateY(0) rotate(0)
  }

  to {
    transform: translateY(-32px) rotate(200deg)
  }
}

@keyframes fxblob {
  to {
    transform: translate(70px, 50px) scale(1.18)
  }
}

@keyframes fxshine {

  0%,
  55% {
    left: -80%
  }

  100% {
    left: 140%
  }
}

@keyframes fxwiggle {
  25% {
    transform: rotate(-7deg)
  }

  75% {
    transform: rotate(7deg)
  }
}

@keyframes fxbob {
  50% {
    transform: translateY(-8px)
  }
}

@keyframes fxshadow {
  50% {
    box-shadow: 13px 13px 0 var(--saffron)
  }
}

/* shine on main buttons */
.fx-on .btn.primary,
.fx-on .btn.light {
  position: relative;
  overflow: hidden
}

.fx-on .btn.primary::after,
.fx-on .btn.light::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: fxshine 4.5s ease-in-out infinite;
  pointer-events: none
}

.fx-on .btn[disabled]::after {
  display: none
}

/* cards and icons */
.fx-on .launcher {
  animation: fxshadow 5s ease-in-out infinite
}

/* only the yellow shadow moves, so the text stays sharp */
.fx-on .launcher a .chip {
  transition: transform .25s
}

.fx-on .launcher a:hover .chip {
  transform: translateX(5px) rotate(-3deg)
}

.fx-on .tool:hover {
  box-shadow: 0 16px 32px rgba(47, 75, 255, .15);
  transform: translateY(-6px)
}

.fx-on .tool:hover .chip {
  animation: fxwiggle .6s
}

.fx-on .svc svg,
.fx-on .svc-row svg {
  animation: bob 3.4s ease-in-out infinite
}

.fx-on .svc:nth-child(2) svg {
  animation-delay: -.8s
}

.fx-on .svc:nth-child(3) svg {
  animation-delay: -1.6s
}

.fx-on .svc:nth-child(4) svg {
  animation-delay: -2.4s
}

.fx-on .brand:hover img {
  animation: fxwiggle .6s
}

.fx-on .why>div:hover {
  border-top-color: var(--blue)
}

.fx-on .why>div {
  transition: border-color .3s, transform .3s, opacity .7s ease var(--d, 0s), translate .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s)
}

.fx-on .why>div:hover {
  transform: translateY(-4px)
}

/* scroll reveal for cards (uses the "translate" property so hover transforms keep working) */
.fx-on .fx-rev {
  opacity: 0;
  translate: 0 26px;
  transition: opacity .7s ease var(--d, 0s), translate .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), transform .25s, border-color .2s, box-shadow .3s
}

.fx-on .fx-rev.in {
  opacity: 1;
  translate: none
}

@media (max-width:620px) {
  .fx-o.hide-s {
    display: none
  }

  .fx-on .launcher {
    animation: none
  }
}

/* ===== Dark mode ===== */
:root[data-theme="dark"] {
  --ink: #e8ecf8;
  --muted: #a3adc7;
  --paper: #0b1020;
  --white: #161e33;
  --surface: #161e33;
  --line: #2a3351;
  --blue: #5068f5;
  --blue-d: #3f55e6;
  --err: #ff7b7b;
  --ok: #4fd37f;
  --tint-blue: rgba(90, 114, 255, .18);
  --accent-text: #aab9ff;
  --on-ink: #0b1020;
  --cta-bg: #3f55e6;
  --dark-bg: #070b16;
  --glass: rgba(16, 23, 42, .55);
  --glass-strong: rgba(16, 23, 42, .78);
  --header-bg: rgba(11, 16, 32, .9);
  color-scheme: dark
}

:root[data-theme="dark"] .svc,
:root[data-theme="dark"] .why>div:hover {
  border-color: var(--line)
}

:root[data-theme="dark"] .svc {
  border: 1px solid var(--line)
}

:root[data-theme="dark"] .footer {
  border-top: 1px solid var(--line)
}

:root[data-theme="dark"] .nav .nav-cta:hover {
  background: var(--blue)
}

:root[data-theme="dark"] .stage {
  background: repeating-conic-gradient(#1b2440 0 25%, #222c4d 0 50%) 0 0/20px 20px
}

:root[data-theme="dark"] .g-ring .v b {
  color: var(--ink)
}

/* theme toggle button */
.theme-btn {
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: 10px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform .3s, border-color .2s, background .2s
}

.theme-btn:hover {
  border-color: var(--blue);
  transform: rotate(18deg)
}

.theme-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .35s, color .35s, border-color .35s !important
}

@media (max-width:980px) {
  .theme-btn {
    order: 1;
    margin-left: auto
  }

  .menu-btn {
    order: 2;
    margin-left: 10px
  }
}

/* ===== Page-wide effects layer (every page) ===== */
.fx-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden
}

.fx-bg .fx-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.fx-top {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none
}

.fx-blob {
  position: absolute;
  border-radius: 50%;
  animation: fxblob 20s ease-in-out infinite alternate
}

.fx-blob.b1 {
  width: 520px;
  height: 520px;
  left: -140px;
  top: -120px;
  background: radial-gradient(circle, rgba(130, 152, 255, .55), transparent 68%)
}

.fx-blob.b2 {
  width: 460px;
  height: 460px;
  right: -120px;
  top: 38%;
  background: radial-gradient(circle, rgba(255, 200, 80, .5), transparent 68%);
  animation-delay: -8s
}

.fx-blob.b3 {
  width: 420px;
  height: 420px;
  left: 30%;
  bottom: -170px;
  background: radial-gradient(circle, rgba(160, 120, 255, .35), transparent 68%);
  animation-delay: -13s
}

:root[data-theme="dark"] .fx-blob.b1 {
  background: radial-gradient(circle, rgba(70, 96, 255, .38), transparent 68%)
}

:root[data-theme="dark"] .fx-blob.b2 {
  background: radial-gradient(circle, rgba(255, 170, 40, .2), transparent 68%)
}

:root[data-theme="dark"] .fx-blob.b3 {
  background: radial-gradient(circle, rgba(140, 90, 255, .3), transparent 68%)
}

:root[data-theme="dark"] .fx-o {
  opacity: .5
}

@media (max-width:620px) {

  .fx-blob.b1,
  .fx-blob.b2,
  .fx-blob.b3 {
    width: 320px;
    height: 320px
  }
}

:root[data-theme="dark"] .launcher a:hover,
:root[data-theme="dark"] .contact-card a:hover,
:root[data-theme="dark"] .item-btns button:hover,
:root[data-theme="dark"] .icon-btn:hover {
  color: var(--accent-text)
}

/* ===== Effects strength (set by theme.js via html.fx-l-*) ===== */
html {
  --fx-blob: .8;
  --fx-obj: 1
}

html.fx-l-subtle {
  --fx-blob: .4;
  --fx-obj: .55
}

html.fx-l-strong {
  --fx-blob: 1;
  --fx-obj: 1.6
}

.fx-blob {
  opacity: var(--fx-blob)
}

.fx-o {
  opacity: calc(.4 * var(--fx-obj))
}

.fx-o.code {
  opacity: calc(.28 * var(--fx-obj))
}

:root[data-theme="dark"] .fx-o {
  opacity: calc(.5 * var(--fx-obj))
}

:root[data-theme="dark"] .fx-o.code {
  opacity: calc(.34 * var(--fx-obj))
}

html.fx-l-strong .fx-blob {
  animation-duration: 14s
}

html.fx-l-strong .fx-o {
  animation-duration: 9s
}

html.fx-l-off .fx-bg,
html.fx-l-off .fx-top,
html.fx-l-off .fx-host>.fx-cv {
  display: none
}

/* ===== Display settings panel ===== */
.site-header .prefs {
  position: absolute;
  right: max(20px, calc((100vw - 1160px) / 2));
  top: calc(100% + 8px);
  z-index: 70;
  width: min(340px, calc(100vw - 24px));
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  padding: 16px 16px 14px;
  box-shadow: 6px 6px 0 var(--saffron)
}

.prefs-h {
  font-family: var(--head);
  font-weight: 600;
  font-size: .95rem;
  margin: 0 0 8px
}

.prefs .seg+.prefs-h {
  margin-top: 14px
}

.seg {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden
}

.seg button {
  flex: 1;
  padding: 9px 6px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 600 .85rem var(--body);
  cursor: pointer;
  transition: background .2s, color .2s
}

.seg button:last-child {
  border-right: 0
}

.seg button:hover {
  background: var(--tint-blue)
}

.seg button[aria-checked="true"] {
  background: var(--blue);
  color: #fff
}

.seg button:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: -3px
}

.prefs-note {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.45
}

@media (max-width:980px) {
  .site-header .prefs {
    right: 12px
  }
}

/* crisp text: never run a moving transform on boxes that contain text */
.launcher,
.launcher * {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}