/* The colours, space, radii and type are brand.css (design/brand.css, shared with the public site), linked before this file. */
/* The residents' pages on the portal host: the front page, Getting online, My account.
One plain stylesheet (no build step), served by the hub with the app's own fonts, like the operator app's
static files. Nothing here comes from outside the hub: a resident with no plan has no internet
(docs/design/ui-standard.md). The front page keeps its page-specific rules in its own <style>. */
@font-face {font-family:"Geist"; src:url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap;}
@font-face {font-family:"Geist Mono"; src:url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap;}

/* Tokens: design/tokens.css (docs/design/isopo-identity.md), the only home of colour, space, radius and type; the names below are the
ones this file already used, now pointing at them. */
:root {--brand: var(--blue); --brand-soft: var(--blue-soft); --field: var(--control);}
* {box-sizing: border-box;}
body {margin:0; background:var(--surface); color:var(--ink); font:16px/1.5 "Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
main {max-width:30rem; margin:0 auto; padding:2rem 1rem 3rem;}
.brand {font-size:.875rem; font-weight:600; letter-spacing:.06em; color:var(--brand);}
h1 {margin:.75rem 0 .5rem; font-size:1.625rem; line-height:1.2; letter-spacing:-.01em;}
.card {margin-top:1.25rem; padding:1.25rem; border-radius:var(--radius-panel); background:var(--panel); border:1px solid var(--line);}
.card h2 {margin:0 0 .5rem; font-size:1rem;}
.muted {color:var(--muted); font-size:.9375rem;}
.note {margin-top:1rem; padding:.75rem 1rem; border-radius:.875rem; background:var(--warn-soft); color:var(--warn); font-size:.9375rem;}
ul {margin:.25rem 0 0; padding-left:1.25rem;} li {margin:.25rem 0;}
table {width:100%; border-collapse:collapse;} td {padding:.5rem 0; border-top:1px solid var(--line);}
td:last-child {text-align:right; font-weight:600; white-space:nowrap;}
ol {margin:.25rem 0 0; padding-left:1.35rem;} ol li {margin:.4rem 0;}
a {color:var(--brand);} .mono {font-family:"Geist Mono",ui-monospace,Menlo,Consolas,monospace; white-space:nowrap;}
.pick {display:block; margin-top:.625rem; padding:.875rem 1rem; border-radius:.875rem; background:var(--panel); border:1px solid var(--line); font-weight:600; text-decoration:none;}
.pick small {display:block; font-weight:400; color:var(--muted);}

/* My account (guide 34, Part 5) */
.acct main {max-width:38rem; padding:1rem 1.125rem 2.5rem;}
.acct main.wide {max-width:60rem;}
/* Header: the front page's mark, and a quiet way out */
.a-header {display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.25rem 0 1.1rem;}
.a-mark {display:flex; align-items:center; gap:.7rem; color:var(--ink); text-decoration:none;}
.a-mark .wordmark {height:1.9rem;}
.a-submark {display:block; margin-top:.22rem; color:var(--muted); font-size:.875rem; line-height:1; font-weight:600;}
.a-quiet {display:inline-flex; align-items:center; min-height:2.75rem; padding:0 .25rem; font:inherit; font-size:.88rem; font-weight:650; color:var(--muted);
background:none; border:0; text-decoration:none; cursor:pointer;}
.a-quiet:hover {color:var(--brand); text-decoration:underline;}
/* "This phone" (ADR-051): one strip under the header on every My account page; a word and an icon, whatever the colour */


.a-phone {display:grid; grid-template-columns:2.25rem 1fr; gap:.5rem .8rem; align-items:center; margin:.2rem 0 .9rem; padding:.9rem 1rem; border-radius:var(--radius-panel); background:var(--unknown-soft); color:var(--ink);}
.a-phone-icon {display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.75rem; background:var(--panel); color:var(--unknown);}
.a-phone-icon .ic {width:1.3rem; height:1.3rem;}
.a-phone-text strong {display:block; font-size:.96rem; line-height:1.3;} .a-phone-text span {display:block; margin-top:.15rem; color:var(--muted); font-size:.875rem; line-height:1.4;}
.a-phone form, .a-phone > .btn {grid-column:1 / -1;} .a-phone .btn {margin-top:.2rem;}
.a-phone.ok {background:var(--ok-soft);} .a-phone.ok .a-phone-icon {color:var(--ok);}
.a-phone.warn {background:var(--warn-soft);} .a-phone.warn .a-phone-icon {color:var(--warn);}
.a-phone.orange {background:var(--orange-soft);} .a-phone.orange .a-phone-icon {color:var(--orange-ink);}
@media (min-width:40rem) {.a-phone {grid-template-columns:2.25rem 1fr auto;} .a-phone form, .a-phone > .btn {grid-column:auto;} .a-phone .btn {width:auto; margin:0; padding:.7rem 1.1rem;} }
.a-phone .a-phone-name {grid-column:1 / -1; display:grid; grid-template-columns:1fr; gap:.4rem .6rem; align-items:center; margin-top:.35rem; padding-top:.7rem; border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);}
.a-phone-name label {color:var(--ink); font-size:var(--text-small); font-weight:650;} .a-phone-name label small {display:block; margin-top:.1rem; font-weight:400; color:var(--muted); font-size:var(--text-small); line-height:1.4;}
.a-phone-name input {min-width:0; color:var(--ink); font-weight:500;} .a-phone .a-phone-name .btn {margin:0; width:100%;}
@media (min-width:40rem) {.a-phone .a-phone-name {grid-template-columns:1fr auto;} .a-phone-name label {grid-column:1 / -1;} .a-phone .a-phone-name .btn {width:auto; padding:.7rem 1.1rem;} }
.a-done {margin:.9rem 0 0; font-size:1.05rem; font-weight:650;}


.a-hint {margin:.8rem 0 0; color:var(--muted); font-size:.875rem; line-height:1.45;}
.a-back {display:inline-flex; align-items:center; gap:.4rem; min-height:2.75rem; margin:-.4rem 0 .1rem; color:var(--muted); font-size:.88rem; font-weight:650; text-decoration:none;}
.a-back:hover {color:var(--brand);} .a-back .ic {width:1rem; height:1rem;}
.ic {flex:none; width:1.1rem; height:1.1rem;}
/* Page heading (sub-pages) */
.acct h1 {margin:.1rem 0 .35rem; font-size:clamp(2rem,7vw,2.75rem); line-height:1.02; letter-spacing:-.045em; font-weight:800;}
.a-lede {margin:0 0 1rem; color:var(--muted); font-size:.95rem; line-height:1.5;}
.a-lede strong {color:var(--ink);}
/* Hero: the one coloured block, for a page's headline fact */









 

/* The one primary action, and the quiet ones */
.btn{display:flex; align-items:center; justify-content:center; gap:.75rem; width:100%; min-height:3.25rem; margin-top:1rem; padding:.8rem 1rem; font:inherit; font-size:1.05rem;
font-weight:800; text-align:center; text-decoration:none; cursor:pointer; color:var(--navy); background:var(--orange); border:0; border-radius:var(--radius-button);}

.btn:hover{background:var(--orange-hover);}
.btn .ic{width:1.2rem; height:1.2rem;}
.btn.quiet {color:var(--ink); background:transparent; border:1px solid var(--field); font-weight:650;}
.btn.quiet:hover {background:var(--brand-soft);}
.link {display:inline; width:auto; min-height:0; margin:0; padding:0; font:inherit; font-weight:650; color:var(--brand); text-decoration:underline; text-underline-offset:.16em; background:none; border:0; cursor:pointer;}
a.link, .acct .a-text a, .panel a:not(.btn):not(.row-link) {color:var(--brand); font-weight:650; text-underline-offset:.16em;}
:focus-visible {outline:3px solid var(--focus); outline-offset:3px;}
/* Panels: an icon, a heading, a lede, then rows */
.panel {min-width:0; margin-top:.8rem; padding:clamp(1.1rem,3vw,1.5rem); border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--panel);}
.panel-head {display:flex; align-items:flex-start; gap:.8rem; margin-bottom:.9rem;}
.panel-head:last-child {margin-bottom:0;}
.tile {display:grid; place-items:center; flex:none; width:2.25rem; height:2.25rem; border-radius:.75rem; color:var(--brand); background:var(--brand-soft);}
.panel h2 {margin:0; font-size:1.08rem; line-height:1.3; letter-spacing:-.02em;}
.panel-lede {margin:.28rem 0 0; color:var(--muted); font-size:.875rem; line-height:1.45;}
.err {display:grid; grid-template-columns:1.4rem 1fr; gap:.6rem; margin:.8rem 0 0; padding:.8rem .9rem; border-radius:.85rem; background:var(--warn-soft); color:var(--warn); font-size:.9rem; line-height:1.45;}
.err .ic {margin-top:.1rem;} .err .mono {white-space:normal; overflow-wrap:anywhere;}

.err a.link {color:inherit;}
/* Forms */
label {display:block; margin-top:1rem; font-size:.875rem; font-weight:650;}
label small {display:block; font-weight:400; color:var(--muted); font-size:.875rem;}
input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel] {display:block; width:100%; min-height:3rem; margin-top:.375rem; padding:.7rem .875rem; font:inherit; color:inherit;
background:var(--panel); border:1px solid var(--field); border-radius:.8rem;}

/* Signed-in pages */
.a-meter {height:.5rem; margin-top:1rem; border-radius:1rem; background:rgba(255,255,255,.18); overflow:hidden;}
.a-meter i {display:block; height:100%; border-radius:1rem; background:var(--hero-ink);}







.btn.pick {color:var(--brand); background:var(--brand-soft); border:1px solid transparent;} .btn.pick:hover {border-color:var(--brand); background:var(--brand-soft);}
.btn.danger {color:var(--on-danger); background:var(--danger);} .btn.danger:hover {filter:brightness(.92);}

.tile.warn {color:var(--warn); background:var(--warn-soft);}

.row {display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; padding:.7rem 0; border-top:1px solid var(--line); font-size:.9rem; line-height:1.45;}
.row > :last-child {text-align:right; flex-shrink:0; max-width:60%;}
.row small, .hint {display:block; font-weight:400; color:var(--muted); font-size:.875rem; line-height:1.45;}
.money {font-weight:780; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap;}
.figure {margin:0; font-size:1.02rem;}
.item {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.6rem 1rem; margin-top:.55rem; padding:.8rem .9rem; border:1px solid var(--line); border-radius:.85rem;}


.item .btn {grid-column:1 / -1; margin-top:.2rem;} .item .hint {grid-column:1 / -1; margin:0; color:var(--warn);}
.inset {display:grid; grid-template-columns:1.65rem 1fr; gap:.7rem; align-items:start; margin-top:.8rem; padding:.85rem .9rem; border-radius:.85rem; background:var(--surface); color:var(--muted); font-size:.875rem; line-height:1.5;}
.inset .ic {width:1.25rem; height:1.25rem; margin-top:.05rem; color:var(--brand);} .inset p {margin:0;} .inset strong {color:var(--ink);}
.chip {display:inline-block; padding:.2rem .45rem; border:1px solid var(--line); border-radius:.4rem; color:var(--ink); background:var(--surface);
font:.82rem/1.35 "Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow-wrap:anywhere;}
.chip.mac {white-space:nowrap;}
.badge {display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .55rem; border-radius:1rem; color:var(--brand); background:var(--brand-soft); font-size:.78rem; font-weight:700; white-space:nowrap;}
.badge:before {content:""; width:.4rem; height:.4rem; border-radius:50%; background:currentColor;}
.badge.off {color:var(--warn); background:var(--warn-soft);}




 
.a-text {margin:.9rem 0 0; color:var(--muted); font-size:.875rem; line-height:1.5;}
.ok {color:var(--brand); font-weight:700;}
fieldset {border:0; padding:0; margin:1rem 0 0;} legend {padding:0; font-size:.875rem; font-weight:650;}
.choice {display:flex; gap:.7rem; align-items:flex-start; min-height:3rem; margin-top:.5rem; padding:.75rem .9rem; border:1px solid var(--line); border-radius:.85rem; background:var(--panel); font-weight:600; font-size:.94rem;}
.choice input {margin-top:.3rem; accent-color:var(--blue);} .choice .money {margin-left:auto; padding-left:.75rem;}
.choice:has(input:checked) {border-color:var(--brand); background:var(--brand-soft);}
@media (min-width:42rem) {.acct main {padding:1rem 1.125rem 2.5rem;}





.panel {margin-top:1.1rem;}
}
@media (max-width:41.99rem) {.acct main {padding:.75rem .8rem 1.5rem;} }

/* The identity (docs/design/isopo-identity.md): the orbit behind a hero (a drawing, never text), the wordmark, and the big number. */






.orbit {display:block; width:100%; height:auto; overflow:visible;}
.orbit-sweep {stroke-dasharray:36 564; stroke-dashoffset:36; opacity:0;}
.orbit-live .orbit-sweep {opacity:.95; animation:orbit-sweep 8s linear infinite;}
@keyframes orbit-sweep {from {stroke-dashoffset:36;} to {stroke-dashoffset:-564;} }
.wordmark {display:block; width:auto;}
/* Open-up rows without a script: the portal has none (docs/design/isopo-identity.md, section 5; ADR for the identity). <details> is a
button with aria-expanded to every browser and screen reader, opens in place, and several can be open. */

.a-row {position:relative; border-bottom:1px solid var(--line);}
.a-row:last-child {border-bottom:0;}
.a-row > summary {display:grid; grid-template-columns:minmax(0,1fr) auto 1.5rem; grid-template-areas:"title chip chev" "fig when chev"; gap:.25rem 1rem; align-items:center; min-height:3.5rem;
padding:1rem 1.25rem; cursor:pointer; list-style:none;}
.a-row > summary::-webkit-details-marker {display:none;}
.a-row .t {grid-area:title; font-weight:620; overflow-wrap:anywhere;} .a-row .c {grid-area:chip; justify-self:end;}
.a-row .f {grid-area:fig; font-weight:680; font-variant-numeric:tabular-nums;} .a-row .w {grid-area:when; justify-self:end; color:var(--muted); font-size:.875rem;}
.a-row .f:empty, .a-row .w:empty, .a-row .c:empty {display:none;}
.a-row .v {grid-area:chev; color:var(--muted); display:grid; place-items:center; transition:transform var(--dur) var(--ease);}
.a-row[open] .v {transform:rotate(90deg);}
.a-row[open] {z-index:1; border-radius:var(--radius-row); box-shadow:var(--shadow);}
.a-row[open]::before {content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:var(--radius-row) 0 0 var(--radius-row); background:var(--blue);}
.a-row .d {padding:0 1.25rem 1.25rem;} .a-row .d .row:first-child {border-top:0;}
.a-row .quick {padding:0 1.25rem 1rem;} .a-row .quick .btn {margin-top:0;}
.a-row > summary:focus-visible {outline-offset:-3px; border-radius:var(--radius-row);}


@media (prefers-reduced-motion:reduce) {*, ::before, ::after {animation:none !important; transition:none !important;} }





/* The purchase redesign (docs/design/plan-purchase.md): the plans straight away, tabs, a card per plan, and a sheet. Tokens only. */




.a-plans-wrap {margin-top:1.4rem;}
.a-plans-title {margin:0 0 .6rem; font-size:var(--text-section); letter-spacing:-.02em;}
.a-tabs {display:flex; gap:.25rem; padding:.25rem; border-radius:var(--radius-row); background:var(--sunken);}
.a-tabs a {flex:1; display:grid; place-items:center; min-height:2.75rem; border-radius:calc(var(--radius-row) - .2rem); color:var(--muted); font-weight:650; text-decoration:none;}
.a-tabs a[aria-current] {color:var(--ink); background:var(--panel); box-shadow:0 1px 2px rgb(11 31 58 / 8%);}
.a-plans {display:grid; grid-template-columns:minmax(0,1fr); gap:.7rem; margin-top:.8rem;}
@media (min-width:36rem) {.a-plans {grid-template-columns:repeat(2,minmax(0,1fr));} } @media (min-width:60rem) {.a-plans {grid-template-columns:repeat(3,minmax(0,1fr));} }
.a-tag {position:absolute; top:.6rem; right:.6rem; padding:.1rem .5rem; border-radius:999px; color:var(--orange-ink); background:var(--orange-soft); font-size:.75rem; font-weight:700;}





.acct main.sheet {max-width:30rem;}












/* ==== The My account audit of 2026-10-13 (docs/design/my-account-audit-2026-10-14.md). Tokens only; nothing smaller than 14px except a badge (12 to 13px). ==== */
.a-skip {position:absolute; left:.8rem; top:-4rem; z-index:20; padding:.7rem 1rem; border-radius:var(--radius-row); color:var(--navy); background:var(--orange); font-weight:700; text-decoration:none;}
.a-skip:focus {top:.8rem;}


/* The "This phone" strip, slim: one line of status, its one button beside it (finding 4). The full strip keeps its place on the home page and Devices. */
.a-phone[data-size="slim"] {grid-template-columns:1.75rem minmax(0,1fr) auto; gap:.1rem .6rem; align-items:center; margin:0 0 .8rem; padding:.3rem .5rem .3rem .7rem; border-radius:var(--radius-row);}
.a-phone[data-size="slim"] .a-phone-icon {width:1.75rem; height:1.75rem; border-radius:.55rem;} .a-phone[data-size="slim"] .a-phone-icon .ic {width:1.05rem; height:1.05rem;}
.a-phone[data-size="slim"] .a-phone-text {padding:.35rem 0; font-size:var(--text-small); line-height:1.4;}
.a-phone[data-size="slim"] .a-phone-text strong, .a-phone[data-size="slim"] .a-phone-text span {display:inline; margin:0; font-size:var(--text-small);}
.a-phone[data-size="slim"] .a-phone-text span {margin-left:.35rem; color:var(--muted);}
.a-phone[data-size="slim"] > form {grid-column:auto; margin:0;}
.a-strip-btn {display:inline-flex; align-items:center; min-height:2.75rem; padding:0 .4rem; font:inherit; font-size:var(--text-small); font-weight:700; color:var(--ink); background:none; border:0; text-decoration:underline; text-underline-offset:.16em; white-space:nowrap; cursor:pointer;}
.a-strip-btn:hover {color:var(--brand);}
.a-strip-btn.primary {padding:0 .9rem; border-radius:.6rem; color:var(--navy); background:var(--orange); text-decoration:none;} .a-strip-btn.primary:hover {color:var(--navy); background:var(--orange-hover);}
.a-phone[data-size="slim"] .a-phone-name-more {grid-column:1 / -1;} .a-phone-name-more summary {display:flex; align-items:center; min-height:2.75rem; font-size:var(--text-small); font-weight:650; color:var(--brand); cursor:pointer;}
@media (max-width:30rem) {.a-phone[data-size="slim"] {grid-template-columns:1.75rem minmax(0,1fr);} .a-phone[data-size="slim"] > form, .a-phone[data-size="slim"] > .a-strip-btn {grid-column:1 / -1; justify-self:end;} }
/* Navigation (finding D.1): Home, Plans, Devices, Activity, Help. A bar along the bottom of a phone; a row under the strip on a wide screen. */
.a-nav {display:flex; gap:.25rem; margin:0 0 .9rem; padding:.25rem; border-radius:var(--radius-panel); background:var(--panel); box-shadow:0 0 0 1px var(--line);}
.a-nav a {flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:2.75rem; padding:0 .5rem; border-radius:var(--radius-row); color:var(--muted); font-size:var(--text-small); font-weight:650; text-decoration:none;}
.a-nav a:hover {color:var(--brand);}
.a-nav a[aria-current="page"] {color:var(--blue); background:var(--blue-soft); font-weight:750; box-shadow:inset 0 -3px 0 var(--blue);}
.a-nav .ic {width:1.2rem; height:1.2rem;}
@media (max-width:41.99rem) {.has-nav main {padding-bottom:calc(5.25rem + env(safe-area-inset-bottom));}
.a-nav {position:fixed; z-index:10; left:0; right:0; bottom:0; margin:0; gap:0; padding:.25rem .15rem calc(.25rem + env(safe-area-inset-bottom)); border-radius:0; background:var(--panel); box-shadow:var(--shadow-nav); border-top:1px solid var(--line);}
.a-nav a {flex-direction:column; justify-content:center; gap:.1rem; min-height:3.5rem; padding:0 .1rem; border-radius:.6rem; font-size:var(--text-small);}
.a-nav a[aria-current="page"] {box-shadow:inset 0 3px 0 var(--blue);}
}
/* The orbit is a drawing behind the hero's words: quieter, so it can't cut through a line of them. */

/* Plans: one to any number of cards, never a lone half-width card (findings 7 and 12). Two across on a phone, the last odd one across the width. */
.a-plans {grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));}
@media (min-width:42rem) {.a-plans[data-count="1"] {grid-template-columns:minmax(0,24rem);} }
.a-tag {position:static; align-self:flex-start; margin-bottom:.35rem; font-size:.8125rem;}
.a-tabs a {display:flex; align-items:center; justify-content:center; gap:.45rem;}
.a-tabs a[aria-current] {font-weight:750;}



/* The sheet (finding 5): what you have and what's left to pay first, and a chosen way that says so in words. */





/* Activity: History and Receipts, grouped by month, filtered, in pages (findings 13 and D.1). */


.a-pages {display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line);}
.a-page-link {display:inline-flex; align-items:center; justify-content:center; min-width:5rem; min-height:2.75rem; padding:0 1rem; border:1px solid var(--control); border-radius:.8rem; color:var(--ink); font-weight:650; text-decoration:none;}
.a-page-link.off {border-color:transparent;} .a-page-of {color:var(--muted); font-size:var(--text-small);}

/* Devices (finding D.3 and 2, 3, 19): a summary, compact rows that open in place, Older folded away, danger buttons that look like danger, Security apart. */


.a-count {display:inline-grid; place-items:center; min-width:1.6rem; height:1.6rem; padding:0 .45rem; border-radius:999px; color:var(--muted); background:var(--sunken); font-size:.8125rem; font-weight:700;}








.a-overflow {position:relative;} .a-overflow > summary {display:inline-flex; align-items:center; gap:.4rem; min-height:2.75rem; padding:0 .8rem; border-radius:.8rem; color:var(--muted); font-size:var(--text-small); font-weight:650; list-style:none; cursor:pointer;}
.a-overflow > summary::-webkit-details-marker {display:none;} .a-overflow > summary:hover {color:var(--ink); background:var(--sunken);}
.a-overflow[open] > .a-overflow-menu {position:static; /* in the flow: it pushes the next row down and never covers it (portal review 4.4) */ z-index:3; left:0; top:100%; min-width:15rem; margin-top:.25rem; padding:.35rem; border-radius:var(--radius-row); background:var(--panel); box-shadow:var(--shadow), 0 0 0 1px var(--line);}






/* The public header (the front page and Help). */
.home-header {display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.25rem 0 1.1rem;}
.home-mark {display:flex; align-items:center; gap:.7rem; color:var(--ink); text-decoration:none;}
.home-mark .wordmark {height:1.9rem;}
.home-submark {color:var(--muted); font-size:.875rem; font-weight:600;}
.home-help-link {color:var(--muted); font-size:.88rem; font-weight:650; text-decoration:none;}
.home-help-link:hover,.home-help-link:focus-visible {color:var(--brand); text-decoration:underline;}
@media (max-width:42rem) {.home-header {padding:.2rem .1rem .85rem;} }
.portal-help main {max-width:60rem; padding:1rem 1.125rem 2.5rem;} @media (max-width:42rem) {.portal-help main {padding:.75rem .8rem 1.5rem;} }
.portal-help main > * {max-width:44rem;} .portal-help main > .home-header {max-width:none;}

.error-card {margin-top:.8rem; padding:clamp(1.25rem,4vw,2rem);} .error-card h1 {margin:0 0 .5rem; font-size:1.75rem; line-height:1.15; letter-spacing:-.035em;} .error-card .btn {max-width:22rem;}


.panel .a-tabs a:hover {color:var(--ink);}
/* The password's eye (V1 order, 2026-10-17): an icon inside the field, never a text link. The page's main button is made the Enter key's by a hidden copy first
in the form, so the eye can sit in the field. */
.a-pw {position:relative;} .a-pw input {padding-right:3.25rem;}
.a-eye {position:absolute; top:.375rem; right:0; display:grid; place-items:center; width:3rem; height:3rem; margin:0; padding:0; border:0; border-radius:.75rem; background:none; color:var(--muted); cursor:pointer;}
.a-eye[hidden] {display:none;} .a-eye .ic {width:1.35rem; height:1.35rem;} .a-eye:hover {color:var(--ink);} .a-eye:focus-visible {outline:3px solid var(--focus); outline-offset:-3px;}
.a-eye .eye-off {display:none;} .a-eye[aria-pressed="true"] .eye-off {display:inline-grid;} .a-eye[aria-pressed="true"] .eye-on {display:none;}
.a-enter {display:none;}
/* Home around the balance and the current plan (review 3.1, 3.2): the plan leads, the balance is the next big fact with its one action. */
/* Home around two numbers (portal review 3.1, 3.2): the balance and the current plan, side by side, both on the first phone screen, with a thin bar instead of the big gradient card. */
/* Devices, the simpler page (portal review 4.2): a line per device that opens to rename it (a pencil), one quiet button, and "Report as not mine". */
.a-quiet-btn {display:inline-flex; align-items:center; min-height:2.75rem; padding:0 .25rem; border:0; border-radius:.5rem; color:var(--ink); font-size:var(--text-small); font-weight:650; text-decoration:underline; text-underline-offset:.2em; background:transparent;}
.a-quiet-btn:hover {color:var(--brand);} .a-quiet-btn:focus-visible {outline:3px solid var(--focus); outline-offset:2px;}
.sr {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* Copy (portal review 5.3): the value and its button on one line; the button is only shown when the page's script runs. */

.a-copy {display:inline-flex; align-items:center; gap:.4rem; min-height:2.75rem; padding:0 .9rem; border:1px solid var(--control); border-radius:.75rem; background:transparent; color:var(--ink); font:inherit; font-size:var(--text-small); font-weight:650; cursor:pointer;}
.a-copy[hidden] {display:none;} .a-copy .ic {width:1rem; height:1rem;} .a-copy:hover {background:var(--blue-soft);} .a-copy:focus-visible {outline:3px solid var(--focus); outline-offset:2px;}
.a-copied {min-width:3.5rem; color:var(--muted); font-size:var(--text-small);} 

/* The public header (portal review 1.3): a visible Sign in beside the quiet link. */
.home-header-links {display:flex; align-items:center; gap:.9rem;} .home-header-links .home-help-link {display:inline-flex; align-items:center; min-height:2.75rem;}
.home-signin {display:inline-flex; align-items:center; min-height:2.75rem; padding:0 1.1rem; border-radius:999px; background:var(--orange); color:var(--navy); font-size:.9rem; font-weight:750; text-decoration:none;}
.home-signin:hover {background:var(--orange-hover);} .home-signin:focus-visible {outline:3px solid var(--focus); outline-offset:3px;}
@media (max-width:30rem) {.home-header {flex-wrap:wrap; gap:.4rem .75rem;} .home-submark {display:none;} .home-header-links {gap:.5rem; margin-left:auto;} .home-signin {padding:0 .9rem;} }
/* Devices (Harry's brief, 2026-10-27): icons over words. A row is a name, a status dot, a chip, a pencil and one "..." menu; 44px targets throughout. */

.dv-list {margin:0; padding:0; list-style:none; border-radius:var(--radius-panel); background:var(--panel); box-shadow:0 0 0 1px var(--line);}
.dv {position:relative; border-top:1px solid var(--line);} .dv:first-child {border-top:0;}
.dv-main {display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .6rem; min-height:3.5rem; padding:.45rem 6rem .45rem 1rem;}
.dv-name {font-weight:700; overflow-wrap:anywhere;}
.dv-status {display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); font-size:var(--text-small);}
.dv-dot {width:.6rem; height:.6rem; border-radius:50%; background:var(--unknown, #aab4c4);} .dv-status.on .dv-dot {background:var(--ok, #1a7f4b);}




.sc-buttons {display:grid; gap:.6rem; margin-top:.6rem;} .sc-buttons form {margin:0;} .sc-buttons .btn {margin-top:0; gap:.6rem; justify-content:flex-start;} .sc-buttons .btn small {margin-left:auto; color:var(--muted); font-weight:500; overflow-wrap:anywhere;}
/* The code page (sign-up and sign-in by phone, 2026-10-27): six big digits, no clutter. */
.a-otp {font-size:1.75rem; font-weight:700; letter-spacing:.5em; text-align:center; font-variant-numeric:tabular-nums; padding-left:1.25rem;}
 

/* Devices as two lists (second brief, 2026-10-27): a row is a name, a dot or a chip, and one quiet button at the right. */
.dv {display:flex; align-items:center; justify-content:space-between; gap:.4rem; padding-right:.75rem;} .dv > form {margin:0; flex:none;}
.dv > .dv-main {flex:1; min-width:0; padding-right:0;} .dv > .a-quiet-btn, .dv > form .a-quiet-btn {flex:none;}




/* ==== The brand look (Harry, 2026-10-28: the app looks like isopo.net). Cards from brand.css; these are the app's own layouts. ==== */
.a-submark, .home-submark{display:none;}
.home-mark .wm {font-size:1.6rem;}
.a-mark .wm {font-size:1.6rem;}











.btn.dark {color:var(--hero-ink); background:var(--night);} .btn.dark:hover {background:#1a2438;}


.a-plans {gap:.8rem;}
.a-plan {position:relative; min-height:15rem; padding:1.4rem; gap:.9rem; justify-content:flex-start; text-decoration:none;}
.a-plan .b-price {margin-top:auto; font-size:clamp(2.8rem,12vw,3.6rem);} .a-plan .b-terms {margin-top:-.4rem; font-size:1.3rem;} .a-plan .b-fine {color:#5a6275; opacity:1;}
.a-plan:hover {box-shadow:0 0 0 2px var(--orange);} .a-plan:focus-visible {outline:3px solid var(--focus); outline-offset:2px;}
.a-buy {align-self:flex-start; min-height:2.75rem; display:inline-flex; align-items:center; padding:0 1.3rem; border-radius:var(--radius-button); color:var(--navy); background:var(--orange); font-weight:800;}
.a-plans .a-tag {top:1.1rem; right:1.1rem;}
.a-tabs {background:var(--sunken); border-radius:999px;} .a-tabs a {border-radius:999px;}
/* The app's front page: the same cards as isopo.net */
.portal-home {background:var(--surface);}
.portal-home main {display:grid; gap:.8rem; max-width:60rem; padding:1rem 1rem 2.5rem;}
.f-hero {min-height:clamp(17rem,40vw,24rem); padding:clamp(1.5rem,5vw,3rem); justify-content:flex-start;}
.f-hero h1 {max-width:12ch; margin:0; font-size:clamp(2.6rem,10vw,5.2rem); font-weight:800; letter-spacing:-.04em; word-spacing:.05em; line-height:.96; text-wrap:balance;}

.f-steps {display:grid; gap:.8rem; grid-template-columns:minmax(0,1fr);}
@media (min-width:42rem) {.f-steps {grid-template-columns:repeat(2,minmax(0,1fr));} }
.f-steps .b-card{min-height:11.5rem;}
.f-title {margin:.6rem .25rem 0; font-size:clamp(1.6rem,5vw,2.2rem); font-weight:800; letter-spacing:-.04em;}


.portal-home a.link{color:inherit;}
/* Forms: a select is a field, a consent line is a tappable row, the footer links are quiet */
select {display:block; width:100%; min-height:3rem; margin-top:.375rem; padding:.7rem 2.5rem .7rem .875rem; font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--field); border-radius:var(--radius-row); appearance:none;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 1.3rem) 1.35rem,calc(100% - .95rem) 1.35rem; background-size:.4rem .4rem; background-repeat:no-repeat;}

label:has(> input[type=checkbox]) {display:flex; gap:.75rem; align-items:flex-start; min-height:2.75rem; font-weight:500; line-height:1.45;}
input[type=checkbox] {flex:none; width:1.5rem; height:1.5rem; margin:.1rem 0 0; accent-color:var(--orange);}
 



.f-note {margin:.1rem .25rem 0; color:var(--muted); font-size:.95rem;} .f-note strong {color:var(--ink);}

.portal-home .a-plans {grid-template-columns:minmax(0,1fr);}
@media (min-width:36rem) {.portal-home .a-plans {grid-template-columns:repeat(2,minmax(0,1fr));} .portal-home .a-plans > .a-plan:last-child:nth-child(odd) {grid-column:1 / -1;} }
@media (min-width:60rem) {.portal-home .a-plans[data-count="3"], .portal-home .a-plans[data-count="6"], .portal-home .a-plans[data-count="9"] {grid-template-columns:repeat(3,minmax(0,1fr));} .portal-home .a-plans[data-count="4"] {grid-template-columns:repeat(4,minmax(0,1fr));} }

/* Design corrections, 2026-10-28 (phase 1): visible fields, one column, the destructive row, the app landing. Every value is a brand.css token. */
input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel], input[type=search], textarea, select{color:var(--color-text); background-color:var(--field-bg); border:var(--field-border); border-radius:var(--radius-field);}
textarea {display:block; width:100%; min-height:6rem; margin-top:.375rem; padding:.7rem .875rem; font:inherit;}
::placeholder {color:var(--color-muted); opacity:1;}
select {width:100%; appearance:none; -webkit-appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--color-muted) 50%),linear-gradient(135deg,var(--color-muted) 50%,transparent 50%);}
.destructive {color:var(--color-destructive);}
.sc-leave {display:grid; gap:.6rem; margin-top:var(--space-5);} .sc-leave form {margin:0;}
.sc-leave .btn {margin-top:0; gap:.6rem; justify-content:flex-start;}
.btn.quiet.destructive {color:var(--color-destructive);} .btn.quiet.destructive .ic {color:var(--color-destructive);}
a.a-quiet-btn.destructive {color:var(--color-destructive);}
/* One column on every signed-in page; Home puts its two cards side by side inside it */
.acct.has-nav main, .acct main.sheet {max-width:var(--column-width);}


@media (max-width:22.49rem) {.a-nav {overflow-x:auto; scrollbar-width:none;} .a-nav::-webkit-scrollbar {display:none;} .a-nav a {flex:0 0 auto; min-width:3.5rem;} }
/* The app landing: the hero's button is the one orange Sign in; the header's is a quiet link; the steps share one title offset */
.home-signin {min-height:var(--tap-min); padding:0 .25rem; border-radius:0; background:none; color:var(--color-muted); font-size:.88rem; font-weight:650; text-decoration:none;}
.home-signin:hover {background:none; color:var(--brand); text-decoration:underline;}
.f-steps .b-card {justify-content:flex-start; gap:var(--space-5);} 

/* Design corrections (phase 2): one link style, one segmented control, one checkbox, the current plan on top, the confirmation sheet. */
html {scrollbar-gutter:stable;}
.vh {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
.naira {letter-spacing:0; margin-right:.06em;}
a.link, .a-text a, .card a, .panel a:not(.btn):not(.row-link){color:var(--color-text); font-weight:650; text-decoration:underline; text-underline-offset:.16em;}
.portal-home a.link, .err a.link {color:inherit;}
.card p, .card ol {margin:0;} .card ol li:first-child {margin-top:0;} .card ol li:last-child {margin-bottom:0;}
.a-tabs {gap:var(--space-2); padding:0; border-radius:0; background:none;}
.a-tabs a {border-radius:var(--radius-pill); color:var(--color-muted); background:none; box-shadow:none;}
.a-tabs a[aria-current] {color:var(--color-text); background:var(--color-surface); box-shadow:none; font-weight:750;}
.panel .a-tabs a[aria-current] {background:var(--sunken);}

.a-plans > .a-plan-current {grid-column:1 / -1; order:-1; min-height:0;}
.a-plan-current .a-tag {background:var(--hero-from); color:var(--hero-ink);}
input[type=checkbox] {appearance:none; -webkit-appearance:none; display:grid; place-content:center; width:1.5rem; height:1.5rem; margin:.1rem 0 0; border:var(--field-border); border-radius:.4rem; background:var(--field-bg);}
input[type=checkbox]:checked {background:var(--orange); border-color:var(--orange);}
input[type=checkbox]:checked::after {content:""; width:.7rem; height:.4rem; margin-top:-.15rem; border-left:3px solid var(--navy); border-bottom:3px solid var(--navy); transform:rotate(-45deg);}
label:has(> input[type=checkbox]) {min-height:var(--tap-min); padding-block:.5rem; font-weight:400;}



/* Design corrections (phase 3): the active tab, the phone bar, the press */
.a-nav a[aria-current="page"] {color:var(--color-text); background:none; box-shadow:inset 0 -3px 0 var(--color-orange);}
@media (max-width:41.99rem) {.a-nav a[aria-current="page"] {box-shadow:inset 0 3px 0 var(--color-orange);} .a-nav .ic {width:1.5rem; height:1.5rem;} }
@media (max-width:30rem) {.f-steps .b-card {min-height:0;} }
@media (prefers-reduced-motion:no-preference) {.btn, a.a-plan {transition:transform var(--press-duration) ease-out;}
.btn:active, a.a-plan:active {transform:scale(var(--press-scale));}
@media (hover:hover) {.btn:hover, a.a-plan:hover {transform:translateY(-2px);} .btn:active, a.a-plan:active {transform:scale(var(--press-scale));} }
}

/* Design corrections, round two (Harry's review of 2026-10-28): cards that fit their content, one segmented control, one link style, narrow phones */


.a-plan {min-height:0;} .a-plan .b-price {margin-top:0;}
.a-plans > .a-plan-current {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.25rem var(--space-4);}
.a-plan-current > .a-tag {grid-column:1 / -1; justify-self:start;} .a-plan-current > .a-buy {grid-column:2; grid-row:2 / span 3; align-self:center;}
.acct .a-text a, .acct a.link, .acct .card a {color:var(--color-text); text-decoration:underline;}
.acct .panel .a-tabs a:not(.btn):not(.row-link) {color:var(--color-muted); font-weight:650; text-decoration:none;}
.acct .panel .a-tabs a[aria-current]:not(.btn):not(.row-link) {color:var(--color-text); font-weight:750;}
@media (max-width:22.49rem) {.a-nav a {flex:1 1 0; min-width:0; padding:0;} }
@media (max-width:20rem) {.a-plan .b-price {font-size:2.3rem;} }

/* Shared pieces (the redesign brief, item 1): the status chip, the hero card and the row link. 8 px grid; targets at least 48 px; no page uses them yet. */
.st-chip {display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); background:var(--unknown-soft); color:var(--ink); font-size:var(--text-small); font-weight:650; white-space:nowrap;}
.st-chip i {width:.5rem; height:.5rem; border-radius:50%; background:var(--unknown);}

.hc {gap:var(--space-3); min-height:0; padding:1.25rem;} .hc-figure {margin:0; font-size:clamp(2.4rem,9vw,3.4rem); font-weight:800; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;}
.hc-line {margin:0; color:var(--hero-muted);} .hc .btn {margin-top:var(--space-2);}
.row-link {display:flex; align-items:center; gap:var(--space-3); min-height:3rem; padding:var(--space-3) var(--space-4); border:1px solid var(--line); border-radius:var(--radius-row); background:var(--panel); color:var(--ink); text-decoration:none;}
.rl-main {flex:1; min-width:0;} .rl-main small {display:block; color:var(--muted); font-size:var(--text-small);} .rl-value {font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap;} .rl-go {color:var(--muted);}
button.row-link {width:100%; font:inherit; text-align:left; cursor:pointer;} 
.st-chip {display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); background:var(--unknown-soft); color:var(--unknown); font-size:var(--text-small); font-weight:700; white-space:nowrap;}
.st-chip i {width:.5rem; height:.5rem; border-radius:50%; background:currentColor;}
.st-online {background:var(--ok-soft); color:var(--ok);} .st-online i {background:var(--online);}
.st-waiting {background:var(--warn-soft); color:var(--warn);} .st-off {background:var(--danger-soft); color:var(--danger);}
.hc-chip {margin:0;} .hc .a-meter.thin {margin:0; background:rgb(255 255 255 / 18%);} .hc .a-meter.thin i {background:var(--orange);}
.rl-group {margin:0; padding:0 var(--space-4); border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--panel);} .rl-group form {margin:0;}
.rl-group .row-link {border:0; border-radius:0; background:none; padding-inline:0;} .rl-group > .row-link + .row-link, .rl-group > form + .row-link, .rl-group > .row-link + form .row-link, .rl-group > form + form .row-link {border-top:1px solid var(--line);}
.rl-head {margin:var(--space-5) 0 var(--space-2) var(--space-1); color:var(--muted); font-size:var(--text-small); font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
.hc .st-online {background:rgb(34 197 94 / 18%); color:#5fd39a;}
.row-link.destructive {color:var(--color-destructive);}

/* The redesign kit, built to the target screens (mockups.html): 16 px page margin, 24 between blocks, 32 between sections, 56 px buttons, 64 px rows. */
.acct main{max-width:var(--column-width);padding:0 var(--space-4) 7rem;}
.acct .a-header{min-height:60px;margin-top:10px;padding:0;}
.acct .a-header .wm,.acct .a-mark .wm{font-size:22px;}
.r-toplink{display:inline-flex;align-items:center;min-height:48px;color:var(--muted);font-size:15px;font-weight:600;text-decoration:none;}
.acct .r-hi{margin:8px 0 var(--space-5);font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1.1;}
.acct .r-h1{margin:8px 0 6px;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.02;}
.r-sub{margin:0 0 var(--space-5);color:var(--muted);font-size:16px;line-height:1.4;}
.r-gap{height:var(--space-5);} .r-sect{margin:var(--space-6) 4px var(--space-2);color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.hc{gap:0;min-height:0;padding:22px 20px 20px;border-radius:24px;}
.hc-figure{margin:18px 0 14px;font-size:52px;font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;} .hc-figure.m{font-size:40px;}
.hc-line{margin:12px 0 20px;color:#a3adc2;font-size:16px;} .hc .a-meter.thin{height:8px;margin:0;background:#2a3448;}
.hc .btn,.r-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin:0;border-radius:999px;background:var(--orange);color:var(--navy);font-size:18px;font-weight:800;text-decoration:none;}
.r-btn.dark{background:var(--ink);color:var(--surface);} .r-link{color:var(--ink);font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:3px;} .r-center{text-align:center;margin-top:20px;}
.st-chip{height:30px;padding:0 12px;font-size:14px;} .hc .st-waiting{background:rgb(255 186 90 / 16%);color:#ffc879;} .hc .st-ended,.hc .st-off{background:#2a3448;color:#a3adc2;}
.rl-group{padding:0 var(--space-4);border-radius:20px;} .row-link{min-height:64px;font-size:17px;} .row-link strong{font-weight:500;} .rl-main small{font-size:14px;margin-top:3px;}
.rl-group .row-link{padding:10px 2px;} .rl-value{display:flex;align-items:center;gap:10px;}
.r-banner{display:flex;gap:12px;align-items:flex-start;margin-bottom:var(--space-5);padding:14px 16px;border-radius:16px;font-size:16px;line-height:1.35;} .r-banner b{display:block;} .r-banner.info{background:var(--blue-soft);color:var(--ink);} .r-banner.warn{background:var(--warn-soft);color:var(--warn);}
.r-banner i{flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:currentColor;}
.r-tick{display:grid;place-items:center;width:84px;height:84px;margin:40px auto 20px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-size:40px;font-weight:800;} .r-tick.bad{background:var(--danger-soft);color:var(--danger);}
.a-nav a{flex-direction:column;gap:5px;font-size:12px;font-weight:600;} .a-nav a[aria-current="page"]{color:var(--ink);font-weight:700;box-shadow:none;background:none;} .a-nav a[aria-current="page"] .ic{color:var(--orange);} .a-nav .ic{width:24px;height:24px;}
.r-center{text-align:center;} .r-name{margin-top:var(--space-5);} .r-name summary{display:inline-flex;align-items:center;min-height:48px;cursor:pointer;}
.rl-price{font-size:24px;font-weight:800;letter-spacing:-.03em;} 
.r-dim{position:fixed;inset:0;z-index:20;background:rgb(14 20 32 / 45%);} .r-sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:var(--column-width);margin:0 auto;padding:14px 20px 34px;border-radius:28px 28px 0 0;background:var(--panel);}
.r-grab{width:44px;height:5px;margin:0 auto 18px;border-radius:9px;background:var(--line);} .acct .r-price{margin:0;font-size:56px;font-weight:800;letter-spacing:-.045em;line-height:1.05;} .r-terms{margin:6px 0 10px;color:var(--blue);font-size:22px;font-weight:700;}
.r-more{margin-top:var(--space-5);text-align:center;} .r-more summary{display:inline-flex;align-items:center;min-height:48px;cursor:pointer;} .r-more .rl-group{margin-top:var(--space-3);text-align:left;} .r-more button.row-link{border:0;}
.rl-lines .rl-value{font-weight:700;} .rl-lines .rl-value.in{color:var(--ok);} .rl-lines .row-link{border-radius:0;}
.r-btn{border:0;cursor:pointer;font-family:inherit;}
.acc{margin-bottom:10px;border:1px solid var(--line);border-radius:16px;background:var(--panel);} .acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:58px;padding:0 16px;font-size:17px;font-weight:700;cursor:pointer;list-style:none;}
.acc summary::-webkit-details-marker{display:none;} .acc summary::after{content:"";flex:none;width:.55rem;height:.55rem;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:rotate(45deg);} .acc[open] summary::after{transform:rotate(-135deg);}
.acc .a{padding:0 16px 16px;color:var(--muted);font-size:16px;line-height:1.45;} .acc .a p{margin:0;} .acc .a a{color:var(--ink);}
.r-first{margin-top:40px !important;} .r-bare{border:0;background:none;font:inherit;font-weight:700;cursor:pointer;min-height:48px;} .portal-help .r-h1{margin:8px 0 6px;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.02;}
.acct .btn{min-height:56px;border-radius:999px;font-size:18px;} .acct input[type=text],.acct input[type=password],.acct input[type=tel],.acct input[type=email],.acct input[type=number]{min-height:56px;padding:0 16px;border-width:1.5px;border-radius:16px;font-size:18px;}
.acct input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgb(255 122 26 / 18%);outline:0;} .acct label{margin-top:var(--space-4);font-size:15px;font-weight:700;} .acct form > label:first-of-type{margin-top:0;} .acct form .btn{margin-top:var(--space-4);}
.portal-home main{max-width:var(--column-width);padding:0 var(--space-4) var(--space-6);} .portal-home .home-header{min-height:60px;margin-top:10px;padding:0;} .portal-home .home-mark .wm{font-size:22px;}
.f-hero{margin-top:8px;} .f-title2{margin:0 0 14px;font-size:44px;} .f-steps2{margin:0 0 18px;color:#a3adc2;} .f-steps2 b{color:#fff;}
.r-strip{display:flex;gap:12px;margin-right:-16px;padding-right:16px;overflow-x:auto;scrollbar-width:none;} .r-strip::-webkit-scrollbar{display:none;}
.r-pc{flex:0 0 150px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);text-decoration:none;} .r-pc .rl-price{display:block;font-size:26px;} .r-pc-terms{display:block;margin-top:4px;color:var(--blue);font-size:15px;font-weight:700;}
.r-more-plans{margin:18px 0 0;} .f-note{margin:var(--space-5) 4px 0;color:var(--muted);font-size:14px;}
.r-add{display:flex;align-items:center;gap:14px;margin-bottom:var(--space-5);padding:16px;border:2px dashed #e0b48f;border-radius:20px;background:var(--orange-soft);color:var(--ink);text-decoration:none;} .r-add strong{display:block;font-size:18px;font-weight:800;} .r-add small{display:block;margin-top:3px;color:var(--muted);font-size:14px;}
.r-plus{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--orange);color:var(--navy);font-size:28px;font-weight:800;}
.dv-row{border-top:1px solid var(--line);} .dv-row:first-child{border-top:0;} .dv-row > summary{list-style:none;cursor:pointer;} .dv-row > summary::-webkit-details-marker{display:none;} .rl-group .dv-row > summary.row-link{border:0;}
.r-dots{display:inline-grid;place-items:center;min-width:32px;min-height:32px;color:var(--muted);font-size:22px;font-weight:700;} .r-menu{display:grid;gap:var(--space-3);padding:0 2px var(--space-4);} .r-menu form{margin:0;} .r-menu .btn{margin-top:var(--space-2);} .r-menu .dv-list{margin:0;padding:0;list-style:none;}
.rl-group > details,.rl-group > form{border-top:1px solid var(--line);} .rl-group > details:first-child,.rl-group > form:first-child{border-top:0;}
.f-steps2{margin:14px 0 18px !important;}
.r-steps{display:flex;gap:6px;margin:var(--space-3) 0 var(--space-4);} .r-steps i{flex:1;height:5px;border-radius:9px;background:var(--line);} .r-steps i.done{background:var(--orange);} .r-stepno{margin:0 0 6px;color:var(--orange-ink);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.r-fine{margin-top:var(--space-4);font-size:14px;} .r-addform{margin-top:var(--space-4);} .r-cant{text-align:left;} .r-cant form{margin-top:var(--space-3);}
.a-copy{min-height:36px;padding:6px 12px;border:1.5px solid var(--ink);border-radius:999px;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer;} .a-copy[hidden]{display:none;} .mono{font-family:var(--font-mono);font-weight:700;}