/* v38.6 MOBILE HOME + SERVICE HUB */
.services15-head{
  display:grid;
  gap:7px;
  margin:8px 0 14px;
}
.services15-kicker{
  font-size:11px;
  line-height:1.3;
  font-weight:850;
  letter-spacing:.06em;
  color:var(--accent);
}
.services15-head h2{
  margin:0;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.02em;
}
.services15-head p{
  margin:0;
  max-width:640px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.service-hub15{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:0 0 18px;
}
.service-hub15-secondary{margin-bottom:22px}
.service-card15{
  min-width:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  box-shadow:0 8px 26px rgba(20,38,63,.07);
}
.service-card15-featured{
  background:linear-gradient(135deg,#eef7ff 0%,#f4fbf7 100%);
  border-color:#cfdee8;
}
.service-card15-coming{background:linear-gradient(180deg,#fff 0%,#f7f9fb 100%)}
.service-top15{display:flex;align-items:flex-start;gap:12px}
.service-top15>div:last-child{min-width:0;flex:1 1 auto}
.service-icon15{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border:1px solid #dbe5ee;
  border-radius:13px;
  background:#fff;
  font-size:22px;
  line-height:1;
}
.service-kicker15{
  margin:1px 0 5px;
  color:var(--accent);
  font-size:11px;
  line-height:1.3;
  font-weight:850;
  letter-spacing:.055em;
}
.service-card15 h3{
  margin:0 0 7px;
  font-size:18px;
  line-height:1.25;
  letter-spacing:-.01em;
}
.service-card15 p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.service-card15 .btn,
.service-card15 a.btn{
  display:block;
  width:100%;
  min-height:48px;
  margin-top:13px;
  padding:12px 14px;
  border-radius:14px;
  text-align:center;
  line-height:1.25;
  white-space:normal;
}
.service-stages15{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.service-stages15 span{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:5px 8px;
  border:1px solid #dce6ec;
  border-radius:999px;
  background:#fff;
  color:#405267;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  white-space:nowrap;
}
.service-status15{
  display:inline-flex;
  margin-top:12px;
  padding:7px 10px;
  border-radius:999px;
  background:#eef2f5;
  color:#64748b;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
}
.other-services15-head{margin-top:4px}
.other-services15-head h3{font-size:18px}
.other-services15-head p{font-size:12px}
html.tg-dark .service-card15{background:var(--card);border-color:var(--line)}
html.tg-dark .service-card15-featured{background:#162737}
html.tg-dark .service-icon15,
html.tg-dark .service-stages15 span{
  background:rgba(255,255,255,.06);
  border-color:var(--line);
  color:var(--text);
}
html.tg-dark .why15{
  background:var(--card);
  border-color:var(--line);
}
html.tg-dark .why15 p{color:var(--muted)}
html.tg-dark .why15-item{
  background:rgba(255,255,255,.06);
  color:var(--text);
}

/* Canonical build marker. The value itself is mounted by assets/js/version.js. */
.top{position:sticky}
.top .brand{padding-right:56px}
.app-version{
  position:absolute;
  top:10px;
  right:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:24px;
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.84);
  color:var(--muted);
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
}
html.tg-dark .app-version{background:rgba(255,255,255,.07);color:var(--text)}

/* Grid buttons must be allowed to shrink; otherwise 320px Chromium can clip headings. */
.tile15{min-width:0}
.tile15 h3,.tile15 p{overflow-wrap:anywhere}

@media (max-width:600px){
  /* The sticky brand is enough on a phone; do not spend a viewport on the same logo twice. */
  .logo-showcase15{display:none!important}
  .screen{padding-top:13px}
  .home15{gap:12px}
  .services15-head{margin:2px 0 10px;gap:6px}
  .services15-head h2{font-size:23px;line-height:1.14}
  .services15-head p{font-size:13px;line-height:1.48}
  .service-hub15{gap:10px;margin-bottom:14px}
  .service-hub15-secondary{margin-bottom:20px}
  .service-card15{padding:14px;border-radius:18px}
  .service-top15{gap:10px}
  .service-icon15{width:40px;height:40px;flex-basis:40px;border-radius:12px;font-size:20px}
  .service-kicker15{font-size:11px;line-height:1.25;margin-bottom:4px;letter-spacing:.035em}
  .service-card15 h3{font-size:17px;line-height:1.23;margin-bottom:6px}
  .service-card15 p{font-size:12.5px;line-height:1.48}
  .service-card15 .btn,.service-card15 a.btn{margin-top:12px;min-height:48px;font-size:14px}
  .service-stages15{gap:5px;margin-top:9px}
  .service-stages15 span{font-size:11px;padding:5px 7px}

  /* Practical mobile floor: no 7–9px UI labels. */
  .brand small{font-size:12px;line-height:1.25;margin-top:2px}
  .brandtag{font-size:11px;line-height:1.2;padding:3px 6px;letter-spacing:.025em}
  .tg-context{font-size:11px}
  .cards15-head h3,.other-services15-head h3{font-size:18px}
  .cards15-head p,.other-services15-head p{font-size:12px;line-height:1.48}
  .tile15 h3{font-size:15px}
  .tile15 p{font-size:12px;line-height:1.48}
  .step15 span{font-size:12px}
  .footer15,.footer15 button{font-size:11px}
  .app-version{top:9px;right:12px;font-size:11px}
}

@media (max-width:360px){
  .service-top15{gap:9px}
  .service-icon15{width:38px;height:38px;flex-basis:38px;font-size:19px}
  .service-card15 h3{font-size:16px}
  .brandline{gap:5px}
  .brandtag{font-size:10.5px}
}

.entry-help{margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:13px;line-height:1.55}
.entry-help summary{cursor:pointer;font-weight:750}
.entry-help li{margin:10px 0}
.entry-help a{color:var(--accent);text-decoration:underline}
.entry-note{font-size:12px;line-height:1.5;color:var(--muted)}

/* v38.9.4 UI hotfix — one primary color for service actions. */
#openCorrectionBtn.btn.secondary,
.service-card15 a.btn.secondary[href$="insurance-refund.html"]{
  background:var(--accent);
  color:#fff;
}
#openCorrectionBtn.btn.secondary:focus-visible,
.service-card15 a.btn.secondary[href="insurance-refund.html"]:focus-visible,
#resultExample a:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);
  outline-offset:2px;
}

/* Old inline example copy stays in source for compatibility, but the shell replaces it with two real actions. */
#resultExample{
  margin:16px 0;
  padding:0;
  border:0;
  background:transparent;
}
#resultExample>summary,
#resultExample>p:not(:last-child){display:none}
#resultExample>p:last-child{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:0;
  font-size:0;
}
#resultExample>p:last-child a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  border-radius:13px;
  background:#fff;
  color:var(--accent);
  text-decoration:none;
  text-align:center;
  font-size:13px;
  line-height:1.3;
  font-weight:800;
  box-shadow:0 5px 16px rgba(35,48,91,.05);
}
#resultExample>p:last-child a:first-child{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
html.tg-dark #resultExample>p:last-child a{
  background:var(--card);
  border-color:var(--line);
}
html.tg-dark #resultExample>p:last-child a:first-child{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
@media(max-width:430px){
  #resultExample>p:last-child{grid-template-columns:1fr}
}

/* The shell converts the closed <details> into this always-visible two-button block. */
.result-example-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:16px 0;
}
.result-example-actions>a.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 13px;
  border-radius:13px;
  text-align:center;
  text-decoration:none;
  line-height:1.3;
  white-space:normal;
}
.result-example-actions>a.btn.secondary{
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  background:#fff;
  color:var(--accent);
}
html.tg-dark .result-example-actions>a.btn.secondary{
  background:var(--card);
  border-color:var(--line);
  color:var(--text);
}

/* Keep the long privacy/server explanation behind a user-opened disclosure. */
.data-processing-details{margin:10px 0 16px}
.data-processing-details>summary{color:var(--accent)}
.data-processing-copy{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.data-processing-copy .backlink{display:inline;margin:8px 0 0}

@media(max-width:430px){
  .result-example-actions{grid-template-columns:1fr}
}

/* v38.10.0 — concise guidance and stable entry links. */
.bki-entry-choices{display:grid;gap:10px;margin:16px 0}
.bki-entry-choices a{text-decoration:none;text-align:center}
#routeStatus{font-size:14px;color:var(--muted);margin:8px 0}
#routeStatus:empty{display:none}
#bkiHelp li{margin:10px 0;line-height:1.5}
#upload .docs-generic[hidden]{display:none}
#upload .cta button{margin-top:10px;width:100%}
@media(min-width:601px){.logo-showcase15{max-width:240px;margin:0 auto}.logo-showcase15 img{max-height:150px;object-fit:contain}.logo-tagline15{position:static;font-size:11px;padding:4px}}
/* Full-check stage labels must stay absent from standalone quick checks. */
#resultStage[hidden],#legalStage[hidden]{display:none!important}

/* v38.10.1: explain the service before its main action. */
#home .why15{margin:0 0 4px;padding:0;border:0;background:transparent;box-shadow:none}
#home .why15 h3{font-size:16px;margin:0 0 6px}
#home .why15 p{margin:0;line-height:1.45}
#home .services15-head{margin-bottom:0}
.process15.process15-inline{padding:0;margin:12px 0 0;border:0;background:transparent;box-shadow:none}
.process15-inline h4{margin:0;font-size:13px;line-height:1.4}
.process15-inline .service-stages15{margin-top:6px}
@media(max-width:600px){
  .top .brand{grid-template-columns:56px minmax(0,1fr);gap:9px}
  .top .logo,.top .logo img{width:56px;height:56px}
  .top .brandtag{display:none}
  .top .brand small{font-size:12px;line-height:1.3}
  #home .why15 h3{font-size:15px}
  #home .why15 p{font-size:12.5px}
}

/* v38.10.3 — larger brand header and full-check trust actions kept inside the primary card. */
.top{padding:14px 16px 11px}
.top .brand{
  grid-template-columns:72px minmax(0,1fr);
  gap:12px;
  padding-right:64px;
  align-items:center;
}
.top .logo,.top .logo img{width:72px;height:72px}
.top .brand h1{font-size:24px;line-height:1.04}
.top .brand small{
  display:grid;
  gap:2px;
  margin-top:5px;
  font-size:13px;
  line-height:1.3;
}
.top .brand small b{font-size:14px;color:var(--text)}
.top .brand small span{font-size:12.5px;color:var(--muted)}
.service-card15-featured .result-example-actions{
  margin:14px 0 0;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
}
.service-card15-featured .result-example-actions>a.btn{margin-top:0}
@media(max-width:600px){
  .top{padding:12px 12px 10px}
  .top .brand{grid-template-columns:64px minmax(0,1fr);gap:10px;padding-right:58px}
  .top .logo,.top .logo img{width:64px;height:64px}
  .top .brand h1{font-size:21px}
  .top .brand small{font-size:12.5px;line-height:1.28;margin-top:4px}
  .top .brand small b{font-size:13px}
  .top .brand small span{font-size:11.75px}
  .app-version{top:12px;right:12px}
}