/* Shared styling for the Cloud Value content pages.
   The app itself (app.html) carries its own styles.

   Shares the Quantonique palette and component set with Stock Planner so the
   two products read as one family. If you change a token here, change it in
   the sibling site too, or they will drift apart. */
:root{
  --bg:#0b0f19; --panel:#151c2c; --panel2:#1b2438; --line:#28324a;
  --tx:#e9eef8; --mut:#8f9dbe; --dim:#6b7999;
  --blue:#5b8def; --green:#35c58f; --amber:#e5a93f; --red:#e5637c; --violet:#a78bfa;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 20% -10%,#16203a 0%,transparent 60%),
             radial-gradient(900px 500px at 90% 0%,#1a1730 0%,transparent 55%),#0b0f19;
  color:var(--tx);-webkit-font-smoothing:antialiased;line-height:1.5;}
.wrap{max-width:1000px;margin:0 auto;padding:0 26px;}
a{color:var(--blue);text-decoration:none;} a:hover{text-decoration:underline;}

nav{display:flex;align-items:center;gap:14px;padding:22px 0;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand:hover{text-decoration:none;}
.logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--violet));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo svg{width:18px;height:18px;}
.bn{font-size:15px;font-weight:700;letter-spacing:.2px;color:var(--tx);}
.bn span{color:var(--mut);font-weight:400;}
nav .sp{flex:1;}
nav a.nl{color:var(--mut);font-size:13.5px;font-weight:500;}
nav a.nl:hover{color:var(--tx);text-decoration:none;}

header.pg{padding:26px 0 40px;}
h1{font-size:clamp(27px,4.5vw,40px);line-height:1.15;margin:0 0 16px;letter-spacing:-.8px;}
.lede{font-size:17px;line-height:1.65;color:var(--mut);max-width:64ch;margin:0;}

section{padding:40px 0;border-top:1px solid var(--line);}
h2{font-size:23px;margin:0 0 10px;letter-spacing:-.4px;}
h3{font-size:16.5px;margin:26px 0 10px;}
.sub{color:var(--mut);font-size:15px;margin:0 0 22px;max-width:66ch;line-height:1.7;}
p{font-size:15px;line-height:1.7;color:var(--mut);max-width:70ch;}
ul,ol{font-size:15px;line-height:1.8;color:var(--mut);max-width:70ch;padding-left:22px;}
li{margin-bottom:7px;}
li b,p b{color:var(--tx);}

table{width:100%;border-collapse:collapse;font-size:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;overflow:hidden;margin:8px 0 6px;}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
th{color:var(--dim);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
td{color:var(--mut);}
tr:last-child td{border-bottom:none;}
.ok{color:var(--green);font-weight:600;}
.opt{color:var(--amber);font-weight:600;}

code{background:var(--panel2);padding:2px 7px;border-radius:5px;font-size:13px;color:var(--tx);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  overflow-x:auto;font-size:13px;color:var(--tx);line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;max-width:70ch;}

.fine{font-size:13.5px;color:var(--dim);line-height:1.65;max-width:70ch;margin-top:10px;}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:760px){.cols{grid-template-columns:1fr;}}
.ex{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px;}
.ex h3{margin:0 0 12px;font-size:15.5px;color:var(--tx);}
.ex ol{margin:0;font-size:14px;}

.ext{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:11px;padding:20px 24px;margin-bottom:18px;}
.ext h3{margin:0 0 10px;font-size:16px;color:var(--tx);}
.ext p{margin:0 0 10px;font-size:14.5px;}
.ext p:last-child{margin:0;}
.ext ul{font-size:14.5px;margin:0;}

.refs p{font-size:14px;margin:0 0 14px;padding-left:26px;text-indent:-26px;max-width:78ch;}

.btn{display:inline-block;border:none;border-radius:10px;padding:13px 22px;font-size:15px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:filter .15s;}
.btn:hover{filter:brightness(1.1);text-decoration:none;}
.b1{background:linear-gradient(135deg,var(--blue),#4a7ad9);color:#fff;box-shadow:0 4px 18px rgba(91,141,239,.32);}
.b2{background:var(--panel2);color:var(--tx);border:1px solid var(--line);}

footer{border-top:1px solid var(--line);padding:32px 0 46px;color:var(--dim);font-size:13.5px;}
footer .fl{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:16px;}
footer p{margin:0 0 8px;line-height:1.65;max-width:75ch;font-size:13.5px;}

/* ---- Mobile ----
   The comparison tables on Getting started and Method are three columns
   of prose. Below ~760px they need to scroll horizontally rather than
   force the page to. */
@media(max-width:760px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .wrap{padding-left:14px;padding-right:14px;}
  nav{gap:10px;}
  pre{font-size:12px;}
}