/* Copper CMS — the marketing site.
   Ported from docs/mocks/marketing/11-copy.html, so the two stay diffable.
   Colours are the console's tokens from apps/console/src/app/globals.css.
   One typeface. No shadows, no motion, nothing rounded. */

:root{
  /* ── grounds: the console's own ── */
  --bg:#fff; --panel:#fafafa; --panel2:#f1f1f3;
  --line:#e5e5e8; --line2:#d1d1d6;
  --tx:#08080a; --mut:#6b6b73; --dim:#97979f;

  /* ── electric blue: --acc in the app ── */
  --acc:#0040ff; --accb:#0032cc; --accw:#e9eeff; --accl:#5a8cff;

  /* ── the pills, straight off the console ── */
  --ok:#00893f;    --okn:#2bff88;  --okw:#e4ffee;
  --warn:#8b1fd9;  --warnn:#c77dff; --warnw:#f4e6ff;
  --bad:#e60040;   --badn:#ff5c7a;  --badw:#ffe6ed;

  /* ── copper: the wordmark, used as a highlight and nothing else ── */
  --copper:#8c5421; --coppern:#d99e5e;

  --r:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--tx);font:400 16px/1.6 "Instrument Sans",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.006em;font-variant-numeric:tabular-nums}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--tx)}
h1{font-size:clamp(2.7rem,5.6vw,4.2rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
h3{font-size:1.18rem;letter-spacing:-.022em;line-height:1.3}
p{color:var(--mut)}
.mono{letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* ══ nav ══ */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);border-bottom:.5px solid var(--line)}
.nav{display:flex;align-items:center;gap:8px;height:70px}
.nav img{height:32px;width:auto;display:block;margin-right:28px}
.nav .links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--tx);padding:9px 13px;display:inline-flex;align-items:center;gap:5px}
.nav .links a:hover{background:var(--panel2)}
.nav .links a.on{color:var(--acc);background:var(--accw)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav .right a.tx{text-decoration:none;font-size:15px;font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--copper);color:#fff!important;text-decoration:none;padding:11px 20px;border-radius:var(--r);font:600 15px/1 "Instrument Sans",sans-serif;border:1px solid var(--copper)}
.btn:hover{background:#6f4319;border-color:#6f4319}
.btn.blue{background:var(--acc);border-color:var(--acc)}
.btn.blue:hover{background:var(--accb);border-color:var(--accb)}
.btn.out{background:#fff;color:var(--tx)!important;border-color:var(--line2)}
.btn.out:hover{border-color:var(--acc);color:var(--acc)!important}
.btn.outw{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.45)}
.btn.outw:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn.wht{background:#fff;color:var(--tx)!important;border-color:#fff}
.btn.wht:hover{background:var(--accw);border-color:var(--accw)}
.btn.neon{background:var(--okn);color:#08080a!important;border-color:var(--okn)}
.btn.neon:hover{background:#00e06e;border-color:#00e06e}
.btn.copper{background:var(--coppern);color:#08080a!important;border-color:var(--coppern)}
.btn.copper:hover{background:#e8b47b;border-color:#e8b47b}
.btn.lg{padding:15px 28px;font-size:16px}

/* ══ hero: the shape of 08, the colour of the app ══ */
.hero{
  background:linear-gradient(116deg,#08080a 0%,#0b1550 18%,var(--acc) 48%,#5a1ec4 76%,var(--warn) 100%);
  color:#fff;padding:92px 0 96px;
}
.hero .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{color:#fff;max-width:14ch}
.hero .lede{font-size:1.22rem;line-height:1.58;margin-top:26px;max-width:50ch;color:#d7dcff}
.hero .cta{display:flex;gap:13px;margin-top:38px;flex-wrap:wrap}
.hero .kpis{display:flex;gap:44px;margin-top:52px;flex-wrap:wrap}
.hero .kpis div b{display:block;font-size:2.5rem;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--okn)}
.hero .kpis div span{font-size:14px;color:#c3caff}

.glass{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);padding:24px 26px}
.glass h4{font-size:13.5px;font-weight:600;margin-bottom:16px;color:#fff}
.grow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:14px}
.grow:last-child{border-bottom:0}
.grow .t{flex:1;color:#fff;font-weight:500}
.grow .d{font:400 12px/1 "Instrument Sans",sans-serif;letter-spacing:.02em;color:#b8c0f5}

/* ══ pills: solid fills, square, the app's own ══ */
.pill{font:600 11px/1 "Instrument Sans",sans-serif;padding:5px 9px;white-space:nowrap;display:inline-block}
.pill.pub{background:var(--okn);color:#06210f}
.pill.rev{background:var(--warnn);color:#1a0b2b}
.pill.dft{background:var(--panel2);color:var(--mut)}
.pill.err{background:var(--badn);color:#2a0d18}
.pill.inf{background:var(--accl);color:#08080a}
.glass .pill.dft{background:rgba(255,255,255,.2);color:#fff}

/* ══ logo wall ══ */
.wall{padding:44px 0 56px;border-bottom:.5px solid var(--line)}
.wall .lbl{text-align:center;font-size:13px;color:var(--dim);margin-bottom:24px}
.wall .row2{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.wall .row2 span{font:600 19px/1 "Instrument Sans",sans-serif;color:#c4c4cc;letter-spacing:-.03em}

/* ══ sections ══ */
.sec{padding:88px 0}
.sec.tint{background:var(--panel)}
.sec.deep{background:#08080a}
.sec.deep h2,.sec.deep h3{color:#f5f5f7}.sec.deep p{color:#8d8d96}
.shead{max-width:60ch;margin-bottom:44px}
.shead.mid{text-align:center;margin-left:auto;margin-right:auto}
.sec.deep .shead p{margin-top:16px;font-size:1.08rem}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:.5px solid var(--line)}
.card{background:#fff;padding:30px 28px}
.sec.tint .cards{background:var(--line)}
.sec.tint .card{background:#fff}
.sec.deep .cards{background:#232328;border-color:#232328}
.sec.deep .card{background:#101013}
.card .ic{width:34px;height:34px;display:grid;place-items:center;margin-bottom:18px;font:600 14px/1 "Instrument Sans",sans-serif;letter-spacing:.02em}
.ic.a{background:var(--accw);color:var(--acc)}
.ic.b{background:var(--okw);color:var(--ok)}
.ic.c{background:var(--warnw);color:var(--warn)}
.ic.d{background:var(--badw);color:var(--bad)}
.sec.deep .ic.a{background:#0d1633;color:var(--accl)}
.sec.deep .ic.b{background:#06210f;color:var(--okn)}
.sec.deep .ic.c{background:#1a0b2b;color:var(--warnn)}
.sec.deep .ic.d{background:#2a0d18;color:var(--badn)}
.card h3{margin-bottom:9px}
.card p{font-size:14.6px;line-height:1.6}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:.5px solid var(--line)}
.sec.tint .three{background:var(--line)}

/* ══ the editor panel, out of 04's hero ══ */
.edwrap{display:grid;grid-template-columns:.86fr 1.14fr;gap:52px;align-items:center}
.editor{background:#fff;border:.5px solid var(--line2)}
.editor .top{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:.5px solid var(--line);background:var(--panel)}
.editor .top i{width:8px;height:8px;background:var(--badn);display:block}
.editor .top i:nth-child(2){background:var(--coppern)}
.editor .top i:nth-child(3){background:var(--okn)}
.editor .top span{margin-left:10px;font:400 12px/1 "Instrument Sans",sans-serif;letter-spacing:.02em;color:var(--dim)}
.editor .cols{display:grid;grid-template-columns:1fr 178px}
.editor .canvas{padding:22px}
.blk{border:1px dashed var(--line2);padding:14px 16px;margin-bottom:12px}
.blk.sel{border:1px solid var(--acc);background:var(--accw)}
.blk b{display:block;font:600 12px/1 "Instrument Sans",sans-serif;color:var(--acc);margin-bottom:8px}
.blk .l{height:8px;background:var(--line);margin-bottom:7px}
.blk.sel .l{background:#c3d0ff}
.blk .l.w1{width:88%}.blk .l.w2{width:64%}.blk .l.w3{width:76%}
.editor .side{border-left:.5px solid var(--line);padding:18px 15px;background:var(--panel)}
.editor .side h4{font-size:11px;color:var(--dim);font-weight:600;margin-bottom:11px}
.editor .side .f{background:#fff;border:.5px solid var(--line);padding:8px 11px;font-size:12px;color:var(--mut);margin-bottom:7px;display:flex;justify-content:space-between;align-items:center}
.editor .side .f b{color:var(--ok);font-weight:700}
.edlist{list-style:none;margin-top:22px}
.edlist li{font-size:15px;color:var(--mut);padding:11px 0 11px 28px;position:relative;border-bottom:.5px solid var(--line)}
.edlist li:last-child{border-bottom:0}
.edlist li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:12px;background:var(--acc)}

/* ══ code ══ */
pre{min-width:0;max-width:100%;background:#08080a;color:#e8e8ec;padding:24px;overflow-x:auto;font:400 13.5px/1.8 "Instrument Sans",sans-serif;letter-spacing:.03em;font-variant-numeric:tabular-nums;white-space:pre;tab-size:2}
pre .k{color:var(--warnn)}pre .s{color:var(--okn)}pre .c{color:#5f5f68}pre .f{color:var(--accl)}

/* ══ the loud block: neon green ══ */
.band{background:var(--okn);color:#06210f;padding:52px 48px}
.band .row{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.band b{display:block;font-size:3rem;font-weight:600;letter-spacing:-.05em;line-height:1;color:#08080a}
.band span{display:block;margin-top:10px;font-size:14.5px;color:#0a5c30}

/* ══ pricing ══ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:.5px solid var(--line)}
.plan{padding:32px 28px;background:#fff;display:flex;flex-direction:column}
.plan.pick{background:#fbf3ea}
.plan .badge{display:inline-block;align-self:flex-start;background:var(--copper);color:#fff;font:600 11px/1 "Instrument Sans",sans-serif;padding:5px 10px;margin-bottom:14px}
.plan h3{font-size:1.18rem}
.plan .priceline{display:flex;align-items:baseline;gap:9px;margin:14px 0 2px;flex-wrap:wrap}
.plan .price{font-size:2.7rem;font-weight:600;letter-spacing:-.05em;color:var(--tx);line-height:1}
.plan.pick .price{color:var(--copper)}
.plan .per{font-size:13.5px;color:var(--dim)}
.plan ul{list-style:none;margin:24px 0 26px;flex:1}
.plan li{font-size:14.5px;color:var(--mut);padding:8px 0 8px 24px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;background:var(--copper)}

/* ══ cta ══ */
.ctaband{background:linear-gradient(116deg,#08080a 0%,var(--acc) 58%,#5a1ec4 100%);padding:58px 54px;display:flex;align-items:center;gap:40px;justify-content:space-between;flex-wrap:wrap}
.ctaband h2{color:#fff}.ctaband p{color:#c3caff;margin-top:12px}

/* ══ docs ══ */
.dgrid{display:grid;grid-template-columns:220px 1fr;gap:40px}
.dnav a{display:block;font-size:14px;padding:8px 12px;text-decoration:none;color:var(--mut)}
.dnav a.on{background:var(--accw);color:var(--acc);font-weight:600}
.dnav a:hover{background:var(--panel2)}
.dnav h4{font-size:12px;color:var(--dim);font-weight:600;margin:20px 0 8px 12px}
.dnav h4:first-child{margin-top:0}

footer{background:#08080a;color:#8d8d96;padding:64px 0 40px}
.fcols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.fcols img{height:24px}
.fcols h4{color:#f5f5f7;font-size:13px;font-weight:600;margin-bottom:16px}
.fcols a{display:block;text-decoration:none;font-size:14px;padding:6px 0;color:#8d8d96}
.fcols a:hover{color:var(--accl)}
.fbot{margin-top:48px;padding-top:26px;border-top:.5px solid #232328;display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:14px}

@media(max-width:960px){.hero .grid,.cards,.three,.plans,.dgrid,.fcols,.edwrap,.band .row,.editor .cols{grid-template-columns:1fr}.nav .links{display:none}}

/* additions for the content build */
.stack{padding:40px 0 46px;border-bottom:.5px solid var(--line)}
.stack .lbl{text-align:center;font-size:13px;color:var(--dim);margin-bottom:22px}
.stack .row2{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.stack .row2 span{font:500 14px/1 "Instrument Sans",sans-serif;color:var(--mut);border:.5px solid var(--line2);padding:9px 14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.rev > div:first-child{order:2}
.lead{font-size:1.1rem;line-height:1.68;color:var(--mut);margin-top:18px}
.lead + .lead{margin-top:14px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:.5px solid var(--line);margin-top:34px}
.fact{background:#fff;padding:22px 20px}
.sec.tint .fact{background:#fff}
.fact b{display:block;font-size:14.5px;font-weight:600;margin-bottom:5px}
.fact span{font-size:13.5px;color:var(--mut);line-height:1.5;display:block}
.faq{border-top:.5px solid var(--line)}
.faq .q{border-bottom:.5px solid var(--line);padding:26px 0;display:grid;grid-template-columns:.85fr 1.15fr;gap:40px}
.faq h3{font-size:1.06rem}
.faq p{font-size:15px;line-height:1.66}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:8px}
.tbl th{text-align:left;font-weight:600;font-size:13px;color:var(--mut);padding:0 16px 11px 0;border-bottom:.5px solid var(--line2)}
.tbl td{padding:13px 16px 13px 0;border-bottom:.5px solid var(--line);vertical-align:top;color:var(--mut)}
.tbl td:first-child{color:var(--tx);letter-spacing:.02em;font-size:13px;white-space:nowrap}
.hz{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:.5px solid var(--line)}
.hz div{background:#fff;padding:24px 22px}
.sec.tint .hz div{background:#fff}
.hz b{display:block;font-size:13px;font-weight:600;color:var(--acc);letter-spacing:.02em;margin-bottom:9px}
.hz p{font-size:14px;line-height:1.55}
@media(max-width:960px){.split,.facts,.faq .q,.hz{grid-template-columns:1fr}.split.rev > div:first-child{order:0}}

/* the live site has pages, so the active item is set by the page, not by a hash */
.nav .links a[aria-current]{color:var(--acc);background:var(--accw)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--acc);color:#fff;padding:10px 14px;z-index:99}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}


/* the legal pages: one column, a reading measure, the same type as everything else */
.doc{max-width:70ch;margin:0 auto;padding:0 28px}
.doc h1{font-size:clamp(2.2rem,4.4vw,3rem);margin-bottom:6px}
.doc .when{color:var(--dim);font-size:14px;margin-bottom:38px}
.doc h2{font-size:1.32rem;margin:38px 0 12px}
.doc p{margin-bottom:16px;line-height:1.72}
.doc ul{margin:0 0 18px 0;padding-left:20px}
.doc li{color:var(--mut);padding:5px 0;line-height:1.7}
.doc a{color:var(--acc)}

/* A grid item is min-width:auto by default, so a wide <pre> pushes the track
   wider than the viewport and the page scrolls sideways instead of the block.
   Every grid that can hold one gets min-width:0 on its children. */
.cards > *,.three > *,.hz > *,.split > *,.edwrap > *,.plans > *,.dgrid > *{min-width:0}

/* F10: the nav used to hide its links under 960px and leave the rest to
   overflow a fixed 70px bar. The bar grows and the links wrap instead. */
@media(max-width:960px){
  .nav{height:auto;flex-wrap:wrap;gap:10px;padding:14px 0}
  .nav img{margin-right:0}
  .nav .links{order:3;width:100%;display:flex;flex-wrap:wrap;gap:4px}
  .nav .right{margin-left:auto;flex-wrap:wrap}
  .nav .right .btn.out{display:none}
}

/* F7: the legal pages carried their own table styling until the page-local CSS
   went. Everything here is scoped to .tbl, and the reset takes the UA padding
   with it, so a bare <table> in .doc had neither. */
.doc table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.doc th{text-align:left;font-weight:600;font-size:13px;color:var(--mut);padding:0 16px 11px 0;border-bottom:.5px solid var(--line2)}
.doc td{padding:12px 16px 12px 0;border-bottom:.5px solid var(--line);vertical-align:top;color:var(--mut)}
.doc td:first-child,.doc th:first-child{padding-left:0}
.doc table p{margin:0}