/* UI-022 "native" finish (31 Oct 2026). Loaded straight after desk-ui2.css (main.php, views/signup.php); only visual rules, no copy,
   no flow. Remove this one <link> and the Desk looks exactly like UI-021 again. Benchmark and sources: BENCHMARK.md (UI-022 pack).
   What it adopts from the best iOS / Android apps, in Kifalme CI (Coal Black, Brilliant Red, Firey Red, White; Avenir Next
   Condensed Bold headings, Open Sans text):
   1 a bottom tab bar on phones (Instagram, Revolut, WhatsApp), the create action in the middle; a full-screen flow with a close
     button while an ad is being made (no tab bar under it)
   2 capsule buttons, 52px, one red primary, tonal secondary, a press state (scale + Firey Red), Apple HIG / Material 3
   3 grouped inset lists (iOS Settings) for one-of-many choices: leading icon tile, inset hairline, trailing radio or tick
   4 a real segmented control (track + thumb) for short number choices, filter chips with a tick for many-of-many
   5 fields 52px, 12px corners, 3:1 edge, a 2px red edge on focus; questions as headlines (WhatsApp Flows, Duolingo)
   6 a segmented progress bar for the four steps (Duolingo), a sticky full-width action bar with a blurred backdrop (Airbnb, Uber)
   7 large titles in the display face, tabular numbers, amounts in the display face (Revolut, Cash App)
   8 bottom sheets with a grabber and 28px top corners (Material 3), 48px targets everywhere (Altura rule), motion 120 to 200ms
   Colours: WCAG AA checked by tests/V56j022UiTest.php. White on Brilliant Red #FF0000 is 4.0:1 (fails AA for button text), so the
   button fill is Brilliant Red #FF0000 (4.0:1, large bold labels only; UI-023b CI), pressed Firey Red #A50404; red text is #FF4136 on dark surfaces and #D00000 on light. */

/* fonts: Apple devices use their own Avenir Next Condensed Bold first; elsewhere a self-hosted OFL stand-in (assets/fonts) */
@font-face{font-family:"K Display";src:local("Avenir Next Condensed Bold"),local("AvenirNextCondensed-Bold"),url(../fonts/barlow-semi-condensed-700-latin.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"K Text";src:url(../fonts/open-sans-var-latin.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

/* tokens (dark is the base, as desk-v56.css) */
.k56{--bg:#0C0B0A;--panel:#1C1A18;--panel2:#2B2825;--line:#34302D;--text:#F7F5F2;--muted:#ABA6A0;--dim:#9A948E;--hot:#FF4136;--btn:#FF0000;--btnhover:#FF0000;--btnpress:#A50404;--onbtn:#FFFFFF;--sel:#2A1513;--track:#3A3633;--tick:#7A746E;--hot-bg:rgba(255,65,54,.16);--tabbar:rgba(24,22,20,.86);--seg:#4A4541;--tile:#2B2825;--focus:#F7F5F2;--scrim:rgba(0,0,0,.55);color-scheme:dark}
@media(prefers-color-scheme:light){html:not([data-k56-theme=dark]) .k56{--bg:#F2F1EF;--panel:#FFFFFF;--panel2:#E8E6E3;--line:#DEDAD6;--text:#0C0B0A;--muted:#57524C;--dim:#68625C;--hot:#D00000;--btn:#FF0000;--btnhover:#FF0000;--btnpress:#A50404;--onbtn:#FFFFFF;--sel:#FDEDEC;--track:#D9D5D1;--tick:#857E77;--hot-bg:rgba(208,0,0,.10);--tabbar:rgba(255,255,255,.88);--seg:#FFFFFF;--tile:#F2F1EF;--focus:#0C0B0A;--scrim:rgba(12,11,10,.4);color-scheme:light}}
html[data-k56-theme=light] .k56{--bg:#F2F1EF;--panel:#FFFFFF;--panel2:#E8E6E3;--line:#DEDAD6;--text:#0C0B0A;--muted:#57524C;--dim:#68625C;--hot:#D00000;--btn:#FF0000;--btnhover:#FF0000;--btnpress:#A50404;--onbtn:#FFFFFF;--sel:#FDEDEC;--track:#D9D5D1;--tick:#857E77;--hot-bg:rgba(208,0,0,.10);--tabbar:rgba(255,255,255,.88);--seg:#FFFFFF;--tile:#F2F1EF;--focus:#0C0B0A;--scrim:rgba(12,11,10,.4);color-scheme:light}
html[data-k56-theme=dark] .k56{--bg:#0C0B0A;--panel:#1C1A18;--panel2:#2B2825;--line:#34302D;--text:#F7F5F2;--muted:#ABA6A0;--dim:#9A948E;--hot:#FF4136;--btn:#FF0000;--btnhover:#FF0000;--btnpress:#A50404;--onbtn:#FFFFFF;--sel:#2A1513;--track:#3A3633;--tick:#7A746E;--hot-bg:rgba(255,65,54,.16);--tabbar:rgba(24,22,20,.86);--seg:#4A4541;--tile:#2B2825;--focus:#F7F5F2;--scrim:rgba(0,0,0,.55);color-scheme:dark}
.k56-body{--k56-pagebg:#0C0B0A}
@media(prefers-color-scheme:light){html:not([data-k56-theme=dark]) .k56-body{--k56-pagebg:#F2F1EF}}
html[data-k56-theme=light] .k56-body{--k56-pagebg:#F2F1EF}
html[data-k56-theme=dark] .k56-body{--k56-pagebg:#0C0B0A}
.k56{--r:20px;--rc:12px;--rs:8px;--rule:var(--line);--fd:"K Display","Avenir Next Condensed","Arial Narrow",system-ui,sans-serif;--ease:cubic-bezier(.2,0,0,1);
  font-family:"K Text","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-feature-settings:normal;letter-spacing:0;background:var(--bg);-webkit-tap-highlight-color:transparent}

/* type: large titles in the display face; text in Open Sans; numbers line up */
.k56 h1{font-family:var(--fd);font-weight:700;font-size:34px;line-height:1.05;letter-spacing:0;margin:6px 0 8px}
@media(min-width:640px){.k56 h1{font-size:48px}}
.k56 h2{font-size:20px;font-weight:700;letter-spacing:-.01em}
.k56 h3{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.k56 .sub{font-size:16px;line-height:1.5;margin-bottom:24px}
.k56 .tiny{font-size:12.5px}
.k56 b,.k56 strong{font-weight:700}

/* header: brand left, round icon buttons right; on phones it stays on top with a blurred backdrop (iOS navigation bar) */
.k56-top{border-bottom:0;margin-bottom:12px;padding-bottom:8px;gap:4px;flex-wrap:nowrap;align-items:center}
.k56-top>.k56-brand{margin-right:auto;order:0}
.k56-top>.k56-nav{order:1}
.k56-top>.k56-onb-open{order:2;margin-left:0}
.k56-top>.k56-theme{order:3;margin-left:0}
.k56-top>.k56-hbtn--ops{order:4}
.k56-top>.k56-hbtn--close{order:5}
.k56-top>.k56-onb-open+.k56-theme{margin-left:0}
.k56-theme,.k56-hbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:0;border-radius:50%;
  background:radial-gradient(circle,var(--panel2) 0 19.5px,transparent 20px);box-shadow:none;color:var(--text);cursor:pointer;text-decoration:none;transition:transform .12s var(--ease)}
.k56-theme:hover,.k56-hbtn:hover{background:radial-gradient(circle,var(--track) 0 19.5px,transparent 20px)}
.k56-theme:active,.k56-hbtn:active{transform:scale(.92)}
.k56-theme:focus-visible,.k56-hbtn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.k56-theme .ic{display:none}
.k56-theme .tx,.k56-onb-open .tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.k56-theme::before,.k56-hbtn::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--ic) center/20px no-repeat;mask:var(--ic) center/20px no-repeat}
.k56-theme{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/%3E%3C/svg%3E")}
.k56-theme[data-k56-current=dark]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M4.6 4.6L6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4L6 18M18 6l1.4-1.4'/%3E%3C/svg%3E")}
.k56-theme.k56-onb-open{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 1 1 3.4 2.4c-.6.3-1 .8-1 1.5v.4'/%3E%3Cpath d='M12 16.8h.01'/%3E%3C/svg%3E")}
.k56-hbtn--ops{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.6-3.3 7.9-8 9-4.7-1.1-8-4.4-8-9V6z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.3-4.4'/%3E%3C/svg%3E")}
.k56-hbtn--ops.on{color:var(--onbtn);background:radial-gradient(circle,var(--btn) 0 19.5px,transparent 20px)}
.k56-hbtn--close{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
@media(max-width:767px){
  /* the blur sits on a pseudo-element: a backdrop-filter on the header itself would trap the fixed tab bar inside it */
  .k56-top{position:sticky;top:0;z-index:30;isolation:isolate;margin:-20px -18px 10px;padding:max(6px,env(safe-area-inset-top)) 18px 6px;min-height:60px}
  .k56-top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--bg) 84%,transparent);
    -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
}
@media(max-width:767px){html:has(.k56-top){scroll-padding-top:76px}}
@media(max-width:359px){.k56-top{margin:-16px -12px 10px;padding-left:12px;padding-right:12px}}
@media(min-width:640px) and (max-width:767px){.k56-top{margin:-28px -28px 12px;padding-left:28px;padding-right:28px}}
@media(min-width:768px){.k56-hbtn--close{display:none}}

/* navigation, phones and small tablets: a bottom tab bar, icon + label, the active tab tinted with a pill behind its icon
   (WhatsApp, Material 3), "Make an ad" in the middle as the one red action (Instagram, TikTok). */
.k56-nav a::before{content:"";flex:none;background:currentColor;-webkit-mask:var(--ic) center/24px no-repeat;mask:var(--ic) center/24px no-repeat}
.k56-nav a[data-v=list]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='6.5' rx='2'/%3E%3Crect x='3.5' y='13.5' width='17' height='6.5' rx='2'/%3E%3C/svg%3E");order:1}
.k56-nav a[data-v=studio]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E");order:2}
.k56-nav a[data-v=wizard]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");order:3}
.k56-nav a[data-v=wallet]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h14.5a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5.5A2 2 0 0 1 3.5 18V6.5A2.5 2.5 0 0 1 6 4h10'/%3E%3Cpath d='M16 13.8h1.5'/%3E%3C/svg%3E");order:4}
.k56-nav a[data-v=settings]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");order:5}
@media(max-width:899px){
  .k56 .k56-top>.k56-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:0;
    padding:6px max(6px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right));flex-basis:auto;
    background:var(--tabbar);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);box-shadow:0 -1px 0 var(--line)}
  .k56 .k56-nav a{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-height:56px;min-width:0;padding:0;
    border-radius:0;background:none;box-shadow:none;color:var(--muted);font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.01em;text-decoration:none}
  .k56 .k56-nav a::before{width:24px;height:24px;margin-top:4px}
  .k56 .k56-nav a::after{content:"";position:absolute;z-index:-1;top:0;left:50%;width:56px;height:32px;margin-left:-28px;border-radius:999px;background:transparent;transition:background .2s var(--ease),transform .2s var(--ease);transform:scaleX(.6)}
  .k56 .k56-nav a.on{color:var(--hot);box-shadow:none}
  .k56 .k56-nav a.on::after{background:var(--sel);transform:none}
  .k56 .k56-nav a[data-v=wizard]{color:var(--text)}
  .k56 .k56-nav a[data-v=wizard]::before{background:var(--onbtn)}
  .k56 .k56-nav a[data-v=wizard]::after{background:var(--btn);width:48px;margin-left:-24px;border-radius:14px;transform:none}
  .k56 .k56-nav a[data-v=wizard]:active::after{background:var(--btnpress)}
  .k56 .k56-nav a:active::before{transform:scale(.9)}
  .k56-nl{display:block;max-width:100%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .k56:has(.k56-nav){padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}
/* while making an ad (a page with the sticky action bar) the flow is full screen on phones: no tab bar under the action bar */
@media(max-width:767px){.k56:has(.k56-sticky) .k56-top>.k56-nav{display:none}.k56:has(.k56-sticky){padding-bottom:24px}}
/* desktop: text tabs in a row, the current one on a tonal capsule; "Make an ad" is the red capsule at the end (Stripe, Linear) */
@media(min-width:900px){
  .k56-top{margin-bottom:20px;padding-bottom:14px;box-shadow:0 1px 0 var(--line)}
  .k56 .k56-top>.k56-nav{flex:1;display:flex;gap:2px;margin:0 8px 0 20px;flex-basis:auto}
  .k56 .k56-nav a{min-height:48px;padding:0 14px;border-radius:999px;box-shadow:none;background:none;color:var(--muted);font-size:15px;font-weight:600;gap:8px}
  .k56 .k56-nav a::before{display:none}
  .k56 .k56-nav a:hover{background:var(--panel2);color:var(--text)}
  .k56 .k56-nav a.on{background:var(--panel2);color:var(--text);box-shadow:none}
  .k56 .k56-nav a[data-v=wizard]{margin-left:auto;background:var(--btn);color:var(--onbtn);padding:0 18px 0 14px}
  .k56 .k56-nav a[data-v=wizard]::before{display:block;width:20px;height:20px;-webkit-mask-size:20px;mask-size:20px}
  .k56 .k56-nav a[data-v=wizard]:hover{background:var(--btnhover);color:var(--onbtn)}
  .k56 .k56-nav a[data-v=wizard]:active{background:var(--btnpress)}
}
.k56 .k56-nav a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* the notice line: a small rounded banner with an info icon, not a loose line of text */
.k56-testbar{display:flex;gap:8px;align-items:flex-start;margin:0 0 14px;padding:9px 12px;border-radius:12px;background:var(--panel);color:var(--muted);font-size:12.5px;line-height:1.45}
.k56-testbar::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6h.01'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6h.01'/%3E%3C/svg%3E") center/16px no-repeat}

/* buttons: capsules, one red primary, tonal secondary, a visible press */
.k56-btn{min-height:52px;padding:0 24px;border-radius:999px;box-shadow:none;font-family:inherit;font-weight:600;font-size:16px;letter-spacing:.005em;
  transition:background-color .15s var(--ease),transform .12s var(--ease),color .15s var(--ease);touch-action:manipulation;-webkit-user-select:none;user-select:none}
.k56-btn:hover{background:var(--btnhover)}
.k56-btn:not(:disabled):active{transform:scale(.97);background:var(--btnpress)}
.k56-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.k56-btn:disabled{opacity:1;background:var(--panel2);color:var(--dim)}
.k56-btn--ghost,.k56 a.k56-btn--ghost{background:var(--panel2);color:var(--text);box-shadow:none}
.k56-btn--ghost:hover{background:var(--track)}
.k56-btn--ghost:not(:disabled):active{background:var(--track)}
.k56-card .k56-btn--ghost{background:var(--panel2)}
.k56-btn--text,.k56 a.k56-btn--text{background:transparent;color:var(--text);box-shadow:none;padding:0 16px}
.k56-btn--text:hover,.k56-btn--text:not(:disabled):active{background:var(--panel2)}
.k56-btn--hero{min-height:56px;font-size:17px}
.k56-btn--sm{min-height:48px;padding:0 18px;font-size:15px}
.k56-link,.k56 a.k56-link{color:var(--hot);font-weight:600;font-size:15px;text-decoration:none}
.k56 .k56-back,.k56 .k56-auth__back{display:inline-flex;align-items:center;gap:2px;min-height:48px;margin-left:-6px;padding:0 8px 0 0;color:var(--hot);font-weight:600;font-size:16px;text-decoration:none}
.k56 .k56-back::before,.k56 .k56-auth__back::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5.5L8.5 12l6.5 6.5'/%3E%3C/svg%3E") center/22px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5.5L8.5 12l6.5 6.5'/%3E%3C/svg%3E") center/22px no-repeat}
.k56 a{text-decoration-color:var(--tick)}
.k56 a:hover{text-decoration-color:var(--hot)}

/* surfaces: filled panels, generous corners, no hairline frame, no shadow (iOS grouped style); a card in a card is flat */
.k56-card{border-radius:var(--r);padding:20px;background:var(--panel);box-shadow:none}
.k56-card .k56-card{background:none;padding:0}
.k56 details{border-radius:16px;background:var(--panel);box-shadow:none;padding:0 16px}
.k56 details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;padding:14px 0}
.k56 details>summary::after{content:"";float:none;flex:none;width:20px;height:20px;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9l6.5 6.5L18.5 9'/%3E%3C/svg%3E") center/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9l6.5 6.5L18.5 9'/%3E%3C/svg%3E") center/20px no-repeat;transition:transform .2s var(--ease)}
.k56 details[open]>summary::after{content:"";transform:rotate(180deg)}
.k56-empty{padding:40px 20px}
.k56-greet{color:var(--muted);font-weight:600;margin:0}

/* My ads: each ad is a tappable card; the status is a capsule; progress is a rounded bar */
.k56-group{font-size:17px;font-weight:700;margin:28px 0 10px;gap:8px}
.k56-count{border-radius:999px;font-weight:600;padding:1px 9px}
.k56-grid{gap:12px}
.k56-adcard{padding:18px;border-radius:var(--r);box-shadow:none;transition:background-color .15s var(--ease),transform .12s var(--ease)}
.k56-adcard:hover{background:var(--panel2);box-shadow:none}
.k56-adcard:active{transform:scale(.985)}
.k56-adcard--action,.k56-adcard--action:hover{box-shadow:inset 0 0 0 1.5px var(--hot)}
.k56-adcard .name{font-size:17px;font-weight:700;letter-spacing:-.005em}
.k56-bar{height:6px;border-radius:999px;margin:14px 0 12px;background:var(--track)}
.k56-bar i{border-radius:999px;background:var(--btn)}
.k56-kv{gap:8px 20px;border-top:0;padding-top:0}
.k56-kv b{font-size:16px;font-weight:700}
.k56-pill,.k56o-pill,.k56-timer,.k56-prov,.k56 .k56-badge{border-radius:999px;font-weight:600;letter-spacing:0}
.k56-pill{padding:4px 10px;font-size:12px}

/* steps: four rounded bars that fill in (Duolingo), the step names under them */
.k56-steps{gap:6px;margin:2px 0 18px}
.k56-steps li{border-top:0;padding-top:0;font-size:12px;font-weight:600;color:var(--dim);letter-spacing:0}
.k56-steps li::before{content:"";display:block;height:4px;margin-bottom:7px;border-radius:999px;background:var(--track);transition:background .3s var(--ease)}
.k56-steps li.done{color:var(--muted)}
.k56-steps li.done::before,.k56-steps li.on::before{background:var(--btn)}
.k56-steps li.on{color:var(--text);font-weight:700}

/* forms: questions read as headlines; fields 52px, 12px corners, a 3:1 edge, a 2px red edge on focus */
.k56 label.f{font-size:15px;font-weight:600;margin:22px 0 8px}
.k56-q>label.f,.k56-q>div>label.f,.k56-card>h2{font-family:var(--fd);font-size:22px;font-weight:700;line-height:1.15;letter-spacing:0}
.k56-q>label.f,.k56-q>div>label.f{margin:28px 0 12px}
.k56 .hint{font-size:13.5px;line-height:1.45}
.k56 input[type=text],.k56 input[type=url],.k56 input[type=tel],.k56 input[type=number],.k56 input[type=date],.k56 select,.k56 input[type=file],
.k56 input[type=email],.k56 input[type=search],.k56 input[type=password],.k56 textarea{min-height:52px;border-radius:12px;background:var(--panel);border:1px solid var(--tick);font-size:16px;padding:13px 16px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.k56 input:focus,.k56 select:focus,.k56 textarea:focus,.k56 input[type=email]:focus,.k56 input[type=search]:focus{outline:none;border-color:var(--hot);box-shadow:inset 0 0 0 1px var(--hot)}
.k56 input:focus-visible,.k56 select:focus-visible,.k56 textarea:focus-visible{outline:none}
.k56 input[aria-invalid=true]{border-color:var(--hot);box-shadow:inset 0 0 0 1px var(--hot)}
.k56 input[type=file]{padding:7px 8px;font-size:14px;color:var(--muted)}
.k56 input[type=file]::file-selector-button{margin-right:12px;padding:9px 16px;border:0;border-radius:999px;background:var(--panel2);color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.k56-money{border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--tick)}
.k56-money:focus-within{box-shadow:inset 0 0 0 2px var(--hot)}
.k56-money--hero{border:0;border-radius:var(--r);padding:6px 20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--tick)}
.k56-money--hero:focus-within{box-shadow:inset 0 0 0 2px var(--hot)}
.k56-money--hero span{font-family:var(--fd);font-weight:700}
.k56-money--hero input{font-family:var(--fd)!important;font-weight:700!important;letter-spacing:0!important}
.k56-check input{accent-color:var(--btn)}

/* one-of-many choices: an inset grouped list (iOS Settings, Revolut); a trailing radio ring or tick; the picked row tinted */
.k56-choices{gap:0;border-top:0;background:var(--panel);border-radius:16px;overflow:hidden}
.k56-card .k56-choices{background:var(--bg)}
.k56-choices>.k56-choice{min-width:0}
@media(max-width:639px){.k56-choices--2{grid-template-columns:minmax(0,1fr)}}
.k56-choices>.k56-choice>span{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:13px 54px 13px 16px;border-radius:0;box-shadow:none;background:transparent;transition:background-color .15s var(--ease)}
.k56-choices>.k56-choice+.k56-choice>span{background-image:linear-gradient(var(--line),var(--line));background-size:100% 1px;background-position:16px 0;background-repeat:no-repeat}
.k56-choices>.k56-choice:hover>span{background-color:var(--panel2)}
.k56-choices>.k56-choice:active>span{background-color:var(--panel2)}
.k56-choices>.k56-choice>input:checked+span{background-color:var(--sel);box-shadow:none}
.k56-choices>.k56-choice>span b{font-size:16px;font-weight:600;line-height:1.3}
.k56-choices>.k56-choice>span small{font-size:13.5px;line-height:1.4;margin-top:2px}
.k56-choices>.k56-choice>span::after,.k56-choices>.k56-choice>input:checked+span::after{content:"";position:absolute;right:16px;top:50%;width:22px;height:22px;margin-top:-11px;
  box-sizing:border-box;border:2px solid var(--tick);border-radius:50%;background:transparent;transform:none;transition:border-width .15s var(--ease),border-color .15s var(--ease)}
.k56-choices>.k56-choice>input:checked+span::after{border:7px solid var(--btn);background:var(--onbtn)}
.k56-choices>.k56-choice>input[type=checkbox]+span::after{border-radius:7px}
.k56-choices>.k56-choice>input[type=checkbox]:checked+span::after{border:0;background:var(--btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat}
.k56-choices>.k56-choice>input:focus-visible+span{outline:2px solid var(--focus);outline-offset:-2px}
/* goals and channels get a leading icon tile (Google Ads and Meta Ads Manager apps pick a goal from an icon list) */
.k56-choice:has(>input[name=goal_key])>span,.k56-choice:has(>input[name=channel])>span{padding-left:68px}
.k56-choices>.k56-choice:has(>input[name=goal_key])+.k56-choice>span,.k56-choices>.k56-choice:has(>input[name=channel])+.k56-choice>span{background-position:68px 0}
.k56-choice:has(>input[name=goal_key])>span::before,.k56-choice:has(>input[name=channel])>span::before{content:"";position:absolute;left:16px;top:50%;width:38px;height:38px;margin-top:-19px;border-radius:11px;background:var(--tile);transition:background-color .15s var(--ease)}
.k56-choice:has(>input[name=goal_key])::before,.k56-choice:has(>input[name=channel])::before{content:"";position:absolute;z-index:1;left:25px;top:50%;width:20px;height:20px;margin-top:-10px;pointer-events:none;
  background:var(--text);-webkit-mask:var(--ic) center/20px no-repeat;mask:var(--ic) center/20px no-repeat}
.k56-choice:has(>input[name=goal_key]:checked)>span::before,.k56-choice:has(>input[name=channel]:checked)>span::before{background:var(--btn)}
.k56-choice:has(>input[name=goal_key]:checked)::before,.k56-choice:has(>input[name=channel]:checked)::before{background:var(--onbtn)}
.k56-choice:has(>input[name=goal_key][value=enquiries]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.3 7.6L3.5 20.5l1-4.5A8.5 8.5 0 1 1 20.5 12z'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=goal_key][value=store_visits]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.2a7 7 0 0 1 14 0C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.8' r='2.5'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=goal_key][value=website_visits]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.4 2.6 3.7 5.6 3.7 9s-1.3 6.4-3.7 9c-2.4-2.6-3.7-5.6-3.7-9S9.6 5.6 12 3z'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=goal_key][value=get_known]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4h3.5l7 5V5l-7 5z'/%3E%3Cpath d='M17.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=goal_key][value=app_downloads]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M12 7.5v6.5M9.3 11.4L12 14l2.7-2.6M10.5 18.5h3'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=google_ads]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=adx]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9h18M6.5 6.5h.01M9 6.5h.01'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=dooh]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='18' height='11.5' rx='1.5'/%3E%3Cpath d='M8 15v5.5M16 15v5.5M5.5 20.5h13'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=whatsapp]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.3 7.6L3.5 20.5l1-4.5A8.5 8.5 0 1 1 20.5 12z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=sms]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h14a1.5 1.5 0 0 1 1.5 1.5v9.5A1.5 1.5 0 0 1 19 17H9l-5 3.5V6A1.5 1.5 0 0 1 5 4.5z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=youtube_ctv]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='13' rx='2.5'/%3E%3Cpath d='M10 8.5l4.5 2.5-4.5 2.5z'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=social]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18.5 14.3A6.5 6.5 0 0 1 21.5 20'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=audio]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15.5V12a8 8 0 0 1 16 0v3.5'/%3E%3Crect x='3' y='14' width='4.5' height='6.5' rx='1.5'/%3E%3Crect x='16.5' y='14' width='4.5' height='6.5' rx='1.5'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=radio]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12.5' rx='2'/%3E%3Cpath d='M7 8l10-4.5'/%3E%3Ccircle cx='15.5' cy='14.2' r='2.6'/%3E%3Cpath d='M7 12.5h3M7 15.8h3'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=tv]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='13' rx='2.5'/%3E%3Cpath d='M8 21h8M12 17.5V21'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=publisher]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4h11a1 1 0 0 1 1 1v14.5a1.5 1.5 0 0 0 1.5 1.5H6a2.5 2.5 0 0 1-2.5-2.5V5A1 1 0 0 1 4.5 4z'/%3E%3Cpath d='M16.5 8.5h3a1 1 0 0 1 1 1v10a1.5 1.5 0 0 1-3 0M7.5 8h5.5M7.5 11.5h5.5M7.5 15h3.5'/%3E%3C/svg%3E")}
.k56-choice:has(>input[name=channel][value=sponsorship]){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='M8.8 13.5L7.5 21l4.5-2.5 4.5 2.5-1.3-7.5'/%3E%3C/svg%3E")}
/* wider screens: options side by side become tiles (Airbnb's choice cards), the picked one with a red edge */
@media(min-width:640px){
  .k56-choices--2{background:none;border-radius:0;overflow:visible;gap:10px;column-gap:10px}
  .k56-choices--2>.k56-choice>span,.k56-choices--2>.k56-choice+.k56-choice>span{height:100%;border-radius:16px;background:var(--panel);background-image:none;box-shadow:inset 0 0 0 1px var(--line)}
  .k56-card .k56-choices--2>.k56-choice>span{background:var(--bg)}
  .k56-choices--2>.k56-choice:hover>span{background-color:var(--panel2)}
  .k56-choices--2>.k56-choice>input:checked+span{background-color:var(--sel);box-shadow:inset 0 0 0 2px var(--hot)}
}

/* many-of-many: filter chips (Material 3), a tick appears in the picked chip */
.k56-chips .k56-choice span{gap:6px;flex-direction:row;border-radius:999px;padding:0 16px;box-shadow:inset 0 0 0 1px var(--tick);background:transparent;font-weight:600;font-size:15px;transition:background-color .15s var(--ease),box-shadow .15s var(--ease)}
.k56-chips .k56-choice:hover span{background:var(--panel)}
.k56-chips .k56-choice input:checked+span{background:var(--sel);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--hot)}
.k56-chips:not(.k56-chips--seg):not(.k56-chips--rows) .k56-choice input:checked+span::before{content:"";flex:none;width:16px;height:16px;background:var(--hot);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
.k56-chips .k56-choice input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
/* short number choices: a segmented control, a track with a raised thumb (iOS, Material 3 segmented buttons) */
.k56-chips--seg{gap:2px;padding:3px;border-radius:14px;background:var(--panel2);box-shadow:none}
.k56-chips--seg .k56-choice span,.k56-chips--seg .k56-choice:first-child span,.k56-chips--seg .k56-choice:last-child span{border-radius:11px;box-shadow:none;background:transparent;font-size:14px;font-weight:600;padding:4px 6px;color:var(--text)}
.k56-chips--seg .k56-choice:hover span{background:transparent}
.k56-chips--seg .k56-choice input:checked+span{background:var(--seg);box-shadow:0 1px 3px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.06);font-weight:700}
.k56-chips--seg .k56-choice input:focus-visible+span{outline-offset:-2px}
/* long single choices: a grouped list with a trailing tick (iOS) */
.k56-chips--rows{gap:0;border-top:0;border-radius:16px;background:var(--panel);overflow:hidden}
.k56-chips--rows .k56-choice span,.k56-chips--rows .k56-choice input:checked+span{min-height:52px;padding:0 50px 0 16px;border-radius:0;box-shadow:none;background-color:transparent;font-weight:500;font-size:16px}
.k56-chips--rows .k56-choice+.k56-choice span{background-image:linear-gradient(var(--line),var(--line));background-size:100% 1px;background-position:16px 0;background-repeat:no-repeat}
.k56-chips--rows .k56-choice:hover span{background-color:var(--panel2)}
.k56-chips--rows .k56-choice input:checked+span{background-color:var(--sel);font-weight:600}
.k56-chips--rows .k56-choice input:checked+span::after{content:"";right:16px;width:20px;height:20px;margin-top:-10px;border:0;transform:none;background:var(--hot);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px no-repeat}

/* the action bar: full width on phones with a blurred backdrop, the primary takes the room (Airbnb Reserve, Uber Confirm) */
.k56-actions{gap:10px}
/* flat surfaces everywhere text sits: no gradient behind any words, so every contrast check is a plain pair (live had glows) */
.k56,.k56-pricehero,.k56-stat--lead{background-image:none}
.k56-hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text)}
.k56-sticky{background-image:none;background-color:var(--bg)}
@media(max-width:767px){
  .k56-sticky{margin:20px -18px 0;padding:10px 18px max(10px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 86%,transparent);
    -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 -1px 0 var(--line)}
  .k56-sticky .k56-btn:last-child{flex:1 1 auto;max-width:none}
  .k56-sticky .k56-btn--ghost,.k56-sticky .k56-btn--text{flex:0 0 auto}
}
@media(min-width:640px) and (max-width:767px){.k56-sticky{margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px}}
@media(max-width:359px){.k56-sticky{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}}

/* messages: a tinted rounded banner with an icon (no coloured edge strip) */
.k56-msg{position:relative;border-radius:14px;background:var(--panel);box-shadow:none;padding:12px 14px 12px 44px;line-height:1.45}
.k56-msg::before{content:"";position:absolute;left:14px;top:13px;width:20px;height:20px;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6h.01'/%3E%3C/svg%3E") center/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6h.01'/%3E%3C/svg%3E") center/20px no-repeat}
.k56-msg--bad{background:var(--hot-bg);box-shadow:none}
.k56-msg--bad::before{background:var(--hot);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.4h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.4h.01'/%3E%3C/svg%3E")}
.k56-msg--good{background:var(--ok-bg);box-shadow:none}
.k56-msg--good::before{background:var(--ok);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.8L16.2 9.6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.8L16.2 9.6'/%3E%3C/svg%3E")}

/* price: the amount leads in the display face (Revolut, Cash App) */
.k56-pricehero{border-radius:var(--r);background:var(--panel);box-shadow:none;padding:22px 20px}
.k56-pricehero .v,.k56-trio__i .v,.k56-stat .v,.k56o-stat__n{font-family:var(--fd);font-weight:700;letter-spacing:0}
.k56-pricehero .l,.k56-trio__i .l,.k56-stat .l{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.k56-price .total{font-family:var(--fd);font-size:24px;font-weight:700}
.k56-price .line,.k56-sum .line{padding:11px 0}

/* wallet */
.k56-walletstrip{border-radius:16px;background:var(--panel);box-shadow:none;padding:12px 16px;transition:background-color .15s var(--ease)}
.k56-walletstrip:hover{background:var(--panel2)}
.k56-walletstrip__go{font-size:0;width:20px;height:20px;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E") center/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E") center/20px no-repeat}
.k56-trio{border-radius:var(--r);box-shadow:none;background:var(--panel)}
.k56-trio__i+.k56-trio__i{box-shadow:inset 0 1px 0 var(--line)}
@media(min-width:640px){.k56-trio__i+.k56-trio__i{box-shadow:inset 1px 0 0 var(--line)}}

/* ad page: facts as a grouped list, numbers as tiles */
.k56-facts{border-top:0;background:var(--panel);border-radius:16px;padding:2px 16px}
.k56-facts>div{box-shadow:inset 0 -1px 0 var(--line)}
.k56-stats{gap:8px;background:none;box-shadow:none;border-radius:0;overflow:visible}
.k56-stat{border-radius:16px;background:var(--panel)!important;box-shadow:none}
.k56-table td{box-shadow:0 -1px 0 var(--line)}

/* sheets: 28px top corners and a grabber (Material 3 bottom sheet, iOS sheet) */
.k56-onb__card{border-radius:28px 28px 0 0;padding:8px 20px 20px;box-shadow:0 -10px 40px rgba(0,0,0,.3)}
.k56-onb__card::before{content:"";display:block;width:36px;height:5px;margin:0 auto 8px;border-radius:999px;background:var(--track)}
@media(min-width:768px){.k56-onb__card{border-radius:28px;box-shadow:0 18px 60px rgba(0,0,0,.3)}.k56-onb__card::before{display:none}}
.k56-onb__x{border-radius:50%;background:var(--panel2);box-shadow:none}
.k56-onb__dots li{height:4px;border-radius:999px}
.k56-onb__t{font-family:var(--fd);font-weight:700;font-size:24px;letter-spacing:0}
#k56-ccform.js .k56-sheet.open{border-radius:28px 28px 0 0;background:var(--panel);box-shadow:0 -8px 40px rgba(0,0,0,.3),0 0 0 100vmax var(--scrim)}
#k56-ccform.js .k56-sheet.open::before{content:"";flex:none;display:block;width:36px;height:5px;margin:0 auto 6px;border-radius:999px;background:var(--track)}
@media(min-width:768px){#k56-ccform.js .k56-sheet.open{border-radius:28px}#k56-ccform.js .k56-sheet.open::before{display:none}}
.k56-sheet__head{background:var(--panel)}
.k56-ccrow{border-radius:14px;border-color:var(--line);background:var(--panel)}
.k56-ccrow:has(input:checked){border-color:var(--hot);background:var(--sel)}
.k56-ccrow,.k56-phone__cc{border-radius:12px}
.k56-phone__cc{border-color:var(--tick)}

/* sign-up and sign-in */
.k56-auth h1,.k56-auth .k56-auth__q{font-family:var(--fd);font-weight:700;font-size:32px;line-height:1.08;letter-spacing:0}
.k56-auth__bar{height:4px;margin:0 0 6px}
.k56-auth__step{font-size:13px;font-weight:600}
.k56-sso{gap:10px}
.k56-sso__b{min-height:56px;font-size:16px;font-weight:600}
.k56-or{color:var(--muted)}

/* Studio (views/studio.php keeps its inline block; these win by specificity) */
.k56.k56-studio .k56-st-list{gap:0;border-top:0;background:var(--panel);border-radius:16px;overflow:hidden}
.k56.k56-studio .k56-st-list li+li a{background-image:linear-gradient(var(--line),var(--line));background-size:100% 1px;background-position:16px 0;background-repeat:no-repeat}
.k56.k56-studio .k56-st-list a{min-height:56px;padding:12px 16px;border-radius:0;box-shadow:none;background-color:transparent}
.k56.k56-studio .k56-st-list a:hover{background-color:var(--panel2)}
.k56.k56-studio .k56-st-media{border-radius:14px}
.k56.k56-studio .k56-st-test{box-shadow:none;background:var(--sun-bg)}

/* loading: a quiet shimmer instead of a spinner where a region says it is busy (NN/g skeleton screens) */
.k56 [aria-busy=true]{position:relative;color:transparent!important}
.k56 [aria-busy=true]::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--panel2) 0,var(--track) 50%,var(--panel2) 100%);background-size:200% 100%;animation:k56sk 1.2s linear infinite}
@keyframes k56sk{from{background-position:100% 0}to{background-position:-100% 0}}

/* motion: 120 to 200ms, standard easing; nothing moves with reduced motion */
@media(prefers-reduced-motion:reduce){.k56 *,.k56 *::before,.k56 *::after{transition:none!important;animation:none!important}.k56-btn:active,.k56-adcard:active,.k56-theme:active,.k56-hbtn:active{transform:none!important}}