/* OCS Hosting & Domain Services identity (2026-10-27): "your own server, running where your visitors are".
   Navy from the approved mark as the anchor, its sky cyan as the signal, the wordmark's peach as a warm
   accent, and a faint hexagon field from the mark. Loaded after site.css and cpanel.css on
   ordercloudserver.com; it re-tints the shared plan, cloud and management components (cp-*). */
.brand-ocs{
  --ocs-navy:#19448e;--ocs-navy-deep:#0d2550;--ocs-cyan:#01bdfd;--ocs-peach:#f6c7a8;
  --accent:#19448e;--accent-strong:#12336d;--on-accent:#ffffff;
  --signal:#0277a8;            /* cyan text and fills on light surfaces: 4.8:1 on white */
  --signal-bright:#01bdfd;
  --console:#0d2550;--console-2:#123064;--console-line:#2a4a85;--console-ink:#f2f7ff;--console-muted:#a9bddc;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme=dark] .brand-ocs{--accent:#5fd3ff;--accent-strong:#9be3ff;--on-accent:#06172f;--signal:#5fd3ff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .brand-ocs{--accent:#5fd3ff;--accent-strong:#9be3ff;--on-accent:#06172f;--signal:#5fd3ff}}

.brand-ocs .brand-lockup{height:46px;width:auto;display:block}
/* Light lockup on light pages; the dark lockup (white lettering, cyan cube kept) on dark pages and the footer */
.brand-ocs .lockup-dark{display:none}
:root[data-theme=dark] .brand-ocs .lockup-light{display:none}
:root[data-theme=dark] .brand-ocs .lockup-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .brand-ocs .lockup-light{display:none}
  :root:not([data-theme=light]) .brand-ocs .lockup-dark{display:block}
}
.brand-ocs .site-footer .brand-lockup{height:42px}
.brand-ocs .cta{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.brand-ocs .cta:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.brand-ocs .cta.secondary{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}

/* Hero: navy with the mark's hexagon field */
.ocs-hero{position:relative;overflow:hidden;color:#f2f7ff;padding:72px 0 84px;
  background-color:var(--ocs-navy-deep);
  background-image:radial-gradient(52rem 26rem at 88% 0%,rgb(1 189 253 / 22%),transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31Z M28 64 55 79.5v31' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.2'/%3E%3C/svg%3E"),
    linear-gradient(160deg,#123064,#0d2550 55%,#0a1d40)}
.ocs-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.ocs-kicker,.ocs-label{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.ocs-kicker{color:var(--ocs-cyan)}
.ocs-label{color:var(--signal)}
.ocs-hero h1{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.04;letter-spacing:-.025em;margin:0 0 20px;color:#fff}
.ocs-hero .lead{color:#cfdcf0;font-size:1.13rem;max-width:36rem}
.ocs-hero .cta{background:var(--ocs-cyan);border-color:var(--ocs-cyan);color:#06172f}
.ocs-hero .cta:hover{background:#5fd3ff;border-color:#5fd3ff}
.ocs-ghost{color:#fff;font-weight:600;text-underline-offset:4px}
.ocs-proof{list-style:none;display:flex;flex-wrap:wrap;gap:10px 30px;padding:0;margin:32px 0 0;color:#a9bddc;font-size:.9rem}
.ocs-proof strong{display:block;color:#fff;font-family:var(--mono);font-size:1.12rem;font-weight:600}

/* Region picker */
.ocs-picker{background:var(--surface,#fff);color:var(--ink);border-radius:18px;padding:24px;box-shadow:0 30px 80px rgb(3 14 35 / 45%);border-top:4px solid var(--ocs-cyan)}
.ocs-picker-q{font-weight:700;font-size:1.05rem;margin:0 0 12px}
.ocs-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--soft,#eef3fa);border-radius:12px;padding:5px;margin-bottom:16px}
.ocs-tabs button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:9px;padding:11px 12px;min-height:44px;background:transparent;color:var(--muted)}
.ocs-tabs button[aria-pressed=true]{background:var(--ocs-navy);color:#fff;box-shadow:0 4px 14px rgb(25 68 142 / 30%)}
.ocs-tabs button:focus-visible{outline:2px solid var(--ocs-cyan);outline-offset:2px}
.ocs-panel-note{color:var(--muted);font-size:.9rem;margin:0 0 10px}
.ocs-cloud-list{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.ocs-cloud{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.ocs-cloud.is-pick{border:2px solid var(--signal);background:color-mix(in srgb,var(--ocs-cyan) 7%,transparent)}
.ocs-cloud-name{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.ocs-cloud-meta{flex-basis:100%;color:var(--muted);font-size:.8rem}
.ocs-pick-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;background:var(--ocs-navy);color:#fff;border-radius:999px;padding:2px 8px}
.ocs-bar{height:8px;border-radius:999px;background:var(--soft,#eef3fa);overflow:hidden}
.ocs-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--ocs-navy),var(--ocs-cyan))}
.ocs-cloud-price{font-size:.85rem;color:var(--muted);white-space:nowrap}
.ocs-cloud-price strong{font-family:var(--mono);color:var(--ink);font-size:1rem}
.ocs-reason{font-size:.92rem;margin:0 0 14px}
[data-region-picker].is-live .ocs-panel[hidden]{display:none}

/* Sections */
.ocs-head{max-width:48rem;margin-bottom:30px}
.ocs-head h2{margin:0 0 10px}
.ocs-head p:not(.ocs-label){color:var(--muted)}
.ocs-sub{margin:54px 0 18px}
.ocs-fear-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ocs-fear{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);position:relative}
.ocs-fear::before{content:"";position:absolute;left:24px;top:0;width:36px;height:4px;border-radius:0 0 4px 4px;background:var(--ocs-cyan)}
.ocs-fear h3{font-size:1.05rem;margin:6px 0 10px;color:var(--ink)}
.ocs-fear p{margin:0;color:var(--muted)}
.ocs-parts-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:14px;overflow:hidden}
.ocs-parts-table th,.ocs-parts-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.ocs-parts-table thead th{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ocs-parts-table td:last-child{font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--ocs-cyan) 8%,transparent)}
.ocs-parts-table thead th:last-child{color:var(--signal)}
.ocs-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start}
.ocs-customers{padding:26px;border-radius:14px;background:var(--ocs-navy);color:#f2f7ff}
.ocs-customers h3{margin:0 0 8px;color:#fff}
.ocs-customers p{color:#cfdcf0}
.ocs-customers .cta{background:#fff;border-color:#fff;color:var(--ocs-navy)}
.ocs-size{background:linear-gradient(90deg,var(--ocs-navy-deep),var(--ocs-navy));color:#f2f7ff}
.ocs-size-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.ocs-size h2{margin:0 0 6px;color:#fff}
.ocs-size p{margin:0;color:#cfdcf0;max-width:44rem}
.ocs-size .cta{background:var(--ocs-cyan);border-color:var(--ocs-cyan);color:#06172f}

.ocs-trial-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:28px 32px;border:1px solid var(--line);border-left:4px solid var(--ocs-cyan);border-radius:14px;background:var(--surface)}
.ocs-trial-row>div:first-child{flex:1 1 32rem}
.ocs-trial h2{margin:0 0 8px;max-width:none}
.ocs-trial p{margin:0;color:var(--muted);max-width:42rem}
.ocs-trial-actions{display:grid;gap:10px;justify-items:start}

/* Japanese headings break between phrases, not inside a word (お客 / 様) */
:lang(ja) :is(h1,h2,h3){word-break:auto-phrase}

/* The shared deck components in OCS colors */
.brand-ocs .cp-plan.is-start{border-color:var(--signal);box-shadow:0 14px 40px rgb(25 68 142 / 14%)}
.brand-ocs .cp-flag{background:var(--ocs-navy);color:#fff}
.brand-ocs .cp-plan li::before{background:var(--ocs-cyan)}
.brand-ocs .cp-gauge-fill{background:linear-gradient(90deg,var(--ocs-navy),var(--ocs-cyan))}
.brand-ocs .cp-step,.brand-ocs .cp-label{color:var(--signal)}
.brand-ocs .site-footer{background:var(--ocs-navy-deep);border-top:3px solid var(--ocs-cyan)}
.brand-ocs .utility-bar{background:var(--ocs-navy-deep)}

@media (max-width:1100px){
  .ocs-hero-grid,.ocs-split{grid-template-columns:1fr;gap:36px}
  .ocs-fear-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .ocs-hero{padding:46px 0 56px}
  .ocs-fear-grid{grid-template-columns:1fr}
  .ocs-cloud{grid-template-columns:minmax(0,1fr) auto}
  .ocs-bar{grid-column:1/-1;grid-row:2}
  .ocs-picker{padding:18px}
}