/* Shared calculator layout and the site palette. */
.tl-calc{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:clamp(16px,2.4vw,28px);align-items:start;margin-top:clamp(20px,3vw,32px)}
.tl-card{background:var(--surface);border-radius:24px;box-shadow:inset 0 0 0 1px var(--line);padding:clamp(22px,3vw,36px)}
.tl-card h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:clamp(22px,1.9vw,27px);margin:0 0 6px}
.tl-card .tl-sub{margin:0 0 6px;color:var(--muted);font-size:15px}
.tl-fs{border:0;margin:0;padding:22px 0 0;margin-top:22px;border-top:1px solid var(--line);min-width:0}
.tl-fs legend{float:left;width:100%;padding:0;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;margin:0 0 4px;display:flex;align-items:baseline;gap:10px}
.tl-fs legend .opt{font-family:var(--body);font-weight:500;font-size:13px;color:var(--muted)}
.tl-fs legend+*{clear:both}
.tl-hint{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.tl-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tl-field{display:grid;gap:6px;min-width:0}
.tl-field label{font-size:14px;font-weight:600}
.tl-field .tl-help{font-size:13px;color:var(--muted);line-height:1.4}
.tl-input{width:100%;min-width:0;height:48px;padding:0 14px;border-radius:12px;border:0;background:var(--bg);color:var(--text);font:inherit;font-size:16px;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--line);color-scheme:inherit}
.tl-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tl-input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--crit)}
.tl-err{font-size:13px;color:var(--crit);font-weight:600}
.tl-rows{display:grid;gap:10px}
.tl-row{display:grid;grid-template-columns:1fr 1fr auto 44px;gap:10px;align-items:end;padding:12px;border-radius:16px;background:var(--subtle)}
.tl-row .tl-input{background:var(--surface)}
.tl-row .tl-away{align-self:center;margin-top:22px;font-size:13.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:96px}
.tl-row .tl-away strong{color:var(--text);font-weight:600}
.tl-x{width:44px;height:48px;display:grid;place-items:center;border-radius:12px;color:var(--muted)}
.tl-x:hover{background:var(--surface);color:var(--text)}
.tl-x svg{width:18px;height:18px}
.tl-add{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;padding:0 4px;font-weight:600;font-size:15px;color:var(--accent)}
.tl-add svg{width:18px;height:18px}
.tl-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.tl-foot svg{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:6px;color:var(--accent)}
.tl-link{min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--accent)}

/* result */
.tl-res{position:sticky;top:96px;border-radius:28px;overflow:hidden;isolation:isolate;color:var(--panel-text);background:linear-gradient(160deg,var(--brand-deep) 0%,var(--brand-mid) 58%,var(--brand-hi) 100%);padding:clamp(24px,2.6vw,32px)}
.tl-res:after{content:"";position:absolute;z-index:-1;right:-140px;top:-160px;width:380px;height:380px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff1f,0 0 0 60px #ffffff06,0 0 0 61px #ffffff14;pointer-events:none}
.tl-res .eyebrow{color:var(--panel-accent);margin-bottom:10px}
.tl-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tl-big .num{font-size:clamp(64px,6vw,84px);color:#fff}
.tl-big .of{font-size:18px;color:var(--panel-muted)}
.tl-state{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px 6px 10px;border-radius:999px;background:#ffffff1a;box-shadow:inset 0 0 0 1px #ffffff2e;font-size:14px;font-weight:600}
.tl-state i{width:8px;height:8px;border-radius:50%;background:#FFD27A}
.tl-bar{display:flex;height:12px;margin-top:20px;border-radius:999px;background:#ffffff1f;overflow:hidden;gap:2px}
.tl-bar span{display:block;height:100%}
.tl-bar .b-pr{background:#fff}
.tl-bar .b-pre{background:repeating-linear-gradient(135deg,#AFC6FF 0 4px,#8EABF5 4px 8px)}
.tl-legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--panel-muted)}
.tl-legend li{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:baseline}
.tl-legend b{color:var(--panel-text);font-weight:600;font-variant-numeric:tabular-nums}
.tl-legend .sw{width:12px;height:12px;border-radius:4px;transform:translateY(1px)}
.tl-legend .sw-pr{background:#fff}.tl-legend .sw-pre{background:repeating-linear-gradient(135deg,#AFC6FF 0 3px,#8EABF5 3px 6px)}.tl-legend .sw-left{box-shadow:inset 0 0 0 1.5px #ffffff73}
.tl-legend small{display:block;font-size:12.5px;color:var(--panel-muted);opacity:.85}
.tl-earliest{margin-top:22px;padding-top:20px;border-top:1px solid #ffffff26}
.tl-earliest p{margin:0}
.tl-earliest .k{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--panel-accent)}
.tl-earliest .v{font-family:var(--display);font-weight:600;font-size:clamp(30px,2.6vw,36px);letter-spacing:-.03em;margin:6px 0 4px;color:#fff}
.tl-earliest .s{font-size:14.5px;color:var(--panel-muted)}
.tl-note{margin:16px 0 0;font-size:13.5px;line-height:1.5;color:var(--panel-muted)}
.tl-meta{margin:14px 0 0;display:grid;gap:4px;font-size:13.5px;color:var(--panel-muted)}
.tl-meta b{color:var(--panel-text);font-weight:600;font-variant-numeric:tabular-nums}
.tl-cta{margin-top:22px;padding-top:20px;border-top:1px solid #ffffff26;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.tl-cta>img{width:40px;height:40px;border-radius:10px}
.tl-cta p{margin:0;font-size:13.5px;line-height:1.5;color:var(--panel-muted)}
.tl-cta p strong{display:block;color:var(--panel-text);font-size:14px;font-weight:600;margin-bottom:4px}
.tl-cta p span{display:block}
.tl-cta__button{grid-column:3;justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;color:#fff;background:#ffffff1a;box-shadow:inset 0 0 0 1px #ffffff73;transition:background .18s var(--ease-out),transform .18s var(--ease-out)}
.tl-cta__button:hover{background:#ffffff2e}

/* timeline */
.tl-time{margin-top:clamp(16px,2.4vw,28px)}
.tl-time__track{position:relative;height:44px;margin-top:18px;border-radius:12px;background:var(--subtle);overflow:hidden}
.tl-time__pre{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent) 0 5px,color-mix(in srgb,var(--accent) 12%,transparent) 5px 10px)}
.tl-time__pr{position:absolute;inset:0 0 0 auto;background:color-mix(in srgb,var(--accent) 78%,transparent)}
.tl-time__trip{position:absolute;top:0;bottom:0;background:var(--surface);box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line);min-width:3px}
.tl-time__mark{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--text)}
.tl-time__axis{position:relative;height:22px;margin-top:8px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-time__axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.tl-time__axis span:first-child{transform:none}.tl-time__axis span:last-child{transform:translateX(-100%)}
.tl-time__key{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--muted)}
.tl-time__key i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:8px}
.k-pre{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,transparent) 0 3px,color-mix(in srgb,var(--accent) 14%,transparent) 3px 6px)}
.k-pr{background:color-mix(in srgb,var(--accent) 78%,transparent)}
.k-trip{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.tl-time__pin{position:absolute;top:-30px;transform:translateX(-50%);font-size:12px;font-weight:600;white-space:nowrap;color:var(--text)}
.tl-time__wrap{position:relative;padding-top:24px}

/* content */
.tl-list{margin:0 0 16px;padding-left:1.1em}
.tl-list li{margin:0 0 8px}
.tl-faq details{border-top:1px solid var(--line)}
.tl-faq details:first-of-type{border-top:0}
.tl-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:10px 0;cursor:pointer;list-style:none;font-weight:600;font-size:17px}
.tl-faq summary::-webkit-details-marker{display:none}
.tl-faq summary svg{width:18px;height:18px;flex:none;color:var(--muted);transform:rotate(90deg);transition:transform .24s var(--ease-out)}
.tl-faq details[open] summary svg{transform:rotate(-90deg)}
.tl-faq details p{margin:0 0 18px;color:var(--muted)}
.tl-src{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.tl-src li{padding:10px 0;border-top:1px solid var(--line);font-size:16px}
.tl-src li:first-child{border-top:0}
.tl-src small{display:block;color:var(--muted);font-size:13.5px}
.tl-mbar{display:none}

@media(max-width:1000px){.tl-calc{grid-template-columns:minmax(0,1fr)}.tl-res{position:relative;top:0}}
@media(max-width:640px){
  .tl-fields{grid-template-columns:1fr}
  .tl-card{padding:22px 18px}
  .tl-row{grid-template-columns:1fr 1fr;gap:8px;padding:10px 10px 4px}
  .tl-row .tl-away{grid-column:1;grid-row:2;margin-top:0}
  .tl-row .tl-x{grid-column:2;grid-row:2;justify-self:end;height:44px}
  .tl-row .tl-input{padding:0 8px;font-size:15px}
  .tl-time__axis .ax-yr{display:none}
  .tl-row .tl-field{min-width:0}
  .tl-mbar{display:flex;position:fixed;z-index:40;left:12px;right:12px;bottom:12px;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 8px 0 18px;border-radius:18px;background:rgba(10,15,26,.88);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);color:#F3F6FE;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 18px 40px -18px #0308148c;font-size:14px}
  [data-theme=night] .tl-mbar{background:rgba(36,66,132,.9)}
  .tl-mbar b{font-family:var(--display);font-weight:600;font-size:18px;font-variant-numeric:tabular-nums}
  .tl-mbar span{color:rgba(236,242,252,.78)}
  .tl-mbar a{display:inline-flex;align-items:center;height:44px;padding:0 14px;border-radius:12px;background:#ffffff1f;color:#fff;font-weight:600;text-decoration:none}
  .footer{padding-bottom:96px}
}

[hidden]{display:none!important}
.tl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.tl-form-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.tl-example-button{min-height:44px;padding:8px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);color:var(--accent);font-size:14px;font-weight:600}
.tl-example-tag{display:inline-flex;margin-bottom:10px;padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;font-size:12px;font-weight:600}
.tl-example #count-content{opacity:.86}
.tl-example #timeline-track{opacity:.48}
.tl-example #timeline-pin,.tl-example #timeline-mark{opacity:.65}
.tl-mbar.tl-example [data-example-numbers]{opacity:.86}
.tl-row-hint{grid-column:1/-1;color:var(--muted);font-size:13px;line-height:1.4}
.tl-row-hint:empty,.tl-err:empty{display:none}
.tl-unavailable{margin:14px 0;color:var(--panel-text);font-size:17px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tl-res a:focus-visible{outline-color:#fff}
.tl-time__mark{top:18px;bottom:auto;height:56px}
.tl-time__pin{top:0}
@media(max-width:640px){.tl-row .tl-row-hint{grid-row:3}.tl-mbar{height:auto;min-height:60px}.tl-mbar .tl-example-tag{margin:0 6px 0 0;font-size:10px;padding:3px 5px}.tl-mbar.tl-example [data-example-numbers],.tl-mbar.tl-example #mobile-date{font-size:12px}.tl-mbar.tl-example b{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.tl-example #res-total{opacity:.65}
/* Keep small text readable where the blue gradient and glass surfaces are brightest. */
.lg-hero__body>p,.tl-cta p{color:var(--panel-text)}
.lg-hero .lg-meta{background:color-mix(in srgb,var(--brand-deep) 24%,transparent);color:var(--panel-text)}

/* --- Country flag in the hero: one round flag tells the calculators apart at a glance --- */
.tl-hero .tl-flag{position:absolute;z-index:1;right:clamp(28px,6vw,88px);top:clamp(32px,5vw,72px);width:clamp(84px,10vw,136px);height:auto;border-radius:50%;box-shadow:0 22px 44px -14px rgba(3,8,20,.6),0 0 0 4px rgba(255,255,255,.16);animation:tl-flag-float 7s ease-in-out infinite;will-change:transform}
@keyframes tl-flag-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.tl-hero .tl-flag{animation:none;transform:rotate(-5deg)}}
@media(max-width:900px){.tl-hero h1{padding-right:clamp(0px,14vw,120px)}}
@media(max-width:640px){.tl-hero .tl-flag{position:static;display:block;width:56px;margin:0 0 16px;box-shadow:0 12px 24px -10px rgba(3,8,20,.6),0 0 0 3px rgba(255,255,255,.16)}.tl-hero h1{padding-right:0}}

/* --- Schengen --- */
[data-tool=schengen] #count-content{min-height:540px}
[data-tool=schengen] #count-content[hidden],[data-tool=schengen] #timeline-content[hidden]{display:block!important;visibility:hidden}
[data-tool=schengen] #result-error{position:absolute;top:76px;left:32px;right:32px;margin:0}
[data-tool=schengen] #timeline-content{min-height:145px}
[data-tool=schengen] .tl-time{min-height:340px}
[data-tool=schengen] .tl-example-tag[hidden]{display:inline-flex!important;visibility:hidden}
[data-tool=schengen] .tl-time>.tl-example-tag{position:absolute;right:24px;top:20px}
[data-tool=schengen] .tl-time{position:relative}
[data-tool=schengen] .tl-mbar .tl-example-tag[hidden]{display:none!important}
.sc-open{grid-column:1/-1;display:grid;gap:4px}
.sc-open label{display:inline-flex;align-items:center;gap:9px;min-height:44px;width:fit-content;font-size:14px;font-weight:600;cursor:pointer}
.sc-open input{width:20px;height:20px;accent-color:var(--accent)}
.sc-open input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sc-row .tl-input:disabled{opacity:.5}
.sc-back{min-height:58px;margin-top:18px;font-size:14px;color:var(--panel-text)}
.sc-back p{margin:0 0 5px}
[data-tool=schengen] .tl-earliest{min-height:180px}
[data-tool=schengen] .tl-earliest .v{font-size:clamp(26px,2.4vw,32px)}
#result-badge[data-status=safe] i{background:#BAEDD5}
#result-badge[data-status=critical]{box-shadow:inset 0 0 0 2px #FFD27A}
#result-badge[data-status=overstay] i{background:#FFB7C0;border-radius:2px;transform:rotate(45deg)}
[data-tool=schengen] .tl-bar{position:relative}
#over-marker{position:absolute;right:4px;top:1px;bottom:1px;width:4px;background:var(--brand-deep);box-shadow:0 0 0 2px #FFB7C0}
.sc-time-stay{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 78%,transparent);min-width:2px}
.sc-today-key{background:var(--text);width:2px!important}
.sc-exit[hidden]{display:block!important;visibility:hidden}
.sc-exit{margin:12px 0 0;text-align:right;font-size:14px;font-weight:600;color:var(--accent)}
@media(max-width:640px){.sc-row .sc-open{grid-row:3}.sc-row .tl-row-hint{grid-row:4}[data-tool=schengen] #mobile-date{font-size:12px}}

/* --- UK --- */
.uk-tool #result{min-height:510px}
.uk-tool .uk-projections{min-height:144px;margin-top:20px;padding-top:18px;border-top:1px solid #ffffff26;display:grid;align-content:start;gap:12px;color:var(--panel-text);font-size:15px;line-height:1.55}
.uk-projections p{margin:0}
.uk-tool .tl-state i{background:#B9EFCE}
.uk-tool [data-severity=warning] .tl-state i{background:#FFD27A}
.uk-tool [data-severity=critical] .tl-state i,.uk-tool [data-severity=over] .tl-state i{background:#FFC1C1}
.uk-tool [data-severity=over] .b-pr{background:repeating-linear-gradient(135deg,#fff 0 5px,#FFC1C1 5px 10px)}
.uk-still{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:44px}
.uk-still input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.uk-still label{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:14px;font-weight:600}
.uk-tool .tl-input:disabled{opacity:.55}
.uk-tool .tl-time__trip{background:color-mix(in srgb,var(--accent) 78%,transparent);box-shadow:none}
.uk-tool .tl-time__trip.uk-open{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 65%,transparent) 0 5px,color-mix(in srgb,var(--accent) 25%,transparent) 5px 10px);border-right:2px dashed var(--text)}
.uk-key-today{background:var(--text);width:2px!important;border-radius:0!important}
.uk-tool #timeline-content{min-height:156px}
@media(max-width:640px){.uk-tool .tl-row .uk-still{grid-row:3}.uk-tool .tl-row .tl-row-hint{grid-row:4}.uk-mobile{min-height:68px}.uk-mobile>span[data-example-numbers]{flex:1;min-width:0}.uk-mobile #mobile-state{display:block;font-size:12px}.uk-tool #result{min-height:552px}}

/* --- Canada PR --- */
[data-tool=canada-pr] .tl-earliest .v{font-size:clamp(24px,2.2vw,29px);line-height:1.3}
[data-tool=canada-pr] .tl-state[data-status=onTrack] i{background:#B9EFCE}
[data-tool=canada-pr] .tl-state[data-status=atRisk] i{background:#FFD27A;border-radius:2px;transform:rotate(45deg)}
[data-tool=canada-pr] #count-content{min-height:415px}
[data-tool=canada-pr] #count-content[hidden],[data-tool=canada-pr] #timeline-content[hidden]{display:block!important;visibility:hidden}
[data-tool=canada-pr] #result-error{position:absolute;top:70px;left:32px;right:32px}
[data-tool=canada-pr] .tl-example-tag[hidden]{display:inline-flex!important;visibility:hidden}
[data-tool=canada-pr] .tl-mbar .tl-example-tag[hidden]{display:none!important}
.pr-still{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:44px}
.pr-still input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.pr-still input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pr-still label{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:14px;font-weight:600}
.pr-still .tl-err{flex-basis:100%}
[data-tool=canada-pr] .tl-input:disabled{opacity:.55}
.pr-window{margin-top:22px}
.pr-window h3{font-size:17px;margin:0;font-weight:600}
.pr-window .tl-time__wrap{padding-top:0}
.pr-window .tl-time__track{margin-top:12px}
.pr-time-present,.pr-time-projected{position:absolute;top:0;bottom:0}
.pr-time-present{background:color-mix(in srgb,var(--accent) 78%,transparent)}
.pr-time-projected{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,transparent) 0 5px,color-mix(in srgb,var(--accent) 14%,transparent) 5px 10px)}
.pr-axis{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.pr-marker{position:absolute;top:-4px;height:52px;width:2px}
.pr-marker-today{background:var(--text)}
.pr-marker-return{border-left:3px dashed var(--accent)}
.pr-key-today{background:var(--text);width:2px!important;border-radius:0!important}
.pr-key-return{border-left:3px dashed var(--accent);width:3px!important;border-radius:0!important}
.pr-markers{margin:8px 0;font-size:13px;font-weight:600;color:var(--text)}
.pr-crosslink{margin:24px 0;font-size:15px;color:var(--muted)}
[data-tool=canada-pr] .tl-example #timeline-content{opacity:.65}
[data-tool=canada-pr] .nav__links a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:640px){.pr-row .pr-still{grid-row:3}.pr-row .tl-row-hint{grid-row:4}.pr-mobile>span[data-example-numbers]{flex:1;min-width:0}.pr-mobile #mobile-state{display:block;font-size:12px}.pr-mobile #mobile-date{display:block;font-size:12px}.pr-mobile{gap:8px}[data-tool=canada-pr] #count-content{min-height:460px}}

/* --- US N-400 --- */
[data-tool=us-naturalization] .us-route-options{display:grid;gap:4px}
.us-route-options label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:14px;font-weight:600}
.us-route-options input,.us-still input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.us-route-options span[id]{display:flex;align-items:center}
.us-spouse{margin-top:14px}
.us-still{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:44px}
.us-still label{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:14px;font-weight:600}
.us-still .tl-err{width:100%}
[data-tool=us-naturalization] input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[data-tool=us-naturalization] .tl-input:disabled{opacity:.55}
[data-tool=us-naturalization] .tl-earliest .v{font-size:clamp(22px,2.1vw,27px);line-height:1.35;margin-bottom:10px}
[data-tool=us-naturalization] .us-binding{margin-top:10px;color:var(--panel-text)}
.us-risks{display:grid;gap:12px;margin:18px 0 0;padding:14px 14px 14px 30px;border-radius:14px;border:1px solid var(--panel-accent);color:var(--panel-text);font-size:14px;line-height:1.55}
[data-tool=us-naturalization] .tl-time__pr{right:auto}
.us-time-projected{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 22%,transparent)}
[data-tool=us-naturalization] .tl-time__trip.us-time-risk,.us-risk-key{background:repeating-linear-gradient(135deg,var(--surface) 0 4px,var(--muted) 4px 6px);box-shadow:inset 0 0 0 1px var(--muted)}
[data-tool=us-naturalization] .us-today{background:var(--text);height:62px;top:14px}
[data-tool=us-naturalization] .us-early{background:var(--accent);width:4px;border:1px solid var(--surface);height:72px;top:9px;transform:translateX(-3px)}
.us-today-key{background:var(--text);width:2px!important;border-radius:0!important}
.us-early-key{background:var(--accent);width:4px!important;border-radius:0!important}
.us-projected-key{background:color-mix(in srgb,var(--accent) 22%,transparent)}
[data-tool=us-naturalization] .us-timeline-dates{margin-top:12px;font-size:13px}
[data-tool=us-naturalization] #mobile-date{display:block;font-size:12px}
[data-tool=us-naturalization] .tl-mbar>span[data-example-numbers]{flex:1;min-width:0}
@media(max-width:640px){.us-row .us-still{grid-row:3}.us-row .tl-row-hint{grid-row:4}[data-tool=us-naturalization] .tl-mbar b{font-size:16px}[data-tool=us-naturalization] .tl-mbar{min-height:68px}}

@media(max-width:640px){.tl-cta{grid-template-columns:40px minmax(0,1fr);align-items:start}.tl-cta__button{grid-column:2}}
/* Muted hierarchy stays above AA even at the lightest end of the result gradient. */
.tl-cta p strong{color:#fff}
.tl-cta p span{color:var(--panel-text)}
.tl-cta__button{background:#0b1f5259}
.tl-cta__button:hover{background:#0b1f5280}

/* Homepage-backed app benefits below the calculator, shared with counting guides. */
.tl-hero .hero-hook{font-weight:600;margin-bottom:10px}
.voice-app{margin:48px 0;padding:32px;border:1px solid var(--line);border-radius:24px;background:var(--subtle)}
.voice-app__intro{color:var(--muted);max-width:65ch}
.voice-app__layout{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:40px;align-items:center}
.voice-app__features{display:grid;gap:24px}
.voice-feature h3{font-size:20px;line-height:1.3;margin:0 0 6px}
.voice-feature p{margin:0;max-width:58ch}
.voice-app__button{justify-self:start;min-height:48px;cursor:pointer}
.voice-app__screen{margin:0;min-width:0}
.voice-app__screen img{width:100%;height:auto;border-radius:20px;border:1px solid var(--line)}
.voice-app__screen figcaption{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}
.guide .voice-app{margin:0;padding:24px}
.guide .voice-app__layout{grid-template-columns:minmax(0,1fr) 180px;gap:24px}
@media(max-width:640px){.voice-app{padding:24px;margin:32px 0}.voice-app__layout,.guide .voice-app__layout{grid-template-columns:minmax(0,1fr);gap:28px}.voice-app__screen{width:210px;max-width:100%;justify-self:center}.voice-feature h3{font-size:19px}}
/* iOS Safari keeps a date input at its intrinsic width and lets it overflow the card; drop the native box. */
input.tl-input[type=date]{-webkit-appearance:none;appearance:none;display:block;max-width:100%;box-sizing:border-box;line-height:48px;text-align:left}
input.tl-input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
/* Long SEO titles wrapped to five lines on a 402 pt phone; a touch smaller keeps them at three or four. */
@media(max-width:640px){.tl-hero h1{font-size:clamp(30px,8.4vw,38px)}}
/* One static sentence with the rule itself, right under the hook: readers and AI answers quote it (GEO, 8 Oct). */
.lg-hero__body .hero-rule{color:var(--panel-text);padding-left:14px;box-shadow:inset 3px 0 0 var(--panel-accent)}
.lg-hero__body .hero-rule strong{font-weight:600}