/* Shared detail-page styles from the approved service-page design. */

  :root{
    --bg: #07070c;
    --bg-2: #0e0e17;
    --bg-3: #14141f;
    --line: #232331;
    --line-strong: #2e2e40;
    --ink: #ececf2;
    --ink-2: #a4a4b3;
    --ink-3: #80808f;
    --ink-4: #4a4a55;
    --accent: #6aafb2;
    --accent-2: #8cc8cc;
    --accent-dim: rgba(106,175,178,0.18);
    --accent-glow: rgba(106,175,178,0.35);
    --green: #6fdc8c;
    --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
  body{overflow-x:hidden;}
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  ::selection{ background: var(--accent); color: var(--bg);}
  :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;}

  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 75%);
  }
  .wrap{ position:relative; z-index:1; }
  .container{max-width:1100px; margin:0 auto; padding:0 32px;}
  @media (max-width:720px){ .container{padding:0 20px;} }

  .label{
    font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--ink-3);
    display:inline-flex; align-items:center; gap:8px;
  }
  .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); display:inline-block;}
  .pulse{ animation: pulse 2s infinite ease-in-out; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .live-chip{
    display:inline-flex; align-items:center; gap:8px;
    background: var(--bg-2); border:1px solid var(--line);
    padding: 6px 12px; border-radius:99px;
    font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:0.08em;
    white-space: nowrap;
  }

  nav.top{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    background: rgba(7,7,12,0.72);
    border-bottom: 1px solid var(--line);
  }
  nav.top .inner{ display:flex; align-items:center; justify-content:space-between; height:64px;}
  nav .brand{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:13px; font-weight:500;}
  nav .brand .glyph{
    width:24px; height:24px; border:1px solid var(--ink); display:grid; place-items:center;
    font-family:var(--mono); font-size:11px; font-weight:600;
    background:var(--bg); position:relative; border-radius:2px;
  }
  nav .brand .glyph::after{ content:""; position:absolute; inset:-3px; border:1px solid var(--accent-dim); border-radius:4px;}
  nav .cta{
    font-family:var(--mono); font-size:12px;
    padding:9px 14px; border:1px solid var(--line-strong); border-radius:4px;
    background: var(--bg-2);
    transition: all .2s;
    display:inline-flex; align-items:center; gap:8px;
  }
  nav .cta:hover{ border-color:var(--accent); color:var(--accent); background: rgba(106,175,178,0.06);}
  nav .cta::after{ content:"→"; transition:transform .2s; }
  nav .cta:hover::after{ transform:translateX(3px); }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding: 14px 22px;
    font-family:var(--mono); font-size:13px;
    border-radius: 4px;
    transition: all .2s;
    cursor:pointer;
    white-space: nowrap;
  }
  .btn-primary{ background:var(--accent); color:#031416; font-weight:500;}
  .btn-primary:hover{ background:var(--accent-2); transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-glow);}
  .btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--line-strong);}
  .btn-secondary:hover{ border-color:var(--ink-2); background:var(--bg-2);}
  .btn::after{ content:"→"; transition:transform .2s;}
  .btn:hover::after{ transform: translateX(4px);}

  /* Hero */
  .hero{ padding: 72px 0 80px;}
  .crumb{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:0.1em; text-transform:uppercase; display:flex; gap:10px; align-items:center; margin-bottom:28px;}
  .crumb a{ color:var(--ink-3); transition:color .2s;}
  .crumb a:hover{ color:var(--accent);}
  .crumb .sep{ color:var(--ink-4);}
  .hero .top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .hero h1{
    font-family:var(--sans); font-weight:400;
    font-size: clamp(40px, 5.4vw, 72px); line-height:1.02; letter-spacing:-0.035em;
    margin-top: 26px; text-wrap: balance; max-width: 880px;
  }
  .hero h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent);}
  .hero .lede{ color:var(--ink-2); font-size: clamp(16px, 1.3vw, 19px); line-height:1.65; margin-top:26px; max-width:680px;}
  .hero .lede b{ color:var(--ink); font-weight:500;}
  .hero .lede a{ color:var(--ink-2); border-bottom:1px solid var(--line-strong); padding-bottom:1px; transition: color .2s, border-color .2s;}
  .hero .lede a:hover{ color:var(--accent); border-color:var(--accent);}
  .updated{ font-family:var(--mono); font-size:11px; color:var(--ink-4); letter-spacing:0.08em; text-transform:uppercase; margin-top:32px;}

  /* Sections */
  .section{ padding: 88px 0; border-top:1px solid var(--line);}
  .section-head{ display:grid; grid-template-columns: 220px 1fr; gap:48px; margin-bottom: 44px; align-items:end;}
  @media (max-width:820px){ .section-head{ grid-template-columns:1fr; gap:18px;} }
  .section-head .idx{ font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:0.14em; text-transform:uppercase;}
  .section-head .idx .num{ color: var(--accent);}
  .section-head h2{
    font-family:var(--sans); font-weight:400;
    font-size: clamp(28px, 3.6vw, 46px); letter-spacing:-0.028em; line-height:1.05;
    text-wrap: balance;
  }
  .section-head h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent);}
  .prose{ color:var(--ink-2); font-size:16px; line-height:1.75; max-width:720px;}
  .prose b{ color:var(--ink); font-weight:500;}
  .prose p + p{ margin-top:16px;}
  .prose a{ color:var(--ink-2); border-bottom:1px solid var(--line-strong); padding-bottom:1px; transition: color .2s, border-color .2s;}
  .prose a:hover{ color:var(--accent); border-color:var(--accent);}
  .prose ul{ margin-top:16px; padding-left:20px;}
  .prose ul li{ margin-top:8px;}

  /* Story rows */
  .story-list{ list-style:none; display:grid; gap:0;}
  .story-list li{ display:grid; grid-template-columns: 180px 1fr; gap:28px; padding:26px 0; border-bottom:1px solid var(--line);}
  @media (max-width:720px){ .story-list li{ grid-template-columns:1fr; gap:10px;} }
  .story-list .k{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:0.12em; text-transform:uppercase; padding-top:5px;}
  .story-list .v{ color:var(--ink-2); font-size:15.5px; line-height:1.7;}
  .story-list .v b{ color:var(--ink); font-weight:500;}
  .story-list .v p + p{ margin-top:12px;}
  .story-list .v a{ color:var(--ink-2); border-bottom:1px solid var(--line-strong); padding-bottom:1px; transition: color .2s, border-color .2s;}
  .story-list .v a:hover{ color:var(--accent); border-color:var(--accent);}

  /* Metrics */
  .metrics{ display:grid; grid-template-columns: repeat(4, 1fr); gap:28px;}
  @media (max-width:920px){ .metrics{ grid-template-columns: repeat(2, 1fr);} }
  .case-metric{ border-top:1px solid var(--line-strong); padding-top:14px;}
  .case-metric .lbl{ font-family:var(--mono); font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.14em;}
  .case-metric .val{ font-family:var(--sans); font-size:36px; font-weight:400; letter-spacing:-0.025em; margin-top:8px; line-height:1;}
  .case-metric .val em{ font-family:var(--serif); font-style:italic; color:var(--accent);}
  .case-metric .delta{ font-family:var(--mono); font-size:11px; color:var(--green); margin-top:8px;}
  .case-metric svg{ margin-top:10px; width:100%; height:36px;}

  /* Stack chips */
  .case-extra{
    border:1px solid var(--line); border-radius:8px; background:var(--bg-2);
    padding: 28px;
    display:grid; grid-template-columns: 200px 1fr;
    gap: 32px; margin-top:44px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  }
  @media (max-width: 720px){ .case-extra{ grid-template-columns: 1fr; gap: 12px; padding: 24px;} }
  .case-extra .label{ color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase;}
  .case-extra .dims{ display: flex; flex-wrap: wrap; gap: 6px;}
  .case-extra .dims .d{
    border: 1px solid var(--line-strong); padding: 5px 10px; border-radius: 2px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-2); background: var(--bg);
  }
  .case-extra .dims .d.lit{ color: var(--accent); border-color: var(--accent-dim);}

  /* Comparison table */
  .cmp-wrap{ overflow-x:auto; margin-top:40px;}
  .cmp{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px;}
  .cmp th{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:12px 16px; border-bottom:1px solid var(--line-strong);}
  .cmp th.us{ color:var(--accent);}
  .cmp td{ padding:14px 16px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top; line-height:1.6;}
  .cmp td:first-child{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-3); white-space:nowrap; padding-top:17px;}
  .cmp td.us{ color:var(--ink);}
  .cmp td b{ color:var(--ink); font-weight:500;}

  /* FAQ */
  .faq{ border-top:1px solid var(--line-strong);}
  .faq details{ border-bottom:1px solid var(--line); padding: 24px 0; cursor:pointer;}
  .faq summary{ display:grid; grid-template-columns: 60px 1fr 32px; gap:18px; align-items:baseline; list-style:none; font-size:19px; font-weight:400; letter-spacing:-0.01em; line-height:1.3;}
  .faq summary::-webkit-details-marker{ display:none;}
  .faq summary .q-num{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:0.12em;}
  .faq summary .toggle{ font-family:var(--mono); font-size:18px; color:var(--ink-3); transition: transform .25s; text-align:right;}
  .faq details[open] summary .toggle{ transform: rotate(45deg); color:var(--accent);}
  .faq .ans{ color:var(--ink-2); font-size:15px; line-height:1.75; margin-top:14px; max-width:740px; padding-left:78px;}
  @media (max-width:600px){ .faq .ans{ padding-left:0;} }
  .faq .ans b{ color: var(--ink); font-weight:500;}
  .faq .ans a{ color:var(--ink-2); border-bottom:1px solid var(--line-strong); padding-bottom:1px; transition: color .2s, border-color .2s;}
  .faq .ans a:hover{ color:var(--accent); border-color:var(--accent);}

  /* CTA */
  .cta-block{
    border-top:1px solid var(--line);
    padding: 110px 0;
    text-align:center;
    background: radial-gradient(ellipse at 50% 0%, rgba(106,175,178,0.08), transparent 60%);
  }
  .cta-block h2{ font-size: clamp(34px, 4.6vw, 64px); font-weight:400; letter-spacing:-0.03em; line-height:1.04; max-width:820px; margin:0 auto; text-wrap:balance;}
  .cta-block h2 em{ font-family:var(--serif); font-style:italic; color:var(--accent);}
  .cta-block .cta-actions{ display:flex; gap:12px; justify-content:center; margin-top:36px; flex-wrap:wrap;}
  .cta-block .email{ margin-top: 28px; font-family:var(--mono); font-size:13px; color:var(--ink-3);}
  .cta-block .email a{ color:var(--accent); border-bottom:1px solid var(--accent-dim);}

  footer{ border-top:1px solid var(--line); padding: 44px 0 52px; font-family:var(--mono); font-size:12px; color:var(--ink-3);}
  footer .inner{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
  footer a{ color:var(--ink-2); transition:color .2s;}
  footer a:hover{ color:var(--accent);}

  @media (prefers-reduced-motion: reduce){
    .pulse{ animation:none !important;}
    *{ scroll-behavior:auto !important; transition:none !important;}
  }