/* ==========================================================================
   Account area (/account/manage/**) -- V1 design system
   Companion to redesign/site.css, which must be linked first: every value here
   comes from that file's :root tokens rather than a second palette.

   This replaces the portal.css treatment, which was written against the older
   dark portal chrome. The class names are unchanged (.portal-card, .portal-nav,
   .portal-alert, ...) so the pages' markup keeps working -- only the look moves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.account-shell{
  padding:clamp(32px,4vw,56px) 0 clamp(56px,7vw,96px);
  background:radial-gradient(ellipse 74% 62% at 82% 0%,var(--bg-tint-2) 0%,var(--bg) 58%);
  min-height:60vh;
}

.account-head{margin-bottom:clamp(24px,3vw,36px);}
.account-head h1{font-size:clamp(30px,3.6vw,42px);letter-spacing:-0.02em;}
.account-head p{margin-top:10px;}

/* Sidebar + content. Sidebar first in the source, so keyboard and screen-reader
   order match the visual order on desktop. */
.portal-layout{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:clamp(20px,2.4vw,36px);
  align-items:start;
}

@media (max-width:960px){
  .portal-layout{grid-template-columns:minmax(0,1fr);}
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.portal-sidebar{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  padding:22px;
  /* --header-h clears the fixed site header when the sidebar sticks. */
  position:sticky;
  top:calc(var(--header-h) + 20px);
}

@media (max-width:960px){
  .portal-sidebar{position:static;}
}

.portal-identity{
  display:flex;align-items:center;gap:13px;
  padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--line-soft);
}

.portal-avatar{
  flex:none;width:46px;height:46px;border-radius:var(--pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue-bright),var(--blue-deep));
  color:#fff;font-size:17px;font-weight:800;letter-spacing:0;
  box-shadow:var(--sh-primary);
  object-fit:cover;
}

/* min-width:0 so a long email can ellipsis instead of forcing the grid wider. */
.portal-identity-text{min-width:0;}

.portal-identity-name{
  font-size:14.5px;font-weight:800;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.portal-identity-email{
  font-size:12.5px;color:var(--text-faint);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.portal-nav{display:flex;flex-direction:column;gap:3px;}

.portal-nav-heading{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);padding:0 12px;margin-bottom:8px;
}

/* One selector for the links and the sign-out button so the button cannot drift
   away from its neighbours. */
.portal-nav a,
.portal-nav button{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 13px;border:none;background:none;text-align:left;
  border-radius:var(--r-sm);
  font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--text-body);cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}

.portal-nav a:hover,
.portal-nav button:hover{background:var(--bg-hover);color:var(--navy);}

.portal-nav a.active{
  background:var(--bg-tint);color:var(--blue);font-weight:800;
}

.portal-nav svg{flex:none;width:17px;height:17px;stroke-width:1.9;}

.portal-nav form{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);}
.portal-nav form button{color:var(--text-muted);}
.portal-nav form button:hover{color:var(--bad-ink);background:#FDF2F2;}

/* Same rule as the sign-out form above, for a trailing link that leaves the
   current area (_AdminNav's "Back to my account"). */
.portal-nav-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);}
.portal-nav-foot a{color:var(--text-muted);}

/* The admin sidebar's avatar holds a glyph, not an initial, so it gets the neutral
   navy rather than the blue identity gradient -- the console is not a person. */
.portal-avatar-admin{
  background:var(--navy);box-shadow:none;
}
.portal-avatar-admin svg{width:23px;height:23px;stroke-width:1.7;}

/* --------------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------------- */
.portal-content{display:flex;flex-direction:column;gap:18px;min-width:0;}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.portal-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  padding:clamp(20px,2.4vw,30px);
}

/* Card headings sit inside a dashboard, so they take the h3 step rather than the
   marketing h2 clamp -- otherwise a card title outweighs the page title. */
.portal-card h2{
  font-size:20px;line-height:1.25;letter-spacing:-0.012em;
  margin-bottom:8px;
}

.portal-card-note{
  font-size:14px;color:var(--text-muted);line-height:1.7;text-wrap:pretty;
  margin-bottom:0;
}

.portal-card-note + .portal-actions,
.portal-facts + .portal-actions,
.portal-list + .portal-card-note,
.portal-table-wrap + .portal-card-note,
/* A note directly under a card's own buttons, as on /admin/users when the review queue is empty.
   Only the reverse pair was covered, and .portal-table-wrap carries its own 18px -- so the table
   view was correctly spaced while the empty state sat flush against the filter tabs, which read as
   the message belonging to the buttons rather than replacing the table. */
.portal-actions + .portal-card-note,
/* Trailing fine print under a card's action, as on Payment methods ("Card numbers are held by
   Stripe..." below Add a card). .portal-card-note zeroes its own margins and this pair was the one
   adjacency the group did not cover, so the sentence sat flush against the button. */
.portal-card > form + .portal-card-note{margin-top:18px;}

.portal-card > form{margin-top:18px;}

/* --------------------------------------------------------------------------
   App card (My Apps)

   The app-listing convention -- icon, name, entitlement, then detail -- as used
   by every app store and integrations directory. A product screenshot was tried
   here first and rejected: a full-bleed dark capture in a white card fights the
   rest of the account chrome, and this page is a manifest of what you own, not a
   place to sell the product again.
   -------------------------------------------------------------------------- */
/* The whole card is this one row: icon and name at the start, action at the end.
   flex-wrap is what lets the buttons drop under the title on a narrow card
   instead of crushing the name to two or three words per line. */
.app-card-head{
  display:flex;align-items:center;gap:15px;
  flex-wrap:wrap;
}

/* Pushes the action to the far end of the row. Only inside the head -- the note
   branches below it are plain paragraphs. */
.app-card-head > .portal-actions{margin-left:auto;}

/* A note only appears on the locked / unavailable branches, so the head must not
   carry a trailing margin of its own. */
.app-card-head + .portal-card-note{margin-top:16px;}

.app-icon{
  flex:none;
  /* Slightly larger than .portal-avatar (46px) and squared off rather than
     round: this is an application tile, not a person. */
  width:60px;height:60px;
  border-radius:var(--r-sm);
  display:grid;place-items:center;
  overflow:hidden;
  background:linear-gradient(150deg,var(--navy-3),var(--navy-deep));
  /* Inner hairline instead of a border, so it does not add to the 60px box and
     the artwork stays flush to the corner radius. */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10), var(--sh-card);
}

.app-icon img{width:100%;height:100%;object-fit:cover;display:block;}

/* Third-party integrations ship no artwork -- see MyApps.cshtml. */
.app-icon-letter{
  font-size:25px;font-weight:800;letter-spacing:-0.02em;line-height:1;
  color:#fff;
}

/* Takes the slack between the icon and the action, which is what makes the
   buttons wrap rather than the title. min-width:0 so a long provider name
   ellipses instead of pushing the head wider than the card. */
.app-card-titles{flex:1 1 auto;min-width:0;}

/* Overrides the .portal-card h2 margin: the status line below it owns the gap. */
.app-card-titles h2{margin-bottom:5px;}

/* Entitlement belongs beside the name, where an app store puts it -- not in a
   sentence below the feature list, which is where it used to live and where it
   duplicated what the button already implied. */
.app-card-status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;
  margin:0;
  color:var(--text-faint);
}

.app-card-status::before{
  content:'';flex:none;
  width:7px;height:7px;border-radius:var(--pill);
  background:currentColor;
}

.app-card-status.is-on{color:var(--good-ink);}

/* --------------------------------------------------------------------------
   Sign-in details (My Apps, entitled card)

   Separated from the head by a rule rather than given its own card: it is detail
   about the app named directly above it, and a second card would read as a second
   thing you own. The head keeps its one-row shape; this hangs underneath it.
   -------------------------------------------------------------------------- */
.app-card-access{
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line);
}

/* Steps below .portal-card h2 (20px) -- the app's name has to stay the loudest
   thing on the card. */
.app-card-access h3{
  font-size:14px;font-weight:700;letter-spacing:.01em;
  margin:0 0 8px;
}

.app-card-access .portal-card-note + .portal-card-note{margin-top:12px;}

/* The generated sm-{uid} username. Monospace and a shade quieter than the note
   above it: it is a fallback for the case where the viewer asks for a username
   instead of an email, not the primary instruction. */
.app-card-access-username{
  font-size:13px;color:var(--text-faint);line-height:1.7;
  margin:10px 0 0;
}

.app-card-access-username code{
  font-family:var(--mono);
  font-size:12.5px;color:var(--text-muted);
  background:var(--bg-mono);
  padding:2px 6px;border-radius:6px;
}

/* Collapsed by default. Only external-login customers see it at all, and even for
   them it is a repair -- the card's job is to say how to sign in, not to open with
   a password form. */
.app-card-access-set{margin-top:14px;}

.app-card-access-set > summary{
  cursor:pointer;
  font-size:14px;font-weight:700;color:var(--blue);
  /* The default marker sits too tight against the label at this size. */
  padding-left:2px;
}

.app-card-access-set > summary:hover{text-decoration:underline;}

/* .portal-card > form gets an 18px top margin; this form is inside a details, so
   it needs its own. */
.app-card-access-set form{margin-top:14px;}

/* The icon and name stay on one line at every width -- a 60px tile does not need
   to stack -- but the tile shrinks and the wrapped buttons go full width so they
   are comfortable thumb targets rather than a stranded pair of pills. */
@media (max-width:520px){
  .app-card-head{gap:12px;}
  .app-icon{width:50px;height:50px;}
  .app-icon-letter{font-size:21px;}

  .app-card-head > .portal-actions{
    margin-left:0;width:100%;
    /* Restores the vertical rhythm the auto margin was standing in for. */
    margin-top:4px;
  }
  .app-card-head > .portal-actions .btn{flex:1 1 auto;justify-content:center;}
}

/* --------------------------------------------------------------------------
   Feature list
   -------------------------------------------------------------------------- */
.portal-list{display:flex;flex-direction:column;gap:9px;margin-top:14px;}

.portal-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;color:var(--text-body);line-height:1.6;
}

/* The marker is drawn here rather than with a webfont icon: the V1 layout does
   not load bootstrap-icons, so a <i class="bi ..."> rendered as a blank box. */
.portal-list li::before{
  content:'';flex:none;
  width:7px;height:7px;margin-top:8px;border-radius:var(--pill);
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,174,255,0.16);
}

/* --------------------------------------------------------------------------
   Fact grid (status / billing / price / renews)
   -------------------------------------------------------------------------- */
.portal-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;margin-top:20px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
}

.portal-facts > div{background:#fff;padding:15px 17px;}

.portal-facts dt{
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:6px;
}

.portal-facts dd{
  font-size:16px;font-weight:700;color:var(--navy);margin:0;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */
.portal-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}

/* Forms inside .portal-actions are single-button wrappers (Make default, Remove),
   so they must not introduce their own block layout. */
.portal-actions form{margin:0;display:inline-flex;}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.portal-table-wrap{
  margin-top:18px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  /* Horizontal scroll is contained here so the page body never scrolls sideways. */
  overflow-x:auto;
}

.portal-table{width:100%;border-collapse:collapse;min-width:520px;}

.portal-table th{
  text-align:left;padding:12px 16px;
  background:var(--bg-mono);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);
  white-space:nowrap;
  border-bottom:1px solid var(--line-soft);
}

.portal-table td{
  padding:14px 16px;
  font-size:14px;color:var(--text-body);font-weight:500;
  border-bottom:1px solid var(--line-softer);
  vertical-align:middle;
}

.portal-table tbody tr:last-child td{border-bottom:none;}
.portal-table tbody tr:hover td{background:var(--bg-code);}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.portal-alert{
  display:flex;align-items:flex-start;gap:12px;
  padding:15px 17px;border-radius:var(--r-md);
  border:1px solid var(--line-focus);
  background:var(--bg-tint);
}

.portal-alert p{
  margin:0;flex:1;
  font-size:14px;line-height:1.6;color:var(--navy);text-wrap:pretty;
}

.portal-alert a{font-weight:700;text-decoration:underline;}

.portal-alert-warning{background:#FFF8EC;border-color:#F2DFBE;}
.portal-alert-warning a{color:var(--vault-ink);}

.portal-alert-error{background:#FDF2F2;border-color:#F3CFCF;}
.portal-alert-error p{color:var(--bad-ink);}
.portal-alert-error a{color:var(--bad-ink);}

.portal-alert-success{background:var(--good-bg);border-color:#C9E9E3;}
.portal-alert-success p{color:var(--good-ink);}

.portal-alert-dismiss{
  flex:none;border:none;background:none;cursor:pointer;
  font-size:20px;line-height:1;color:inherit;opacity:.5;
  padding:0 2px;transition:opacity .16s ease;
}

.portal-alert-dismiss:hover{opacity:1;}

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.portal-chip,
.pricing-badge{
  display:inline-flex;align-items:center;
  margin-left:8px;padding:3px 10px;border-radius:var(--pill);
  background:var(--bg-tint);color:var(--blue);
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:middle;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.portal-form{display:flex;flex-direction:column;gap:16px;margin-top:20px;}

/* Two columns on wider viewports: the billing form is 10 short fields and reads
   as an endless column otherwise. */
.portal-form-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}

.form-group{display:flex;flex-direction:column;gap:7px;min-width:0;}

.form-group label{font-size:12.5px;font-weight:700;color:var(--navy);}

.form-input{
  width:100%;height:50px;padding:0 15px;
  border-radius:var(--r-sm);border:1.5px solid var(--line-strong);background:#fff;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--navy);
  outline:none;transition:border-color .2s ease;
}

.form-input:focus{border-color:var(--blue);}

/* jquery-validation-unobtrusive adds .input-validation-error to the field itself
   and .field-validation-error to the message span. */
.form-input.input-validation-error{border-color:var(--bad);}

.text-danger,
.field-validation-error{font-size:12.5px;font-weight:600;color:var(--bad-ink);}

.validation-summary-errors{
  padding:14px 16px;border-radius:var(--r-md);
  background:#FDF2F2;border:1px solid #F3CFCF;
}

.validation-summary-errors ul{display:flex;flex-direction:column;gap:4px;}
.validation-summary-errors li{font-size:13.5px;font-weight:600;color:var(--bad-ink);}

/* Razor renders this when there is nothing to report; without the rule it paints
   an empty red panel above the form. */
.validation-summary-valid{display:none;}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.portal-empty{text-align:center;padding:clamp(20px,3vw,32px) 0;}
.portal-empty .portal-card-note{margin-left:auto;margin-right:auto;max-width:420px;}
.portal-empty .portal-actions{justify-content:center;margin-top:20px;}

/* --------------------------------------------------------------------------
   Checkout (/account/checkout/**)

   Deliberately NOT reusing .auth-card / .auth-form: redesign/site.css already owns
   .auth-form for the sign-in and sign-up split layout, where it is capped at
   432px. A checkout form picking that up silently rendered at half width.
   -------------------------------------------------------------------------- */
.checkout-card{max-width:640px;margin:0 auto;}
.checkout-card .account-head{text-align:center;}

.checkout-wide{max-width:1140px;margin:0 auto;}
.checkout-wide .account-head{text-align:center;}

.pricing-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:18px;align-items:stretch;
}

.pricing-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  padding:26px 24px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.pricing-card:hover{
  border-color:var(--line-focus);
  box-shadow:var(--sh-card-hover);
  transform:translateY(-2px);
}

.pricing-card.is-current{border-color:var(--cyan);}

.pricing-card h2{font-size:20px;line-height:1.25;margin-bottom:6px;}

/* The badge is a block here rather than the inline chip used in tables, so it sits
   above the plan name instead of hanging off it. */
.pricing-card .portal-chip,
.pricing-card .pricing-badge{align-self:flex-start;margin:0 0 12px;}

.pricing-amount{
  font-family:var(--serif);
  font-size:30px;font-weight:500;letter-spacing:-0.02em;color:var(--navy);
  margin-bottom:10px;
}

.pricing-card .portal-card-note{margin-bottom:16px;}

/* The feature list absorbs the slack, so the buttons line up along the bottom of the
   row however many features a plan has. Stretching the description instead pushed
   each card's list to a different height and the row read as misaligned. */
.pricing-card .portal-list{flex:1;margin-bottom:20px;}

.pricing-card form{margin-top:auto;display:flex;flex-direction:column;gap:14px;}
.pricing-card .btn{width:100%;}

.pricing-card .btn:disabled{
  opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;
}

/* Price line: amount and period share a baseline rather than stacking. */
.pricing-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.pricing-price .pricing-amount{margin-bottom:0;}

.pricing-period{font-size:13.5px;font-weight:600;color:var(--text-faint);}

.pricing-credits{
  font-size:12.5px;font-weight:700;color:var(--blue);
  margin-bottom:10px;
}

/* Feature list with tick marks instead of the default bullet dot. */
.portal-list-check li::before{display:none;}

.portal-list-check svg{
  flex:none;width:15px;height:15px;margin-top:3px;
  stroke-width:2.6;color:var(--good);
}

/* --------------------------------------------------------------------------
   Plan / period toggles

   Replaces .auth-switch from portal.css, which the pricing page borrowed from the
   old dark portal chrome and which rendered as invisible text on the V1 surface.
   -------------------------------------------------------------------------- */
.plan-switch{
  display:inline-flex;gap:4px;padding:5px;margin-bottom:14px;
  background:var(--bg-mono);
  border:1px solid var(--line-soft);
  border-radius:var(--pill);
}

.plan-switch a{
  padding:9px 20px;border-radius:var(--pill);
  font-size:13.5px;font-weight:700;color:var(--text-muted);
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}

.plan-switch a:hover{color:var(--navy);}

.plan-switch a.active{
  background:#fff;color:var(--blue);
  box-shadow:0 2px 8px -4px rgba(14,22,56,0.28);
}

/* Plan-type and period toggles sit on one row on /pricing, centred like the rest of
   that page's section heads. */
.plan-controls{
  display:flex;justify-content:center;align-items:center;
  gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,36px);
}

.plan-switch-period{margin-left:10px;}

/* The switch form is the card's bottom action, so it must not add its own gap above
   the button the way the standalone .pricing-card form does. */
.plan-switch-form{display:flex;flex-direction:column;gap:12px;margin-top:auto;}

@media (max-width:640px){
  .plan-switch{display:flex;width:100%;}
  .plan-switch a{flex:1;text-align:center;padding:9px 10px;}
  .plan-switch-period{margin-left:0;}
  .plan-controls{flex-direction:column;align-items:stretch;}
}

/* --------------------------------------------------------------------------
   Plan change confirmation (/account/checkout/change-plan)

   A billing action, so the page has one job: show what it costs before the
   customer commits. Two blocks -- the move (what -> what) and the money
   (Stripe's own lines) -- kept visually separate so neither reads as the other.
   -------------------------------------------------------------------------- */
.plan-change{
  display:flex;align-items:stretch;gap:1px;
  margin-bottom:22px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
}

.plan-change-side{
  flex:1;display:flex;flex-direction:column;gap:3px;
  background:#fff;padding:15px 17px;
}

/* The destination carries the emphasis: it is the thing being agreed to. */
.plan-change-side.is-target{background:var(--bg-tint);}

.plan-change-label{
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);
}

.plan-change-side strong{font-size:17px;font-weight:800;color:var(--navy);}
.plan-change-price{font-size:13.5px;font-weight:600;color:var(--text-faint);}

.plan-change-arrow{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:44px;background:#fff;
  font-size:19px;color:var(--cyan);
}

.portal-card h2.plan-change-h2{
  font-family:var(--sans);
  font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);
  margin:0 0 -6px;
}

/* --------------------------------------------------------------------------
   The cost lines, straight from Stripe's invoice preview
   -------------------------------------------------------------------------- */
.plan-change-lines{
  width:100%;border-collapse:collapse;
  font-size:14px;
}

.plan-change-lines th,
.plan-change-lines td{
  padding:10px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-softer);
  font-weight:500;color:var(--navy);
}

/* Money right-aligned and tabular so the column reads as a column: without
   tabular-nums the digits shift width and the decimal points stop lining up. */
.plan-change-lines td{
  text-align:right;white-space:nowrap;padding-left:14px;
  font-variant-numeric:tabular-nums;font-weight:700;
}

.plan-change-lines td.is-credit{color:var(--good-ink);}

.plan-change-lines tfoot th,
.plan-change-lines tfoot td{
  border-bottom:0;border-top:2px solid var(--line-strong);
  padding-top:13px;font-size:15.5px;font-weight:800;
}

.plan-change-lines tfoot td{font-size:18px;}

/* Not a colour-only distinction: the word "prorated" is what carries the
   meaning, so it survives greyscale and screen readers. */
.plan-change-tag{
  display:inline-block;margin-left:7px;
  padding:1px 7px;border-radius:var(--pill);
  background:var(--bg-mono);
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);vertical-align:1px;
}

.plan-change-priced{display:flex;flex-direction:column;gap:16px;}
.plan-change-priced > .portal-card-note + .portal-actions{margin-top:0;}
.checkout-card > .portal-alert + .portal-actions{margin-top:18px;}

/* site.css scopes .hint and .err to .field; the checkout forms use .form-group. */
.form-group .hint{
  display:block;margin-top:5px;
  font-size:12px;font-weight:400;color:var(--text-faint);
}

.form-group .err{
  display:block;margin-top:5px;
  font-size:12.5px;font-weight:600;color:var(--bad-ink);
}

/* .hint and .err set display:block, which outranks the UA sheet's [hidden]. */
.form-group [hidden]{display:none;}

.form-input.is-invalid{border-color:var(--bad);}

@media (max-width:560px){
  /* Stacked, with the arrow turned to point down the column. */
  .plan-change{flex-direction:column;}
  .plan-change-arrow{width:100%;height:32px;transform:rotate(90deg);}
}

.account-outcome{
  max-width:520px;margin:0 auto;
  text-align:center;
}

.account-outcome h1{
  font-size:clamp(26px,3vw,34px);letter-spacing:-0.02em;
  margin:0 0 10px;
}

.account-outcome > p{
  font-size:15.5px;line-height:1.65;color:var(--text-faint);
  margin:0 auto;max-width:42ch;
}

.account-outcome .portal-actions{justify-content:center;margin-top:26px;}
.account-outcome .portal-alert{text-align:left;}

/* Forms on an outcome page (resend confirmation) go back to the left: a label
   and input centred with the copy reads as decoration rather than a field. */
.account-outcome form{margin-top:24px;text-align:left;}
.account-outcome form .portal-actions{justify-content:stretch;}
.account-outcome form .btn{width:100%;justify-content:center;}

/* --------------------------------------------------------------------------
   Status icon
   -------------------------------------------------------------------------- */
.outcome-icon{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;margin:0 auto 20px;
  border-radius:var(--pill);
}

.outcome-icon svg{width:30px;height:30px;stroke-width:2.4;fill:none;}

.outcome-icon.is-good{background:var(--good-bg);border:1px solid var(--good);}
.outcome-icon.is-good svg{stroke:var(--good-ink);}

.outcome-icon.is-warn{background:#FFF8EC;border:1px solid #E7B65C;}
.outcome-icon.is-warn svg{stroke:#8A5A12;}

.outcome-icon.is-bad{background:#FDF2F2;border:1px solid var(--bad);}
.outcome-icon.is-bad svg{stroke:var(--bad-ink);}

/* The tick draws itself once on arrival -- the page it replaces used a Lottie
   animation, and a static tick after a wait reads as a page that failed to
   finish. Honours reduced-motion by simply being drawn. */
@media (prefers-reduced-motion: no-preference){
  .outcome-icon.is-good svg path{
    stroke-dasharray:32;stroke-dashoffset:32;
    animation:sm-tick .45s .12s ease-out forwards;
  }
}

@keyframes sm-tick{to{stroke-dashoffset:0;}}