/*
Theme Name: SF DevOps Notebooks
Theme URI: https://salesforce-devops-notebooks.shop/
Author: Boss Consulting Co.
Author URI: https://bossconsultingco.com/
Description: Productized landing/blog theme for SF DevOps Notebooks.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: sf-devops-notebooks
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
:root {
  --bg: #f6fbff;
  --bg2: #ffffff;
  --ink: #071426;
  --muted: #627083;
  --soft: #edf7ff;
  --line: #d9e8f5;
  --card: #ffffff;
  --primary: #1769ff;
  --primary2: #4cd7b0;
  --primary3: #f4c84c;
  --navy: #071426;
  --shadow: 0 22px 70px rgba(12,31,58,.10);
  --radius: 28px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} .site-shell{min-height:100vh;overflow:hidden;background:linear-gradient(to right, rgba(76,102,132,.055) 1px, transparent 1px),linear-gradient(to bottom, rgba(76,102,132,.055) 1px, transparent 1px),var(--bg);background-size:32px 32px} .container{width:min(1160px, calc(100vw - 36px));margin:0 auto}
.topbar{position:sticky;top:0;z-index:50;background:rgba(248,252,255,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(207,224,240,.72)} .topbar-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px} .brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:900;letter-spacing:-.035em;white-space:nowrap} .brand-mark{width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary2));display:inline-grid;place-items:center;color:#fff;box-shadow:0 10px 25px rgba(21,116,255,.18);font-family:var(--mono);font-size:13px} .brand small{display:block;font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:1px} .nav{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.10em;color:var(--muted)} .nav a:hover{color:var(--ink)} .nav-cta{background:var(--primary);color:#fff!important;border-radius:999px;padding:12px 16px;box-shadow:0 14px 30px rgba(21,116,255,.20)}
.hero{position:relative;min-height:790px;display:grid;align-items:center;border-bottom:1px solid var(--line);overflow:hidden} .hero:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 83% 22%, rgba(76,215,176,.25), transparent 30%),radial-gradient(circle at 26% 95%, rgba(64,169,255,.24), transparent 34%);pointer-events:none} .watermark{position:absolute;right:-8vw;top:50%;transform:translateY(-50%);font-size:19vw;line-height:.78;font-weight:900;letter-spacing:-.09em;color:rgba(29,52,82,.035);white-space:nowrap;user-select:none;pointer-events:none} .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(380px,.86fr);gap:70px;align-items:center;padding:90px 0} .kicker{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.72);border:1px solid var(--line);box-shadow:0 12px 35px rgba(41,96,148,.06);border-radius:999px;padding:8px 12px;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--primary);margin-bottom:24px} .dot{width:7px;height:7px;border-radius:999px;background:var(--primary);box-shadow:0 0 0 6px rgba(79,151,255,.13)} h1,h2,h3,p{margin-top:0} .hero-title{font-size:clamp(54px,7.9vw,108px);line-height:.88;letter-spacing:-.079em;margin:0 0 24px;font-weight:950} .hero-title .accent{color:var(--primary)} .hero-sub{font-size:18px;line-height:1.72;color:var(--muted);font-weight:560;max-width:690px;margin-bottom:32px} .actions{display:flex;gap:12px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);background:rgba(255,255,255,.82);border-radius:999px;padding:15px 20px;font-family:var(--mono);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;box-shadow:0 12px 30px rgba(20,47,82,.06)} .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 18px 40px rgba(21,116,255,.23)} .btn:hover{transform:translateY(-1px)} .metric-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px} .metric{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;color:var(--muted)} .metric b{color:var(--ink)} .metric-dot{width:18px;height:18px;border-radius:999px;border:1px solid var(--primary);display:inline-grid;place-items:center;color:var(--primary);font-size:10px}
.mock{background:rgba(255,255,255,.76);border:1px solid var(--line);border-radius:34px;box-shadow:var(--shadow);overflow:hidden;backdrop-filter:blur(16px)} .mock-top{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(246,250,254,.92);font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted)} .traffic{display:flex;gap:7px} .traffic i{width:9px;height:9px;border-radius:999px;background:#e85252} .traffic i:nth-child(2){background:#f2c45a} .traffic i:nth-child(3){background:#45c781} .mock-body{padding:22px} .cell{border:1px solid var(--line);border-radius:22px;background:#fff;margin-bottom:14px;overflow:hidden} .cell-head{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#f7fbff;border-bottom:1px solid var(--line);padding:13px 15px;font-family:var(--mono);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .play{width:24px;height:24px;border-radius:999px;background:var(--primary);display:grid;place-items:center;color:#fff;font-size:10px} .code{font-family:var(--mono);font-size:12px;line-height:1.75;color:#3e4b61;padding:16px;white-space:pre-wrap} .code b{color:var(--primary)} .folder-list{display:grid;gap:10px} .folder{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:#fff;border-radius:18px;padding:13px 15px;font-family:var(--mono);font-size:11px;color:var(--muted)} .folder strong{color:var(--ink)}
.section{position:relative;padding:92px 0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.58)} .section.clear{background:transparent} .section-head{max-width:820px;margin-bottom:42px} .eyebrow{font-family:var(--mono);font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);margin-bottom:14px} .section-title{font-size:clamp(40px,5.8vw,72px);line-height:.9;letter-spacing:-.075em;font-weight:950;margin-bottom:16px} .section-sub{color:var(--muted);font-size:17px;line-height:1.75;font-weight:540;max-width:760px} .split{display:grid;grid-template-columns:minmax(0,.94fr) minmax(380px,1fr);gap:64px;align-items:center} .checks{display:grid;gap:13px;margin-top:22px} .check{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-weight:560;line-height:1.55} .check:before{content:'✓';flex:0 0 22px;height:22px;border-radius:999px;background:rgba(79,151,255,.12);border:1px solid rgba(79,151,255,.28);color:var(--primary);display:grid;place-items:center;font-weight:900;font-size:12px}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .card{background:rgba(255,255,255,.83);border:1px solid var(--line);border-radius:28px;box-shadow:0 12px 40px rgba(29,52,82,.06);padding:26px;min-height:238px} .card-icon{width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,rgba(79,151,255,.12),rgba(72,211,174,.12));display:grid;place-items:center;color:var(--primary);font-family:var(--mono);font-weight:900;margin-bottom:22px} .card h3{font-size:20px;letter-spacing:-.035em;margin-bottom:10px} .card p{font-size:14px;line-height:1.65;color:var(--muted);font-weight:520} .card:hover{transform:translateY(-2px);box-shadow:0 22px 60px rgba(29,52,82,.10)}
.catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .product{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 18px 55px rgba(29,52,82,.07);padding:24px;display:flex;flex-direction:column;min-height:312px} .pill{display:inline-flex;width:max-content;border:1px solid rgba(79,151,255,.25);background:rgba(79,151,255,.08);color:var(--primary);border-radius:999px;padding:5px 9px;font-family:var(--mono);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px} .product h3{font-size:22px;letter-spacing:-.04em;margin-bottom:10px} .product p{color:var(--muted);line-height:1.6;font-size:14px;font-weight:520} .tags{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 16px} .tags span{font-family:var(--mono);font-size:10px;border:1px solid var(--line);border-radius:999px;padding:5px 8px;color:var(--muted);background:#f8fbff} .price{font-size:30px;font-weight:900;letter-spacing:-.05em;margin-top:auto} .product a{font-family:var(--mono);font-size:11px;font-weight:900;color:var(--primary)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:34px;overflow:hidden;background:#fff;box-shadow:var(--shadow)} .step{padding:26px;border-right:1px solid var(--line);min-height:210px} .step:last-child{border-right:0} .step-num{font-family:var(--mono);font-size:11px;color:var(--primary);font-weight:900;letter-spacing:.13em;margin-bottom:24px} .step h3{font-size:19px;letter-spacing:-.035em} .step p{font-size:13px;line-height:1.62;color:var(--muted)} .cta-band{padding:82px 0;background:linear-gradient(135deg,var(--navy),#071426);color:#fff} .cta-band .section-sub{color:rgba(255,255,255,.72)} .cta-band .btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff} .cta-band .btn.primary{background:var(--primary);border-color:var(--primary)} .footer{background:#fff;border-top:1px solid var(--line);padding:38px 0} .footer-inner{display:grid;grid-template-columns:1fr auto auto;gap:26px;align-items:center;color:var(--muted);font-size:13px} .footer a:hover{color:var(--primary)}
.wp-content{max-width:900px;margin:72px auto;padding:0 20px} .wp-content article{background:#fff;border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);padding:42px} .wp-content h1{font-size:clamp(42px,6vw,72px);line-height:.92;letter-spacing:-.07em;margin-bottom:20px} .wp-content h2{margin-top:32px;font-size:30px;letter-spacing:-.04em} .wp-content p,.wp-content li{color:var(--muted);line-height:1.75;font-weight:520} .wp-content a{color:var(--primary);font-weight:800}
@media(max-width:980px){.hero-grid,.split{grid-template-columns:1fr;gap:44px}.card-grid,.catalog{grid-template-columns:1fr 1fr}.timeline{grid-template-columns:1fr 1fr}.watermark{font-size:28vw;right:-18vw}}
@media(max-width:680px){.container{width:calc(100vw - 28px)}.topbar-inner{min-height:64px;align-items:flex-start;padding:14px 0}.brand{font-size:14px}.brand small{display:none}.nav{gap:10px;font-size:9px;justify-content:flex-end;flex-wrap:wrap}.nav-cta{padding:9px 11px}.hero{min-height:auto}.hero-grid{padding:64px 0}.hero-title{font-size:51px;letter-spacing:-.073em}.hero-sub{font-size:16px}.mock-body{padding:14px}.section{padding:66px 0}.card-grid,.catalog,.timeline{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.footer-inner{grid-template-columns:1fr}.watermark{display:none}.actions .btn{width:100%}}