/* ============================================================
iOwn design system — v1 (shared across iownsoftware.com sites)
------------------------------------------------------------
This is the SHARED "iOwn" design system stylesheet. Every site
links THIS file (absolute URL) plus a small per-site theme.css
that OVERRIDES only the brand variables — the ones grouped under
"THEME (override per site in theme.css)" in :root below.
Do not edit brand values here for a single site — put those in that
site's theme.css. This file carries the structure + components; the
theme carries the palette. One self-contained file, system fonts only.
============================================================ */
/* MyRemoting product site — Decision Deck ✕ Deed & Key ✕ Toolbox.
Ownership-led plan chooser. Navy + green. Authoritative shared classes. */
/* ============================================================
TOKENS
============================================================ */
:root{
/* ==========================================================
THEME (override per site in theme.css)
Brand palette — restated at their brand values in each
site's theme.css. These are the ONLY vars a site overrides.
========================================================== */
/* Navy surfaces / gradient */
--bg:#0f1a2e; --grad1:#0f1a2e; --grad2:#1B365D;
--panel:#14213a; --panel2:#0b1424;
/* Accent (brand green) family */
--accent:#4CAF50; --accent-2:#34d399; --accent-bg:#11261c; --accent-bg-h:#163524; --accent-bd:#1f5c43;
--accent-soft:#6ee7b7; /* success/available text, seal ring */
/* Accent-adjacent brand hues */
--blue:#60a5fa; --amber:#fbbf24;
/* On-prem "vault" steel palette (cool, NOT green) */
--onprem-bg:#0b1422; /* vault surface (deeper navy) */
--onprem-bd:#3a4c66; /* cool steel border, NOT green */
--onprem-accent:#9fb6d6; /* steel label/glyph on the vault */
/* ==========================================================
STRUCTURAL (shared, rarely overridden)
Spacing, radii, type scale, shadows, motion, neutral text.
Keep these consistent across every site.
========================================================== */
/* COLOR — structural neutrals / borders */
--border:#21304b; --border2:#2a3a59;
--text:#e6e6e6; --muted:#8a93a6; --dim:#6b7280;
--ink:#ffffff; /* pure-white headings/prices */
--text-2:#c4cde0; /* lead paragraph / body-on-dark */
--text-3:#d3dbea; /* list text */
--accent-ink:#08220d; /* text on a solid green fill */
--ok:#6ee7b7; --bad:#fca5a5; /* form validation */
--ring-accent:0 0 0 1px var(--accent-bd) inset; /* featured-card inner ring */
/* TYPE */
--font: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
--fs-hero: clamp(34px,5.4vw,56px);
--fs-h2: clamp(26px,3.4vw,34px);
--fs-h3: 20px; --fs-h4: 15px;
--fs-lead: clamp(17px,2.2vw,21px);
--fs-body: 16px; --fs-sm: 14px; --fs-xs: 12.5px;
--fs-price: 34px;
--lh-body: 1.6; --lh-tight: 1.2;
--track-tight: -.02em; --track-caps: .12em;
/* SPACING */
--s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:120px;
--section-pad: clamp(64px, 8vw, 96px);
--wrap:1080px;
/* RADII */
--radius:14px; --radius-sm:9px; --radius-lg:18px; --radius-pill:999px;
/* SHADOWS */
--shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.25);
--shadow-lift: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 40px rgba(0,0,0,.35);
--hairline: 1px solid var(--border);
/* MOTION */
--ease: cubic-bezier(.2,.6,.2,1);
--t-fast:120ms; --t:180ms; --t-slow:600ms;
color-scheme:dark;
}
/* ============================================================
BASE
============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; color:var(--text);
font:var(--fs-body)/var(--lh-body) var(--font);
background:
radial-gradient(1100px 700px at 80% -10%, #1d3a63 0%, rgba(29,58,99,0) 60%),
linear-gradient(160deg, var(--grad1), var(--grad2) 120%);
background-attachment:fixed; min-height:100vh;
-webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-decoration:none}
a:hover{color:#cfd6e4}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.muted{color:var(--muted)}
h1,h2,h3,h4{margin:0 0 .4em; line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2); color:var(--ink)}
h3{font-size:var(--fs-h3); color:var(--ink)}
section{padding:var(--section-pad) 0}
.eyebrow{text-transform:uppercase; letter-spacing:var(--track-caps); font-size:var(--fs-xs);
font-weight:700; color:var(--accent)}
.grn{color:var(--accent)}
.lead{font-size:var(--fs-lead); color:var(--text-2)}
/* Reduced motion — global guard */
@media (prefers-reduced-motion: reduce){
*{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}
/* ============================================================
1) HEADER (component #1)
============================================================ */
header.site{position:sticky; top:0; z-index:20; backdrop-filter:blur(8px);
background:rgba(11,20,36,.72); border-bottom:var(--hairline)}
header.site .wrap{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:center; gap:11px; color:var(--text); font-weight:700; font-size:18px}
.brand img{width:30px; height:30px; border-radius:7px}
header nav{margin-left:auto; display:flex; align-items:center; gap:24px}
header nav a{color:#aeb8cc; font-size:14.5px; font-weight:500}
header nav a:hover{color:#fff}
@media (max-width:760px){ header nav a.navlink{display:none} }
/* ============================================================
2) FOOTER (component #2)
============================================================ */
footer.site{border-top:var(--hairline); padding:34px 0; color:var(--muted); font-size:13.5px}
footer.site .wrap{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
footer.site a{color:#aeb8cc}
footer.site a:hover{color:#fff}
footer.site .sp{flex:1}
.note{font-size:var(--fs-xs); color:var(--dim)}
/* ============================================================
4) BUTTONS (component #4)
============================================================ */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:10px; padding:11px 18px;
font-size:15px; font-weight:600; border:1px solid var(--border2); background:#16223a; color:#dfe6f2;
cursor:pointer; transition:background var(--t) var(--ease), color var(--t) var(--ease),
border-color var(--t) var(--ease), transform var(--t-fast) var(--ease)}
.btn:hover{background:#1d2c46; color:#fff}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent-bg); color:#bdf0c6; border-color:var(--accent-bd)}
.btn.primary:hover{background:var(--accent-bg-h); color:#d6ffdd}
.btn.lg{padding:14px 24px; font-size:16px}
.btn.ghost{background:transparent; border-color:var(--border2); color:#aeb8cc}
.btn.ghost:hover{background:rgba(255,255,255,.04); color:#fff}
.btn.block{width:100%; justify-content:center}
.btn.loading{opacity:.85; cursor:progress}
/* shared spinner (migrated from buy.html inline) */
.spin{display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.35);
border-top-color:#fff; border-radius:50%; animation:mrspin .7s linear infinite}
@keyframes mrspin{to{transform:rotate(360deg)}}
/* ============================================================
5) SECTION SHELLS (component #5)
============================================================ */
/* Philosophy band (green-tint hairline band) */
.band{background:linear-gradient(180deg, rgba(76,175,80,.07), rgba(76,175,80,0));
border-top:var(--hairline); border-bottom:var(--hairline)}
.band .big{font-size:clamp(22px,3vw,30px); font-weight:700; color:var(--ink);
max-width:820px; margin:0 auto 16px; text-align:center; line-height:var(--lh-tight)}
.band .big .grn{color:var(--accent)}
.band p{max-width:760px; margin:0 auto; text-align:center; color:var(--text-2)}
/* On-Prem vault shell (steel, deeper navy, diagonal-hatch) */
.band-vault{background:var(--onprem-bg); border-top:1px solid var(--onprem-bd);
border-bottom:1px solid var(--onprem-bd); position:relative; overflow:hidden}
.band-vault::before{content:""; position:absolute; inset:0; pointer-events:none;
background:repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 9px)}
.band-vault .wrap{position:relative}
/* CTA strip */
.cta-strip{text-align:center}
.cta-strip .box{background:var(--panel); border:var(--hairline); border-radius:var(--radius-lg);
padding:40px 26px; max-width:760px; margin:0 auto; box-shadow:var(--shadow-card)}
.cta-strip h2{font-size:clamp(24px,3.4vw,32px)}
.cta-strip .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:22px}
/* ============================================================
HERO (section 2)
============================================================ */
.hero{padding:84px 0 56px}
.hero.wrap, .hero .wrap{}
.hero.split{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s6); align-items:center}
.hero h1{font-size:var(--fs-hero); letter-spacing:var(--track-tight); color:var(--ink)}
.hero h1 .grn{color:var(--accent)}
.hero p.lead{font-size:var(--fs-lead); color:var(--text-2); max-width:640px; margin:0 0 30px}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap}
@media (max-width:820px){
.hero.split{grid-template-columns:1fr; gap:var(--s4)}
.hero p.lead{margin-left:auto; margin-right:auto}
}
/* ownership seal-card (hero right column) */
.seal-card{background:var(--panel); border:var(--hairline); border-radius:var(--radius-lg);
padding:26px 24px; box-shadow:var(--shadow-card); animation:sealfade var(--t-slow) var(--ease) both}
@keyframes sealfade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.seal-card .seal{margin-bottom:18px}
.seal-card ul{list-style:none; margin:0; padding:0}
.seal-card li{position:relative; padding:8px 0 8px 26px; font-size:14.5px; color:var(--text-3)}
.seal-card li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700}
/* ============================================================
3) LAYOUT helpers already above (.wrap, section, .muted, .eyebrow)
============================================================ */
/* ============================================================
7) TRUST STRIP (component #7)
============================================================ */
.trust-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:0;
border-top:var(--hairline); border-bottom:var(--hairline); padding:14px 0}
.trust-strip span{font-size:var(--fs-sm); color:var(--muted); padding:0 18px; border-left:var(--hairline)}
.trust-strip span:first-child{border-left:0}
@media (max-width:520px){ .trust-strip span{padding:4px 12px; border-left:0} }
/* ============================================================
8) OWNERSHIP SEAL (component #8)
============================================================ */
.seal{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
letter-spacing:.02em; color:var(--accent-soft); background:var(--accent-bg);
border:1px solid var(--accent-bd); border-radius:var(--radius-pill); padding:5px 12px}
.seal svg{width:13px; height:13px; flex:none; fill:none; stroke:var(--accent-soft);
stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
/* ============================================================
9) PLAN / PRICING CARDS (component #9 — the chooser, shared w/ buy)
============================================================ */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:var(--s3); margin-top:var(--s4); align-items:start}
/* 4-up compact chooser: four cards in one row on desktop, collapsing
to 2 then 1 on narrower screens. Default .plans (above) stays wider
for the buy page's form cards. */
.plans.chooser{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.plan{background:var(--panel); border:var(--hairline); border-radius:var(--radius-lg);
padding:var(--s3); position:relative; box-shadow:var(--shadow-card);
display:flex; flex-direction:column;
transition:transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.plan:hover{transform:translateY(-2px); border-color:var(--accent-bd); box-shadow:var(--shadow-lift)}
.plan.feat{border-color:var(--accent-bd); box-shadow:var(--ring-accent), var(--shadow-lift)}
.plan .tag{position:absolute; top:-12px; left:24px; font-size:12px; font-weight:700;
padding:3px 11px; border-radius:11px; background:var(--accent); color:var(--accent-ink)}
.plan h3{font-size:var(--fs-h3); color:var(--ink); margin:0}
.plan .seal{margin:0 0 10px}
.plan .who{color:var(--muted); font-size:var(--fs-sm); margin:2px 0 12px}
.plan .price{font-size:var(--fs-price); color:var(--ink); font-weight:700; margin:6px 0 2px; line-height:1.1}
.plan .price small{font-size:15px; color:var(--muted); font-weight:400}
.plan .sub{color:var(--muted); font-size:13.5px; margin:0 0 14px}
.plan ul{list-style:none; padding:0; margin:0 0 20px}
.plan li{padding:6px 0 6px 24px; position:relative; font-size:14px; color:var(--text-3)}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700}
.plan .btn{width:100%; justify-content:center; margin-top:auto}
/* On-Prem plan card in the chooser: steel-tinted (NO green ring) */
.plan.onprem{border-color:var(--onprem-bd)}
.plan.onprem:hover{border-color:var(--onprem-accent)}
.plan.onprem .price{color:var(--ink)}
/* buy.html: form appended below the ul on the shared shell */
.plan .f{margin-top:auto}
/* deep-linked card highlight on arrival (reduced-motion safe via global guard) */
.plan:target{animation:targetflash 1.2s var(--ease) 1}
@keyframes targetflash{
0%{box-shadow:0 0 0 2px var(--accent) , var(--shadow-lift)}
100%{box-shadow:var(--shadow-card)}
}
[id]{scroll-margin-top:80px}
/* ============================================================
10) FEATURE GROUPS (component #10 — collapsible toolbox)
============================================================ */
.fgroup{margin-top:22px; border-top:var(--hairline)}
.fgroup:first-of-type{border-top:0}
.fgroup-h{font-size:18px; color:var(--ink); display:flex; align-items:center; gap:9px;
cursor:pointer; list-style:none; padding:12px 0}
.fgroup-h::-webkit-details-marker{display:none}
.fgroup-h::after{content:"+"; margin-left:auto; color:var(--muted); font-weight:400;
font-size:20px; line-height:1; transition:transform var(--t) var(--ease)}
.fgroup[open] .fgroup-h::after{content:"–"}
.fgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:var(--s2); margin-top:6px; padding-bottom:8px}
.fcard{background:var(--panel); border:var(--hairline); border-radius:var(--radius);
padding:16px 18px; transition:border-color var(--t) var(--ease)}
.fcard:hover{border-color:var(--border2)}
.fcard h4{font-size:var(--fs-h4); color:#eef2f8; margin:0 0 5px}
.fcard p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5}
/* collapsed on mobile, open on desktop — page can set [open]; help via CSS default */
@media (max-width:640px){
.fgroup .fgrid{display:none}
.fgroup[open] .fgrid{display:grid}
}
/* ============================================================
11) COMPARISON TABLE (component #11)
============================================================ */
.cmp{width:100%; border-collapse:collapse; margin-top:var(--s3); font-size:14px}
.cmp th,.cmp td{padding:11px 14px; border-bottom:var(--hairline); text-align:left}
.cmp thead th{position:sticky; top:64px; background:var(--panel2); color:var(--ink); font-weight:700; z-index:1}
.cmp thead th a{color:inherit}
.cmp thead th a:hover{color:var(--accent-soft)}
.cmp tbody tr:nth-child(odd){background:rgba(255,255,255,.015)}
.cmp td:first-child, .cmp th:first-child{color:var(--muted); font-weight:600}
.cmp .yes{color:var(--accent); font-weight:700}
.cmp .no{color:var(--dim)}
/* mobile: hide table, show per-plan stacked summaries */
.cmp-stack{display:none}
@media (max-width:640px){
.cmp{display:none}
.cmp-stack{display:grid; gap:var(--s2); margin-top:var(--s3)}
.cmp-stack .cmp-card{background:var(--panel); border:var(--hairline);
border-radius:var(--radius); padding:16px 18px}
.cmp-stack .cmp-card h4{color:var(--ink); font-size:var(--fs-h4); margin:0 0 8px}
.cmp-stack .cmp-card dl{margin:0; display:grid; grid-template-columns:auto 1fr;
gap:4px 12px; font-size:13.5px}
.cmp-stack .cmp-card dt{color:var(--muted)}
.cmp-stack .cmp-card dd{margin:0; color:var(--text-3); text-align:right}
}
/* ============================================================
12) STEPS (component #12)
============================================================ */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:18px; margin-top:26px; position:relative}
/* faint green connecting progress line behind the .n circles (desktop) */
.steps::before{content:""; position:absolute; top:calc(22px + 17px); left:10%; right:10%;
height:2px; background:var(--accent); opacity:.4; z-index:0}
@media (max-width:720px){ .steps::before{display:none} }
.step{background:var(--panel); border:var(--hairline); border-radius:var(--radius);
padding:22px; position:relative; z-index:1}
.step .n{width:34px; height:34px; border-radius:50%; background:var(--accent-bg); color:var(--accent);
border:1px solid var(--accent-bd); display:flex; align-items:center; justify-content:center;
font-weight:700; margin-bottom:12px}
.step h4{margin:0 0 6px; font-size:16px; color:var(--ink)}
.step p{margin:0; color:var(--muted); font-size:14px}
/* ============================================================
13) BADGES / TAGS / CHIPS (component #13)
============================================================ */
.trialbadge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
color:var(--accent-soft); background:var(--accent-bg); border:1px solid var(--accent-bd);
border-radius:var(--radius-pill); padding:3px 10px}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#bcd;
background:rgba(255,255,255,.05); border:var(--hairline); border-radius:var(--radius-pill); padding:6px 13px}
.onprem-tag{display:inline-flex; align-items:center; font-size:11px; font-weight:700;
letter-spacing:.03em; color:var(--onprem-accent); border:1px solid var(--onprem-bd);
border-radius:var(--radius-pill); padding:2px 9px}
/* ============================================================
14) ON-PREM VAULT (component #14 / onPremTreatment)
============================================================ */
.vault-ribbon{position:absolute; top:16px; right:16px; z-index:2}
.vault-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:var(--s2); margin-top:var(--s3)}
.vault-card{background:var(--onprem-bg); border:1px solid var(--onprem-bd);
border-radius:var(--radius); padding:16px 18px; position:relative}
.vault-card h4{font-size:var(--fs-h4); color:var(--ink); margin:0 0 5px;
display:flex; align-items:center; gap:8px}
.vault-card p{margin:0 0 10px; font-size:13.5px; color:var(--muted); line-height:1.5}
.vault-card .onprem-tag{position:static}
/* lock glyph — the ONE place lock glyphs appear */
.vault-card .lock{width:15px; height:15px; flex:none; fill:none; stroke:var(--onprem-accent);
stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.band-vault .eyebrow{color:var(--onprem-accent)}
.vault-note{margin-top:var(--s3); font-size:13px; color:var(--onprem-accent); max-width:820px}
.band-vault .lead{color:var(--text-2)}
/* ============================================================
15) FORM FIELDS (component #15 — shared buy + account)
============================================================ */
.form{display:flex; flex-direction:column; gap:9px}
.form label{font-size:12px; color:var(--muted); margin-top:4px}
.form input,.form select{background:var(--panel2); border:var(--hairline); color:var(--ink);
border-radius:var(--radius-sm); padding:10px 12px; font-size:15px; width:100%; box-sizing:border-box}
.form input:focus,.form select:focus{outline:none; border-color:var(--accent-bd);
box-shadow:0 0 0 2px rgba(52,211,153,.15)}
.form input::placeholder{color:var(--dim)}
.form .sfx{display:flex; align-items:center; gap:6px}
.form .sfx input{flex:1}
.form .sfx span{color:var(--muted); font-size:14px; white-space:nowrap}
.form .err{color:var(--bad); font-size:13px; min-height:18px}
.form .status{min-height:16px; font-size:12.5px; color:var(--muted)}
.form .status.ok{color:var(--ok)}
.form .status.bad{color:var(--bad)}
/* trial reassurance microcopy (buy.html) */
.trialfine{font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.5}
/* ownership note (buy.html top) — shared seal/accent-bg treatment */
.own{display:flex; align-items:flex-start; gap:12px; background:var(--accent-bg);
border:1px solid var(--accent-bd); border-radius:var(--radius); padding:14px 16px;
color:var(--text-3); font-size:14px}
/* ============================================================
16) TURNSTILE SLOT (component #16 / turnstilePlan)
============================================================ */
.cf-slot{margin:6px 0 2px; min-height:0}
.cf-slot .cf-turnstile{display:flex; justify-content:center; align-items:center;
min-height:0; transition:min-height var(--t) var(--ease)}
.cf-slot .cf-turnstile:not(:empty),
.cf-slot .cf-turnstile[data-rendered="1"]{min-height:78px; border:var(--hairline);
border-radius:var(--radius-sm); background:var(--panel2)}
/* ============================================================
OWNERSHIP PILLARS (section 6) — reuse .fgrid with green checks
============================================================ */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:var(--s2); margin-top:var(--s4)}
.pillar{background:var(--panel); border:var(--hairline); border-radius:var(--radius);
padding:18px 20px; position:relative; padding-left:44px}
.pillar::before{content:"✓"; position:absolute; left:18px; top:18px; color:var(--accent); font-weight:700}
.pillar strong{color:var(--ink); font-weight:600}
.pillar span{color:var(--muted)}
/* ============================================================
Small utilities
============================================================ */
.sub-lead{color:var(--text-2); max-width:720px; margin:0 0 4px}
.center{text-align:center}
.mt-0{margin-top:0}
/* Turnstile widget utility — reserves a tidy slot for the CF widget.
Overrides the component #16 .cf-slot margins to the shared DS spacing. */
.cf-slot{margin:4px 0 10px; min-height:0}