* {
  box-sizing:border-box
}

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

body {
  font-family:var(--font-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-underline-offset:4px
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea,summary {
  touch-action:manipulation
}

:focus-visible {
  outline:3px solid var(--accent)!important;
  outline-offset:4px
}

button {
  cursor:pointer
}

svg.lucide {
  width:21px;
  height:21px;
  stroke-width:1.6
}

h1,h2,h3 {
  letter-spacing:-.045em;
  font-weight:700;
  line-height:1.12
}

p {
  color:var(--muted)
}

.container {
  max-width:1280px;
  padding-left:32px;
  padding-right:32px
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  padding:12px;
  background:var(--ink);
  color:var(--paper);
  z-index:2000
}

.skip-link:focus {
  top:12px
}

.site-header {
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:100
}

.header-inner {
  height:90px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

.wordmark {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-weight:800;
  font-size:28px;
  letter-spacing:-1.5px;
  white-space:nowrap
}

.brand-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:39px;
  height:39px;
  border-radius:9px;
  background:var(--orange);
  color:#222;
  font-family:var(--font-body);
  font-size:29px;
  letter-spacing:-4px;
  padding-right:5px
}

.brand-caption {
  font-family:var(--font-body);
  font-weight:400;
  font-size:10px;
  letter-spacing:1.5px;
  line-height:1.4;
  max-width:104px;
  white-space:normal;
  margin-left:12px
}

.header-links {
  display:flex;
  align-items:center;
  gap:32px
}

.header-links>a {
  font-size:14px;
  font-weight:600;
  text-decoration:none
}

.header-links>a:hover {
  color:var(--accent)
}

.theme-toggle {
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  border-radius:50%;
  height:40px;
  width:40px;
  font-size:23px
}

.intro {
  display:grid;
  grid-template-columns:1fr 280px;
  gap:60px;
  align-items:center;
  padding:64px 0 48px
}

.eyebrow {
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:1.5px;
  font-weight:500;
  margin:0 0 22px;
  color:var(--muted)
}

.mini-rule {
  display:inline-block;
  vertical-align:middle;
  width:24px;
  height:3px;
  background:var(--orange);
  margin-right:8px
}

.intro h1 {
  font-size:clamp(36px,4.4vw,59px);
  line-height:1.04;
  letter-spacing:-3px;
  margin:0 0 24px
}

.intro h1>span {
  color:var(--muted)
}

.intro-description {
  font-size:16px;
  line-height:1.7;
  margin-bottom:24px
}

.intro-facts {
  display:flex;
  gap:24px;
  font-size:12px;
  font-family:var(--font-body)
}

.intro-facts span+span {
  border-left:1px solid var(--line);
  padding-left:24px
}

.search-panel {
  padding:27px 32px;
  background:var(--ink);
  color:var(--paper);
  border-radius:5px
}

.search-panel>label {
  display:block;
  font-weight:600;
  font-size:16px;
  margin-bottom:12px
}

.search-field {
  display:flex;
  align-items:center;
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--radius-sm);
  padding:0 17px;
  gap:14px
}

.search-field input {
  width:100%;
  border:0;
  background:none;
  padding:17px 0;
  color:var(--ink);
  outline-offset:0;
  min-width:0;
  font-size:16px
}

.search-field kbd {
  background:var(--soft);
  color:var(--muted);
  border:1px solid var(--line);
  font-size:13px
}

.search-suggestions {
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:14px;
  font-size:12px
}

.search-suggestions>span {
  opacity:.65
}

.search-suggestions a {
  text-decoration:none
}

.search-suggestions a:hover {
  text-decoration:underline
}

.catalog-layout {
  display:grid;
  grid-template-columns:200px 1fr;
  gap:38px;
  padding-top:44px
}

.catalog-sidebar .eyebrow {
  margin:7px 0 18px
}

.filter-list {
  display:flex;
  flex-direction:column;
  gap:3px
}

.category-filter {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  border-radius:var(--radius-sm);
  padding:10px 12px;
  background:transparent;
  color:var(--muted);
  text-align:left;
  font-size:14px;
  min-height:44px
}

.category-filter span {
  font-family:var(--font-body);
  font-size:12px
}

.category-filter:hover {
  background:var(--soft);
  color:var(--ink)
}

.category-filter.active {
  background:var(--soft);
  color:var(--ink);
  font-weight:700;
  border-left:3px solid var(--orange);
  padding-left:9px
}

.filter-divider {
  height:1px;
  background:var(--line);
  margin:12px 0
}

.sidebar-note {
  font-size:12px;
  line-height:1.7;
  margin:28px 12px
}

.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px
}

.section-heading h2 {
  font-size:27px;
  margin:0
}

.section-heading p {
  font:12px var(--font-body);
  margin:0
}

.tool-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}

.tool-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:19px;
  display:flex;
  flex-direction:column;
  transition:border-color .15s,transform .15s;
  min-width:0
}

.tool-card:hover {
  border-color:var(--muted);
  transform:none
}

.tool-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px
}

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

.favorite-button {
  border:none;
  background:none;
  color:var(--muted);
  width:36px;
  height:36px;
  margin:-8px -8px -8px 0;
  font-size:24px
}

.favorite-button[aria-pressed=true] {
  color:var(--accent)
}

.tool-link {
  display:flex;
  flex-direction:column;
  flex:1;
  text-decoration:none
}

.tool-link h3 {
  font-size:19px;
  letter-spacing:-.6px;
  margin:0 0 10px;
  line-height:1.2
}

.tool-link p {
  font-size:13px;
  line-height:1.6;
  margin:0 0 22px
}

.tool-card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  color:var(--muted);
  font:11px var(--font-body)
}

.open-arrow {
  color:var(--accent);
  font-size:23px
}

.empty-state {
  padding:60px 20px;
  text-align:center;
  border:1px dashed var(--line)
}

[hidden] {
  display:none!important
}

.guides-section {
  margin-top:80px;
  padding-top:45px;
  border-top:1px solid var(--line)
}

.guides-section .eyebrow {
  margin-bottom:15px
}

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

.guide-grid>a {
  padding:28px;
  background:var(--soft);
  text-decoration:none;
  border-top:3px solid var(--ink)
}

.guide-grid>a:hover {
  border-color:var(--orange)
}

.guide-grid span {
  font:11px var(--font-body);
  color:var(--muted)
}

.guide-grid h3 {
  font-size:28px;
  margin:24px 0 16px;
  line-height:1.15
}

.guide-grid p {
  font-size:14px
}

.guide-grid b {
  font-size:13px;
  font-weight:600;
  display:block;
  margin-top:26px
}

.faq-section {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:60px;
  padding:70px 0 80px
}

.faq-section h2 {
  font-size:30px
}

.faq-section details {
  border-bottom:1px solid var(--line)
}

.faq-section summary {
  list-style:none;
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-weight:600;
  font-size:15px;
  cursor:pointer
}

.faq-section summary::-webkit-details-marker {
  display:none
}

.faq-section details p {
  font-size:14px;
  line-height:1.7
}

.faq-section details[open] summary>span {
  transform:rotate(45deg)
}

.site-footer {
  background:var(--soft);
  border-top:1px solid var(--line)
}

.footer-top {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:30px;
  padding-top:42px;
  padding-bottom:42px;
  align-items:start
}

.footer-top p {
  font-size:24px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-1px;
  color:var(--ink);
  margin:0
}

.footer-top>div {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  font-size:13px
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:18px;
  padding-bottom:24px;
  font:11px var(--font-body);
  color:var(--muted)
}

.tool-context {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-top:22px;
  font-size:13px;
  align-items:center
}

.tool-context nav {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.save-tool {
  white-space:nowrap;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 14px;
  color:var(--ink);
  font-size:13px
}

.save-tool[aria-pressed=true] {
  color:var(--accent)
}

.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  box-shadow:none!important;
  overflow:hidden
}

.card-header {
  background:var(--soft);
  border-bottom:1px solid var(--line);
  padding:20px 24px
}

.card-body {
  padding:26px
}

.card h1.h4 {
  font-size:27px
}

.btn {
  border-radius:var(--radius-sm);
  min-height:44px;
  padding:10px 18px;
  font-weight:600
}

.btn-primary {
  --bs-btn-bg:var(--accent);
  --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--ink);
  --bs-btn-hover-border-color:var(--ink);
  --bs-btn-color:var(--surface);
  --bs-btn-hover-color:var(--paper);
  --bs-btn-active-bg:var(--accent)
}

.btn-outline-primary {
  --bs-btn-color:var(--accent);
  --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent);
  --bs-btn-hover-border-color:var(--accent);
  --bs-btn-hover-color:var(--surface)
}

.form-control,.form-select {
  min-height:46px;
  border-color:var(--line);
  border-radius:var(--radius-sm);
  background-color:var(--surface);
  color:var(--ink)
}

.form-control:focus,.form-select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)
}

.form-label {
  font-weight:600;
  font-size:14px
}

.display-4,.display-5 {
  font-size:clamp(30px,4vw,48px);
  font-weight:700
}

.text-muted {
  color:var(--muted)!important
}

.lead {
  font-size:18px
}

.related-tools {
  padding-top:20px;
  padding-bottom:60px
}

.related-tools h2 {
  font-size:23px;
  margin-bottom:20px
}

.related-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.related-links>a {
  padding:14px 18px;
  border:1px solid var(--line);
  background:var(--surface);
  text-decoration:none;
  font-size:14px
}

.related-links span {
  color:var(--accent);
  margin-left:15px
}

.table {
  --bs-table-bg:var(--surface)
}

.alert-info {
  --bs-alert-bg:var(--soft);
  --bs-alert-border-color:var(--line);
  --bs-alert-color:var(--ink)
}

@media(min-width:1450px) {
  .container {
    max-width:1360px
  }

  .intro {
    grid-template-columns:1fr 310px
  }

  .tool-link p {
    font-size:14px
  }

}

@media(max-width:1050px) {
  .brand-caption {
    display:none
  }

  .intro {
    grid-template-columns:1fr 225px;
    gap:30px
  }

  .intro h1 {
    font-size:44px;
    letter-spacing:-2px
  }

  .catalog-layout {
    grid-template-columns:170px 1fr;
    gap:24px
  }

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

  .guide-grid {
    gap:14px
  }

  .guide-grid>a {
    padding:22px
  }

  .guide-grid h3 {
    font-size:24px
  }

}

@media(max-width:700px) {
  .container {
    padding-left:20px;
    padding-right:20px
  }

  .header-inner {
    height:72px
  }

  .wordmark {
    font-size:24px;
    gap:9px
  }

  .brand-mark {
    width:34px;
    height:34px;
    font-size:26px
  }

  .header-links {
    gap:17px
  }

  .header-links>a {
    font-size:12px
  }

  .theme-toggle {
    width:34px;
    height:34px
  }

  .intro {
    display:block;
    padding:38px 0 30px
  }

  .intro h1 {
    font-size:clamp(32px,7.6vw,47px);
    letter-spacing:-1.7px;
    line-height:1.1
  }

  .intro .eyebrow {
    font-size:10px;
    letter-spacing:1px;
    margin-bottom:20px
  }

  .intro-description {
    font-size:15px;
    margin-bottom:20px
  }

  .desktop-break {
    display:none
  }

  .intro-facts {
    gap:12px;
    font-size:10px
  }

  .intro-facts span+span {
    padding-left:12px
  }

  .search-panel {
    padding:22px 18px
  }

  .search-panel>label {
    font-size:15px
  }

  .search-field {
    padding:0 12px;
    gap:9px
  }

  .search-field input {
    font-size:16px;
    padding:14px 0
  }

  .search-field kbd {
    display:none
  }

  .search-suggestions {
    gap:8px 14px;
    font-size:11px
  }

  .search-suggestions>span {
    display:none
  }

  .catalog-layout {
    display:block;
    padding-top:24px
  }

  .catalog-sidebar .eyebrow,.sidebar-note,.filter-divider {
    display:none
  }

  .filter-list {
    flex-direction:row;
    overflow-x:auto;
    padding-bottom:12px;
    gap:6px;
    margin-bottom:20px
  }

  .category-filter {
    white-space:nowrap;
    border:1px solid var(--line);
    padding:8px 12px;
    gap:14px;
    font-size:13px;
    min-height:44px
  }

  .category-filter.active {
    border:1px solid var(--ink);
    padding-left:12px
  }

  .section-heading {
    gap:10px;
    margin-bottom:18px
  }

  .section-heading h2 {
    font-size:24px
  }

  .section-heading p {
    font-size:10px
  }

  .tool-grid {
    gap:10px
  }

  .tool-card {
    padding:15px
  }

  .tool-card-top {
    margin-bottom:16px
  }

  .tool-link h3 {
    font-size:17px
  }

  .tool-link p {
    font-size:12px;
    margin-bottom:18px
  }

  .tool-card-bottom {
    font-size:10px
  }

  .guides-section {
    margin-top:42px;
    padding-top:30px
  }

  .guide-grid {
    grid-template-columns:1fr;
    gap:14px
  }

  .guide-grid h3 br {
    display:none
  }

  .guide-grid h3 {
    font-size:23px;
    margin:16px 0 10px
  }

  .guide-grid b {
    margin-top:14px
  }

  .faq-section {
    grid-template-columns:1fr;
    gap:15px;
    padding:42px 0
  }

  .faq-section h2 {
    font-size:27px
  }

  .faq-section h2 br {
    display:none
  }

  .faq-section .eyebrow {
    margin-bottom:16px
  }

  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:26px;
    padding-top:30px;
    padding-bottom:30px
  }

  .footer-top p {
    font-size:21px
  }

  .footer-top>div {
    grid-column:1/-1;
    flex-direction:row;
    gap:18px;
    flex-wrap:wrap;
    align-items:center
  }

  .footer-bottom {
    flex-direction:column;
    gap:8px
  }

  .tool-context {
    align-items:flex-start;
    font-size:11px
  }

  .save-tool {
    font-size:12px;
    padding:8px
  }

  .tool-context nav>span:last-child {
    display:none
  }

  .card-body {
    padding:20px
  }

  .card-header {
    padding:18px 20px
  }

  .related-tools {
    padding-bottom:35px
  }

  main>.container.py-5 {
    padding-top:28px!important
  }

  .btn-group {
    flex-wrap:wrap
  }

  .table-responsive {
    max-width:100%
  }

}

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

  .header-links {
    gap:10px
  }

  .header-links>a {
    font-size:11px
  }

  .intro-facts {
    flex-wrap:wrap
  }

  .intro h1 {
    font-size:31px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

}

@media print {
  .site-header,.site-footer,.tool-context,.related-tools,.catalog-sidebar,.favorite-button {
    display:none
  }

  body {
    background:white;
    color:black
  }

  .container {
    max-width:100%
  }

  .card {
    break-inside:avoid
  }

}

/* A few legacy tools put Bootstrap rows directly in main. Keep their gutters contained. */
main>.row {
  max-width:1216px;
  margin-left:auto;
  margin-right:auto;
  width:calc(100% - 40px);
  margin-top:32px
}

main>.row>.text-center {
  margin-bottom:24px!important
}

.card-header.bg-warning {
  background:var(--soft)!important;
  color:var(--ink)!important
}

/* Practical tools: a working surface with a distinct result area. */
.workbench {
  padding-top:34px;
  padding-bottom:36px
}

.workbench-heading {
  max-width:850px;
  margin-bottom:30px
}

.workbench-heading .eyebrow {
  margin-bottom:12px
}

.workbench-heading h1 {
  font-size:clamp(30px,3.8vw,46px);
  margin-bottom:15px
}

.workbench-heading>p:last-child {
  font-size:18px;
  margin:0
}

.workbench-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:32px;
  align-items:start
}

.workbench h2 {
  font-size:24px;
  letter-spacing:-.7px
}

.workbench h3 {
  font-size:19px;
  letter-spacing:-.4px
}

.workbench-hint {
  font-size:14px;
  line-height:1.5
}

.workbench-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px
}

.workbench-actions .btn {
  font-size:14px
}

.workbench-privacy {
  font-size:12px;
  margin:18px 0 0
}

.workbench-answer {
  padding:28px;
  background:var(--soft);
  border-top:3px solid var(--accent);
  border-radius:var(--radius-sm);
  min-width:0
}

.workbench-answer .eyebrow {
  margin-bottom:12px
}

.workbench-answer>h2 {
  margin-bottom:14px
}

.workbench-answer p {
  font-size:14px
}

.practical-metrics {
  display:grid;
  gap:18px;
  margin:24px 0
}

.practical-metrics>div {
  border-bottom:1px solid var(--line);
  padding-bottom:14px
}

.practical-metrics span {
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:4px
}

.practical-metrics strong {
  display:block;
  font-size:30px;
  letter-spacing:-1px;
  line-height:1.15;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums
}

.practical-metrics>div:first-child strong {
  color:var(--accent);
  font-size:40px
}

.practical-guide {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  padding:40px 0;
  margin-top:35px;
  border-top:1px solid var(--line)
}

.practical-guide .eyebrow {
  margin-bottom:12px
}

.practical-guide p {
  font-size:15px
}

.practical-guide h3 {
  margin-top:24px
}

.practical-faq {
  max-width:850px;
  margin-bottom:20px
}

.practical-faq details {
  border-bottom:1px solid var(--line);
  padding:16px 0
}

.practical-faq summary {
  cursor:pointer;
  font-weight:600;
  min-height:30px
}

.practical-faq p {
  margin:12px 0 0;
  font-size:15px
}

.comparison-line {
  margin-bottom:14px;
  border:1px solid var(--line);
  background:var(--surface);
  padding:12px;
  overflow-wrap:anywhere
}

.comparison-line>strong {
  font-size:12px
}

.comparison-line p {
  white-space:pre-wrap;
  margin:5px 0;
  font-family:var(--font-body);
  font-size:13px
}

.comparison-before {
  border-left:3px solid #b4472c;
  padding-left:8px
}

.comparison-after {
  border-left:3px solid #40803b;
  padding-left:8px
}

#comparison-view {
  max-height:460px;
  overflow:auto
}

#practical-output {
  font-family:var(--font-body);
  font-size:14px
}

#practical-status.text-danger {
  font-weight:600
}

.workbench textarea {
  resize:vertical
}

.workbench input[type=number] {
  font-variant-numeric:tabular-nums
}

.workbench-answer .workbench-actions {
  margin-top:20px
}

@media(max-width:800px) {
  .workbench-grid {
    grid-template-columns:1fr;
    gap:20px
  }

  .workbench-heading>p:last-child {
    font-size:16px
  }

  .workbench-answer {
    padding:24px
  }

  .practical-guide {
    grid-template-columns:1fr;
    gap:18px;
    margin-top:30px;
    padding-top:30px;
    padding-bottom:20px
  }

  .workbench {
    padding-top:26px
  }

  .workbench-heading h1 {
    font-size:32px
  }

  .practical-metrics>div:first-child strong {
    font-size:34px
  }

}

/* Consumer-facing identity: whitespace, friendly type, clear tasks. */
body {
  font-family: var(--font-body);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.035em;
}

.container {
  max-width: var(--content-width);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  height: 82px;
}

.wordmark {
  font-family: var(--font-body);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -1.2px;
}

.brand-mark {
  width: 39px;
  height: 39px;
  background: var(--accent);
  color: var(--surface);
  border-radius: 13px;
  font-family: var(--font-body);
  font-size: 28px;
  letter-spacing: -2px;
  padding-right: 2px;
}

.brand-caption {
  font-family: var(--font-body);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  max-width: 180px;
  font-weight: 400;
  line-height: 1.5;
}

.header-links {
  gap: 28px;
}

.header-links>a {
  font-size: 14px;
  font-weight: 700;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  font-size: 22px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.intro {
  display: block;
  text-align: center;
  padding: 52px 0 30px;
}

.intro .eyebrow {
  font: 700 11px var(--font-body);
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 18px;
}

.intro h1 {
  font-size: clamp(34px,4.3vw,54px);
  line-height: 1.15;
  letter-spacing: -.05em;
  margin-bottom: 20px;
}

.intro h1>span {
  color: var(--accent);
}

.intro-description {
  font-size: 16px;
  line-height: 1.85;
  margin: 0 auto;
}

.everyday-examples {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 28px auto 0;
}

.example-note {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
}

.example-note>span:nth-child(2) {
  font-size: 12px;
  line-height: 1.6;
}

.example-note strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.example-note>span:last-child {
  margin-left: 8px;
}

.example-maths {
  background: #efecff;
  color: #493b97;
}

.example-life {
  background: #e8f5ee;
  color: #28664a;
}

.example-note:hover {
  border-color: currentColor;
}

.example-symbol {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  width: 30px;
  text-align: center;
}

.search-panel {
  background: var(--surface);
  color: var(--ink);
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  max-width: 940px;
  margin: 0 auto;
}

.search-panel>label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
}

.search-field {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 16px;
}

.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--soft);
}

.search-field input {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 16px 0;
}

.search-field input:focus-visible {
  outline: none!important;
}

.search-field kbd {
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 12px;
}

.search-suggestions {
  font-family: var(--font-body);
  font-size: 12px;
  gap: 10px 22px;
  margin-top: 16px;
}

.search-suggestions>span {
  color: var(--muted);
  opacity: 1;
}

.search-suggestions>a {
  color: var(--accent);
}

.catalog-layout {
  grid-template-columns: 190px minmax(0,1fr);
  gap: 32px;
  padding-top: 40px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.category-filter {
  font-size: 13px;
  border: 0;
  border-radius: 9px;
  min-height: 43px;
  padding: 10px 12px;
}

.category-filter.active {
  background: var(--soft);
  color: var(--accent);
  border: 0;
  padding-left: 12px;
}

.category-filter span {
  font-family: var(--font-body);
  font-size: 11px;
}

.sidebar-note {
  font-size: 12px;
}

.section-heading {
  align-items: center;
}

.section-heading h2 {
  font-size: 25px;
}

.section-heading p {
  font-family: var(--font-body);
  font-size: 12px;
}

.tool-grid {
  gap: 16px;
}

.tool-card {
  background: var(--surface);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  transition: border-color var(--duration-fast);
}

.tool-card:hover {
  border-color: var(--accent);
  transform: none;
}

.tool-card-top {
  margin-bottom: 20px;
}

.tool-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  color: var(--accent);
  border-radius: 13px;
}

.tool-icon svg {
  width: 21px;
  height: 21px;
}

.tool-card[data-category='vie-pratique'] .tool-icon {
  background: #e8f5ee;
  color: #28664a;
}

.tool-card[data-category='financier'] .tool-icon {
  background: #fff0e7;
  color: #a14e27;
}

.tool-card[data-category='dates'] .tool-icon,.tool-card[data-category='ages'] .tool-icon {
  background: #eaf1ff;
  color: #355eaa;
}

.tool-card[data-category='outils-texte'] .tool-icon {
  background: #fff0f4;
  color: #a43e68;
}

.favorite-button {
  width: 40px;
  height: 40px;
  font-size: 24px;
  color: var(--muted);
}

.tool-link h3 {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -.025em;
}

.tool-link p {
  font-size: 13px;
  line-height: 1.7;
}

.tool-card-bottom {
  font-family: var(--font-body);
  font-size: 10px;
  gap: 8px;
}

.open-arrow {
  font-family: var(--font-body);
  font-size: 22px;
}

.guide-grid>a {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-panel);
  padding: 26px;
}

.guide-grid>a:hover {
  border-color: var(--accent);
}

.guide-grid span,.guide-grid b {
  font-family: var(--font-body);
  font-size: 12px;
}

.guide-grid h3 {
  font-size: 26px;
}

.site-footer {
  background: var(--surface);
  border-color: var(--line);
}

.footer-top p {
  font-family: var(--font-body);
  font-size: 23px;
}

.footer-bottom {
  font-family: var(--font-body);
  font-size: 11px;
}

.card {
  border-radius: var(--radius-panel);
  border: 1px solid var(--line);
}

.card-header {
  background: var(--surface)!important;
  color: var(--ink)!important;
  border-color: var(--line);
  padding: 22px 26px 16px;
}

.card-body {
  padding: 28px;
}

.btn {
  min-height: var(--control-height);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 18px;
}

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: var(--surface);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-color: var(--surface);
}

.btn-outline-secondary {
  --bs-btn-color: var(--muted);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--soft);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: var(--control-border);
}

.form-control,.form-select {
  font-family: var(--font-body);
  font-size: 16px;
  border-radius: var(--radius-sm);
  min-height: var(--control-height);
  border-color: var(--control-border);
}

.form-control:focus,.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--soft);
}

.form-label {
  font-size: 14px;
  font-weight: 700;
}

.text-muted {
  color: var(--muted)!important;
}

.text-danger {
  color: var(--danger)!important;
}

/* ONE tool flow: heading, inputs, result, explanation. Never a sidebar of results. */
.tool-page main {
  max-width: var(--tool-width);
  margin: 0 auto;
  padding-bottom: 24px;
}

.tool-page main>.container {
  max-width: 100%;
}

.tool-heading {
  padding-top: 34px;
  padding-bottom: 24px;
}

.tool-heading h1 {
  font-size: var(--text-title);
  line-height: 1.2;
  margin: 14px 0;
}

.tool-heading>p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
}

.tool-category-label {
  display: inline-block;
  padding: 5px 11px;
  background: var(--soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  border-radius: 7px;
}

.tool-context {
  font-family: var(--font-body);
  max-width: var(--tool-width);
  font-size: 12px;
  padding-top: 22px;
}

.save-tool {
  font-size: 12px;
  border-radius: 9px;
}

.tool-page main>.container.my-5,.tool-page main>.container.py-5 {
  margin-top: 0!important;
  padding-top: 0!important;
}

.tool-page main>.container>.row {
  row-gap: 24px;
}

.tool-page main>.container>.row>[class*='col-'],.tool-page main>.row>[class*='col-'] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

.tool-page main>.row {
  width: calc(100% - 32px);
  margin: 0 auto 24px;
}

.tool-page main>.row>[class*='col-'] {
  margin-bottom: 24px;
}

.tool-page .card-body>.d-flex {
  flex-wrap: wrap;
}

.tool-page .row .card {
  height: auto!important;
}

.tool-page .workbench {
  padding-top: 0;
}

.workbench-grid {
  grid-template-columns: minmax(0,1fr);
  gap: 24px;
}

.workbench h2 {
  font-size: 21px;
}

.workbench-hint {
  font-size: 14px;
}

.workbench-answer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 28px;
}

.practical-metrics {
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 16px;
}

.practical-metrics>div {
  border: 0;
  padding: 18px;
  background: var(--paper);
  border-radius: 12px;
}

.practical-metrics>div:first-child {
  background: var(--soft);
}

.practical-metrics strong,.practical-metrics>div:first-child strong {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--accent);
}

.practical-metrics span {
  font-size: 13px;
}

.practical-guide {
  grid-template-columns: minmax(0,1fr);
  gap: 20px;
  margin-top: 32px;
  padding-top: 28px;
}

.practical-guide h2,.practical-faq h2 {
  font-size: 23px;
}

#practical-output {
  font-family: var(--font-body);
  font-size: 15px;
}

.tool-page [id='result'] {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 24px!important;
}

.related-tools {
  padding-top: 20px;
}

.related-links>a {
  font-size: 13px;
  border-radius: 10px;
}

[data-bs-theme='dark'] .example-maths {
  background: #322b50;
  color: #dbd0ff;
}

[data-bs-theme='dark'] .example-life {
  background: #213c32;
  color: #b3dfc9;
}

@media(max-width:1050px) {
  .catalog-layout {
    grid-template-columns: 170px minmax(0,1fr);
    gap: 24px;
  }

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

}

@media(max-width:700px) {
  .header-inner {
    height: 72px;
  }

  .wordmark {
    font-size: 25px;
  }

  .header-links {
    gap: 16px;
  }

  .header-links>a {
    font-size: 12px;
  }

  .intro {
    padding: 32px 0 24px;
  }

  .intro .eyebrow {
    font-size: 9px;
    letter-spacing: .04em;
    margin-bottom: 18px;
  }

  .intro h1 {
    font-size: clamp(29px,7.6vw,42px);
    line-height: 1.2;
    letter-spacing: -.05em;
  }

  .intro-description {
    font-size: 14px;
  }

  .everyday-examples {
    gap: 10px;
    margin-top: 22px;
  }

  .example-note {
    padding: 12px;
    gap: 8px;
    flex: 1;
  }

  .example-note>span:nth-child(2) {
    font-size: 10px;
  }

  .example-note strong {
    font-size: 11px;
    line-height: 1.5;
  }

  .example-note>span:last-child {
    display: none;
  }

  .example-symbol {
    font-size: 25px;
    width: 24px;
    flex-shrink: 0;
  }

  .search-panel {
    padding: 20px 16px;
  }

  .search-panel>label {
    font-size: 14px;
  }

  .search-field input {
    padding: 13px 0;
  }

  .search-suggestions {
    font-size: 11px;
    gap: 8px 14px;
  }

  .catalog-layout {
    display: block;
    padding-top: 24px;
  }

  .category-filter {
    border: 1px solid var(--line);
    font-size: 12px;
  }

  .category-filter.active {
    border: 1px solid var(--soft);
  }

  .section-heading {
    align-items: flex-start;
  }

  .section-heading h2 {
    font-size: 21px;
  }

  .section-heading p {
    font-size: 10px;
    white-space: nowrap;
    padding-top: 5px;
  }

  .tool-grid {
    gap: 12px;
  }

  .tool-card {
    padding: 16px;
    border-radius: 14px;
  }

  .tool-link h3 {
    font-size: 16px;
    line-height: 1.4;
  }

  .tool-link p {
    font-size: 12px;
  }

  .tool-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .tool-card-top {
    margin-bottom: 16px;
  }

  .tool-card-bottom {
    font-size: 9px;
    align-items: flex-end;
  }

  .tool-heading {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .tool-heading h1 {
    font-size: 29px;
  }

  .tool-heading>p {
    font-size: 14px;
  }

  .card-body,.workbench-answer {
    padding: 22px;
  }

  .workbench-actions {
    flex-wrap: wrap;
  }

  .practical-metrics {
    grid-template-columns: 1fr;
  }

  .practical-metrics strong,.practical-metrics>div:first-child strong {
    font-size: 29px;
  }

  .tool-page main>.container.py-5 {
    padding-top: 0!important;
  }

  .tool-page .workbench {
    padding-top: 0;
  }

}

@media(max-width:370px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }

  .everyday-examples {
    flex-direction: column;
  }

  .example-note>span:nth-child(2) {
    font-size: 12px;
  }

  .example-note strong {
    font-size: 12px;
  }

  .header-links {
    gap: 10px;
  }

  .header-links>a {
    font-size: 11px;
  }

  .theme-toggle {
    width: 32px;
    height: 32px;
  }

  .section-heading {
    flex-wrap: wrap;
    gap: 4px;
  }

}

/* Stack legacy card-based editors as well as the main calculator columns. */
.tool-page main .row:has(> [class*='col-'] > .card) {
  row-gap: 24px;
}

.tool-page main .row:has(> [class*='col-'] > .card) > [class*='col-'] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* One FAQ component, always after the tool's explanation and before related tools. */
.tool-faq { padding-top: 12px; padding-bottom: 36px; }
.tool-faq h2 { font-size: 24px; margin-bottom: 20px; }
.tool-faq details { border-bottom: 1px solid var(--line); }
.tool-faq summary { cursor: pointer; padding: 18px 0; font-size: 15px; font-weight: 700; }
.tool-faq details p { margin: 0 0 20px; font-size: 15px; line-height: 1.8; }

/* Listings and shared editorial layout. */
.listing-heading { max-width: 800px; padding: 56px 0 24px; }
.listing-heading h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.04em; }
.listing-heading p:not(.eyebrow) { color: var(--muted); margin-top: 20px; }
.home-selection .section-heading { margin-top: 40px; }
.home-selection > .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-heading > a { flex-shrink: 0; }
.guide-article { max-width: var(--tool-width); padding-top: 32px; padding-bottom: 64px; }
.guide-breadcrumb { margin-bottom: 32px; color: var(--muted); }
.guide-article h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.035em; }
.guide-article .lead { font-size: 1.15rem; line-height: 1.8; margin-top: 24px; }
.guide-article section, .guide-tools { margin-top: 40px; scroll-margin-top: 100px; }
.guide-article h2 { font-size: 1.5rem; margin-bottom: 16px; }
.guide-article p, .guide-article li { line-height: 1.8; }
.guide-summary { background: var(--soft); padding: 24px; border-radius: var(--radius-panel); margin-top: 32px; }
.guide-summary ul { margin: 12px 0 0; }
.guide-tools { margin-bottom: 32px; }
.guide-tools a { display: block; padding: 20px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.guide-tools span { display: block; margin-top: 8px; color: var(--muted); }
@media (max-width: 767px) {
 .home-selection > .tool-grid { grid-template-columns: 1fr; }
 .section-heading { flex-wrap: wrap; gap: 12px; }
 .search-field { flex-wrap: wrap; }
 .search-field input { min-width: 0; }
 .listing-heading { padding-top: 32px; }
}

/* Recipe editor: inputs and their adjusted quantity stay together. */
.recipe-workspace { max-width: var(--tool-width); }
.recipe-topline { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.recipe-topline h2 { margin:0; font-size:1.4rem; }
.recipe-topline > span { color:var(--muted); font-size:.85rem; }
.recipe-servings { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; margin-top:24px; }
.recipe-number { display:flex; gap:12px; align-items:center; }
.recipe-number input { min-width:0; }
.recipe-number span { color:var(--muted); font-size:.85rem; }
.recipe-arrow { padding-top:24px; color:var(--accent); }
.recipe-factor { background:var(--soft); padding:12px 16px; border-radius:var(--radius-sm); margin:20px 0 0; }
.recipe-ingredients,.recipe-summary { margin-top:32px; }
.recipe-column-head,.recipe-row { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) 40px; gap:10px; align-items:center; }
.recipe-column-head { font-size:.8rem; color:var(--muted); margin-bottom:10px; }
.recipe-row { padding:14px 0; border-top:1px solid var(--line); }
.recipe-row input { min-width:0; width:100%; }
.recipe-row-result { overflow-wrap:anywhere; color:var(--accent); font-weight:700; padding:10px; background:var(--soft); border-radius:var(--radius-sm); }
.recipe-remove { border:0; background:transparent; color:var(--muted); font-size:1.6rem; min-height:44px; }
.recipe-remove:hover { color:var(--danger); }
.recipe-mobile-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.recipe-row [aria-invalid=true],.recipe-servings [aria-invalid=true] { border-color:var(--danger); }
#recipe-add { margin-top:16px; }
@media(max-width:600px){
 .recipe-servings { gap:10px; }
 .recipe-number { flex-direction:column; align-items:flex-start; gap:4px; }
 .recipe-column-head { display:none; }
 .recipe-row { grid-template-columns:1fr 1fr 40px; gap:12px; padding:20px 0; }
 .recipe-row > div:first-child { grid-column:1 / 3; }
 .recipe-row > div:nth-child(2) { grid-row:2; grid-column:1; }
 .recipe-row > div:nth-child(3) { grid-row:2; grid-column:2; }
 .recipe-remove { grid-row:1; grid-column:3; }
 .recipe-row-result { grid-row:3; grid-column:1 / -1; }
 .recipe-row-result::before { content:'Pour vous : '; font-weight:400; }
 .recipe-mobile-label { position:static; width:auto; height:auto; clip-path:none; display:block; font-size:.8rem; color:var(--muted); margin-bottom:6px; }
}

.feedback-toast { position:fixed; z-index:1090; bottom:max(20px,env(safe-area-inset-bottom)); right:20px; max-width:min(440px,calc(100vw - 40px)); display:flex; align-items:center; gap:20px; padding:16px 20px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius-sm); box-shadow:0 8px 30px #0002; }
.feedback-toast[hidden] { display:none; }
.feedback-toast[data-type=error] { border-left-color:var(--danger); }
.feedback-toast[data-type=success] { border-left-color:var(--positive); }
.feedback-toast button { flex-shrink:0; border:0; color:var(--ink); background:transparent; font-size:1.5rem; min-width:36px; min-height:44px; }
.field-feedback { color:var(--danger); font-size:.875rem; margin:6px 0 12px; }
.tool-page [tabindex='-1'] { scroll-margin-top:100px; }
.tool-page [tabindex='-1']:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
.analytics-consent { position:fixed; bottom:16px; left:16px; z-index:1100; width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); box-shadow:0 8px 30px #0002; }
.analytics-consent[hidden] { display:none; }
.analytics-consent h2 { font-size:1.15rem; }
.analytics-consent p { font-size:.9rem; line-height:1.6; }
.analytics-consent > div { display:flex; gap:12px; }
.analytics-consent button { flex:1; }
.cookie-settings { border:0; background:transparent; color:inherit; text-decoration:underline; padding:8px; }