/* Shared refinements from the desktop and mobile page review. */
.product-plan-page .plan-backdrop{top:0;height:1085px}
.enquiry-wrap{padding-top:54px}
.enquiry-wrap .action{gap:8px;line-height:1.5;text-align:center}
.enquiry-wrap .pay-now{padding:16px 18px;border:1px solid #c6ff3d40;border-radius:12px;background:#c6ff3d08}
.plan-btn,.plan-text-link{column-gap:8px}
/* The glow starts at the very top, behind the transparent header, like the plan pages' backdrop.
   (premium.css places it 80–95px down, which left a flat black band behind the nav.) The centre
   moves from 28% to 36% of the taller layer, so it stays in the same place on screen. */
.sn-suite:not([data-product=catalogue])::before{top:0;height:700px;border-radius:0;background:radial-gradient(ellipse at 65% 36%,rgb(var(--service)/.17),transparent 68%)}
.sn-suite .sn-content{min-width:0}
.sn-suite .toolbar{row-gap:14px}
.sn-suite .toolbar input:is([type=text],[type=search]){flex:1 1 220px;min-width:min(100%,200px)}
.sn-suite .toolbar label{min-width:0}
.sn-suite .sn-table-scroll{max-width:100%;overflow:auto;overscroll-behavior-x:contain}
.sn-suite .auto-topup-fields{display:grid;grid-template-columns:repeat(2,minmax(0,200px)) auto;align-items:end;gap:16px}
.sn-suite .auto-topup-fields label{font-size:13px;color:#c7ccd5}
.sn-suite .auto-topup-fields input{display:block;width:100%;min-height:48px;margin-top:8px;font-size:16px}
.sn-suite .auto-topup-fields button{min-height:48px;justify-self:start}
.hero .search-ui-shell .search-bar{min-height:54px!important}
.hero #domain-input{min-height:44px;font-size:16px}
.hero .search-ui-shell :is(#search-btn,#smart-search-btn){width:44px!important;min-width:44px!important;min-height:44px;flex-basis:44px!important}
.sn-embedded-demo #sn-header,.sn-embedded-demo #sn-footer,.sn-embedded-demo #sn-cookie-banner{display:none!important}
.sn-embedded-demo .fld input{min-height:44px;font-size:16px}
.sn-embedded-demo .blk input{min-height:40px;font-size:16px;border-radius:4px;padding:6px}
.sn-embedded-demo .blk input:focus{outline:1px solid var(--accent);outline-offset:2px}
@media(max-width:760px){
 .enquiry-wrap{padding-top:32px}
 .enquiry-wrap .flow-progress li{flex:1;text-align:center}
 .sn-suite .auto-topup-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sn-suite .auto-topup-fields button{grid-column:1/-1}
 .sn-suite .tabbar{max-width:100%;overflow-x:auto}
}
/* Admin account manager: the selected log view. */
.sn-suite .log-tab.active{background:#fff;color:#000;border-color:#fff}
/* "Switch it on" card on workspace pages (shell.js → snActivateCard). Lit by the page's service colour. */
.sn-suite .sn-activate{position:relative;overflow:hidden;padding:30px;border:1px solid #ffffff22;border-radius:22px;background:radial-gradient(ellipse at top right,rgb(var(--service)/.2),transparent 65%),linear-gradient(140deg,#1b1b20,#111114);box-shadow:0 20px 50px rgb(var(--service)/.07)}
.sn-suite .sn-activate-eyebrow{display:inline-block;margin:0 0 16px;padding:5px 11px;border-radius:999px;background:rgb(var(--service)/.15);color:rgb(var(--service-light,var(--service)));font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sn-suite .sn-activate h2{margin:0 0 10px;font-size:clamp(22px,2.6vw,30px);line-height:1.15;letter-spacing:-.03em;font-weight:600;color:#fff}
.sn-suite .sn-activate-lede{margin:0 0 18px;max-width:580px;color:#c0c0ca;font-size:15px;line-height:1.6}
.sn-suite .sn-activate ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.sn-suite .sn-activate li{display:flex;align-items:flex-start;gap:10px;color:#d6d6de;font-size:14px;line-height:1.5}
.sn-suite .sn-activate li::before{content:'';flex:0 0 6px;width:6px;height:11px;margin:3px 7px 0 5px;border:solid rgb(var(--service-light,var(--service)));border-width:0 2px 2px 0;transform:rotate(45deg)}
.sn-suite .sn-activate-actions{display:flex;flex-wrap:wrap;gap:10px}
.sn-suite .sn-activate-note{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:#8d8d99}
.sn-suite .sn-activate-note b{color:#fff}
@media(max-width:560px){.sn-suite .sn-activate{padding:22px 18px}.sn-suite .sn-activate-actions .sn-btn{flex:1 1 100%;justify-content:center}}
/* Overview cards: the text keeps clear of the corner artwork. premium.css drew the art 204px wide
   but kept only 125px clear, and its phone-size shrink was overridden by a later rule, so long lines
   (like a full domain name) ran underneath the picture. Long words may also break. */
.sn-suite .service-card::after{width:176px;height:168px}
.sn-suite .service-card .muted{max-width:calc(100% - 172px);overflow-wrap:anywhere}
.sn-suite .service-card .sn-btn{max-width:calc(100% - 172px)}
@media(max-width:540px){
 .sn-suite .service-card::after{width:108px;height:104px;right:10px;bottom:12px;opacity:.55}
 .sn-suite .service-card .muted{max-width:calc(100% - 104px)}
 .sn-suite .service-card .sn-btn{max-width:calc(100% - 108px)}
}
/* Checkout "more options": when the two option columns stack on a phone they kept align-items:start
   from the side-by-side layout, so each column shrank to its content. The Extra mailbox card, which
   is a size container (for its − 3 + stepper), then collapsed to a sliver. Stacked columns and their
   cards now run full width, and the stepper sits on the right of the card. */
.sn-suite[data-product=catalogue] .items.two-col>.col>.item{width:100%}
@media(max-width:540px){.sn-suite[data-product=catalogue] .items.two-col{align-items:stretch}.sn-suite[data-product=catalogue] .items.two-col>.col{width:100%}}

/* ==========================================================================
   Customer workspace, 2026-09-27 (dash, sites, names, design, mail, phone,
   billing, market). Square corners, darker flat panels, and each page opens
   with its heading over the artwork, which sits behind the text with room
   above and below. shell.js builds the hero and adds .sn-workspace-refresh.
   ========================================================================== */
.sn-suite{--ws-panel:#0b0b0d;--ws-panel-2:#101013;--ws-line:#ffffff17;--ws-line-strong:#ffffff2b;--ws-radius:6px}
/* Square everywhere in the apps (checkout and admin too). */
.sn-suite :is(.sn-box,.sn-card,.stat-card,.card,.mbox,.service-card,.sn-activate,.blk,.edPreview,.toast,.sn-nav,.domain-search,.domain-result){border-radius:var(--ws-radius)!important}
.sn-suite :is(.sn-btn,button,.btn,.tbtn){border-radius:4px!important}
.sn-suite :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-radius:4px}
.sn-suite .pill{border-radius:3px}
.sn-suite .sn-nav a{border-radius:4px}
/* Darker, flat panels (the checkout keeps its own colours). */
.sn-suite:not([data-product=catalogue]) :is(.sn-box,.sn-card,.stat-card,.mbox,.service-card,#card-billing,.sn-activate){background:var(--ws-panel)!important;border:1px solid var(--ws-line)!important;box-shadow:none!important}
.sn-suite:not([data-product=catalogue]) :is(.sn-box,.sn-card,.service-card,#card-billing)::before{display:none}
.sn-suite:not([data-product=catalogue]) .service-card::after{display:none}

.sn-workspace-refresh{--service:120 145 170;--service-light:198 255 61}
.sn-workspace-refresh::before{background:radial-gradient(ellipse at 75% 20%,#5f7ba60f,transparent 60%)!important}
.sn-workspace-refresh::after{display:none}
.sn-workspace-refresh .sn-workspace{grid-template-columns:224px minmax(0,1fr);max-width:1360px;padding:36px 40px 96px;gap:56px}

/* Rail: a quiet column, not a card. */
.sn-workspace-refresh .sn-customer-rail{top:112px;padding:0 20px 0 0;background:none!important;border:0;border-right:1px solid var(--ws-line);box-shadow:none}
.sn-workspace-refresh .sn-customer-rail a{padding:10px 12px;margin:1px 0;color:#9d9fa9}
.sn-workspace-refresh .sn-customer-rail a:hover{background:#ffffff08;color:#fff}
.sn-workspace-refresh .sn-customer-rail a.active{background:#ffffff0c;color:#fff;box-shadow:inset 2px 0 #c6ff3d}
.sn-workspace-refresh .sn-customer-rail .sn-nav-shop{margin-top:18px;padding-top:16px;border-top:1px solid var(--ws-line);color:#c6ff3d}

/* Hero: text in front, artwork behind it on the right, generous space above and below. */
.sn-workspace-refresh .sn-workspace-hero{position:relative;isolation:isolate;display:block;min-height:0;padding:76px 0 72px;margin:0 0 48px;border-bottom:1px solid var(--ws-line)}
.sn-workspace-refresh .sn-hero-art{position:absolute;z-index:-1;right:0;top:50%;transform:translateY(-50%);width:auto;height:calc(100% + 24px);max-height:400px;max-width:52%;object-fit:contain;opacity:.55;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%)}
.sn-workspace-refresh .sn-hero-copy{position:relative;max-width:620px}
.sn-workspace-refresh .sn-hero-eyebrow{color:#c6ff3d;letter-spacing:.16em;font-size:11px;font-weight:650;margin:0 0 20px;text-transform:uppercase}
.sn-workspace-refresh .sn-content .sn-workspace-hero h1{font-size:clamp(36px,3.6vw,54px)!important;font-weight:500;line-height:1.08;letter-spacing:-.04em!important;max-width:620px;padding:0;margin:0 0 20px!important;text-shadow:0 2px 24px #000}
.sn-workspace-refresh .sn-hero-intro{font-size:16px;line-height:1.7;color:#c4c6cf;max-width:520px;margin:0}
.sn-workspace-refresh .sn-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.sn-workspace-refresh .sn-add-service{position:relative;top:auto;right:auto;margin:0}
.sn-workspace-refresh .sn-hero-actions .sn-btn{position:relative;overflow:hidden}

/* Status labels: dark with coloured text, not bright blocks. */
.sn-workspace-refresh .pill{background:#ffffff0d!important;color:#c9cad2!important;border:1px solid #ffffff1c!important;box-shadow:none!important;font-weight:600;letter-spacing:.02em;text-transform:none}
.sn-workspace-refresh .pill::before{display:none!important}
.sn-workspace-refresh .pill-ok{color:#c6ff3d!important;border-color:#c6ff3d33!important;background:#c6ff3d0d!important}
.sn-workspace-refresh .pill-warn{color:#ffb02e!important;border-color:#ffb02e33!important;background:#ffb02e0d!important}
.sn-workspace-refresh .pill-bad{color:#ff8a8a!important;border-color:#ff6b6b33!important;background:#ff6b6b0d!important}

/* Tabs inside a page. */
.sn-workspace-refresh .tabbar{gap:4px;padding:0;margin-bottom:28px;border-bottom:1px solid var(--ws-line)}
.sn-workspace-refresh .tabbar button{padding:12px 16px;border:0!important;border-radius:0!important;color:#9d9fa9;background:none;white-space:nowrap;box-shadow:inset 0 -2px transparent}
.sn-workspace-refresh .tabbar button:hover{color:#fff}
.sn-workspace-refresh .tabbar button.active{color:#fff;background:none;box-shadow:inset 0 -2px #c6ff3d}

/* Domains page bits Codex started. */
.sn-workspace-refresh[data-product=names] .domain-search{background:var(--ws-panel-2);border-color:var(--ws-line-strong)}
.sn-workspace-refresh[data-product=names] .domain-result{background:var(--ws-panel);padding:22px;gap:16px 24px}
.sn-workspace-refresh[data-product=names] .domain-result-actions{grid-row:1/3;grid-column:2;align-self:center}
.sn-workspace-refresh[data-product=names] .domain-result-price{font-size:18px}
.sn-workspace-refresh #cart-panel .fm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--ws-line)}
.sn-workspace-refresh #cart-panel .fm-name{overflow-wrap:anywhere;min-width:0}
.sn-workspace-refresh #cart-panel .fm-actions{flex-shrink:0}
.sn-workspace-refresh #cart-panel .toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:12px}
.sn-workspace-refresh #cart-checkout{background:#c6ff3d;color:#080a04;border-color:#c6ff3d}

/* Overview (dash): at a glance, services, what needs attention, domains. */
.ws-glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 40px;background:var(--ws-line);border:1px solid var(--ws-line);border-radius:var(--ws-radius);overflow:hidden}
.ws-tile{display:flex;flex-direction:column;gap:6px;padding:22px 24px;background:var(--ws-panel);color:inherit;text-decoration:none;transition:background .2s}
.ws-tile:hover{background:var(--ws-panel-2)}
.ws-tile-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8d8f99}
.ws-tile-value{font-size:32px;font-weight:600;letter-spacing:-.035em;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.ws-tile-note{font-size:13px;color:#a9abb5}
.ws-tile-note.warn{color:#ffb02e}.ws-tile-note.bad{color:#ff8a8a}
.ws-columns{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:24px;align-items:start;margin-bottom:24px}
.ws-panel{background:var(--ws-panel);border:1px solid var(--ws-line);border-radius:var(--ws-radius);padding:24px 26px;margin:0 0 24px}
.ws-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 8px}
.ws-panel h2{font-size:17px;font-weight:600;letter-spacing:-.02em;color:#fff;margin:0}
.ws-panel-head a{font-size:13px;color:#c6ff3d;text-decoration:none;white-space:nowrap}
.ws-panel-head a:hover{text-decoration:underline}
.ws-list{list-style:none;margin:0;padding:0}
.ws-service{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 0;border-top:1px solid var(--ws-line)}
.ws-list li:first-child{border-top:0}
.ws-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ws-line-strong);border-radius:4px;color:#e8e9ee;background:#ffffff05}
.ws-icon svg{width:19px;height:19px}
.ws-service-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:600;color:#fff;margin:0}
.ws-service-line{font-size:13px;color:#a9abb5;margin:3px 0 0;overflow-wrap:anywhere}
.ws-service .sn-btn{padding:8px 14px;min-height:36px;font-size:13px;white-space:nowrap}
.ws-todo li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--ws-line);font-size:14px;line-height:1.5}
.ws-todo li::before{content:'';flex:0 0 8px;height:8px;margin-top:7px;border-radius:1px;background:#ffb02e}
.ws-todo li.bad::before{background:#ff6b6b}
.ws-todo li.ok::before{background:#c6ff3d}
.ws-todo a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ws-todo small{display:block;color:#8d8f99;font-size:12px;margin-top:2px}
.ws-help p{font-size:14px;line-height:1.65;color:#a9abb5;margin:8px 0 16px}
.ws-table{width:100%;border-collapse:collapse;font-size:14px}
.ws-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8d8f99;padding:12px 0;border-bottom:1px solid var(--ws-line)}
.ws-table td{padding:14px 0;border-bottom:1px solid var(--ws-line);color:#d6d7dd}
.ws-table tr:last-child td{border-bottom:0}
.ws-table td:first-child{color:#fff;font-weight:600;overflow-wrap:anywhere;padding-right:12px}
.ws-table th:last-child,.ws-table td:last-child{text-align:right}
.ws-empty{font-size:14px;color:#a9abb5;margin:12px 0 4px}
/* Billing: money column. */
.billing-columns{grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr)}
.billing-columns .balance-figure{font-size:40px;font-weight:600;letter-spacing:-.04em;color:#fff;line-height:1.1;margin:8px 0 0}
.billing-topup{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.billing-topup input{grid-column:1/-1;min-height:44px;font-size:16px}
.billing-topup button{min-height:40px}
.billing-topup button[hidden]{display:none}
.billing-columns .auto-topup-fields{grid-template-columns:1fr 1fr}
.billing-columns .auto-topup-fields button{grid-column:1/-1}
.ws-panel .toolbar{display:flex;flex-wrap:wrap;gap:8px}
.ws-todo-action{margin-top:10px}
.ws-todo-action .sn-btn{min-height:34px;padding:7px 14px;font-size:13px}
.ws-payments li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--ws-line);font-size:14px;color:#d6d7dd}
.ws-payments li:first-child{border-top:0}
.ws-payments small{display:block;font-size:12px;color:#8d8f99}
.ws-payments b{color:#fff;font-variant-numeric:tabular-nums}
.ws-welcome{margin-bottom:32px;border-color:#c6ff3d40!important}
.ws-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.ws-steps li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--ws-line)}
.ws-steps li:first-child{border-top:0}
.ws-steps li>b{display:grid;place-items:center;width:32px;height:32px;border:1px solid #c6ff3d66;border-radius:4px;color:#c6ff3d;font-size:14px}
@media(max-width:600px){.ws-steps li{grid-template-columns:32px minmax(0,1fr)}.ws-steps li .sn-btn{grid-column:2;justify-self:start}}

@media(max-width:1100px){
  .sn-workspace-refresh .sn-workspace{grid-template-columns:200px minmax(0,1fr);padding:32px 28px 80px;gap:32px}
  .ws-glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws-columns{grid-template-columns:minmax(0,1fr)}
  .sn-workspace-refresh .sn-hero-art{max-width:48%;opacity:.5}
  .sn-workspace-refresh[data-product=names] .domain-result-actions{grid-column:1/-1;grid-row:auto}
}
@media(max-width:850px){
  .sn-workspace-refresh .sn-workspace{grid-template-columns:minmax(0,1fr);padding:20px 16px 56px;gap:20px}
  .sn-workspace-refresh .sn-customer-rail{position:static;padding:0 0 14px;border-right:0;border-bottom:1px solid var(--ws-line)}
}
@media(max-width:600px){
  .sn-workspace-refresh .sn-workspace-hero{padding:44px 0 40px;margin-bottom:28px}
  .sn-workspace-refresh .sn-hero-art{top:0;right:-12px;transform:none;height:190px;max-width:62%;opacity:.35;-webkit-mask-image:linear-gradient(200deg,#000 30%,transparent 85%);mask-image:linear-gradient(200deg,#000 30%,transparent 85%)}
  .sn-workspace-refresh .sn-hero-eyebrow{font-size:10px;margin-bottom:16px}
  .sn-workspace-refresh .sn-content .sn-workspace-hero h1{font-size:34px!important}
  .sn-workspace-refresh .sn-hero-intro{font-size:15px}
  .sn-workspace-refresh .sn-hero-actions .sn-btn{flex:1 1 100%;justify-content:center;text-align:center}
  .ws-glance{margin-bottom:24px}
  .ws-tile{padding:16px}
  .ws-tile-value{font-size:26px}
  .ws-panel{padding:18px 16px}
  .ws-service{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .ws-service .sn-btn{grid-column:2;justify-self:start}
  .ws-icon{width:36px;height:36px}
  .sn-workspace-refresh[data-product=names] .domain-result{padding:18px}
  .sn-workspace-refresh[data-product=names] .domain-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .sn-workspace-refresh #cart-panel .toolbar{align-items:stretch;flex-direction:column}
  .sn-workspace-refresh .tabbar{overflow-x:auto;scrollbar-width:none}
  .sn-workspace-refresh .tabbar button{padding:11px 12px}
}