/* UPPAbaby help centre theme. Built by theme/build_theme.py. Do not edit here. */
:root {
  --ground: #f3f2f0;   
  --paper: #ffffff;
  --ink: #131211;      
  --body: #3d3b39;
  --muted: #6f6b67;
  --line: #dcd8d3;
  --slate: #3b4c5e;    
  --slate-2: #2e3c4b;
  --sky: #cae6f3;      
  --sky-soft: #e4f1f7;
  --stone: #e2dfdc;
  --font: "Agenda", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
.ub * { box-sizing: border-box; }
.ub [hidden] { display: none !important; }
.ub { margin: 0; background: var(--ground); color: var(--body); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.ub a { color: inherit; text-decoration: none; }
.ub a:focus-visible, .ub button:focus-visible, .ub input:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }
.ub h1, .ub h2, .ub h3, .ub h4 { color: var(--ink); font-weight: 300; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.ub p { margin: 0; }
.ub img { max-width: 100%; display: block; }
.ub .wrap { max-width: 1240px; margin: 0 auto; padding-inline: 40px; }
.ub .eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.ub .pill { display: inline-flex; align-items: center; gap: 8px; background: var(--slate); color: #fff; font-weight: 500; font-size: 14.5px; padding: 12px 24px; border-radius: 999px; border: 0; cursor: pointer; }
.ub .pill:hover { background: var(--slate-2); }
.ub .pill.sky { background: var(--sky); color: var(--ink); }
.ub .pill.sky:hover { background: #b8dcee; }
.ub .pill.sm { padding: 9px 18px; font-size: 14px; }
.ub .tlink { font-weight: 500; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 1px; }
.ub .tlink:hover { color: var(--slate); border-color: var(--slate); }
.ub .ub-review-unused { background: var(--ink); color: #e9e6e2; font-size: 13px; text-align: center; padding: 8px 16px; }
.ub .ub-review-unused b { color: #fff; font-weight: 600; }
.ub .util { background: var(--slate); color: #e9eef3; font-size: 12.5px; }
.ub .util .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 18px; padding-block: 8px; max-width: 1480px; }
.ub .util b { color: #fff; font-weight: 600; margin-right: 16px; }
.ub .util a:hover { text-decoration: underline; }
.ub .site { background: var(--ground); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.ub .site .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding-block: 18px; max-width: 1480px; }
.ub .nav { display: flex; gap: 6px 20px; flex-wrap: wrap; align-items: center; font-size: 15px; color: var(--ink); }
.ub .nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ub .nav-r { justify-content: flex-end; }
.ub .left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ub .logo img { width: 150px; height: auto; }
.ub .burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0; cursor: pointer; }
.ub .burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.ub .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ub .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ub .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.ub .nav .m-only { display: none; }
.ub .hero { position: relative; min-height: clamp(520px, 48vw, 660px); display: flex; align-items: center; overflow: hidden; background: var(--stone); }
.ub .hero .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; opacity: 0; transition: opacity 1s ease; }
.ub .hero .slide.on { opacity: 1; }
.ub .hero .wrap { position: relative; z-index: 1; width: 100%; max-width: none; padding-inline: clamp(18px, 3.5vw, 56px); }
.ub .card { background: rgba(243,242,240,.96); border-radius: 28px; padding: 28px; max-width: 400px; transition: transform .8s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 24px 60px rgba(19,18,17,.16); margin-block: 40px 90px; }
.ub .card h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1.06; }
.ub .card p { font-size: 15.5px; color: var(--body); }
.ub .search { display: flex; align-items: center; background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 5px 5px 20px; }
.ub .search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15.5px; color: var(--ink); padding: 9px 0; outline: none; }
.ub .search input::placeholder { color: var(--muted); }
.ub .search button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--slate); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.ub .go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.ub .hero-ctl { position: absolute; left: clamp(18px, 3.5vw, 56px); bottom: 26px; z-index: 2; display: flex; gap: 10px; align-items: center; }
.ub .model-chip { background: var(--paper); border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 500; color: var(--ink); box-shadow: 0 4px 14px rgba(19,18,17,.16); }
.ub .model-chip span { color: var(--muted); font-weight: 400; margin-left: 6px; }
.ub .dots { display: flex; gap: 6px; background: rgba(19,18,17,.42); border-radius: 999px; padding: 8px 10px; }
.ub .dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; transition: width .3s; }
.ub .dots button.on { width: 22px; background: #fff; }
.ub .hero.r .hero-ctl { left: auto; right: clamp(18px, 3.5vw, 56px); }
.ub .sec { padding-block: 64px 0; display: flex; flex-direction: column; gap: 26px; }
.ub .sechead { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 10px 24px; }
.ub .sechead h2, .ub .split h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; }
.ub .sechead p { color: var(--body); max-width: 48ch; }
.ub .tasks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ub .task { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; color: #fff; background: var(--stone); }
.ub .task img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform .6s ease; }
.ub .task::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,18,17,0) 40%, rgba(19,18,17,.82) 100%); }
.ub .task:hover img { transform: scale(1.04); }
.ub .task .t { position: relative; z-index: 1; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.ub .task h3 { color: #fff; font-size: 23px; font-weight: 400; }
.ub .task p { font-size: 14.5px; color: #eeebe7; }
.ub .task .cta { margin-top: 6px; font-weight: 500; font-size: 14px; }
.ub .serial { background: var(--paper); border-radius: 28px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 52px); align-items: center; }
.ub .serial .txt { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ub .serial h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.08; }
.ub .mini-steps { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: m; display: flex; flex-direction: column; gap: 14px; }
.ub .mini-steps li { counter-increment: m; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
.ub .mini-steps li::before { content: counter(m); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--slate); color: var(--slate); display: grid; place-items: center; font-weight: 500; font-size: 15px; }
.ub .mini-steps b { color: var(--ink); font-weight: 500; font-size: 16.5px; }
.ub .mini-steps span { color: var(--muted); font-size: 14.5px; }
.ub .nolabel { font-size: 14.5px; color: var(--body); background: var(--ground); border-radius: 14px; padding: 12px 16px; }
.ub .finder { background: var(--sky-soft); border-radius: 24px; padding: 14px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ub .prods { display: flex; gap: 4px; background: var(--paper); border-radius: 999px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.ub .prods::-webkit-scrollbar { display: none; }
.ub .prods button { flex: 1 0 auto; font: inherit; font-size: 14px; font-weight: 500; color: var(--body); background: none; border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.ub .prods button:hover { color: var(--ink); background: var(--ground); }
.ub .prods button[aria-selected="true"] { background: var(--slate); color: #fff; }
.ub .diagram { margin: 0; display: grid; place-items: center; padding: 4px 0; min-height: 250px; }
.ub .diagram img { width: auto; height: auto; max-width: min(100%, 340px); border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(19,18,17,.04), 0 10px 28px rgba(59,76,94,.14); }
.ub .where { background: var(--paper); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ub .where #serial-where { color: var(--ink); font-size: 16.5px; font-weight: 500; }
.ub .send { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--muted); }
.ub .send code { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .02em; color: var(--ink); background: #fff; border: 2px solid #d33a2c; border-radius: 6px; padding: 4px 9px; white-space: nowrap; }
.ub .split { display: grid; grid-template-columns: 1fr 1fr; margin-top: 64px; background: var(--sky-soft); }
.ub .split > img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; }
.ub .split .txt { padding: clamp(28px, 4.6vw, 64px); display: flex; flex-direction: column; gap: 24px; justify-content: center; min-width: 0; }
.ub .steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 18px; }
.ub .steps li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.ub .steps li::before { content: counter(s); width: 40px; height: 40px; border-radius: 50%; background: var(--slate); color: #fff; display: grid; place-items: center; font-weight: 500; }
.ub .steps h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.ub .steps p { font-size: 15px; margin-top: 2px; }
.ub .reg { background: var(--paper); border-radius: 18px; padding: 16px 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.ub .reg p { font-size: 15px; max-width: 38ch; }
.ub .reg b { color: var(--ink); font-weight: 600; }
.ub .models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ub .model.feat { grid-column: span 2; }
.ub .model .new { position: absolute; z-index: 1; top: 16px; left: 16px; background: var(--sky); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 6px 12px; }
.ub .model { position: relative; border-radius: 24px; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; background: var(--stone); }
.ub .model img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform .6s ease; }
.ub .model:hover img { transform: scale(1.04); }
.ub .model .lab { position: relative; z-index: 1; margin: 16px; background: var(--paper); border-radius: 999px; padding: 9px 18px; display: flex; gap: 10px; align-items: baseline; box-shadow: 0 4px 14px rgba(19,18,17,.14); }
.ub .model .lab b { font-weight: 600; color: var(--ink); font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.ub .model .lab span { white-space: nowrap; }
.ub .model .lab span { color: var(--muted); font-size: 13.5px; }
.ub .model .foot { position: relative; z-index: 1; margin: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; width: calc(100% - 28px); }
.ub .model .foot .lab { margin: 0; }
.ub .model .acts { display: flex; gap: 6px; }
.ub .model .acts a { background: rgba(255,255,255,.94); color: var(--ink); font-size: 13.5px; font-weight: 500; border-radius: 999px; padding: 8px 14px; box-shadow: 0 4px 14px rgba(19,18,17,.14); }
.ub .model .acts a.shop { background: var(--slate); color: #fff; }
.ub .model .acts a:hover { background: #fff; }
.ub .model .acts a.shop:hover { background: var(--slate-2); }
.ub .model img.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform .6s ease; }
.ub .model:hover img.ph { transform: scale(1.03); }
.ub .more { display: flex; flex-direction: column; gap: 12px; }
.ub .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ub .chips a { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14.5px; color: var(--ink); }
.ub .chips a:hover { border-color: var(--slate); }
.ub .chips a span { color: var(--muted); margin-left: 2px; }
.ub .brands { background: var(--paper); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.ub .bcar { position: relative; min-height: 460px; overflow: hidden; background: var(--stone); }
.ub .bcar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; opacity: 0; transition: opacity 1s ease; }
.ub .bcar img.on { opacity: 1; }
.ub .bchip { position: absolute; left: 16px; bottom: 16px; z-index: 1; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; border-radius: 999px; padding: 8px 16px; box-shadow: 0 4px 14px rgba(19,18,17,.16); }
.ub .blogos a.on { background: var(--sky-soft); box-shadow: inset 0 0 0 1.5px var(--sky); }
.ub .brands .btxt { padding: clamp(24px, 4vw, 52px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ub .brands h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.08; }
.ub .blogos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ub .blogos a { display: grid; place-items: center; height: 64px; background: var(--ground); border-radius: 14px; padding: 10px 14px; transition: background .2s; }
.ub .blogos a:hover { background: var(--sky-soft); }
.ub .blogos img { max-height: 30px; max-width: 100%; width: auto; object-fit: contain; }
.ub .promise { background: var(--paper); border-bottom: 1px solid var(--line); }
.ub .promise .wrap { padding-block: 22px; display: flex; flex-direction: column; gap: 12px; }
.ub .pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.ub .pgrid a { position: relative; padding: 6px 36px 6px 0; display: flex; flex-direction: column; gap: 2px; }
.ub .pgrid a + a { padding-left: 22px; border-left: 1px solid var(--line); }
.ub .pgrid b { color: var(--ink); font-weight: 500; font-size: 16px; }
.ub .pgrid span { font-size: 14px; color: var(--muted); }
.ub .pgrid i { position: absolute; right: 14px; top: 8px; font-style: normal; color: var(--muted); transition: transform .2s; }
.ub .pgrid a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ub .pgrid a:hover i { transform: translateX(3px); color: var(--ink); }
.ub .kona { background: var(--paper); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ub .kona > img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; object-position: 55% 45%; }
.ub .kona .ktxt { padding: clamp(24px, 4vw, 52px); display: flex; flex-direction: column; gap: 16px; justify-content: center; min-width: 0; }
.ub .kona h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.08; }
.ub .kform { display: flex; flex-wrap: wrap; gap: 8px; }
.ub .kform label { position: absolute; left: -9999px; }
.ub .kform input { flex: 1 1 160px; min-width: 0; font: inherit; font-size: 15px; color: var(--ink); background: var(--ground); border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 18px; }
.ub .kform input:focus { outline: none; border-color: var(--slate); background: #fff; }
.ub .kmsg { font-size: 14.5px; color: var(--ink); background: var(--sky-soft); border-radius: 12px; padding: 10px 14px; }
.ub .tune { background: var(--sky-soft); border-radius: 28px; padding: clamp(24px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 52px); align-items: center; }
.ub .tune .ttxt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ub .tune h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.08; }
.ub .events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ub .events li { background: var(--paper); border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.ub .events .when { text-align: center; border-right: 1px solid var(--line); padding-right: 14px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.ub .events .when b { font-size: 24px; font-weight: 400; color: var(--ink); line-height: 1; }
.ub .events .when span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.ub .events .what { display: flex; flex-direction: column; min-width: 0; }
.ub .events .what b { color: var(--ink); font-weight: 500; }
.ub .events .what span { font-size: 14px; color: var(--muted); }
.ub .events .what .t { color: var(--body); }
.ub .reg-band { background: var(--slate); color: #fff; border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ub .reg-band > img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; object-position: 50% 45%; }
.ub .reg-band .rtxt { padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; justify-content: center; min-width: 0; }
.ub .reg-band .eyebrow { color: #c6d2dd; }
.ub .reg-band h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.ub .ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ub .ticks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; color: #dfe6ec; font-size: 15.5px; }
.ub .ticks li::before { content: "\2713"; width: 24px; height: 24px; border-radius: 50%; background: var(--sky); color: var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 600; margin-top: 1px; }
.ub .ticks b { color: #fff; font-weight: 500; }
.ub .reg-band .pill { background: var(--sky); color: var(--ink); }
.ub .reg-band .pill:hover { background: #b8dcee; }
.ub .reg-band .small { font-size: 14px; color: #c6d2dd; }
.ub .qa { background: var(--paper); border-radius: 28px; padding: clamp(18px, 3vw, 32px); display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
.ub .qtabs { display: flex; flex-direction: column; gap: 4px; }
.ub .qtabs button { text-align: left; font: inherit; font-size: 15px; color: var(--body); background: none; border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.ub .qtabs button:hover { background: var(--ground); color: var(--ink); }
.ub .qtabs button[aria-selected="true"] { background: var(--sky-soft); color: var(--ink); font-weight: 500; }
.ub .qpanel { display: flex; flex-direction: column; }
.ub .qpanel details { border-bottom: 1px solid var(--line); }
.ub .qpanel details:first-child { border-top: 1px solid var(--line); }
.ub .qpanel summary { list-style: none; cursor: pointer; padding: 16px 36px 16px 2px; position: relative; color: var(--ink); font-size: 16.5px; font-weight: 500; }
.ub .qpanel summary::-webkit-details-marker { display: none; }
.ub .qpanel summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 22px; font-weight: 300; color: var(--muted); }
.ub .qpanel details[open] summary::after { content: "\2212"; }
.ub .qpanel .ans { padding: 0 2px 18px; color: var(--body); font-size: 15.5px; display: flex; flex-direction: column; gap: 10px; max-width: 70ch; }
.ub .qpanel .ans p { margin: 0; }
.ub .qpanel .ans a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ub .split { margin-top: 0; border-radius: 28px; overflow: hidden; }
.ub #requests .band { margin-top: 0; border-radius: 28px; min-height: 380px; }
.ub .band .bwrap { position: relative; width: 100%; padding-inline: clamp(20px, 3.5vw, 44px); }
.ub .owngrid { background: var(--paper); border-radius: 24px; padding: 22px 26px; }
.ub #owning + #register { padding-top: 16px; }
.ub #register + #tune-up, .ub #tune-up + .sec { padding-top: 16px; }
.ub .sechead .sh { display: flex; flex-direction: column; gap: 8px; }
.ub .stuck { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; border-top: 1px solid var(--line); padding-top: 20px; }
.ub .stuck b { color: var(--ink); font-weight: 500; }
.ub .split { background: none !important; border-radius: 0; overflow: visible; gap: clamp(24px, 4vw, 56px); }
.ub .split > img { border-radius: 24px; order: 2; min-height: 420px; }
.ub .split .txt { padding: 0; }
.ub .own { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.ub .regcard { background: var(--slate); color: #dfe6ec; border-radius: 24px; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.ub .regcard .eyebrow { color: #c6d2dd; }
.ub .regcard h3, .ub .tunecol h3 { font-size: clamp(22px, 2.3vw, 28px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; }
.ub .regcard h3 { color: #fff; }
.ub .regcard .pill { background: var(--sky); color: var(--ink); }
.ub .regcard .small { font-size: 14px; color: #c6d2dd; }
.ub .tunecol { background: var(--paper); border-radius: 24px; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.ub .tunecol .events li { padding: 10px 12px; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; }
.ub .tunecol .events .when b { font-size: 20px; }
.ub .tunecol .events .when { padding-right: 10px; }
.ub .tunecol .tlink { align-self: flex-start; }
.ub .tunecol .events li { border: 1px solid var(--line); }
.ub .lodge-bar { display: none; }
@media (max-width: 760px) {
.ub .site .nav-r .pill { display: none; }
.ub .lodge-bar { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30; text-align: center; background: var(--slate); color: #fff; font-weight: 500; border-radius: 999px; padding: 14px; box-shadow: 0 10px 30px rgba(19,18,17,.25); }
.ub footer { padding-bottom: 72px; }
.ub .own { grid-template-columns: 1fr; }
.ub .split > img { order: 0; min-height: 260px; }
}
.ub .parts-note { font-size: 15px; color: var(--muted); }
.ub .crash { border: 1.5px solid var(--slate); border-radius: 18px; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; background: var(--paper); }
.ub .crash p { font-size: 15px; max-width: 46ch; }
.ub .crash b { color: var(--ink); font-weight: 500; }
.ub .askline { font-size: 14.5px; color: var(--muted); margin-top: -4px; }
.ub .linkbtn { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ub .ask { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ub .ask-btn { display: flex; align-items: center; gap: 10px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px 8px 8px; box-shadow: 0 10px 30px rgba(19,18,17,.16); cursor: pointer; font: inherit; text-align: left; }
.ub .ask-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--slate); color: #fff; display: grid; place-items: center; flex: none; }
.ub .ask-t { display: flex; flex-direction: column; line-height: 1.2; }
.ub .ask-t b { font-weight: 500; font-size: 15px; }
.ub .ask-t span { font-size: 12.5px; color: var(--muted); }
.ub .ask-panel { width: min(390px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); background: var(--paper); border-radius: 22px; box-shadow: 0 24px 60px rgba(19,18,17,.22); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
.ub .ask-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--slate); color: #fff; }
.ub .ask-head b { display: block; font-weight: 500; }
.ub .ask-head span { font-size: 12.5px; color: #c6d2dd; }
.ub .ask-x { background: none; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ub .ask-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--ground); }
.ub .ask-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; }
.ub .ask-msg.bot { background: var(--paper); border: 1px solid var(--line); color: var(--body); align-self: flex-start; }
.ub .ask-msg.you { background: var(--slate); color: #fff; align-self: flex-end; }
.ub .ask-sugg { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ub .ask-sugg button { font: inherit; font-size: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.ub .ask-sugg button:hover { border-color: var(--slate); }
.ub .ask-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.ub .ask-form input { flex: 1; min-width: 0; font: inherit; font-size: 15px; border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 16px; color: var(--ink); background: var(--paper); }
.ub .ask-form input:focus { outline: none; border-color: var(--slate); }
.ub .ask-form button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--slate); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.ub .ask-note { font-size: 12px; color: var(--muted); padding: 0 14px 12px; margin: 0; }
.ub .ask-note a { color: var(--ink); text-decoration: underline; }
.ub .ask.open .ask-btn { display: none; }
@media (max-width: 760px) {
.ub .ask { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.ub .ask-btn { padding: 6px; }
.ub .ask-t { display: none; }
.ub .ask.open { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.ub .ask-panel { width: 100%; height: calc(100vh - 100px); }
}
.ub .ticker { background: var(--slate); color: #e9eef3; display: flex; align-items: stretch; overflow: hidden; }
.ub .tk-label { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px 0 clamp(18px, 3.5vw, 56px); background: var(--slate-2); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #fff; font-weight: 500; white-space: nowrap; }
.ub .tk-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); font-style: normal; }
.ub .tk-viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.ub .tk-track { display: flex; width: max-content; animation: tk-roll var(--tk-dur, 90s) linear infinite; }
.ub .ticker:hover .tk-track, .ub .ticker:focus-within .tk-track { animation-play-state: paused; }
@keyframes tk-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ub .tk-item { display: flex; align-items: center; gap: 10px; padding: 14px 26px; white-space: nowrap; font-size: 14.5px; color: #dfe6ec; border-right: 1px solid rgba(255,255,255,.14); }
.ub .tk-item b { color: #fff; font-weight: 500; }
.ub .tk-item .bk { color: var(--sky); font-weight: 500; }
.ub .tk-item:hover .bk, .ub .tk-item:focus-visible .bk { text-decoration: underline; text-underline-offset: 3px; }
.ub .tk-all { flex: none; display: flex; align-items: center; padding: 0 clamp(18px, 3.5vw, 56px) 0 18px; font-size: 14px; color: #fff; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; background: var(--slate-2); }
@media (max-width: 760px) {
.ub .tk-all { display: none; }
.ub .tk-label span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ub .tk-track { animation: none; }
.ub .tk-viewport { overflow-x: auto; }
}
.ub .guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--line); }
.ub .guides a { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 17px; }
.ub .guides a span { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.ub .guides a:hover { color: var(--slate); }
.ub .band { position: relative; margin-top: 72px; min-height: 400px; display: flex; align-items: center; overflow: hidden; }
.ub .band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.ub .band .wrap { position: relative; width: 100%; }
.ub .band .box { background: var(--slate); color: #fff; border-radius: 28px; padding: clamp(24px, 3.2vw, 40px); max-width: 480px; display: flex; flex-direction: column; gap: 14px; margin-block: 40px; }
.ub .band h2 { color: #fff; font-size: clamp(24px, 2.8vw, 32px); }
.ub .band p { color: #dfe6ec; }
.ub .band .pill { align-self: flex-start; }
.ub footer { background: var(--slate); color: #d5dde5; font-size: 14.5px; margin-top: 0; }
.ub footer .wrap { padding-block: 44px 30px; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 28px; }
.ub footer h4 { color: #fff; font-weight: 500; font-size: 14.5px; letter-spacing: 0; margin-bottom: 10px; }
.ub footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ub footer a:hover { color: #fff; text-decoration: underline; }
.ub footer .flogo { width: 150px; margin-bottom: 14px; }
.ub footer .law { grid-column: 1 / -1; border-top: 1px solid #52657a; padding-top: 18px; font-size: 12.5px; color: #aebbc8; display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 991px) {
.ub .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ub .models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ub .brands, .ub .kona, .ub .tune, .ub .reg-band { grid-template-columns: 1fr; }
.ub .reg-band > img { min-height: 260px; max-height: 320px; }
.ub .qa { grid-template-columns: 1fr; }
.ub .qtabs { flex-direction: row; overflow-x: auto; }
.ub .qtabs button { white-space: nowrap; }
.ub .kona > img { min-height: 260px; max-height: 320px; }
.ub .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
.ub .pgrid a:nth-child(3) { padding-left: 0; border-left: 0; }
.ub .bcar { min-height: 300px; }
.ub .serial { grid-template-columns: 1fr; }
.ub .diagram { min-height: 0; }
.ub footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1260px) {
.ub .burger { display: flex; }
.ub .nav-l { display: none; }
.ub .nav-l.open { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--ground); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(19,18,17,.08); padding: 6px clamp(18px, 4vw, 40px) 14px; z-index: 20; }
.ub .nav-l.open a { padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 17px; }
.ub .nav-l.open a:last-child { border-bottom: 0; }
.ub .nav-l .m-only { display: block; }
.ub .nav-r .d-only { display: none; }
}
@media (max-width: 860px) {
.ub .util .wrap { justify-content: center; text-align: center; }
}
@media (max-width: 760px) {
.ub .wrap { padding-inline: 18px; }
.ub .hero { align-items: flex-end; min-height: 580px; }
.ub .card { margin-block: 230px 18px; max-width: none; padding: 24px; }
.ub .hero-ctl, .ub .hero.r .hero-ctl { left: 18px; right: auto; top: 16px; bottom: auto; }
.ub .card { transform: none !important; }
.ub .split { grid-template-columns: 1fr; }
.ub .split > img { min-height: 300px; }
.ub .guides { grid-template-columns: 1fr; }
.ub .band { align-items: flex-end; }
.ub .band .box { margin-block: 220px 18px; }
.ub .owngrid { padding: 18px; }
}
@media (max-width: 560px) {
.ub .tasks, .ub .models { grid-template-columns: 1fr; }
.ub .blogos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ub .pgrid { grid-template-columns: 1fr; }
.ub .pgrid a + a { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.ub .events li { grid-template-columns: 56px minmax(0, 1fr); }
.ub .events li .pill { grid-column: 1 / -1; justify-self: start; }
.ub .model.feat { grid-column: auto; }
.ub .task { aspect-ratio: 4 / 3; }
.ub .logo img { width: 124px; }
.ub footer .wrap { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.ub .hero .slide, .ub .task img, .ub .model img, .ub .dots button { transition: none; }
}
.ub .pagehead { padding-block: 36px 8px; display: flex; flex-direction: column; gap: 10px; }
.ub .crumbs { font-size: 13.5px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.ub .crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.ub .pagehead h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; }
.ub .pagehead p.lede { font-size: 17px; max-width: 60ch; }
.ub .two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
:root { --alert: #a13d24; }
.ub .panel { background: var(--paper); border-radius: 24px; padding: clamp(20px, 3vw, 36px); }
.ub .aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(16px + env(safe-area-inset-top, 0px)); }
.ub .aside .panel h3 { font-size: 19px; font-weight: 400; margin-bottom: 10px; letter-spacing: -0.01em; }
.ub .aside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.ub .aside li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.ub .aside ul li::before { content: "\2713"; width: 20px; height: 20px; border-radius: 50%; background: var(--sky); color: var(--ink); display: grid; place-items: center; font-size: 12px; margin-top: 2px; }
.ub .aside ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; counter-reset: step; }
.ub .aside ol li { counter-increment: step; }
.ub .aside ol li::before { content: counter(step); width: 20px; height: 20px; border-radius: 50%; background: var(--sky); color: var(--ink); display: grid; place-items: center; font-size: 12px; font-weight: 500; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ub .aside .quiet { font-size: 14px; color: var(--muted); }
.ub .f { display: flex; flex-direction: column; gap: 22px; }
.ub .f fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ub .f legend, .ub .f label.l { font-weight: 500; color: var(--ink); font-size: 15.5px; padding: 0; }
.ub .f .hint { font-size: 13.5px; color: var(--muted); margin-top: -4px; }
.ub .f input[type=text], .ub .f input[type=email], .ub .f select, .ub .f textarea { font: inherit; font-size: 15.5px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; width: 100%; }
.ub .f textarea { min-height: 150px; resize: vertical; }
.ub .f input:focus, .ub .f select:focus, .ub .f textarea:focus { outline: none; border-color: var(--slate); box-shadow: 0 0 0 3px var(--sky-soft); }
.ub .f .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ub .types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ub .types label { position: relative; border: 1.5px solid var(--line); border-radius: 16px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; background: var(--paper); }
.ub .types label b { color: var(--ink); font-weight: 500; font-size: 15px; }
.ub .types label span { font-size: 13px; color: var(--muted); }
.ub .types input { position: absolute; opacity: 0; }
.ub .types label:has(input:checked) { border-color: var(--slate); background: var(--sky-soft); box-shadow: inset 0 0 0 1px var(--slate); }
.ub .types label:has(input:focus-visible) { outline: 2px solid var(--slate); outline-offset: 2px; }
.ub .where-btn { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font: inherit; font-size: 14px; font-weight: 500; color: var(--slate); background: none; border: 0; border-radius: 8px; padding: 4px 6px; margin-left: -6px; cursor: pointer; }
.ub .where-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.ub .where-btn:focus-visible { outline: 2px solid var(--slate); outline-offset: 1px; }
.ub .where { background: var(--sky-soft); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.ub .where-models { display: flex; flex-wrap: wrap; gap: 6px; }
.ub .where-models button { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.ub .where-models button:hover { border-color: var(--slate); }
.ub .where-models button[aria-pressed="true"] { background: var(--slate); border-color: var(--slate); color: #fff; }
.ub .where-models button:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.ub .where-body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ub .where-body.noimg { grid-template-columns: minmax(0, 1fr); }
.ub .where-fig { margin: 0; }
.ub .where-fig img { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; }
.ub .where-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 46ch; }
.ub .where-text p { margin: 0; }
.ub .where-where { font-size: 15.5px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.ub .where-lead { font-size: 14px; line-height: 1.55; color: var(--body, var(--muted)); }
.ub .where-eg { align-self: flex-start; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .03em; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; overflow-wrap: anywhere; }
.ub .where-eg mark { background: var(--sky); color: inherit; border-radius: 3px; padding: 0 2px; }
.ub .where-foot { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); border-top: 1px solid rgba(59, 76, 94, .14); padding-top: 14px; }
.ub .ready { background: var(--ground); border-radius: 18px; padding: 18px !important; gap: 12px !important; }
.ub .ready legend { float: left; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ub .ready legend + * { clear: both; }
.ub .ready-count { font-size: 13px; font-weight: 500; color: var(--slate); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ub .ready-count.done { background: var(--slate); border-color: var(--slate); color: #fff; }
.ub .ready-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ub .ready-list label { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.ub .ready-list label:hover { border-color: var(--slate); }
.ub .ready-list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ub .ready-list .box { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); display: grid; place-items: center; }
.ub .ready-list .box::after { content: "\2713"; font-size: 13px; line-height: 1; color: #fff; opacity: 0; }
.ub .ready-list input:checked + .box { background: var(--slate); border-color: var(--slate); }
.ub .ready-list input:checked + .box::after { opacity: 1; }
.ub .ready-list input:focus-visible + .box { outline: 2px solid var(--slate); outline-offset: 2px; }
.ub .ready-list label:has(input:checked) { border-color: var(--slate); background: var(--sky-soft); }
.ub .ready-list .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ub .ready-list .t b { font-weight: 500; color: var(--ink); font-size: 15px; line-height: 1.4; }
.ub .ready-list .t small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.ub .ready-list li.miss label { border-color: var(--alert); }
.ub .ready-list li.miss .box { border-color: var(--alert); }
.ub .ready-msg { margin: 0; font-size: 14px; color: var(--alert); font-weight: 500; }
.ub .narrow { max-width: 900px; }
.ub .stack { display: flex; flex-direction: column; gap: 16px; }
.ub .crash-block { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; background: var(--slate); color: #fff; border-radius: 24px; padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 36px); }
.ub .crash-t { display: flex; flex-direction: column; gap: 6px; flex: 1 1 380px; min-width: 0; }
.ub .crash-t p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 15px; line-height: 1.55; max-width: 60ch; }
.ub .crash-t .crash-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--sky); }
.ub .crash-t h2 { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: #fff; }
.ub .crash-btn { flex: 0 0 auto; background: #fff; color: var(--ink); font-weight: 500; font-size: 15px; border-radius: 999px; padding: 13px 22px; text-decoration: none; white-space: nowrap; }
.ub .crash-btn:hover { background: var(--sky); }
.ub .crash-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ub .next { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.ub .next-title { margin: 0; font-weight: 500; color: var(--ink); font-size: 15.5px; }
.ub .next ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.ub .next li { counter-increment: step; display: flex; flex-direction: column; gap: 8px; }
.ub .next li::before { content: counter(step); width: 26px; height: 26px; border-radius: 50%; background: var(--sky); color: var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.ub .agree { border: 0; padding: 0; border-radius: 24px; background: var(--paper); color: var(--body); width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-shadow: 0 24px 70px rgba(19, 18, 17, .28); }
.ub .agree::backdrop { background: rgba(19, 18, 17, .45); }
.ub .agree-in { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 4vw, 34px); }
.ub .agree h2 { margin: 0; font-size: 24px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
.ub .agree-part { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.ub .agree-part h3 { margin: 0; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.ub .agree-part p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.ub .agree-tick { position: relative; display: flex; align-items: center; gap: 12px; background: var(--ground); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; font-weight: 500; color: var(--ink); font-size: 15px; }
.ub .agree-tick:has(input:checked) { border-color: var(--slate); background: var(--sky-soft); }
.ub .agree-tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ub .agree-tick .box { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--paper); display: grid; place-items: center; }
.ub .agree-tick .box::after { content: "\2713"; font-size: 13px; color: #fff; opacity: 0; }
.ub .agree-tick input:checked + .box { background: var(--slate); border-color: var(--slate); }
.ub .agree-tick input:checked + .box::after { opacity: 1; }
.ub .agree-tick input:focus-visible + .box { outline: 2px solid var(--slate); outline-offset: 2px; }
.ub .agree-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ub .agree-actions .pill:disabled { opacity: .4; cursor: not-allowed; }
.ub .agree-back { font: inherit; font-size: 14.5px; color: var(--slate); background: none; border: 0; padding: 8px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ub .drop { border: 1.5px dashed var(--line); border-radius: 16px; padding: 18px; text-align: center; color: var(--muted); font-size: 14.5px; background: var(--ground); }
.ub .drop b { color: var(--ink); font-weight: 500; }
.ub .robot { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #d3d3d3; border-radius: 4px; background: #f9f9f9; padding: 12px 16px; font-size: 14px; color: #222; width: max-content; max-width: 100%; }
.ub .robot i { width: 24px; height: 24px; border: 2px solid #c1c1c1; border-radius: 3px; background: #fff; }
.ub .robot small { color: #777; font-size: 10px; margin-left: 18px; }
.ub .f .submit { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.ub .f .submit .pill { font-size: 16px; padding: 14px 28px; }
.ub .optional summary { cursor: pointer; font-size: 14.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.ub .optional summary::-webkit-details-marker { display: none; }
.ub .optional[open] summary { margin-bottom: 10px; }
.ub .demo-msg { background: var(--sky-soft); border-radius: 14px; padding: 12px 16px; font-size: 15px; color: var(--ink); }
.ub .reqtools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ub .filters { display: flex; gap: 6px; background: var(--paper); border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.ub .filters button { font: inherit; font-size: 14px; border: 0; background: none; border-radius: 999px; padding: 8px 16px; cursor: pointer; color: var(--body); }
.ub .filters button[aria-pressed="true"] { background: var(--slate); color: #fff; }
.ub .reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ub .reqs li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; background: var(--paper); border-radius: 18px; padding: 16px 20px; border: 1px solid transparent; }
.ub .reqs li a:hover { border-color: var(--line); }
.ub .reqs .t { color: var(--ink); font-weight: 500; font-size: 16px; }
.ub .reqs .m { font-size: 13.5px; color: var(--muted); grid-column: 1; }
.ub .status { grid-row: 1 / span 2; grid-column: 2; font-size: 13px; font-weight: 500; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.ub .status.you { background: #fff1d6; color: #6b4a00; }
.ub .status.us { background: var(--sky-soft); color: var(--slate-2); }
.ub .status.done { background: var(--ground); color: var(--muted); border: 1px solid var(--line); }
.ub .example-tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 991px) {
.ub .two { grid-template-columns: 1fr; }
.ub .aside { position: static; }
}
@media (max-width: 560px) {
.ub .next ol { grid-template-columns: minmax(0, 1fr); }
.ub .next li { flex-direction: row; align-items: flex-start; gap: 12px; }
.ub .next li::before { flex: 0 0 26px; }
.ub .crash-btn { white-space: normal; text-align: center; width: 100%; }
.ub .types { grid-template-columns: minmax(0, 1fr); }
.ub .f .row2 { grid-template-columns: 1fr; }
.ub .where-body { grid-template-columns: minmax(0, 1fr); }
.ub .where-fig { max-width: 340px; }
}
.ub .ub-article { background: var(--paper); border-radius: 24px; padding: clamp(22px, 4vw, 52px); min-width: 0; }
.ub .ub-article .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; font-size: 13.5px; color: var(--muted); }
.ub .ub-article .meta .chip { background: var(--ground); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--ink); }
.ub .ub-body { max-width: 68ch; color: var(--body); font-size: 16.5px; line-height: 1.7; }
.ub .ub-body > * + * { margin-top: 18px; }
.ub .ub-body p { margin: 0; }
.ub .ub-body > * + p { margin-top: 18px; }
.ub .ub-body h2 { font-size: clamp(22px, 2.4vw, 27px); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; margin-top: 40px; }
.ub .ub-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ub .ub-body a:hover { text-decoration-color: var(--ink); }
.ub .ub-body .ub-a-lead { font-size: 19px; line-height: 1.55; color: var(--ink); }
.ub .ub-body .ub-a-hero { margin: 0 0 26px; }
.ub .ub-body .ub-a-hero img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 20px; }
.ub .ub-body .ub-a-older { background: #fff1d6; color: #5c4200; border-radius: 14px; padding: 12px 16px; font-size: 15px; }
.ub .ub-body ol.ub-a-steps { list-style: none; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 14px; }
.ub .ub-body ol.ub-a-steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.ub .ub-body ol.ub-a-steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; background: var(--slate); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 500; line-height: 1; margin-top: 1px; }
.ub .ub-body ul.ub-a-list { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ub .ub-body ul.ub-a-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.ub .ub-body ul.ub-a-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--slate); margin: 11px 0 0 4px; }
.ub .ub-body .ub-a-note { background: var(--sky-soft); border-radius: 18px; padding: 18px 22px; }
.ub .ub-body .ub-a-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px !important; }
.ub .ub-body .ub-a-note b { color: var(--ink); font-weight: 500; }
.ub .ub-body .ub-a-diagram { margin: 26px 0; display: grid; place-items: center; background: var(--sky-soft); border-radius: 20px; padding: 20px; }
.ub .ub-body .ub-a-diagram img { width: auto; max-width: min(100%, 340px); height: auto; border-radius: 12px; background: #fff; }
.ub .ub-body .ub-a-video { border-radius: 18px; overflow: hidden; background: var(--stone); }
.ub .ub-body .ub-a-help { background: var(--slate); color: #dfe6ec; border-radius: 20px; padding: 24px 26px; margin-top: 44px; }
.ub .ub-body .ub-a-help h2 { color: #fff; margin: 0 0 8px; font-size: 22px; }
.ub .ub-body .ub-a-help p + p { margin-top: 14px; }
.ub .ub-body a.ub-a-btn { display: inline-block; background: var(--sky); color: var(--ink); text-decoration: none; border-radius: 999px; padding: 12px 22px; font-weight: 500; font-size: 15px; }
.ub .ub-body .ub-a-more { border: 1px solid var(--line); border-radius: 20px; padding: 22px 26px; margin-top: 16px; }
.ub .ub-body .ub-a-more h2 { margin: 0 0 10px; font-size: 20px; }
.ub .ub-body .ub-a-more ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.ub .ub-body .ub-a-src { font-size: 13.5px; color: var(--muted); }
.ub .ub-body .ub-a-src a { color: var(--muted); }
.ub .feedback { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 15px; color: var(--ink); }
.ub .feedback button { font: inherit; font-size: 14px; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 7px 16px; cursor: pointer; }
.ub .feedback button:hover { border-color: var(--slate); }
.ub .toc a { display: block; padding: 6px 0; font-size: 14.5px; color: var(--body); border-bottom: 1px solid var(--line); }
.ub .toc a:last-child { border-bottom: 0; }
.ub .toc a:hover { color: var(--ink); }
.ub .gsearch { display: flex; align-items: center; background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 5px 5px 20px; max-width: 560px; }
.ub .gsearch input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15.5px; padding: 9px 0; color: var(--ink); outline: none; }
.ub .gsearch button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--slate); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ub .folders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ub .folder { background: var(--paper); border-radius: 22px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.ub .folder h2 { font-size: 21px; font-weight: 400; letter-spacing: -0.01em; }
.ub .folder .count { font-size: 13px; color: var(--muted); }
.ub .folder ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ub .folder li a { display: block; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.ub .folder li a:hover { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.ub .models-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.ub .models-strip a { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14.5px; color: var(--ink); }
.ub .models-strip a:hover { border-color: var(--slate); }
@media (max-width: 991px) {
.ub .folders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.ub .folders { grid-template-columns: 1fr; }
.ub .ub-body { font-size: 16px; }
.ub .ub-body .ub-a-hero img { aspect-ratio: 4 / 3; }
}
/* ---------- Lodge a request: Freshdesk's own ticket form restyled to match (inside .ub-lodge .ub-fd) ---------- */
.ub-lodge .wrap { width: 100%; }
.ub-lodge .ub-fd form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.ub-lodge .ub-fd .form-group { margin: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.ub-lodge .ub-fd .form-group.d-none { display: none !important; }
.ub-lodge .ub-fd label { font-weight: 500; color: #131211; font-size: 15.5px; margin: 0; }
.ub-lodge .ub-fd label .required, .ub-lodge .ub-fd .required_star, .ub-lodge .ub-fd label abbr { color: #a13d24; text-decoration: none; }
.ub-lodge .ub-fd .ub-hint { font-size: 13.5px; color: #6f6b67; margin: -4px 0 0; }
.ub-lodge .ub-fd .form-control, .ub-lodge .ub-fd input[type=text], .ub-lodge .ub-fd input[type=email], .ub-lodge .ub-fd textarea {
  font: inherit; font-size: 15.5px; color: #131211; background: #fff; border: 1.5px solid #dcd8d3; border-radius: 14px; padding: 13px 16px; box-shadow: none; width: 100%; }
.ub-lodge .ub-fd .form-control:focus, .ub-lodge .ub-fd input:focus, .ub-lodge .ub-fd textarea:focus { outline: none; border-color: #3b4c5e; box-shadow: 0 0 0 3px #e4f1f7; }
.ub-lodge .ub-fd .fields-info, .ub-lodge .ub-fd .text-muted.small:first-child { font-size: 13px; color: #6f6b67; }
/* Choices.js dropdowns */
.ub-lodge .ub-fd .choices { margin: 0; }
.ub-lodge .ub-fd .choices.form-select { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 14px; }
.ub-lodge .ub-fd .choices__inner { background: #fff; border: 1.5px solid #dcd8d3; border-radius: 14px; padding: 9px 14px; min-height: 50px; font-size: 15.5px; color: #131211; }
.ub-lodge .ub-fd .is-focused .choices__inner, .ub-lodge .ub-fd .is-open .choices__inner { border-color: #3b4c5e; box-shadow: 0 0 0 3px #e4f1f7; border-radius: 14px; }
.ub-lodge .ub-fd .choices__list--dropdown { border: 1px solid #dcd8d3; border-radius: 14px; margin-top: 6px; box-shadow: 0 16px 40px rgba(19, 18, 17, .12); overflow: hidden; }
.ub-lodge .ub-fd .choices__list--dropdown .choices__item--selectable.is-highlighted { background: #e4f1f7; }
.ub-lodge .ub-fd .choices__item--choice[data-value="Sales Enquiries"] { display: none !important; }
/* description editor */
.ub-lodge .ub-fd .fr-box { border: 1.5px solid #dcd8d3 !important; border-radius: 14px !important; overflow: hidden; }
.ub-lodge .ub-fd .fr-toolbar, .ub-lodge .ub-fd .fr-wrapper, .ub-lodge .ub-fd .fr-second-toolbar { border: 0 !important; }
.ub-lodge .ub-fd .fr-toolbar { border-bottom: 1px solid #dcd8d3 !important; background: #f3f2f0 !important; }
.ub-lodge .ub-fd .fr-element { min-height: 150px; font-size: 15.5px; }
/* attachments: a dashed drop area */
.ub-lodge .ub-fd .attachments-container { border: 1.5px dashed #dcd8d3; border-radius: 16px; padding: 16px 18px; background: #f3f2f0; }
.ub-lodge .ub-fd .attachments-container .btn-link { color: #3b4c5e; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
/* optional serial numbers */
.ub-lodge .ub-fd details.optional { display: flex; flex-direction: column; gap: 14px; }
.ub-lodge .ub-fd details.optional > summary { cursor: pointer; font-size: 14.5px; color: #3b4c5e; text-decoration: underline; text-underline-offset: 3px; width: max-content; max-width: 100%; }
.ub-lodge .ub-fd details.optional[open] > summary { margin-bottom: 14px; }
.ub-lodge .ub-fd details.optional .form-group + .form-group { margin-top: 14px !important; }
/* buttons */
.ub-lodge .ub-fd .fw-primary-button, .ub-lodge .ub-fd .new-ticket-submit-button { background: #3b4c5e !important; border: 0 !important; color: #fff !important; border-radius: 999px !important; padding: 14px 28px !important; font-weight: 500; font-size: 16px; }
.ub-lodge .ub-fd .fw-primary-button:hover { background: #2e3c4b !important; }
.ub-lodge .ub-fd .fw-secondary-button { background: none !important; border: 0 !important; color: #3b4c5e !important; text-decoration: underline; text-underline-offset: 3px; padding: 14px 8px !important; }
.ub-lodge .ub-fd .where-btn { margin-top: 2px; }
.ub-lodge .agree .pill:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 560px) { .ub-lodge .ub-fd .choices__inner { min-height: 48px; } }
.ub-lodge .ub-fd .attachments-container { display: flex; flex-direction: column; gap: 6px; min-height: 0 !important; height: auto !important; }
.ub-lodge .ub-fd .ub-att { display: flex; flex-direction: column; gap: 4px; }
.ub-lodge .ub-fd .ub-att p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #6f6b67; }
.ub-lodge .ub-fd .ub-att b { color: #131211; font-weight: 500; }
.ub-lodge .ub-fd .attachments-attach-row .btn-link { display: inline-flex; align-items: center; gap: 8px; }
.ub-lodge .ub-fd .attachments-attach-row .btn-link img.icon { display: inline-block; }
.ub-lodge .ub-fd .ub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ub-lodge .ub-fd .ub-actions .new-ticket-submit-button { width: auto !important; margin: 0 !important; }
.ub-lodge .ub-fd .ub-actions .fw-secondary-button { margin: 0 !important; }

/* ---------- "Ask us" answers (live widget) ---------- */
.ub .ask-msg p { margin: 0; }
.ub .ask-msg p + p { margin-top: 8px; }
.ub .ask-msg a { color: #3b4c5e; text-decoration: underline; text-underline-offset: 3px; }
.ub .ask-msg.you a { color: #fff; }
.ub .ask-msg.human { border-color: #3b4c5e; box-shadow: inset 3px 0 0 #3b4c5e; }
.ub .ask-msg.human::before { content: "From our team"; display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #6f6b67; margin-bottom: 4px; }
.ub .ask-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.ub .ask-dots i { width: 6px; height: 6px; border-radius: 50%; background: #6f6b67; animation: ub-ask-dot 1s infinite ease-in-out; }
.ub .ask-dots i:nth-child(2) { animation-delay: .15s; }
.ub .ask-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ub-ask-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ub .ask-dots i { animation: none; } }

/* ---------- inner pages in the Freshdesk theme: guides, folders, articles, search, my requests ---------- */
.ub .ub-sr { position: absolute; left: -9999px; }
.ub .folder h2 a { color: inherit; }
.ub .folder h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ub .folder .more { display: inline-block; margin-top: 14px; font-size: 14.5px; font-weight: 500; color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.ub .models-strip a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.ub .stuck { margin-top: 32px; }
.ub .guides-list li a { grid-template-columns: minmax(0, 1fr); }
.ub .guides-list .m, .ub .guides-list .m * { font-size: 13.5px; color: var(--muted); margin: 0; padding: 0; background: none; }
.ub .ub-pager { margin: 22px 0 0; }
.ub .ub-pager ul, .ub .ub-pager .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ub .ub-pager a, .ub .ub-pager span:not(.sr-only) { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 14.5px; }
.ub .ub-pager .active a, .ub .ub-pager .active span, .ub .ub-pager .current { background: var(--slate); border-color: var(--slate); color: #fff; }
.ub .ub-empty { padding: clamp(22px, 4vw, 40px); }
.ub .ub-empty h2 { font-size: clamp(22px, 2.4vw, 27px); font-weight: 400; margin: 0 0 10px; }
.ub .ub-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.ub .ub-empty-actions a:not(.pill) { font-weight: 500; color: var(--ink); border-bottom: 1.5px solid var(--ink); }
/* Freshdesk's article widgets inside our article card */
.ub .ub-article .meta span, .ub .ub-article .meta span * { font-size: 13.5px; color: var(--muted); margin: 0; }
.ub .ub-feedback { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--body); font-size: 15px; }
.ub .ub-feedback button, .ub .ub-feedback .btn, .ub .ub-feedback a.btn { border-radius: 999px !important; border: 1px solid var(--line) !important; background: var(--paper) !important; color: var(--ink) !important; padding: 8px 18px !important; font-size: 14.5px !important; box-shadow: none !important; }
.ub .ub-feedback button:hover, .ub .ub-feedback .btn:hover { border-color: var(--slate) !important; }
.ub .ub-article .attachments, .ub .ub-article .fw-attachments { margin-top: 24px; }
/* my requests: Freshdesk's ticket list and filters, restyled to match the mock-up */
.ub .ub-fw { min-width: 0; }
.ub .ub-ticket-filters { margin-bottom: 14px; }
.ub .ub-ticket-filters ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ub .ub-ticket-filters a, .ub .ub-ticket-filters button { border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 7px 14px; font-size: 14px; }
.ub .ub-ticket-filters .active, .ub .ub-ticket-filters a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.ub .ub-ticket-list { background: none; }
.ub .ub-ticket-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ub .ub-ticket-list li { background: var(--paper); border-radius: 18px; padding: 16px 20px; border: 1px solid transparent; }
.ub .ub-ticket-list li:hover { border-color: var(--line); }
@media (max-width: 860px) { .ub .two { grid-template-columns: minmax(0, 1fr); } }
/* embeds in older articles stay inside the card */
.ub .ub-body iframe, .ub .ub-body video, .ub .ub-body embed { max-width: 100%; }
.ub .ub-body iframe[src*="youtube"], .ub .ub-body iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; }
.ub .ub-body img { max-width: 100%; height: auto; }
/* "Was this article helpful?" reads left to right like the rest of the card */
.ub .ub-feedback .row { justify-content: flex-start !important; gap: 12px 18px; margin: 0; }
.ub .ub-feedback [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; text-align: left !important; }
.ub .ub-feedback h2 { font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0; margin: 0 !important; color: var(--ink); }
.ub .ub-feedback button { margin-right: 8px; }
/* my requests: Freshdesk's filter box sits in the page, as one row */
.ub .ub-ticket-filters .fw-sidebar { position: static !important; background: var(--paper) !important; border-radius: 18px; padding: 16px 18px !important; width: auto !important; }
.ub .ub-ticket-filters .tickets-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; align-items: end; }
.ub .ub-ticket-filters .tickets-filters > * { margin: 0 !important; }
.ub .ub-ticket-filters #fw-ticket-export-button { grid-column: 1 / -1; justify-self: start; width: auto !important; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 7px 14px; font-size: 14px; }
.ub .ub-ticket-filters .form-label { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.ub .ub-ticket-filters .choices__inner { border-radius: 12px; border: 1px solid var(--line); background: var(--paper); min-height: 0; padding: 8px 12px; }
.ub .ub-ticket-list .no-info { background: var(--paper); border-radius: 18px; padding: 20px; color: var(--muted); }
.ub .ub-ticket-filters .choices.form-select { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }

/* ---------- Freshdesk stock pages and page chrome (unscoped; fw- classes) ---------- */
body { background: #f3f2f0; font-family: "Agenda", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; }
/* the stock header was fixed to the top; ours scrolls with the page, so the space kept for it goes */
body, .fw-main-wrapper { padding-top: 0 !important; }
.fw-main-wrapper { margin-top: 0 !important; }
html body, body.portal--light { background: #f3f2f0 !important; }

/* Freshdesk's account menu inside our header: signed in = a clear "My account" pill; signed out = plain links */
.ub .ub-user { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; }
.ub .ub-user > li { list-style: none; padding: 0 !important; margin: 0; position: relative; width: auto !important; }
.ub .ub-user a.fw-avatar { width: auto !important; height: auto !important; line-height: 1.2; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #dcd8d3; border-radius: 999px; padding: 7px 14px !important; font-size: 14px; font-weight: 500; color: #131211 !important; background: #fff; }
.ub .ub-user a.fw-avatar::after { display: none; }
.ub .ub-user a.fw-avatar .fw-avatar-text { display: none; }
.ub .ub-user a.fw-avatar::before { content: "My account"; }
.ub .ub-user a.fw-avatar:hover { border-color: #3b4c5e; }
.ub .ub-user .dropdown-menu { right: 0; left: auto; border-radius: 14px; border: 1px solid #dcd8d3; box-shadow: 0 16px 40px rgba(19, 18, 17, .14); padding: 8px; min-width: 220px; }
.ub .ub-user .dropdown-item { border-radius: 8px; padding: 8px 12px; font-size: 14.5px; color: #131211; }
.ub .ub-user .dropdown-item:hover { background: #f3f2f0; }
.ub .ub-user .login-a, .ub .ub-user .sign-up-a, .ub .ub-user a.nav-link:not(.fw-avatar) { font-size: 14.5px; color: #131211 !important; padding: 4px 0 !important; }
.ub .ub-user .sign-up-a::after { display: none; }

/* Footer: Freshdesk's stock styles centre footer text; ours reads left-aligned like the mock-up */
.ub-bottom footer, .ub-bottom footer p, .ub-bottom footer h4, .ub-bottom footer ul, .ub-bottom footer li, .ub-bottom footer .law { text-align: left; }
.ub-bottom footer ul { align-items: flex-start; }
.ub-bottom footer a { padding-left: 0; padding-right: 0; }
.ub-bottom footer .law { justify-content: flex-start; }

/* Freshdesk pages we keep (a request, sign in, sign up, password, profile): same palette, no dark banner */
.fw-page-title-wrapper { background: #f3f2f0 !important; color: #131211 !important; }
.fw-page-title-wrapper .fw-page-title, .fw-page-title-wrapper h1 { color: #131211 !important; font-weight: 300; letter-spacing: -0.03em; font-size: clamp(30px, 4vw, 46px); }
.fw-page-title-wrapper p, .fw-page-title-wrapper .fw-icon-holder, .fw-page-title-wrapper [class^="icon-"] { color: #6f6b67 !important; }
.fw-searchbar-wrapper { background: #f3f2f0 !important; box-shadow: none !important; border-bottom: 1px solid #dcd8d3; position: static !important; }
.fw-searchbar-wrapper a, .fw-breadcrumb a { color: #131211 !important; }
.fw-wrapper-shadow, .fw-category-wrapper, .box-shadow { box-shadow: none !important; border-radius: 24px !important; background: #fff !important; }
.fw-content-wrapper, .fw-sidebar { border-radius: 24px; }
.fw-sidebar.bg-grey { background: #f3f2f0 !important; }
.fw-loginform-wrapper .fw-form-section, #password-reset-container { background: #fff; border-radius: 24px; padding: clamp(22px, 4vw, 44px) !important; margin-top: 32px; margin-bottom: 48px; }
.portal .btn-primary, .portal button.btn-primary, .portal input[type="submit"].btn-primary { background: #3b4c5e !important; border-color: #3b4c5e !important; color: #fff !important; border-radius: 999px !important; padding: 10px 24px !important; font-weight: 500; }
.portal .btn-primary:hover { background: #2e3c4b !important; border-color: #2e3c4b !important; }
.portal .btn-secondary, .portal .btn-default { border-radius: 999px !important; border-color: #dcd8d3 !important; color: #131211 !important; background: #fff !important; }
.portal .form-control, .portal input[type="text"], .portal input[type="email"], .portal input[type="password"], .portal textarea { border-radius: 12px !important; border-color: #dcd8d3 !important; }
.portal .form-control:focus { border-color: #3b4c5e !important; box-shadow: 0 0 0 3px #e4f1f7 !important; }
.portal a { color: #131211; }
.fw-filter-nav a { border-radius: 999px; }
.fw-filter-nav a.active { background: #131211 !important; color: #fff !important; }