/*
* page-account.css
* Styles for the customer account + auth views (auth/*, account/*).
* Loaded via in each of those views, matching the established
* page-support.css / queuemanager.css pattern.
*
* Deliberately restrained: the storefront is themed per photographer via
* theme-*.css, and these pages sit inside template_login, so anything that
* hardcodes a brand colour would fight the theme. What is here is layout,
* spacing and the few components Bootstrap does not provide (the recovery-code
* grid, the QR panel, the session list).
*
* TWO SHELLS LIVE HERE. The auth/* pages (sign in, sign up, reset, MFA) and,
* since 2026-09-16, the signed-in account/* pages render inside the SUPPORT
* shell — .sup-shell, the persistent rail, .sup-dash-card — so their rules
* below are written against that vocabulary and reuse page-support.css for the
* chrome. Only memories/* (reached from an email link, no sign-in) still uses
* the older standalone .acctx-card. Some rules further down (.acctx-list,
* .acctx-meta, the message rows) serve both; they are neutrals, which suits a
* white card in either shell.
*/
/* ===================================================================
auth/* inside the support shell (2026-09-15)
-------------------------------------------------------------------
/auth/login is a 7 / 5 split at lg+ (2026-09-16; it shipped at 75 / 25 and
read as dense): create-an-account leads as one straight column, sign-in
sits beside it complete rather than as a link to a second page. The
other auth pages are a single narrow panel in the same vocabulary.
Colour comes from the theme (--accent-orange, --font-light-color); the
muted greys match page-support.css because the cards are light
surfaces in both modes, exactly as the support cards are.
=================================================================== */
.acctx-panel { margin-bottom: 22px; }
/* A lone form panel on a 900px column still shouldn't run edge to edge. */
.acctx-panel--narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.acctx-h1 {
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: 1.5rem;
color: var(--font-light-color);
margin-bottom: 6px;
}
.acctx-h2 {
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: 1.1rem;
color: var(--font-light-color);
margin-bottom: 6px;
}
.acctx-lede { color: #6c757d; margin-bottom: 18px; }
.acctx-optional { color: #6c757d; font-weight: 400; }
/* Mobile-only jump to the sign-in panel. The columns stack create-first, so
without this a returning customer scrolls past a form they don't want. */
.acctx-jump { margin-bottom: 14px; text-align: center; }
.acctx-jump a {
color: var(--accent-orange);
font-weight: 700;
text-decoration: none;
font-size: 0.95rem;
}
.acctx-jump a:hover, .acctx-jump a:focus-visible { text-decoration: underline; }
/* --- Why create an account -------------------------------------------- */
/* One reason per line, stacked — a list you glance down, not a grid you read
across. The divider under it hands off to the form. */
.acctx-perks {
list-style: none;
padding: 0 0 20px;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.acctx-perk {
display: flex;
align-items: center;
gap: 12px;
}
.acctx-perk-icon {
flex: 0 0 auto;
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
color: var(--accent-orange);
background: var(--bg-light-secondary);
background: color-mix(in srgb, var(--accent-orange) 14%, transparent);
}
.acctx-perk-icon i { color: inherit; }
.acctx-perk-text { font-weight: 600; color: var(--font-light-color); line-height: 1.3; }
/* --- Forms ------------------------------------------------------------- */
/* Mirrors .sup-form's field treatment without its 520px cap: on /auth/login
the form fills its own column, which is already the right width. */
.acctx-form .form-label { font-weight: 600; color: var(--font-light-color); margin-bottom: 4px; }
.acctx-form .form-control {
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.16);
padding: 10px 14px;
}
.acctx-form .form-control:focus {
border-color: var(--accent-orange);
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.06);
outline: none;
}
.acctx-form .form-check-input:checked {
background-color: var(--accent-orange);
border-color: var(--accent-orange);
}
.acctx-form .form-check-label { color: var(--font-light-color); font-size: 0.9rem; }
.acctx-form-actions { margin-top: 22px; }
/* "No account needed" note under the create button on /auth/login. */
.acctx-nocode { margin: 16px 0 0; font-size: 0.9rem; color: #6c757d; text-align: center; }
.acctx-nocode a { color: var(--accent-orange); font-weight: 600; text-decoration: none; }
.acctx-nocode a:hover, .acctx-nocode a:focus-visible { text-decoration: underline; }
/* A form-submit styled as a link (the MFA "use a recovery code" flip, which has
to POST to carry its flag). Replaces Bootstrap's .btn-link, whose fixed blue
ignored the theme. */
.acctx-linkbutton {
background: none;
border: 0;
padding: 0;
color: var(--accent-orange);
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.acctx-linkbutton:hover, .acctx-linkbutton:focus-visible { text-decoration: underline; }
/* --- Sign-in column ---------------------------------------------------- */
.acctx-signin .sup-btn { margin-top: 2px; }
.acctx-forgot { margin: 14px 0 0; font-size: 0.9rem; }
.acctx-forgot a { color: var(--accent-orange); text-decoration: none; font-weight: 600; }
.acctx-forgot a:hover, .acctx-forgot a:focus-visible { text-decoration: underline; }
/* The visual gap between "Sign In" and "Other options" is the point of the
column: two separate offers, not one list. */
.acctx-other-label {
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.acctx-otherlinks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.acctx-otherlinks a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
margin: 0 -10px;
border-radius: 10px;
color: var(--font-light-color);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.25;
}
.acctx-otherlinks a i { width: 18px; text-align: center; flex: 0 0 auto; color: var(--accent-orange); }
.acctx-otherlinks a:hover,
.acctx-otherlinks a:focus-visible { background: var(--bg-light-secondary); color: var(--accent-orange); }
/* No lg-to-xl squeeze rule here any more. At 75 / 25 the sign-in column was
~180px wide at 1100px and needed its padding cut; at 7 / 5 it is ~290px at
the narrowest lg width and takes the normal card padding. */
/* --- "Check your email" confirmations ---------------------------------- */
.acctx-sent { text-align: center; }
.acctx-sent-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 68px; height: 68px;
border-radius: 50%;
font-size: 1.7rem;
margin-bottom: 14px;
color: var(--accent-orange);
background: var(--bg-light-secondary);
background: color-mix(in srgb, var(--accent-orange) 14%, transparent);
}
.acctx-sent-icon i { color: inherit; }
/* --- Footlinks inside a support card ----------------------------------- */
/* .acctx-footlinks also styles the old .acctx-card pages; these only add the
separation the support card needs and the themed link colour. */
.sup-dash-card .acctx-footlinks {
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
font-size: 0.9rem;
color: #6c757d;
}
.sup-dash-card .acctx-footlinks a { color: var(--accent-orange); font-weight: 600; }
/* ===================================================================
account/* inside the support shell (2026-09-16)
-------------------------------------------------------------------
The signed-in pages moved off the standalone card below onto the same
shell as auth/*: shared/acct_page_open.php → one .sup-dash-card per
page, the account sections in the rail (desktop) and in .acctx-subnav
(phone/tablet). Same colour rules as the auth block above: accent,
--font-light-color and --bg-light-secondary only, neutrals otherwise —
the card is white in both modes.
=================================================================== */
/* page-support.css sets bare `p { font-weight: 100 }` and `i { color: #333 }`
for the support pages. Thin grey body copy is hard to read across a whole
settings page, and #333 icons fight the accent chips and grey rows. */
.acctx-lede,
.acctx-body p { font-weight: 400; }
.acctx-lede strong { color: var(--font-light-color); }
.acctx-lede-sub { white-space: nowrap; }
.acctx-page i { color: inherit; }
/* Plain text links in the card take the theme accent. Anything with a class
(buttons, message rows, chips) styles itself. */
.acctx-body a:not([class]) {
color: var(--accent-orange);
font-weight: 600;
text-decoration: none;
}
.acctx-body a:not([class]):hover,
.acctx-body a:not([class]):focus-visible { text-decoration: underline; }
/* ⚠ !important, deliberately. style.css sets `h2 { font-size: 24px !important }`
and `h3 { font-size: 22px !important }` for the whole storefront, and nothing
short of !important beats that. Without it a section heading inside the page
card is exactly as big as the page's own
, and the page has no shape.
(.acctx-h2 is left alone: the sign-in page's "Already have an account?" is
designed at that 24px.) */
.acctx-section-title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 1.15rem !important;
line-height: 1.3;
color: var(--font-light-color);
margin-bottom: 6px;
}
.acctx-h3 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 1rem !important;
color: var(--font-light-color);
margin-bottom: 4px;
}
.acctx-body .acctx-list { margin-bottom: 0; }
/* A section inside the page card: a rule and some air above its heading. */
.acctx-section {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.acctx-section--first { margin-top: 10px; padding-top: 0; border-top: 0; }
.acctx-copy { color: #495057; font-size: 0.95rem; line-height: 1.5; }
.acctx-list-title { font-weight: 700; color: var(--font-light-color); }
/* Settings forms are one column; this keeps that column a readable width on
the 900px card instead of a row of banners. */
.acctx-form--narrow { max-width: 480px; }
/* Labels sit under section headings here, so they step down a size from the
1.1rem that page-support.css gives every label. */
.acctx-body .acctx-form .form-label { font-size: 0.95rem; }
/* Overview tiles reuse .sup-action from page-support.css. */
.acctx-actions { margin: 4px 0 6px; }
/* Two across on a phone: four full-width tiles fill the first screen with
navigation and push everything else out of sight. */
@media (max-width: 575.98px) {
.acctx-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acctx-actions .sup-action { padding: 14px 12px; }
}
/* Neutral "nothing here yet" note. Replaces .alert-light, which read as a
disabled control on the white card. */
.acctx-note {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 12px 14px;
color: #495057;
font-size: 0.92rem;
line-height: 1.45;
}
/* Bootstrap .badge, recoloured. The word inside always carries the meaning.
style.css turns every .badge into a 20px-square cart-count bubble, so the
box is reset here or "This device" gets crushed into that circle. */
.acctx-badge {
display: inline-flex;
align-items: center;
gap: 4px;
width: auto;
height: auto;
padding: 0.3em 0.65em;
border-radius: 999px;
font-size: 0.72rem;
line-height: 1.2;
background: #f1f3f5;
color: #495057;
border: 1px solid #dee2e6;
font-weight: 700;
vertical-align: middle;
}
.acctx-badge--ok {
background: rgba(25, 135, 84, 0.10);
color: #0f5132;
border-color: rgba(25, 135, 84, 0.28);
}
/* One decision with its own password box (the two-step actions). */
.acctx-subpanel {
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
padding: 16px 18px;
margin-top: 14px;
}
.acctx-button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.acctx-button-row-end { margin-left: auto; }
.acctx-steps { padding-left: 1.2rem; margin-bottom: 1.5rem; color: #495057; }
.acctx-steps li { margin-bottom: 0.5rem; }
.acctx-table { --bs-table-bg: transparent; font-size: 0.9rem; }
.acctx-table th {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6c757d;
font-weight: 700;
}
@media (max-width: 575.98px) {
.acctx-form-actions .sup-btn,
.acctx-button-row .sup-btn { width: 100%; }
.acctx-button-row-end { margin-left: 0; }
.acctx-lede-sub { white-space: normal; }
}
/* --- Section strip, phone and tablet only ------------------------------ */
/* Runs edge to edge (it cancels the .sup-dash gutter) and scrolls sideways;
account-nav.js brings the current chip into view on load. White chips,
because the strip sits on the photographer's background image. */
.acctx-subnav { margin: 0 -16px 14px; }
.acctx-subnav-list {
list-style: none;
display: flex;
gap: 8px;
margin: 0;
padding: 2px 16px 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.acctx-subnav-list::-webkit-scrollbar { display: none; }
.acctx-chip {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
padding: 8px 14px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
color: var(--font-light-color);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
}
.acctx-page .acctx-chip i { color: var(--accent-orange); }
.acctx-chip:hover,
.acctx-chip:focus-visible { color: var(--accent-orange); }
/* aria-current is the accessible marker; this is only its visual echo. */
.acctx-chip[aria-current="page"] {
background: var(--accent-orange);
border-color: transparent;
color: var(--font-white, #fff);
}
.acctx-page .acctx-chip[aria-current="page"] i { color: inherit; }
/* --- Shared card shell (memories/*) ------------------------------------ */
.acctx-wrap {
padding-bottom: 3rem;
}
.acctx-card {
border: none;
border-radius: 12px;
}
/* The card is also a .location-card (for its theme surface), and style.css
pins that to 456px tall at desktop width — the gallery-entry card's size.
A plan page is longer than that, so its content ran out of the card and
over the footer. Grow with the content instead. */
.location-card.acctx-card {
height: auto;
}
.acctx-card .card-body {
padding: 2rem;
}
@media (max-width: 575.98px) {
.acctx-card .card-body {
padding: 1.25rem;
}
}
.acctx-title {
font-weight: 800;
margin-bottom: .35rem;
}
.acctx-intro {
color: #6c757d;
margin-bottom: 1.5rem;
}
.acctx-footlinks {
margin-top: 1.5rem;
font-size: .925rem;
}
.acctx-footlinks a {
text-decoration: none;
}
.acctx-footlinks a:hover,
.acctx-footlinks a:focus {
text-decoration: underline;
}
/* The account section menu moved into the rail and the phone strip
(.acctx-subnav, above) on 2026-09-16; the black .acctx-nav pills went with it. */
/* --- Status / evidence blocks ------------------------------------------ */
.acctx-tile {
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 1rem 1.15rem;
height: 100%;
}
.acctx-tile-label {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .04em;
color: #6c757d;
font-weight: 700;
margin-bottom: .3rem;
}
.acctx-tile-value {
font-size: 1.05rem;
font-weight: 700;
word-break: break-word;
}
.acctx-list {
list-style: none;
padding: 0;
margin: 0;
}
.acctx-list li {
padding: .75rem 0;
border-bottom: 1px solid #f1f3f5;
}
.acctx-list li:last-child {
border-bottom: none;
}
.acctx-meta {
font-size: .85rem;
color: #6c757d;
}
/* --- Two-step verification --------------------------------------------- */
.acctx-qr {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 1rem;
display: inline-block;
}
.acctx-qr img {
display: block;
width: 200px;
height: 200px;
max-width: 100%;
}
/* The typed fallback for anyone who cannot scan a code — a screen-reader user,
a desktop authenticator, a camera that will not focus. Never hide this. */
.acctx-secret {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 1.05rem;
letter-spacing: .08em;
word-break: break-all;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: .65rem .85rem;
display: inline-block;
}
.acctx-codes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .5rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 1rem;
margin: 1rem 0;
}
@media (max-width: 575.98px) {
.acctx-codes {
grid-template-columns: 1fr;
}
}
.acctx-codes span {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 6px;
padding: .5rem .65rem;
text-align: center;
letter-spacing: .05em;
}
/* --- Messages sent to you ----------------------------------------------- */
/* One tappable row per message rather than a table: a table needs columns that
only we care about (lane, message id) and collapses badly on the phone most
of these are opened on. */
.acctx-msglist {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #e9ecef;
}
.acctx-msg + .acctx-msg {
border-top: 1px solid #f1f3f5;
}
.acctx-msg-link {
display: flex;
align-items: center;
gap: .85rem;
padding: .85rem .25rem;
color: inherit;
text-decoration: none;
}
.acctx-msg-link:hover,
.acctx-msg-link:focus-visible {
background: #f8f9fa;
color: inherit;
text-decoration: none;
}
.acctx-msg-icon {
flex: 0 0 auto;
width: 2.15rem;
height: 2.15rem;
border-radius: 50%;
background: #f1f3f5;
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
font-size: .9rem;
}
.acctx-msg-main {
flex: 1 1 auto;
min-width: 0;
}
/* Two lines, then an ellipsis. A long subject or the opening of a text should
give enough to recognise the message without pushing the next one off the
screen. */
.acctx-msg-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 600;
line-height: 1.35;
word-break: break-word;
}
.acctx-msg-meta {
display: block;
font-size: .82rem;
color: #6c757d;
margin-top: .15rem;
}
.acctx-msg-chev {
flex: 0 0 auto;
color: #adb5bd;
font-size: .8rem;
}
.acctx-pager {
display: flex;
align-items: center;
font-size: .9rem;
}
.acctx-backlink {
font-size: .9rem;
margin-bottom: .75rem;
}
/* --- One message -------------------------------------------------------- */
.acctx-msg-heading {
word-break: break-word;
margin-bottom: 1rem;
}
.acctx-msg-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: .75rem 1.25rem;
margin: 0 0 1.25rem;
}
.acctx-msg-facts dt {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .04em;
color: #6c757d;
font-weight: 600;
}
.acctx-msg-facts dd {
margin: 0;
word-break: break-word;
}
/* The frame is white on purpose. An email was composed against an inbox
background, and showing it over a themed storefront colour would misrepresent
how it actually looked. */
.acctx-msg-frame {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 10px;
overflow: hidden;
}
.acctx-msg-frame iframe {
display: block;
width: 100%;
height: 70vh;
min-height: 320px;
border: 0;
}
@media (max-width: 575.98px) {
.acctx-msg-frame iframe {
height: 60vh;
}
}
/* --- Memory subscriptions (F22) ---------------------------------------- *
*
* Two surfaces share this block, because they share the card:
* memories/manage — reached from the confirmation email, no login
* account/subscriptions — the same plans for someone who does have a login
*
* ⚠ NEUTRALS, NOT THEME TOKENS, FOR THE SAME REASON AS THE REST OF THIS FILE.
* These pages render inside template_login on Bootstrap's white .card. A
* var(--font-color) here resolves against the storefront's ACTIVE theme, so on
* a dark theme it would paint near-white text onto a white card — legible in
* whichever theme it was written against and invisible in the other. The
* themed half of this feature is .memory-offer-* in style.css, which does sit
* on the storefront's own canvas and is tokenised accordingly.
*/
.memory-manage-status {
display: inline-flex;
align-items: center;
gap: .45rem;
margin: 0 0 1rem;
padding: .2rem .7rem;
border-radius: 999px;
border: 1px solid #e9ecef;
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.memory-manage-status-ok { background: #e8f6ec; border-color: #b7e0c2; color: #1c6b34; }
.memory-manage-status-warn { background: #fdf3e2; border-color: #f0d6a4; color: #8a5a08; }
.memory-manage-status-ending { background: #f4f4f6; border-color: #dcdce2; color: #4b4b57; }
.memory-manage-codes {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .02em;
}
.memory-manage-actions {
margin: 0 0 1.75rem;
}
/* A promised price change, sitting under the price it replaces.
*
* ⚠ AMBER, NOT RED. This is notice of an ordinary change to a subscription the
* customer chose, given ahead of time — the same tone as "payment needed", not
* the tone of something being taken away. It is also never colour ALONE: the
* sentence says what changes and when, so the tint is emphasis and nothing
* more (WCAG 1.4.1). */
.memory-pending-price {
padding: .5rem .7rem;
border-radius: 6px;
border: 1px solid #f0d6a4;
background: #fdf3e2;
color: #8a5a08;
font-size: .8125rem;
line-height: 1.45;
}
.memory-pending-price .fa {
margin-right: .35rem;
}
/* --- Cancelling -------------------------------------------------------- *
*
* ⚠ THE DISCLOSURE IS THE WHOLE DELIBERATENESS GATE, AND IT IS NATIVE ON
* PURPOSE. A customer trying to STOP PAYING must never be blocked by
* JavaScript that failed to load, so there is no modal and no confirm() —
* plus a required checkbox, both enforced by the browser alone. Do
* not "upgrade" this to a scripted dialog.
*/
.memory-manage-cancel {
border-top: 1px solid #e9ecef;
padding-top: 1.25rem;
}
.memory-manage-cancel > summary {
cursor: pointer;
font-size: .925rem;
font-weight: 600;
color: #6c757d;
}
.memory-manage-cancel > summary:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 3px;
border-radius: 4px;
}
.memory-manage-note {
margin: .85rem 0 1rem;
font-size: .875rem;
color: #6c757d;
}
.memory-manage-check {
display: flex;
align-items: flex-start;
gap: .5rem;
margin: 0 0 1rem;
font-size: .9rem;
}
.memory-manage-check input {
margin-top: .2rem;
flex: 0 0 auto;
}
/* Outlined, not filled. The destructive action on this page should be findable
and unmistakable without competing with "View my photos" for the eye. */
.memory-manage-danger {
background: transparent;
border: 1px solid #d23737;
border-radius: 8px;
padding: .45rem 1.1rem;
font-weight: 600;
color: #b62b2b;
}
.memory-manage-danger:hover,
.memory-manage-danger:focus {
background: #d23737;
color: #fff;
}
.memory-manage-danger:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 3px;
}
/* --- The /account list ------------------------------------------------- */
.memory-plan {
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 1.1rem 1.25rem;
margin-bottom: 1rem;
}
.memory-plan-codes {
margin: 0 0 .25rem;
font-size: .95rem;
}
.memory-plan-codes strong {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .02em;
}
.memory-plan-terms {
margin: 0 0 .75rem;
font-size: .875rem;
color: #6c757d;
}
.memory-plan-actions {
margin: 0;
font-size: .925rem;
}
@media (max-width: 575.98px) {
.memory-plan {
padding: .9rem 1rem;
}
}
/* --- The why-step and the save offer (F22 Phase 7b) --------------------- *
*
* ⚠ SAME RULE AS THE DISCLOSURE ABOVE: nothing here needs JavaScript. The
* reason list is a native radio group with `required`, and the save offer is
* two ordinary forms. A customer trying to stop paying is never held up by a
* script that did not load.
*/
.memory-cancel-reasons {
border: 0;
margin: 0 0 1rem;
padding: 0;
}
.memory-cancel-reasons > legend {
float: none;
width: auto;
margin-bottom: .6rem;
}
/* --- The save offer screen --------------------------------------------- */
.memory-save-price {
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 1.1rem 1.25rem;
margin: 0 0 1.5rem;
text-align: center;
}
.memory-save-was {
margin: 0;
font-size: .95rem;
color: #6c757d;
}
.memory-save-now {
margin: .15rem 0 .4rem;
font-size: 1.5rem;
line-height: 1.2;
}
.memory-save-terms {
margin: 0;
font-size: .85rem;
color: #6c757d;
}
/* ⚠ THE TWO BUTTONS STACK, AND CANCEL IS NOT SMALLER OR GREYER THAN THE
* OFFER. It is the outlined destructive style the manage page already uses,
* at the same size — a customer who came here to leave must not have to hunt
* for the way out. */
.memory-save-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: .75rem;
margin: 0 0 1.5rem;
}
.memory-save-actions .btn,
.memory-save-actions .memory-manage-danger {
width: 100%;
}