:root {
  --ink: #102c47;
  --text: #334d65;
  --muted: #52687c;
  --blue: #195eba;
  --blue-dark: #124b97;
  --gold: #f1c54a;
  --line: #dce5ee;
  --soft: #f3f7fb;
  --pale-blue: #eaf2fc;
  --radius: 1rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { container-type: inline-size; margin: 0; color: var(--ink); background: #fff; font-family: "Segoe UI", Arial, sans-serif; font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { overflow-wrap: anywhere; line-height: 1.17; font-weight: 700; }
h1 { font-size: clamp(2.75rem, 5.3vw, 4.5rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 3.3vw, 3rem); letter-spacing: -.035em; }
h3 { font-size: 1.375rem; letter-spacing: -.02em; }
p { color: var(--text); overflow-wrap: anywhere; }
::selection { color: var(--ink); background: #f6dc88; }
:focus-visible { outline: 3px solid #d29a09; outline-offset: 5px; }
section[id], article[id], details[id], main[id] { scroll-margin-top: 7rem; }
.container { width: min(76rem, calc(100% - 4rem)); margin-inline: auto; }
.icon { width: 1.5rem; height: 1.5rem; }
.skip-link { position: fixed; top: .5rem; left: 1rem; padding: .65rem 1rem; background: var(--ink); color: #fff; border-radius: .4rem; z-index: 100; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.button { display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.4rem; min-height: 3rem; border: 1px solid var(--blue); border-radius: .5rem; background: var(--blue); color: #fff; font-size: .9375rem; font-weight: 650; line-height: 1.4; text-align: center; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.button-small { min-height: 2.7rem; padding: .65rem 1.2rem; }
.button-outline { color: var(--blue); background: transparent; border-color: #b7cce5; }
.button-outline:hover { color: var(--blue-dark); background: #eaf2fc; border-color: #87abd7; }
.text-link { display: inline-block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; color: var(--blue); font-size: .9375rem; font-weight: 650; text-decoration: underline; text-underline-offset: .28rem; text-decoration-color: #a8c3e7; }
.text-link:hover { color: var(--blue-dark); text-decoration-color: var(--blue-dark); }
.eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--blue); font-weight: 700; font-size: .75rem; letter-spacing: .09em; line-height: 1.6; margin-bottom: 1.15rem; }
.eyebrow > span { display: inline-flex; align-items: center; justify-content: center; color: var(--blue); width: 1.9rem; height: 1.9rem; border: 1px solid #aac8e9; border-radius: 50%; font-size: .75rem; letter-spacing: 0; flex-shrink: 0; }
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 1.75rem; min-height: 5rem; }
.brand { display: inline-flex; gap: .55rem; align-items: center; min-width: 0; flex-shrink: 1; }
.brand > img { flex-shrink: 0; object-fit: contain; width: 2.1rem; height: 2.8rem; }
.brand > span { min-width: 0; overflow-wrap: anywhere; font-size: 1.375rem; line-height: 1.15; font-weight: 750; letter-spacing: -.05em; }
.brand > span > span { color: var(--blue); font-weight: 500; }
.brand small { display: block; margin-top: .35rem; color: var(--muted); font-size: .75rem; letter-spacing: .025em; line-height: 1.3; font-weight: 600; }
.desktop-nav { display: flex; gap: 1.85rem; margin-left: auto; align-items: center; }
.desktop-nav a { font-size: .875rem; font-weight: 600; padding-block: .6rem; color: #40566b; }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: var(--blue); }
.desktop-nav a[aria-current] { text-decoration: underline; text-underline-offset: .55rem; }
.menu-toggle { flex-shrink: 0; display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; flex-direction: column; gap: .4rem; padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: .4rem; cursor: pointer; }
.menu-toggle span { height: 2px; width: 1.2rem; background: var(--ink); transition: transform .15s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(.25rem) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-.25rem) rotate(-45deg); }
.mobile-nav { border-top: 1px solid var(--line); padding: .5rem 2rem 1rem; background: #fff; max-height: calc(100dvh - 5rem); overflow-y: auto; }
.mobile-nav a { display: block; padding: .8rem .5rem; font-weight: 600; border-bottom: 1px solid #edf1f5; }
.hero { position: relative; isolation: isolate; background: #102c47; color: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 100% 50%, #205880 0, transparent 64%); }
.hero-grid { position: absolute; z-index: -1; inset: 0; opacity: .22; background-image: linear-gradient(#7d9fbe 1px,transparent 1px), linear-gradient(90deg,#7d9fbe 1px,transparent 1px); background-size: 4.5rem 4.5rem; mask-image: linear-gradient(90deg,transparent 36%,#000); pointer-events: none; }
.hero-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; min-height: 39rem; align-items: center; padding-block: 4.3rem; }
.hero-copy { min-width: 0; }
.hero .eyebrow { color: #b6cae0; margin-bottom: 1.6rem; }
.hero h1 > span { color: var(--gold); }
.hero-description { color: #d6e3ef; margin-top: 1.6rem; max-width: 34rem; font-size: 1.0625rem; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.45rem; margin-top: 2rem; }
.hero-actions .button { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.hero-actions .button:hover { background: #ffda67; border-color: #ffda67; }
.hero-actions .text-link { color: #fff; text-decoration-color: #729abd; }
.hero-store-area { margin-top: 2.1rem; }
.hero-store-area > p { margin-top: .6rem; color: #b8cde0; font-size: .875rem; }
.hero-brand-panel { text-align: center; padding-bottom: 1rem; }
.brand-emblem { position: relative; display: flex; justify-content: center; align-items: center; min-height: 16.5rem; }
.brand-emblem::before { content: ""; position: absolute; width: 17rem; height: 17rem; border: 1px solid rgba(180,209,232,.26); transform: rotate(12deg); }
.brand-emblem::after { content: ""; position: absolute; width: 14.8rem; height: 14.8rem; border: 1px solid rgba(180,209,232,.17); transform: rotate(12deg); }
.brand-emblem img { position: relative; z-index: 1; width: 10.4rem; height: 13.4rem; object-fit: contain; }
.hero-brand-panel > p { color: #fff; font-size: 2.3rem; font-weight: 700; letter-spacing: -.04em; margin-top: 1.9rem; line-height: 1.2; }
.hero-brand-panel > p > span { color: #b9d3e8; font-weight: 400; }
.hero-brand-panel > span { display: inline-block; color: #b9cfdf; margin-top: .7rem; font-size: .75rem; letter-spacing: .11em; }
.store-badges { display: flex; flex-wrap: wrap; gap: .65rem; }
.store-badge { max-width: 100%; display: inline-flex; align-items: center; gap: .5rem; background: #102538; color: #fff; border: 1px solid #607c95; min-width: 10.5rem; min-height: 3.85rem; padding: .5rem 1rem .6rem .65rem; border-radius: .55rem; text-align: left; }
.store-badge:disabled { cursor: default; opacity: 1; }
.store-badge > svg { width: 2rem; height: 2rem; }
.store-badge > span { display: block; min-width: 0; overflow-wrap: anywhere; }
.store-badge small { display: block; font-size: .875rem; font-weight: 400; line-height: 1.5; color: #dbe4ec; }
.store-badge strong { display: block; font-size: 1.125rem; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
a.store-badge:hover { background: #1b3d5b; border-color: #9ab4ca; }
.value-strip { background: #0c253c; border-top: 1px solid #32506a; color: #fff; }
.value-strip .container { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem; min-height: 5rem; align-items: center; }
.value-strip span { display: flex; align-items: center; gap: .85rem; font-weight: 600; font-size: .9375rem; }
.value-strip .icon { color: var(--gold); width: 1.3rem; height: 1.3rem; }
.section { padding-block: 6rem; }
.section-heading { margin-bottom: 3rem; }
.section-intro { max-width: 44rem; margin-top: 1.4rem; font-size: 1.0625rem; }
.heading-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; align-items: end; }
.heading-row p { max-width: 28rem; font-size: 1.0625rem; }
.intro-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.intro-grid article { display: flex; align-items: start; flex-direction: column; }
.intro-grid .icon { color: var(--blue); width: 1.75rem; height: 1.75rem; margin-bottom: 1.4rem; }
.intro-grid h3 { margin-bottom: .9rem; }
.intro-grid p { margin-bottom: 1.3rem; flex: 1; }
.audience-section { background: var(--soft); }
.audience-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.audience-card { min-width: 0; padding: 2.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; align-items: start; }
.employer-card { background: #e7f0fb; border-color: #d1e1f6; }
.audience-card-top { display: flex; flex-wrap: wrap; max-width: 100%; gap: 1rem; align-items: center; margin-bottom: 1.8rem; color: var(--blue); font-weight: 700; font-size: .75rem; letter-spacing: .09em; }
.audience-icon { width: 2.7rem; height: 2.7rem; display: flex; justify-content: center; align-items: center; border: 1px solid #d2e2f5; border-radius: .65rem; flex-shrink: 0; }
.employer-card .audience-icon { background: #fff; }
.audience-card h3 { font-size: 1.75rem; letter-spacing: -.035em; line-height: 1.3; }
.audience-card > p { margin-top: 1rem; max-width: 26rem; }
.audience-card ul { width: 100%; min-width: 0; list-style: none; padding: 0; margin: 1.65rem 0 2rem; display: flex; flex-direction: column; gap: .8rem; }
.audience-card li { overflow-wrap: anywhere; display: flex; gap: .65rem; align-items: start; color: var(--text); font-size: .9375rem; line-height: 1.6; }
.audience-card li .icon { width: 1.15rem; height: 1.15rem; margin-top: .18rem; color: var(--blue); }
.audience-card > .text-link { margin-top: auto; }
.professions { margin-top: 2.5rem; }
.professions > p { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .09em; margin-bottom: .95rem; }
.professions > div { display: flex; flex-wrap: wrap; gap: .65rem; }
.professions span { background: #fff; border: 1px solid #dfe7ef; border-radius: .4rem; padding: .45rem .8rem; font-size: .875rem; color: #40596f; }
.tool-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.15rem; align-items: stretch; }
.puantaj-flow { display: grid; grid-template-columns: .85fr 1.75fr; gap: 2.5rem; margin-bottom: 1.8rem; padding: 2.2rem; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); }
.puantaj-intro { min-width: 0; }
.puantaj-intro .eyebrow { font-size: .75rem; letter-spacing: .04em; }
.puantaj-intro h3 { font-size: 1.5rem; line-height: 1.35; }
.puantaj-intro > p { margin-top: 1rem; }
.puantaj-intro .text-link { margin-top: 1.1rem; }
.puantaj-flow > div:last-child { min-width: 0; }
.puantaj-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.puantaj-steps li { min-width: 0; }
.puantaj-steps li > span { display: inline-flex; justify-content: center; align-items: center; background: #e0ebf9; color: var(--blue); width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: .75rem; font-weight: 700; margin-bottom: 1rem; }
.puantaj-steps h4 { margin: 0 0 .8rem; font-size: 1.0625rem; line-height: 1.45; font-weight: 650; overflow-wrap: anywhere; }
.puantaj-steps p { font-size: .9375rem; }
.puantaj-permission { display: flex; gap: .65rem; align-items: start; padding-top: 1rem; border-top: 1px solid #d2dfed; margin-top: 1.8rem; font-size: .875rem; }
.puantaj-permission .icon { color: var(--blue); width: 1.2rem; height: 1.2rem; margin-top: .15rem; }
.puantaj-permission > span { min-width: 0; }
.tool-card { padding: 1.85rem; border: 1px solid var(--line); border-radius: .8rem; display: flex; flex-direction: column; }
.tool-icon { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: .65rem; background: var(--pale-blue); color: var(--blue); margin-bottom: 1.2rem; }
.tool-card h3 { font-size: 1.25rem; margin-bottom: .55rem; }
.tool-audience { font-size: .875rem; font-weight: 600; color: #57718b; margin-bottom: .9rem; }
.tool-card > p { margin-bottom: 1.5rem; flex: 1; }
.tool-card details { border-top: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; overflow-wrap: anywhere; }
summary::-webkit-details-marker { display: none; }
.tool-card summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; font-size: .875rem; font-weight: 650; color: var(--blue); }
.disclosure { display: block; position: relative; flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.disclosure::before, .disclosure::after { content: ""; position: absolute; height: 1.5px; width: .65rem; left: 50%; top: 50%; background: currentColor; transform: translate(-50%,-50%); }
.disclosure::after { transform: translate(-50%,-50%) rotate(90deg); }
details[open] > summary .disclosure::after { display: none; }
.tool-detail { padding-top: 1rem; }
.tool-detail p { font-size: .9375rem; margin-bottom: .9rem; }
.tool-detail .text-link { font-size: .875rem; }
.section-note { font-size: .875rem; color: var(--muted); text-align: center; margin-top: 1.5rem; }
.calculator-section { padding-block: 5rem; background: var(--ink); color: #fff; }
.calculator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.calculator-grid .eyebrow { color: var(--gold); }
.calculator-grid h2 { font-size: clamp(2rem, 3vw, 2.75rem); }
.calculator-grid > div:first-child > p:not(.eyebrow) { color: #d0dce7; margin-top: 1.4rem; max-width: 30rem; }
.formula { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-top: 1.6rem; color: #e2eaf2; }
.formula span { font-size: .75rem; letter-spacing: .07em; font-weight: 600; }
.formula b { color: var(--gold); font-size: 1.1rem; }
.calculator-note { font-size: .875rem; }
.calculator-card { padding: 2.1rem; border-radius: var(--radius); background: #fff; color: var(--ink); min-width: 0; }
.calculator-card-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.calculator-card-heading h3 { font-size: 1.25rem; }
.calculator-card-heading > span { font-size: .75rem; color: var(--muted); background: var(--soft); padding: .25rem .6rem; border-radius: .3rem; }
.measurement-inputs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.measurement-inputs label { display: block; font-weight: 650; font-size: .875rem; position: relative; }
.measurement-inputs label > span { position: absolute; right: .8rem; top: 2.8rem; color: var(--muted); font-weight: 400; }
.measurement-inputs input { margin-top: .5rem; width: 100%; min-width: 0; height: 3.1rem; padding: .6rem 1.8rem .6rem .75rem; border: 1px solid #becbd8; border-radius: .4rem; font-size: 1rem; color: var(--ink); background: #fff; }
.measurement-inputs input::placeholder { color: #687e91; }
.measurement-inputs input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.measurement-inputs input[aria-invalid="true"] { border-color: #b63333; background: #fff8f8; }
.calculation-result { margin-top: 1.3rem; display: flex; flex-direction: column; align-items: center; padding: 1.25rem .5rem; background: var(--pale-blue); border-radius: .6rem; }
.calculation-result > span:first-child { color: #526b87; font-weight: 700; font-size: .75rem; letter-spacing: .09em; }
.calculation-result output { display: block; color: var(--blue); font-size: 2.65rem; font-weight: 700; letter-spacing: -.045em; line-height: 1.5; overflow-wrap: anywhere; max-width: 100%; text-align: center; }
.calculation-result output small { font-size: 1.0625rem; letter-spacing: 0; font-weight: 500; }
#volume-detail { font-size: .8125rem; color: #49657e; text-align: center; }
.calculator-helper { margin-top: 1rem; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.calculator-helper.is-error { color: #a02929; }
.calculator-actions { display: flex; gap: 1.2rem; margin-top: 1.2rem; align-items: center; }
.calculator-actions .button { flex: 1; }
.reset-button { background: none; border: 0; font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2rem; padding: .7rem .25rem; color: var(--muted); cursor: pointer; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3rem; padding: 0; list-style: none; }
.steps-grid li { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.steps-grid li > span { font-size: 1.5rem; font-weight: 350; color: var(--blue); display: block; margin-bottom: .8rem; }
.steps-grid h3 { font-size: 1.25rem; margin-bottom: .8rem; }
.privacy-section { background: #edf3f9; padding-block: 3.5rem; }
.privacy-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: center; }
.privacy-heading { display: flex; align-items: start; gap: 1.5rem; }
.privacy-heading > div { min-width: 0; }
.privacy-heading > .icon { width: 2.2rem; height: 2.2rem; color: var(--blue); margin-top: .3rem; }
.privacy-heading .eyebrow { margin-bottom: .8rem; }
.privacy-heading h2 { font-size: clamp(1.8rem, 2.5vw, 2.25rem); }
.privacy-grid > div:last-child p { margin-bottom: 1rem; }
.faq-home-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; }
.faq-home-grid > div:first-child > p:not(.eyebrow) { margin-top: 1.3rem; max-width: 21rem; }
.faq-home-grid .button { margin-top: 1.8rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary { display: flex; justify-content: space-between; align-items: start; gap: 1.25rem; padding: 1.3rem 0; color: var(--ink); font-weight: 600; font-size: 1rem; line-height: 1.6; }
.faq-item > summary:hover { color: var(--blue); }
.faq-item .disclosure { color: var(--blue); margin-top: .2rem; }
.faq-answer { padding: 0 2.3rem 1.5rem 0; }
.faq-answer p { line-height: 1.8; }
.faq-answer a { color: var(--blue); text-decoration: underline; text-underline-offset: .2rem; overflow-wrap: anywhere; }
.faq-item:target > summary { color: var(--blue); }
.download-section { background: var(--blue); color: #fff; padding-block: 4.5rem; }
.download-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; align-items: center; }
.download-grid .eyebrow { color: #f8dc89; }
.download-grid h2 { font-size: clamp(2rem,3.4vw,3rem); }
.download-grid > div:first-child > p:not(.eyebrow) { color: #e3edfa; margin-top: 1.2rem; }
.download-stores > p { font-size: .875rem; color: #e1ecfb; margin-top: .8rem; }
.download-stores > .text-link { color: #fff; text-decoration-color: #a5c4ee; margin-top: 1rem; }
.contact-section { padding-block: 5rem; }
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items: center; }
.contact-grid h2 { font-size: 2.5rem; }
.contact-grid > div:first-child > p:not(.eyebrow) { margin-top: 1.3rem; }
.contact-links { display: grid; min-width: 0; }
.contact-links > a { display: flex; align-items: center; gap: 1.15rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.contact-links > a:first-child { border-top: 1px solid var(--line); }
.contact-links > a:hover strong { color: var(--blue); }
.contact-icon { color: var(--blue); background: var(--soft); border-radius: .5rem; padding: .7rem; flex-shrink: 0; }
.contact-links > a > span:last-child { min-width: 0; }
.contact-links strong { display: block; font-size: 1rem; font-weight: 650; }
.contact-links small { display: block; color: var(--muted); font-size: .875rem; margin-top: .2rem; overflow-wrap: anywhere; }
.site-footer { background: #f3f6fa; border-top: 1px solid var(--line); padding-top: 3rem; }
.footer-top { display: grid; grid-template-columns: 1.5fr .8fr 1fr; gap: 3rem; padding-bottom: 2.75rem; }
.footer-top > div:first-child p { margin-top: 1.15rem; font-size: .9375rem; }
.footer-links, .footer-contact { display: flex; flex-direction: column; align-items: start; gap: .55rem; min-width: 0; }
.footer-links > span, .footer-contact > span { font-size: .75rem; letter-spacing: .08em; font-weight: 700; margin-bottom: .5rem; color: #546c81; }
.footer-links a, .footer-contact a { color: var(--text); font-size: .875rem; overflow-wrap: anywhere; }
.footer-links a:hover, .footer-contact a:hover, .footer-bottom a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: .2rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; padding-block: 1.5rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.footer-bottom nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.breadcrumb { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; font-size: .875rem; color: var(--muted); margin-bottom: 2.8rem; }
.breadcrumb a { text-decoration: underline; text-underline-offset: .2rem; }
.page-heading { padding-block: 2.5rem 3rem; background: var(--soft); border-bottom: 1px solid var(--line); }
.page-heading h1 { font-size: clamp(2.5rem,4vw,3.5rem); }
.page-heading > div > p:last-child { max-width: 37rem; margin-top: 1.3rem; font-size: 1.0625rem; }
.faq-directory { padding-block: 3rem 5rem; }
.faq-search { max-width: 39rem; margin-bottom: 1.5rem; }
.faq-search > label { display: block; font-weight: 650; font-size: .875rem; margin-bottom: .6rem; }
.search-input { position: relative; display: flex; align-items: center; }
.search-input > .icon { position: absolute; left: 1rem; color: #6b8197; width: 1.3rem; height: 1.3rem; pointer-events: none; }
.search-input input { width: 100%; border: 1px solid #bcccdc; background: #fff; border-radius: .5rem; padding: .95rem 3rem .95rem 2.9rem; color: var(--ink); font-size: 1rem; min-height: 3.3rem; }
.search-input input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.search-input input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-input button { position: absolute; right: .6rem; background: #edf3f9; border: 0; border-radius: .35rem; width: 2rem; height: 2rem; line-height: 1; font-size: 1.5rem; cursor: pointer; color: #42617d; }
.faq-filter-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block: .25rem 1.5rem; border-bottom: 1px solid var(--line); }
.faq-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.faq-filters button { font-size: .875rem; font-weight: 600; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: .4rem; min-height: 2.75rem; padding: .55rem .9rem; cursor: pointer; }
.faq-filters button:hover { background: var(--soft); }
.faq-filters button[aria-pressed="true"] { color: #fff; background: var(--blue); border-color: var(--blue); }
#faq-count { font-size: .875rem; color: var(--muted); }
.faq-results { max-width: 62rem; margin-inline: auto; }
.faq-group { margin-top: 3rem; }
.faq-group > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; justify-content: space-between; font-size: 1.5rem; margin-bottom: 1.5rem; }
.faq-group > h2 > span { font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--muted); flex-shrink: 0; }
.faq-empty { padding: 4rem 1rem; text-align: center; }
.faq-empty > .icon { color: var(--blue); margin: 0 auto 1.5rem; width: 2.2rem; height: 2.2rem; }
.faq-empty h2 { font-size: 1.75rem; }
.faq-empty p { margin-top: 1rem; }
.faq-empty .button { margin-top: 1.5rem; }
.faq-support { display: flex; gap: 2rem; align-items: center; justify-content: space-between; padding: 2rem 2.5rem; background: var(--pale-blue); border-radius: var(--radius); margin-top: 4rem; }
.faq-support h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.faq-support .button { flex-shrink: 0; }
.legal-main { width: min(56rem,calc(100% - 4rem)); margin-inline: auto; padding-block: 2.5rem 5rem; }
.legal-kicker { color: var(--blue); font-size: .875rem; font-weight: 650; margin-bottom: 1rem; }
.legal-main h1 { font-size: clamp(2rem,4vw,3rem); line-height: 1.2; }
.legal-main .meta { margin-block: 1.5rem 2rem; color: var(--muted); font-size: .875rem; }
.legal-main > p { font-size: 1.0625rem; }
.legal-main section { margin-top: 2rem; }
.legal-main section h2 { font-size: 1.375rem; letter-spacing: -.02em; margin-bottom: .75rem; line-height: 1.4; }
.legal-main section p, .legal-main li { color: var(--text); line-height: 1.85; }
.legal-main ul { padding-left: 1.3rem; }
.legal-main li { margin-bottom: .5rem; }
.legal-main a:not(.button) { color: var(--blue); text-decoration: underline; text-underline-offset: .2rem; overflow-wrap: anywhere; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; padding-top: 1.7rem; border-top: 1px solid var(--line); margin-top: 2.75rem; font-size: .875rem; }
.legal-main > .button { margin-top: 2rem; }
@container (max-width: 68.75em) {
  .desktop-nav { gap: 1.15rem; }
  .header-inner { gap: 1.2rem; }
  .hero-layout { gap: 3rem; grid-template-columns: 1.6fr 1fr; }
  .hero h1 { font-size: 3.65rem; }
  .brand-emblem::before { width: 14rem; height: 14rem; }
  .brand-emblem::after { width: 12rem; height: 12rem; }
  .brand-emblem img { width: 8.8rem; height: 11.4rem; }
  .hero-brand-panel > p { margin-top: .7rem; font-size: 2rem; }
  .heading-row, .privacy-grid { gap: 2.5rem; }
  .calculator-grid, .faq-home-grid, .contact-grid { gap: 3rem; }
  .audience-card { padding: 2rem; }
  .tool-card { padding: 1.5rem; }
}
@container (max-width: 56.25em) {
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-toggle { display: flex; }
  .hero-layout { grid-template-columns: 1fr; min-height: 0; padding-block: 3.5rem; }
  .hero-brand-panel { display: none; }
  .hero h1 { font-size: 3.7rem; }
  .hero-description { max-width: 38rem; }
  .hero-grid { mask-image: linear-gradient(90deg,transparent 10%,#000); opacity: .14; }
  .value-strip .container { gap: 1rem; }
  .value-strip span { gap: .55rem; font-size: .875rem; }
  .section { padding-block: 4.5rem; }
  .heading-row { grid-template-columns: 1fr; gap: 1.2rem; }
  .heading-row p { max-width: 38rem; }
  .intro-grid { gap: 1.5rem; }
  .intro-grid h3 { font-size: 1.2rem; }
  .audience-card h3 { font-size: 1.5rem; }
  .audience-card { padding: 1.7rem; }
  .tool-grid { grid-template-columns: repeat(2,1fr); }
  .calculator-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .calculator-grid > div:first-child > p:not(.eyebrow) { max-width: 38rem; }
  .calculator-card { width: min(100%, 35rem); }
  .steps-grid { gap: 1.5rem; }
  .steps-grid h3 { font-size: 1.15rem; }
  .privacy-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .privacy-grid > div:last-child { margin-left: 3.7rem; max-width: 38rem; }
  .faq-home-grid { gap: 2.5rem; grid-template-columns: 1fr 1.3fr; }
  .download-grid { gap: 2rem; }
  .download-stores .store-badges { flex-direction: column; align-items: start; }
  .contact-grid { gap: 2rem; }
  .contact-grid h2 { font-size: 2.25rem; }
  .contact-links strong { font-size: .9375rem; }
  .footer-top { gap: 1.5rem; grid-template-columns: 1.25fr .8fr 1fr; }
}
@container (max-width: 40.625em) {
  .container { width: calc(100% - 2.5rem); }
  .header-inner { min-height: 4.6rem; gap: .7rem; }
  .brand > img { width: 1.8rem; height: 2.4rem; }
  .brand > span { font-size: 1.25rem; }
  .brand small { font-size: .75rem; letter-spacing: 0; }
  .header-cta { min-height: 2.5rem; font-size: .875rem; padding: .55rem .8rem; }
  .menu-toggle { width: 2.5rem; height: 2.5rem; }
  .mobile-nav { padding-inline: 1.25rem; max-height: calc(100dvh - 4.6rem); }
  section[id], article[id], details[id], main[id] { scroll-margin-top: 5.8rem; }
  .hero-layout { padding-block: 2.8rem 2.6rem; }
  .hero .eyebrow { font-size: .75rem; letter-spacing: .055em; margin-bottom: 1.2rem; }
  .hero h1 { font-size: clamp(2.65rem,9vw,3.7rem); }
  .hero-description { margin-top: 1.35rem; font-size: 1rem; }
  .hero-actions { gap: 1rem; margin-top: 1.7rem; }
  .hero-actions .text-link { font-size: .875rem; }
  .hero-store-area { margin-top: 1.7rem; }
  .store-badge { min-width: 9.9rem; gap: .35rem; padding-inline: .5rem .7rem; }
  .store-badge > svg { width: 1.7rem; height: 1.7rem; }
  .store-badge strong { font-size: 1.0625rem; }
  .store-badge small { font-size: .8125rem; }
  .value-strip .container { grid-template-columns: repeat(2,1fr); gap: 1.15rem 1rem; padding-block: 1.4rem; }
  .value-strip span { font-size: .875rem; }
  .section { padding-block: 3.5rem; }
  .section-heading { margin-bottom: 2rem; }
  .eyebrow { font-size: .75rem; letter-spacing: .055em; }
  .section-intro, .heading-row p { font-size: 1rem; }
  h2 { font-size: clamp(1.8rem,6.5vw,2.4rem); }
  .intro-grid { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 1.8rem; }
  .intro-grid article { border-bottom: 1px solid var(--line); padding-bottom: 1.8rem; }
  .intro-grid article:last-child { border: 0; padding-bottom: 0; }
  .intro-grid .icon { margin-bottom: .8rem; }
  .intro-grid h3 { font-size: 1.3rem; }
  .intro-grid p { margin-bottom: 1rem; }
  .audience-grid { grid-template-columns: 1fr; gap: 1rem; }
  .audience-card { padding: 1.65rem; }
  .audience-card-top { margin-bottom: 1.25rem; }
  .audience-card h3 { font-size: 1.6rem; }
  .audience-card ul { margin: 1.3rem 0 1.5rem; }
  .professions { margin-top: 2rem; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 1.65rem; }
  .tool-card > p { margin-bottom: 1.1rem; }
  .tool-icon { margin-bottom: 1rem; }
  .section-note { text-align: left; }
  .calculator-section { padding-block: 3.5rem; }
  .calculator-grid { gap: 2rem; }
  .calculator-card { padding: 1.4rem; }
  .measurement-inputs { gap: .55rem; }
  .measurement-inputs label { font-size: .875rem; }
  .measurement-inputs input { padding-left: .6rem; }
  .calculation-result output { font-size: 2.5rem; }
  .calculator-helper { font-size: .875rem; }
  .steps-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .steps-grid li { padding-top: 1.1rem; }
  .steps-grid li > span { margin-bottom: .5rem; }
  .steps-grid h3 { font-size: 1.25rem; }
  .privacy-section { padding-block: 2.5rem; }
  .privacy-heading { gap: .85rem; }
  .privacy-heading > .icon { width: 1.7rem; height: 1.7rem; }
  .privacy-heading h2 { font-size: 1.7rem; }
  .privacy-grid > div:last-child { margin-left: 0; }
  .faq-home-grid { grid-template-columns: 1fr; gap: 2rem; }
  .faq-home-grid > div:first-child > p:not(.eyebrow) { max-width: 32rem; }
  .faq-home-grid .button { margin-top: 1.3rem; }
  .faq-item > summary { padding-block: 1.15rem; }
  .faq-answer { padding: 0 1rem 1.25rem 0; }
  .download-section { padding-block: 3.3rem; }
  .download-grid { grid-template-columns: 1fr; gap: 2rem; }
  .download-stores .store-badges { flex-direction: row; }
  .contact-section { padding-block: 3.5rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-grid h2 { font-size: 2.1rem; }
  .contact-links > a { gap: .8rem; }
  .contact-icon { padding: .65rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem 1.3rem; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
  .footer-top > div:first-child p br { display: none; }
  .footer-bottom { flex-direction: column; gap: .8rem; font-size: .8125rem; }
  .footer-bottom nav { gap: .65rem 1.2rem; }
  .page-heading { padding-block: 1.8rem 2.3rem; }
  .breadcrumb { margin-bottom: 2rem; font-size: .8125rem; }
  .page-heading h1 { font-size: 2.65rem; }
  .page-heading > div > p:last-child { font-size: 1rem; }
  .faq-directory { padding-block: 2rem 3rem; }
  .faq-filter-bar { gap: .9rem; padding-bottom: 1.2rem; }
  .faq-filters { gap: .45rem; }
  .faq-filters button { font-size: .875rem; padding-inline: .75rem; }
  .faq-group { margin-top: 2.1rem; }
  .faq-group > h2 { font-size: 1.35rem; gap: .65rem; margin-bottom: 1rem; }
  .faq-support { flex-direction: column; align-items: start; gap: 1.2rem; padding: 1.5rem; margin-top: 2.5rem; }
  .faq-support h2 { font-size: 1.35rem; }
  .legal-main { width: calc(100% - 2.5rem); padding-block: 1.8rem 3rem; }
  .legal-main > p { font-size: 1rem; }
}
@container (max-width: 25em) {
  .header-cta { display: none; }
  .menu-toggle { margin-left: auto; }
}
@container (max-width: 22.5em) {
  .hero h1 { font-size: 2.45rem; }
  .store-badges { gap: .5rem; }
  .store-badge { min-width: 0; padding-inline: .5rem .65rem; gap: .3rem; }
  .store-badge > svg { width: 1.5rem; }
  .store-badge small { font-size: .75rem; }
  .store-badge strong { font-size: 1rem; }
  .audience-card { padding: 1.3rem; }
  .audience-card h3 { font-size: 1.4rem; }
  .calculator-card { padding: 1.1rem; }
  .measurement-inputs { grid-template-columns: 1fr; gap: .8rem; }
  .calculator-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
  .calculator-actions .button { width: 100%; min-width: 0; padding-inline: .8rem; overflow-wrap: anywhere; }
  .footer-top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .site-header, .site-footer, .skip-link, .faq-search, .faq-filter-bar, .faq-support { display: none; }
  .section, .faq-directory, .page-heading { padding-block: 1rem; }
  .container, .legal-main { width: 100%; }
  details { break-inside: avoid; }
}

@container (max-width: 16em) {
  .value-strip .container { grid-template-columns: 1fr; }
  .header-inner .brand > img, .header-inner .brand small { display: none; }
  .search-input > .icon { display: none; }
  .search-input input { padding-left: .8rem; }
}

/* Responsive fallback for browsers without CSS container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) {
  .desktop-nav { gap: 1.15rem; }
  .header-inner { gap: 1.2rem; }
  .hero-layout { gap: 3rem; grid-template-columns: 1.6fr 1fr; }
  .hero h1 { font-size: 3.65rem; }
  .brand-emblem::before { width: 14rem; height: 14rem; }
  .brand-emblem::after { width: 12rem; height: 12rem; }
  .brand-emblem img { width: 8.8rem; height: 11.4rem; }
  .hero-brand-panel > p { margin-top: .7rem; font-size: 2rem; }
  .heading-row, .privacy-grid { gap: 2.5rem; }
  .calculator-grid, .faq-home-grid, .contact-grid { gap: 3rem; }
  .audience-card { padding: 2rem; }
  .tool-card { padding: 1.5rem; }
  }
  @media (max-width: 900px) {
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-toggle { display: flex; }
  .hero-layout { grid-template-columns: 1fr; min-height: 0; padding-block: 3.5rem; }
  .hero-brand-panel { display: none; }
  .hero h1 { font-size: 3.7rem; }
  .hero-description { max-width: 38rem; }
  .hero-grid { mask-image: linear-gradient(90deg,transparent 10%,#000); opacity: .14; }
  .value-strip .container { gap: 1rem; }
  .value-strip span { gap: .55rem; font-size: .875rem; }
  .section { padding-block: 4.5rem; }
  .heading-row { grid-template-columns: 1fr; gap: 1.2rem; }
  .heading-row p { max-width: 38rem; }
  .intro-grid { gap: 1.5rem; }
  .intro-grid h3 { font-size: 1.2rem; }
  .audience-card h3 { font-size: 1.5rem; }
  .audience-card { padding: 1.7rem; }
  .tool-grid { grid-template-columns: repeat(2,1fr); }
  .calculator-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .calculator-grid > div:first-child > p:not(.eyebrow) { max-width: 38rem; }
  .calculator-card { width: min(100%, 35rem); }
  .steps-grid { gap: 1.5rem; }
  .steps-grid h3 { font-size: 1.15rem; }
  .privacy-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .privacy-grid > div:last-child { margin-left: 3.7rem; max-width: 38rem; }
  .faq-home-grid { gap: 2.5rem; grid-template-columns: 1fr 1.3fr; }
  .download-grid { gap: 2rem; }
  .download-stores .store-badges { flex-direction: column; align-items: start; }
  .contact-grid { gap: 2rem; }
  .contact-grid h2 { font-size: 2.25rem; }
  .contact-links strong { font-size: .9375rem; }
  .footer-top { gap: 1.5rem; grid-template-columns: 1.25fr .8fr 1fr; }
  }
  @media (max-width: 650px) {
  .container { width: calc(100% - 2.5rem); }
  .header-inner { min-height: 4.6rem; gap: .7rem; }
  .brand > img { width: 1.8rem; height: 2.4rem; }
  .brand > span { font-size: 1.25rem; }
  .brand small { font-size: .75rem; letter-spacing: 0; }
  .header-cta { min-height: 2.5rem; font-size: .875rem; padding: .55rem .8rem; }
  .menu-toggle { width: 2.5rem; height: 2.5rem; }
  .mobile-nav { padding-inline: 1.25rem; max-height: calc(100dvh - 4.6rem); }
  section[id], article[id], details[id], main[id] { scroll-margin-top: 5.8rem; }
  .hero-layout { padding-block: 2.8rem 2.6rem; }
  .hero .eyebrow { font-size: .75rem; letter-spacing: .055em; margin-bottom: 1.2rem; }
  .hero h1 { font-size: clamp(2.65rem,9vw,3.7rem); }
  .hero-description { margin-top: 1.35rem; font-size: 1rem; }
  .hero-actions { gap: 1rem; margin-top: 1.7rem; }
  .hero-actions .text-link { font-size: .875rem; }
  .hero-store-area { margin-top: 1.7rem; }
  .store-badge { min-width: 9.9rem; gap: .35rem; padding-inline: .5rem .7rem; }
  .store-badge > svg { width: 1.7rem; height: 1.7rem; }
  .store-badge strong { font-size: 1.0625rem; }
  .store-badge small { font-size: .8125rem; }
  .value-strip .container { grid-template-columns: repeat(2,1fr); gap: 1.15rem 1rem; padding-block: 1.4rem; }
  .value-strip span { font-size: .875rem; }
  .section { padding-block: 3.5rem; }
  .section-heading { margin-bottom: 2rem; }
  .eyebrow { font-size: .75rem; letter-spacing: .055em; }
  .section-intro, .heading-row p { font-size: 1rem; }
  h2 { font-size: clamp(1.8rem,6.5vw,2.4rem); }
  .intro-grid { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 1.8rem; }
  .intro-grid article { border-bottom: 1px solid var(--line); padding-bottom: 1.8rem; }
  .intro-grid article:last-child { border: 0; padding-bottom: 0; }
  .intro-grid .icon { margin-bottom: .8rem; }
  .intro-grid h3 { font-size: 1.3rem; }
  .intro-grid p { margin-bottom: 1rem; }
  .audience-grid { grid-template-columns: 1fr; gap: 1rem; }
  .audience-card { padding: 1.65rem; }
  .audience-card-top { margin-bottom: 1.25rem; }
  .audience-card h3 { font-size: 1.6rem; }
  .audience-card ul { margin: 1.3rem 0 1.5rem; }
  .professions { margin-top: 2rem; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 1.65rem; }
  .tool-card > p { margin-bottom: 1.1rem; }
  .tool-icon { margin-bottom: 1rem; }
  .section-note { text-align: left; }
  .calculator-section { padding-block: 3.5rem; }
  .calculator-grid { gap: 2rem; }
  .calculator-card { padding: 1.4rem; }
  .measurement-inputs { gap: .55rem; }
  .measurement-inputs label { font-size: .875rem; }
  .measurement-inputs input { padding-left: .6rem; }
  .calculation-result output { font-size: 2.5rem; }
  .calculator-helper { font-size: .875rem; }
  .steps-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .steps-grid li { padding-top: 1.1rem; }
  .steps-grid li > span { margin-bottom: .5rem; }
  .steps-grid h3 { font-size: 1.25rem; }
  .privacy-section { padding-block: 2.5rem; }
  .privacy-heading { gap: .85rem; }
  .privacy-heading > .icon { width: 1.7rem; height: 1.7rem; }
  .privacy-heading h2 { font-size: 1.7rem; }
  .privacy-grid > div:last-child { margin-left: 0; }
  .faq-home-grid { grid-template-columns: 1fr; gap: 2rem; }
  .faq-home-grid > div:first-child > p:not(.eyebrow) { max-width: 32rem; }
  .faq-home-grid .button { margin-top: 1.3rem; }
  .faq-item > summary { padding-block: 1.15rem; }
  .faq-answer { padding: 0 1rem 1.25rem 0; }
  .download-section { padding-block: 3.3rem; }
  .download-grid { grid-template-columns: 1fr; gap: 2rem; }
  .download-stores .store-badges { flex-direction: row; }
  .contact-section { padding-block: 3.5rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-grid h2 { font-size: 2.1rem; }
  .contact-links > a { gap: .8rem; }
  .contact-icon { padding: .65rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem 1.3rem; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
  .footer-top > div:first-child p br { display: none; }
  .footer-bottom { flex-direction: column; gap: .8rem; font-size: .8125rem; }
  .footer-bottom nav { gap: .65rem 1.2rem; }
  .page-heading { padding-block: 1.8rem 2.3rem; }
  .breadcrumb { margin-bottom: 2rem; font-size: .8125rem; }
  .page-heading h1 { font-size: 2.65rem; }
  .page-heading > div > p:last-child { font-size: 1rem; }
  .faq-directory { padding-block: 2rem 3rem; }
  .faq-filter-bar { gap: .9rem; padding-bottom: 1.2rem; }
  .faq-filters { gap: .45rem; }
  .faq-filters button { font-size: .875rem; padding-inline: .75rem; }
  .faq-group { margin-top: 2.1rem; }
  .faq-group > h2 { font-size: 1.35rem; gap: .65rem; margin-bottom: 1rem; }
  .faq-support { flex-direction: column; align-items: start; gap: 1.2rem; padding: 1.5rem; margin-top: 2.5rem; }
  .faq-support h2 { font-size: 1.35rem; }
  .legal-main { width: calc(100% - 2.5rem); padding-block: 1.8rem 3rem; }
  .legal-main > p { font-size: 1rem; }
  }
  @media (max-width: 400px) {
  .header-cta { display: none; }
  .menu-toggle { margin-left: auto; }
  }
  @media (max-width: 360px) {
  .hero h1 { font-size: 2.45rem; }
  .store-badges { gap: .5rem; }
  .store-badge { min-width: 0; padding-inline: .5rem .65rem; gap: .3rem; }
  .store-badge > svg { width: 1.5rem; }
  .store-badge small { font-size: .75rem; }
  .store-badge strong { font-size: 1rem; }
  .audience-card { padding: 1.3rem; }
  .audience-card h3 { font-size: 1.4rem; }
  .calculator-card { padding: 1.1rem; }
  .measurement-inputs { grid-template-columns: 1fr; gap: .8rem; }
  .calculator-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
  .calculator-actions .button { width: 100%; min-width: 0; padding-inline: .8rem; overflow-wrap: anywhere; }
  .footer-top { grid-template-columns: 1fr; }
  }
  @media (max-width: 256px) {
  .value-strip .container { grid-template-columns: 1fr; }
  .header-inner .brand > img, .header-inner .brand small { display: none; }
  .search-input > .icon { display: none; }
  .search-input input { padding-left: .8rem; }
  }
}

@container (max-width: 56.25em) {
  .puantaj-flow { grid-template-columns: minmax(0,1fr); gap: 2rem; }
  .puantaj-intro { max-width: 38rem; }
}
@container (max-width: 40.625em) {
  .puantaj-flow { padding: 1.5rem; }
  .puantaj-steps { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
  .puantaj-steps li { position: relative; padding-left: 3rem; }
  .puantaj-steps li > span { position: absolute; top: 0; left: 0; }
  .puantaj-steps h4 { font-size: 1.125rem; margin-bottom: .5rem; }
  .puantaj-steps p { font-size: 1rem; }
  .puantaj-permission { margin-top: 1.5rem; }
}
@container (max-width: 16em) {
  .puantaj-flow { padding: 1rem; }
  .puantaj-steps li { padding-left: 0; }
  .puantaj-steps li > span { position: static; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .puantaj-flow { grid-template-columns: minmax(0,1fr); gap: 2rem; }
    .puantaj-intro { max-width: 38rem; }
  }
  @media (max-width: 650px) {
    .puantaj-flow { padding: 1.5rem; }
    .puantaj-steps { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
    .puantaj-steps li { position: relative; padding-left: 3rem; }
    .puantaj-steps li > span { position: absolute; top: 0; left: 0; }
    .puantaj-steps h4 { font-size: 1.125rem; margin-bottom: .5rem; }
    .puantaj-steps p { font-size: 1rem; }
    .puantaj-permission { margin-top: 1.5rem; }
  }
}