/* W18 karting landing + 5-step flow. Tokens only (samf-tokens.css); logical properties so Arabic RTL mirrors by itself. */
.samf-karting { max-inline-size: 56rem; padding-block: 3rem 4rem; color: var(--samf-color-text); font-family: var(--samf-font-body); }
.samf-karting h1, .samf-karting h2, .samf-karting legend { font-family: var(--samf-font-display); }
.samf-karting h1 { font-size: var(--samf-fs-h2, 2.5rem); line-height: 1.15; margin-block: .25rem 1rem; }
.samf-karting-kicker, .samf-karting-stepno { color: var(--samf-color-primary); font-weight: 600; margin-block: 0 .25rem; }
.samf-karting-lead { color: var(--samf-color-muted); font-size: 1.125rem; max-inline-size: 40rem; }
.samf-karting-note, .samf-karting-hint { color: var(--samf-color-muted); font-size: .875rem; }

.samf-karting-hero { background: var(--samf-color-services); border-radius: var(--samf-radius-lg); padding: 3rem 2rem; margin-block-end: 2rem; }
.samf-karting-steps { background: var(--samf-color-surface); border-radius: var(--samf-radius-lg); padding: 2rem; }
.samf-karting-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .samf-karting-steps ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.samf-karting-steps li { display: flex; gap: .75rem; align-items: flex-start; }
.samf-karting-num { flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--samf-radius-pill); background: var(--samf-color-primary); color: var(--samf-color-on-primary); display: grid; place-items: center; font-weight: 700; }

.samf-karting-card { background: var(--samf-color-surface); border-radius: var(--samf-radius-lg); padding: 2rem; border: 1px solid var(--samf-color-border); }
.samf-karting fieldset { border: 0; padding: 0; margin-block: 0 1.5rem; }
.samf-karting legend { font-size: 1.25rem; margin-block-end: .75rem; }
.samf-karting-field { margin-block-end: 1rem; }
.samf-karting-field label, .samf-karting-check label { font-weight: 600; }
.samf-karting-req { font-weight: 400; font-size: .875rem; color: var(--samf-color-muted); }
.samf-karting-field :is(input, select) { display: block; inline-size: 100%; min-block-size: 2.75rem; margin-block-start: .25rem; padding-inline: 1rem; background: var(--samf-color-page); color: var(--samf-color-text); border: 1px solid var(--samf-color-border-strong); border-radius: var(--samf-radius); }
.samf-karting-check { display: grid; grid-template-columns: auto 1fr; gap: .5rem .75rem; align-items: start; margin-block-end: 1rem; }
.samf-karting-check input { inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: .125rem; accent-color: var(--samf-color-primary); }
.samf-karting-check .samf-karting-error { grid-column: 2; }
.samf-karting-check a, .samf-karting-alert a { color: var(--samf-color-primary); text-decoration: underline; }
.samf-karting [aria-invalid="true"] { border-color: var(--samf-color-danger); border-width: 2px; }
.samf-karting-error { color: var(--samf-color-danger); font-weight: 600; margin-block: .25rem 0; }

.samf-karting-alert { border-radius: var(--samf-radius); padding: 1rem 1.25rem; margin-block-end: 1.5rem; background: var(--samf-color-surface); border: 2px solid var(--samf-color-danger); }
.samf-karting-alert-warn { border-color: var(--samf-color-primary); }
.samf-karting-alert ul { margin: 0; padding-inline-start: 1.25rem; }
.samf-karting-alert h2 { margin-block: 0 .5rem; font-size: 1.125rem; }

.samf-karting-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 1.5rem; }
.samf-karting-btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding-inline: 1.75rem; border: 2px solid var(--samf-color-primary); border-radius: var(--samf-radius-pill); background: var(--samf-color-primary); color: var(--samf-color-on-primary); font-weight: 700; text-decoration: none; cursor: pointer; }
.samf-karting-btn:hover { background: var(--samf-color-primary-hover); }
.samf-karting-btn-ghost { background: transparent; color: var(--samf-color-primary); }
.samf-karting-btn-ghost:hover { background: var(--samf-color-surface); }
.samf-karting-reference { font-size: 2rem; margin-block: .5rem 1rem; color: var(--samf-color-primary); }
.samf-karting-instructions { padding-inline-start: 1.5rem; display: grid; gap: .75rem; }

.samf-karting :is(a, button, input, select, textarea):focus-visible, .samf-karting-alert:focus { outline: 3px solid var(--samf-color-focus); outline-offset: 3px; }
@media (max-width: 40rem) {
  .samf-karting-hero, .samf-karting-card, .samf-karting-steps { padding: 1.5rem 1rem; }
  .samf-karting-actions > * { flex: 1 1 100%; }
}
@media (max-width: 1024px) {
  .samf-karting { padding-block: 2rem 3rem; }
  .samf-karting h1 { font-size: var(--samf-fs-h3); }
  .samf-karting-hero { padding: 2rem 1.5rem; }
}
@media (max-width: 375px) {
  .samf-karting-reference { font-size: var(--samf-fs-h4); overflow-wrap: anywhere; }
  .samf-karting-field :is(input, select) { max-inline-size: 100%; }
}

/* web-gaps2 karting campaign landing (dark, full-bleed hero, accordion, academy). Logical properties; tokens only. */
.samf-karting-page { max-inline-size: none; padding: 0 0 4rem; background: var(--samf-color-page); }
.samf-karting-page > section:not(.samf-karting-hero) { max-inline-size: 64rem; margin-inline: auto; margin-block: 2rem 0; padding-inline: 1rem; }
.samf-karting-page .samf-karting-hero { position: relative; isolation: isolate; min-block-size: 32rem; display: flex; align-items: flex-end; border-radius: 0; margin: 0; padding: 0; overflow: hidden; background: var(--samf-color-page); }
.samf-karting-hero-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2; }
.samf-karting-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--samf-color-page) 5%, transparent 80%), linear-gradient(to inline-end, rgba(0,0,0,.55), transparent 70%); }
.samf-karting-hero-body { inline-size: 100%; max-inline-size: 64rem; margin-inline: auto; padding: 5rem 1rem 3rem; position: relative; }
.samf-karting-hero h1 { font-size: clamp(3rem, 9vw, 6rem); line-height: 1; text-transform: uppercase; margin-block: .25rem; }
.samf-karting-sub { font-family: var(--samf-font-display); font-size: clamp(1.25rem, 3vw, 2rem); margin-block: 0 1rem; }
.samf-karting-toggle { position: absolute; inset-block-start: 1.25rem; inset-inline-end: 1rem; padding: .4rem 1.1rem; border-radius: var(--samf-radius-pill); background: var(--samf-color-primary); color: var(--samf-color-on-primary); font-weight: 700; text-decoration: none; }
.samf-karting-btn { display: inline-block; padding: .7rem 1.6rem; border-radius: var(--samf-radius); background: var(--samf-color-primary); color: var(--samf-color-on-primary); font-weight: 700; text-decoration: none; }
.samf-karting-btn:focus-visible, .samf-karting-toggle:focus-visible, .samf-karting-acc summary:focus-visible { outline: 3px solid var(--samf-color-text); outline-offset: 2px; }
.samf-karting-overview { border: 1px solid var(--samf-color-border); border-radius: var(--samf-radius-lg); background: var(--samf-color-surface); padding: 2rem; }
.samf-karting-overview > .samf-karting-btn { margin-block-start: 1.5rem; }
.samf-karting-acc { border-block-end: 1px solid var(--samf-color-border); padding-block: .5rem; }
.samf-karting-acc summary { cursor: pointer; color: var(--samf-color-primary); font-weight: 700; padding-block: .5rem; }
.samf-karting-acc p { color: var(--samf-color-muted); margin-block: .25rem .75rem; }
.samf-karting-academy { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; border-radius: var(--samf-radius-lg); background: var(--samf-color-services); overflow: hidden; }
.samf-karting-academy-text { padding: 2rem; }
.samf-karting-academy h2 { font-size: clamp(2rem, 5vw, 3rem); text-transform: uppercase; line-height: 1.05; }
.samf-karting-academy-lead { font-weight: 700; }
.samf-karting-academy-img { inline-size: 100%; block-size: 100%; max-block-size: 26rem; object-fit: cover; }
@media (min-width: 64rem) { .samf-karting-academy { grid-template-columns: 1.2fr 1fr; } }
@media (max-width: 30rem) { .samf-karting-page .samf-karting-hero { min-block-size: 28rem; } }

/* visual-fix-1108 (G7): karting landing, measured against Figma "Homepage - Desktop/Tablet/Mobile" (322:11422 / 322:11485 / 322:11548).
   The campaign photo files in /images/karting are placeholders (hero.jpg blue-sky photo, academy.jpg a green pattern, no driver cut-out): left: assets.
   The hero photo gets the Figma green duotone treatment instead. */
.samf-karting-page { --_chev: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M4 1.5 8.5 6 4 10.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"); --_line: var(--samf-figma-white-35); padding-block-end: 80px; }
/* Hero: 750 high, copy bottom-left in the 1420 column + 40 inner padding (x 194 at 1728), green duotone photo fading into the page colour. */
.samf-karting-page .samf-karting-hero { min-block-size: 750px; }
.samf-karting-hero-img { object-position: 50% 40%; filter: grayscale(1) contrast(1.2) brightness(.4); }
.samf-karting-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--samf-figma-light-green), #00402d); mix-blend-mode: color; opacity: .6; }
.samf-karting-hero::after { z-index: -1; background: linear-gradient(to top, var(--samf-color-page) 2%, transparent 45%), linear-gradient(to inline-end, rgba(17, 31, 29, .8), rgba(17, 31, 29, .1) 75%); }
.samf-karting-hero-body { position: static; max-inline-size: 1500px; padding: 5rem 80px 40px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; }
.samf-karting-kicker { margin: 0; font-size: clamp(1.5rem, 2vw + 1rem, 2.875rem); line-height: 1.1; font-style: italic; font-weight: 300; letter-spacing: -.02em; color: var(--samf-figma-performance-green); text-transform: uppercase; }
.samf-karting-hero h1 { max-inline-size: 5.4em; font-size: clamp(2.75rem, 6vw + 1.25rem, 7.5rem); line-height: .92; font-style: italic; font-weight: 800; letter-spacing: -.04em; text-wrap: balance; margin-block: 0 .1em; }
.samf-karting-hero h1::first-line { font-weight: 300; }
.samf-karting-sub { font-size: clamp(1.5rem, 2.2vw + 1rem, 3.5rem); line-height: 1.1; font-style: italic; font-weight: 300; letter-spacing: -.02em; text-transform: uppercase; margin-block: 0 24px; }
.samf-karting-hero .samf-karting-lead { max-inline-size: 36rem; margin-block: 0 24px; font-size: var(--samf-fs-body); line-height: 20px; font-weight: 300; color: var(--samf-color-text); }
:lang(ar) .samf-karting-hero h1, [dir="rtl"] .samf-karting-hero h1, [dir="rtl"] .samf-karting-sub, [dir="rtl"] .samf-karting-kicker { font-style: normal; letter-spacing: 0; text-transform: none; text-wrap: balance; }
:lang(ar) .samf-karting-hero h1::first-line, [dir="rtl"] .samf-karting-hero h1::first-line { font-weight: 800; }
[dir="rtl"] .samf-karting-hero h1 { line-height: 1.25; margin-block-start: .1em; }
[dir="rtl"] .samf-karting-kicker, [dir="rtl"] .samf-karting-sub { line-height: 1.3; }
[dir="rtl"] .samf-karting-kicker { margin-block-end: .25em; }
/* Buttons: Figma Button light = light green, 15/20 padding, radius 8, 14 semibold ink uppercase + 12px chevron. */
.samf-karting-page .samf-karting-btn, .samf-karting-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; min-block-size: 50px; padding: 15px 20px; border: 0; border-radius: 8px; background: var(--samf-figma-light-green); color: var(--samf-color-ink); font-family: var(--samf-font-body); font-size: var(--samf-fs-body); line-height: 20px; font-weight: 600; text-transform: uppercase; text-decoration: none; }
:lang(ar) .samf-karting-btn, [dir="rtl"] .samf-karting-btn { text-transform: none; }
.samf-karting-page .samf-karting-btn::after { content: ""; inline-size: 12px; block-size: 12px; flex: none; background: currentColor; -webkit-mask: var(--_chev) center / contain no-repeat; mask: var(--_chev) center / contain no-repeat; }
[dir="rtl"] .samf-karting-page .samf-karting-btn::after { transform: scaleX(-1); }
.samf-karting-btn:hover { background: var(--samf-color-primary-hover); color: var(--samf-color-ink); }
.samf-karting-btn-ghost { background: transparent; color: var(--samf-color-primary); border: 2px solid var(--samf-color-primary); }
.samf-karting-toggle { padding: 10px 20px; font-size: 16px; line-height: 16px; border-radius: 20px; inset-block-start: 24px; inset-inline-end: 40px; text-transform: uppercase; }
:lang(ar) .samf-karting-toggle, [dir="rtl"] .samf-karting-toggle { text-transform: none; }
/* Sections: 1420 column (page gutter 40), glass border rgba(255,255,255,.35), radius 32, padding 40. */
.samf-karting-page > section:not(.samf-karting-hero) { max-inline-size: 1420px; inline-size: calc(100% - 80px); margin-inline: auto; margin-block: 40px 0; box-sizing: border-box; }
.samf-karting-page > .samf-karting-overview { border: 1px solid var(--_line); border-radius: 32px; background: rgba(255, 255, 255, .01); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.samf-karting-overview h2 { margin: 0; font-size: var(--samf-fs-h3); line-height: 50px; letter-spacing: -.02em; text-transform: uppercase; }
.samf-karting-h2-lead { font-weight: 300; color: var(--samf-figma-performance-green); }
.samf-karting-h2-accent { font-weight: 600; color: var(--samf-color-text); }
:lang(ar) .samf-karting-overview h2, [dir="rtl"] .samf-karting-overview h2 { text-transform: none; letter-spacing: 0; line-height: 1.3; }
.samf-karting-overview > .samf-karting-btn { margin-block-start: 0; }
.samf-karting-acc { inline-size: 100%; border-block-end: 1px solid var(--samf-figma-white-15); padding-block: 0 24px; margin-block-end: 4px; }
.samf-karting-acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--samf-font-display); font-size: var(--samf-fs-h5); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; color: var(--samf-figma-performance-green); padding-block: 0; margin-block-end: 0; }
.samf-karting-acc[open] > summary { margin-block-end: 16px; }
.samf-karting-acc summary::-webkit-details-marker { display: none; }
.samf-karting-acc summary::after { content: ""; flex: none; inline-size: 12px; block-size: 12px; background: currentColor; -webkit-mask: var(--_chev) center / contain no-repeat; mask: var(--_chev) center / contain no-repeat; transform: rotate(90deg); }
.samf-karting-acc[open] > summary::after { transform: rotate(-90deg); }
.samf-karting-acc p { color: var(--samf-color-text); font-size: 16px; line-height: 1.25; margin: 0; }
.samf-karting-acc:last-of-type { border-block-end: 0; padding-block-end: 0; }
/* Academy: gradient #00402d -> #172a26, border .35, radius 32, text left (title 88/80 extra-bold italic), photo column max 485 at the end. */
.samf-karting-page > .samf-karting-academy { grid-template-columns: minmax(0, 1fr) minmax(0, 485px); gap: 24px; align-items: stretch; border: 1px solid var(--_line); border-radius: 32px; background: linear-gradient(to bottom, #00402d, #172a26); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 0; padding-inline-start: 40px; }
.samf-karting-academy-text { padding: 40px 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.samf-karting-academy-text > * { margin: 0; }
.samf-karting-academy-text > .samf-karting-btn { align-self: flex-start; }
.samf-karting-academy h2 { font-size: clamp(2.375rem, 5.1vw, 5.5rem); line-height: .91; letter-spacing: -.04em; font-style: italic; font-weight: 800; }
:lang(ar) .samf-karting-academy h2, [dir="rtl"] .samf-karting-academy h2 { font-style: normal; letter-spacing: 0; line-height: 1.1; text-transform: none; }
.samf-karting-academy-text p { font-size: var(--samf-fs-body); line-height: 20px; font-weight: 300; }
.samf-karting-academy-lead { font-size: 16px !important; font-weight: 500 !important; }
.samf-karting-academy-img { inline-size: 100%; block-size: 100%; max-block-size: 688px; aspect-ratio: 486 / 689; object-fit: cover; align-self: end; justify-self: end; border-end-end-radius: 32px; box-shadow: -50px 50px 94.5px rgba(0, 0, 0, .55); }
[dir="rtl"] .samf-karting-academy-img { box-shadow: 50px 50px 94.5px rgba(0, 0, 0, .55); border-end-end-radius: 0; border-end-start-radius: 32px; }
.samf-karting-steps h2 { font-size: var(--samf-fs-h4); line-height: 1.2; font-weight: 600; margin: 0 0 24px; }
.samf-karting-steps ol { gap: 24px; }
.samf-karting-page > .samf-karting-steps { background: var(--samf-color-surface); border: 0; border-radius: 32px; padding: 32px 40px; }
@media (max-width: 1024px) {
  .samf-karting-page .samf-karting-hero { min-block-size: 500px; }
  .samf-karting-hero-body { padding-inline: 64px; }
  .samf-karting-page > .samf-karting-academy { grid-template-columns: minmax(0, 1fr); padding-inline: 40px; }
  .samf-karting-academy-text { padding-block: 40px 0; }
  .samf-karting-academy-img { max-inline-size: 485px; justify-self: center; border-radius: 0 0 32px 32px; box-shadow: none; }
  .samf-karting-toggle { inset-inline-end: 24px; }
}
@media (max-width: 575px) {
  .samf-karting-page .samf-karting-hero { min-block-size: 480px; }
  .samf-karting-hero-body { padding: 4rem 20px 32px; }
  .samf-karting-toggle { inset-block-start: 16px; inset-inline-end: 20px; }
  .samf-karting-page > section:not(.samf-karting-hero) { inline-size: calc(100% - 40px); margin-block: 24px 0; }
  .samf-karting-page > .samf-karting-overview { padding: 20px; }
  .samf-karting-overview h2 { font-size: 38px; line-height: 32px; letter-spacing: -.02em; font-style: italic; }
  [dir="rtl"] .samf-karting-overview h2 { font-style: normal; line-height: 1.3; letter-spacing: 0; }
  .samf-karting-acc summary { font-size: 18px; }
  .samf-karting-page > .samf-karting-academy { padding-inline: 20px; }
  .samf-karting-steps h2 { font-size: var(--samf-fs-h4); line-height: 1.2; font-weight: 600; margin: 0 0 24px; }
.samf-karting-steps ol { gap: 24px; }
.samf-karting-page > .samf-karting-steps { padding: 24px 20px; }
}

/* visual-fix-1108 (G7): karting step pages (Region & Age, Contact Details, Instructions, Thank you), measured against Figma karting-* frames:
   880 centered column, 64/68 italic bold title, bordered glass cards radius 32, green 24 legends, white input tiles radius 8, light-green buttons. */
.samf-karting:not(.samf-karting-page) { --_chev: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M4 1.5 8.5 6 4 10.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"); box-sizing: border-box; inline-size: calc(100% - 40px); max-inline-size: 880px; margin-inline: auto; padding-block: 64px 80px; }
.samf-karting:not(.samf-karting-page) h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4rem); line-height: 1.0625; font-style: italic; font-weight: 800; letter-spacing: -.04em; margin-block: 0 24px; text-wrap: balance; }
.samf-karting:not(.samf-karting-page) .samf-karting-stepno { font-size: var(--samf-fs-h5); line-height: 1.2; font-style: italic; font-weight: 300; text-transform: uppercase; color: var(--samf-figma-performance-green); margin-block: 0 8px; }
.samf-karting:not(.samf-karting-page) .samf-karting-note, .samf-karting:not(.samf-karting-page) .samf-karting-hint { font-size: var(--samf-fs-body); line-height: 20px; color: var(--samf-color-text); opacity: .8; }
.samf-karting:not(.samf-karting-page) .samf-karting-card { border: 1px solid var(--samf-figma-white-35); border-radius: 32px; background: rgba(255, 255, 255, .01); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 32px; margin-block-end: 24px; }
.samf-karting:not(.samf-karting-page) .samf-karting-card h1 { margin-block-start: 0; }
.samf-karting:not(.samf-karting-page) legend, .samf-karting:not(.samf-karting-page) .samf-karting-card h2 { font-size: var(--samf-fs-h5); line-height: 1.2; font-weight: 600; color: var(--samf-figma-performance-green); margin-block: 0 16px; }
.samf-karting:not(.samf-karting-page) .samf-karting-field { margin-block-end: 24px; }
.samf-karting:not(.samf-karting-page) .samf-karting-field label, .samf-karting:not(.samf-karting-page) .samf-karting-check label { font-size: var(--samf-fs-body); line-height: 20px; font-weight: 600; }
.samf-karting:not(.samf-karting-page) .samf-karting-field :is(input, select) { box-sizing: border-box; min-block-size: 56px; margin-block-start: 8px; padding-inline: 16px; background: #fff; color: var(--samf-color-ink); border: 1px solid transparent; border-radius: 8px; font-family: var(--samf-font-body); font-size: var(--samf-fs-body); }
.samf-karting:not(.samf-karting-page) [aria-invalid="true"] { border: 2px solid var(--samf-color-danger); }
.samf-karting:not(.samf-karting-page) .samf-karting-actions { gap: 16px; margin-block-start: 32px; justify-content: flex-start; }
.samf-karting:not(.samf-karting-page) .samf-karting-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; min-block-size: 50px; padding: 15px 20px; border: 1px solid transparent; border-radius: 8px; background: var(--samf-figma-light-green); color: var(--samf-color-ink); font-family: var(--samf-font-body); font-size: var(--samf-fs-body); line-height: 20px; font-weight: 600; text-transform: uppercase; }
.samf-karting:not(.samf-karting-page) .samf-karting-btn::after { content: ""; inline-size: 12px; block-size: 12px; flex: none; background: currentColor; -webkit-mask: var(--_chev) center / contain no-repeat; mask: var(--_chev) center / contain no-repeat; }
[dir="rtl"] .samf-karting:not(.samf-karting-page) .samf-karting-btn::after { transform: scaleX(-1); }
.samf-karting:not(.samf-karting-page) .samf-karting-btn:hover { background: var(--samf-color-primary-hover); color: var(--samf-color-ink); }
.samf-karting:not(.samf-karting-page) .samf-karting-btn-ghost { background: transparent; color: var(--samf-color-text); border-color: var(--samf-figma-white-35); }
.samf-karting:not(.samf-karting-page) .samf-karting-btn-ghost:hover { background: var(--samf-figma-white-15); color: var(--samf-color-text); }
.samf-karting:not(.samf-karting-page) .samf-karting-alert { border: 1px solid var(--samf-figma-performance-green); border-radius: 16px; background: rgba(0, 194, 90, .12); padding: 16px 20px; }
.samf-karting:not(.samf-karting-page) .samf-karting-alert-error { border-color: var(--samf-color-danger); background: rgba(220, 38, 38, .12); }
.samf-karting:not(.samf-karting-page) .samf-karting-alert h2 { margin-block: 0 8px; color: var(--samf-color-text); font-size: 16px; }
.samf-karting:not(.samf-karting-page) .samf-karting-instructions { margin: 0 0 8px; padding-inline-start: 24px; gap: 16px; font-size: 16px; line-height: 24px; }
.samf-karting:not(.samf-karting-page) .samf-karting-reference { font-size: clamp(1.75rem, 3vw + 1rem, 2.875rem); font-style: italic; font-weight: 800; letter-spacing: -.02em; color: var(--samf-figma-performance-green); }
:lang(ar) .samf-karting:not(.samf-karting-page) h1, [dir="rtl"] .samf-karting:not(.samf-karting-page) h1 { font-style: normal; letter-spacing: 0; line-height: 1.25; }
:lang(ar) .samf-karting:not(.samf-karting-page) .samf-karting-stepno, [dir="rtl"] .samf-karting:not(.samf-karting-page) .samf-karting-stepno, [dir="rtl"] .samf-karting:not(.samf-karting-page) .samf-karting-btn { font-style: normal; text-transform: none; }
@media (max-width: 575px) {
  .samf-karting:not(.samf-karting-page) { inline-size: calc(100% - 40px); padding-block: 32px 48px; }
  .samf-karting:not(.samf-karting-page) h1 { font-size: 32px; line-height: 36px; }
  .samf-karting:not(.samf-karting-page) .samf-karting-card { padding: 24px 20px; border-radius: 24px; }
  .samf-karting:not(.samf-karting-page) .samf-karting-actions > .samf-karting-btn { flex: 1 1 100%; }
}

/* visual-fix-1108 (G7): light theme (the site default). The hero photo and the academy gradient stay dark in both themes, so their copy is white;
   borders and input tiles switch to the theme border tokens, which are visible on a light page. */
.samf-karting-hero, .samf-karting-hero h1, .samf-karting-hero .samf-karting-sub, .samf-karting-hero .samf-karting-lead,
.samf-karting-academy, .samf-karting-academy h2, .samf-karting-academy-text p { color: var(--samf-figma-white); }
.samf-karting-academy { border-color: var(--samf-figma-white-35) !important; }
html[data-theme="light"] .samf-karting-page { --_line: var(--samf-color-border-strong); }
html[data-theme="light"] .samf-karting-acc { border-color: var(--samf-color-border); }
html[data-theme="light"] .samf-karting:not(.samf-karting-page) .samf-karting-card { border-color: var(--samf-color-border-strong); background: var(--samf-color-surface); }
html[data-theme="light"] .samf-karting:not(.samf-karting-page) .samf-karting-field :is(input, select) { border-color: var(--samf-color-border-strong); }
html[data-theme="light"] .samf-karting:not(.samf-karting-page) .samf-karting-btn-ghost { border-color: var(--samf-color-border-strong); }
html[data-theme="light"] .samf-karting:not(.samf-karting-page) .samf-karting-alert { background: var(--samf-color-surface); }
html[data-theme="light"] .samf-karting-kicker, html[data-theme="light"] .samf-karting-h2-lead, html[data-theme="light"] .samf-karting-acc summary, html[data-theme="light"] .samf-karting:not(.samf-karting-page) .samf-karting-stepno,
html[data-theme="light"] .samf-karting:not(.samf-karting-page) legend, html[data-theme="light"] .samf-karting:not(.samf-karting-page) .samf-karting-card h2, html[data-theme="light"] .samf-karting:not(.samf-karting-page) .samf-karting-reference { color: var(--samf-color-primary); }
html[data-theme="light"] .samf-karting-hero .samf-karting-kicker { color: var(--samf-figma-light-green); }
html[data-theme="light"] .samf-karting-acc p, html[data-theme="light"] .samf-karting-h2-accent { color: var(--samf-color-text); }