/* ---------- Guide article - VERSION 8 ----------
   v8: apple-design s12 applied visibly. Flat tinted boxes replaced with
       real materials and depth: layered shadows, bright top edges, inner
       highlights, translucent callouts, elevated tiles, scroll-edge fade
       on the sticky TOC, gradient section edge. Every translucent surface
       has an opaque fallback and a contrast/transparency override.
   v7: apple-design s1/s11/s14/s15 (response, smoothness, a11y, type).
       s1  Response: instant :active press feedback, not on release.
       s11 Frame smoothness: animate transform/opacity only. The arrow
           now moves via translateX instead of animating `gap`, which
           was triggering layout on every hover frame.
       s12 Materials: sticky TOC is a translucent layer (blur+saturate)
           with a bright top edge and depth shadow, not a flat panel.
       s14 Reduced motion / transparency / contrast: all three honoured.
       s15 Typography: rem so layout scales with user text size,
           size-specific tracking, leading inverse to size.
   v6: one hairline across the related-guides grid, not one per card.
   v5: arrow sizing fix for links in the article body.
*/
  .art-hero{padding:142px 0 50px;position:relative;overflow:hidden;background:linear-gradient(180deg,#F5F8FF 0%,#FFFFFF 100%);}
  .art-hero .container{position:relative;z-index:1;}
  .art-head{max-width:800px;}
  .crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;font-weight:500;color:var(--slate-light);margin-bottom:20px;}
  .crumb a{color:var(--slate);transition:color .2s var(--ease);}
  .crumb a:hover{color:var(--blue);}
  .crumb svg{width:13px;height:13px;flex-shrink:0;}
  .tip-cat{display:inline-block;font-size:.688rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-dark);background:var(--blue-pale);padding:4px 10px;border-radius:999px;}
  .art-head h1{font-size:clamp(1.813rem,3.9vw,2.813rem);line-height:1.14;letter-spacing:-.021em;font-weight:700;font-optical-sizing:auto;color:var(--ink);margin:.875rem 0 1rem;}
  .art-standfirst{font-size:1.125rem;line-height:1.68;letter-spacing:-.004em;color:var(--slate);max-width:44rem;}
  .art-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);}
  .art-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--slate-light);}
  .art-meta span{font-size:13.5px;color:var(--slate-light);font-weight:500;}

  .art-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,258px);gap:50px;align-items:start;}
  .art-main{min-width:0;}

  .gb{
    background:linear-gradient(180deg,#FFFFFF 0%,#FDFDFF 100%);
    border:1px solid rgba(236,238,246,.9);
    border-top-color:rgba(255,255,255,.95);
    border-radius:22px;
    padding:2.25rem 2.375rem;
    margin-bottom:20px;
    scroll-margin-top:100px;
    box-shadow:0 1px 2px rgba(20,22,43,.04), 0 10px 30px -18px rgba(20,22,43,.18);
  }
  .gb-head{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
  .gb-ico{
    width:44px;height:44px;border-radius:14px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,#F2F6FE 0%,var(--blue-pale) 100%);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 1px 2px rgba(59,99,245,.10), inset 0 1px 0 rgba(255,255,255,.95);
  }
  .gb-ico svg{width:21px;height:21px;color:var(--blue);}
  .gb-head h2{font-size:1.438rem;font-weight:700;letter-spacing:-.014em;line-height:1.25;font-optical-sizing:auto;margin:0;}
  .gb h3{font-size:1.094rem;font-weight:600;line-height:1.42;letter-spacing:-.006em;margin:1.625rem 0 .563rem;}
  .gb p{font-size:1.031rem;line-height:1.75;letter-spacing:0;color:var(--slate);margin-bottom:.938rem;}
  .gb p:last-child{margin-bottom:0;}
  .gb strong{color:var(--ink);font-weight:600;}
  .gb a:not(.btn){color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
  .lede{font-size:1.094rem !important;line-height:1.7 !important;letter-spacing:-.004em;color:var(--ink) !important;font-weight:500;}

  /* v4 FIX: inline SVGs in article links have no width attribute, so
     without an explicit size they expand to fill the container. */
  .art-main a svg{width:15px;height:15px;flex-shrink:0;vertical-align:-2px;}
  .art-main a.btn svg{width:16px;height:16px;}
  .gb a svg{width:15px;height:15px;flex-shrink:0;vertical-align:-2px;}
  /* safety net: any SVG in the article body that no other rule sizes */
  .art-main svg:not([width]):not([height]){max-width:100%;max-height:44px;}
  .art-main .gb-ico svg,.art-main .note svg,.art-main .xrow svg,
  .art-main ul.plain li svg,.art-main .crumb svg{max-height:none;}

  .gb ul.plain{list-style:none;display:flex;flex-direction:column;gap:10px;margin:18px 0;padding:0;}
  .gb ul.plain li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.65;color:var(--slate);}
  .gb ul.plain li svg{width:17px;height:17px;color:var(--blue);flex-shrink:0;margin-top:4px;}

  .steps-list{list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:14px;margin:20px 0;padding:0;}
  .steps-list li{counter-increment:st;position:relative;padding-left:44px;font-size:16px;line-height:1.7;color:var(--slate);}
  .steps-list li::before{
    content:counter(st);position:absolute;left:0;top:-1px;width:29px;height:29px;border-radius:50%;
    background:linear-gradient(180deg,#4A70F7 0%,var(--blue-dark) 100%);color:#fff;font-size:.844rem;font-weight:700;
    box-shadow:0 2px 6px -1px rgba(59,99,245,.45), inset 0 1px 0 rgba(255,255,255,.28);
    display:flex;align-items:center;justify-content:center;
  }

  .note{
    display:flex;gap:13px;border-radius:16px;padding:1.125rem 1.25rem;margin:1.25rem 0;
    background:rgba(235,241,252,.72);
    backdrop-filter:blur(10px) saturate(1.3);
    -webkit-backdrop-filter:blur(10px) saturate(1.3);
    border:1px solid rgba(59,99,245,.16);
    border-top-color:rgba(255,255,255,.75);
    box-shadow:0 1px 2px rgba(20,22,43,.04);
  }
  .note svg{width:19px;height:19px;color:var(--blue);flex-shrink:0;margin-top:2px;}
  .note p{margin:0 !important;font-size:15.5px !important;line-height:1.65 !important;color:var(--ink) !important;}
  .note.warn{background:rgba(255,247,237,.75);border-color:rgba(217,119,6,.2);border-top-color:rgba(255,255,255,.8);}
  .note.warn svg{color:#D97706;}
  .note.good{background:rgba(240,251,246,.75);border-color:rgba(14,166,114,.2);border-top-color:rgba(255,255,255,.8);}
  .note.good svg{color:#0EA672;}

  .kv{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;margin:20px 0;}
  .kv-item{
    background:linear-gradient(180deg,#FBFCFF 0%,#F4F7FF 100%);
    border:1px solid rgba(236,238,246,.9);border-top-color:rgba(255,255,255,.95);
    border-radius:15px;padding:1.063rem 1.125rem;
    box-shadow:0 1px 2px rgba(20,22,43,.04), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .kv-item .n{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:var(--blue);line-height:1.15;}
  .kv-item .l{font-size:13.5px;color:var(--slate);margin-top:5px;line-height:1.45;}

  .plan-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:13px;margin:20px 0;}
  .plan{
    background:linear-gradient(180deg,#FBFCFF 0%,#F4F7FF 100%);
    border:1px solid rgba(236,238,246,.9);border-top-color:rgba(255,255,255,.95);
    border-radius:16px;padding:1.188rem 1.25rem;
    box-shadow:0 1px 2px rgba(20,22,43,.04), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .plan.hi{
    background:linear-gradient(150deg,#4A70F7 0%,var(--blue) 45%,var(--blue-dark) 100%);
    border-color:transparent;border-top-color:rgba(255,255,255,.28);
    box-shadow:0 10px 26px -12px rgba(59,99,245,.55), inset 0 1px 0 rgba(255,255,255,.3);
  }
  .plan .nm{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-light);}
  .plan .sz{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700;color:var(--ink);margin:5px 0 6px;line-height:1.1;}
  .plan .ds{font-size:13.5px;color:var(--slate);line-height:1.5;}
  .plan.hi .nm{color:rgba(255,255,255,.75);}
  .plan.hi .sz{color:#fff;}
  .plan.hi .ds{color:rgba(255,255,255,.88);}

  .xlist{display:flex;flex-direction:column;gap:11px;margin:20px 0;}
  .xrow{
    display:flex;gap:12px;align-items:flex-start;border-radius:15px;padding:.938rem 1.063rem;
    background:rgba(255,247,246,.78);
    backdrop-filter:blur(8px) saturate(1.25);
    -webkit-backdrop-filter:blur(8px) saturate(1.25);
    border:1px solid rgba(220,60,50,.14);
    border-top-color:rgba(255,255,255,.8);
    box-shadow:0 1px 2px rgba(20,22,43,.03);
  }
  .xrow svg{width:17px;height:17px;color:#DC3C32;flex-shrink:0;margin-top:3px;}
  .xrow p{margin:0 !important;font-size:15px !important;line-height:1.6 !important;}

  .toc{
    position:sticky;top:104px;
    background:rgba(250,251,255,.66);
    backdrop-filter:blur(20px) saturate(1.6);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    border:1px solid rgba(236,238,246,.8);
    border-top-color:rgba(255,255,255,.9);
    border-radius:20px;padding:1.375rem 1.25rem;
    max-height:calc(100vh - 130px);overflow-y:auto;
    box-shadow:0 1px 2px rgba(20,22,43,.04), 0 16px 40px -24px rgba(20,22,43,.28);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
  .toc h4{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-light);margin-bottom:12px;}
  .toc ul{list-style:none;display:flex;flex-direction:column;gap:1px;}
  .toc a{display:block;font-size:13.5px;line-height:1.42;font-weight:500;color:var(--slate);padding:7px 10px;border-radius:8px;transition:color .2s var(--ease),background .2s var(--ease);}
  .toc a:hover{color:var(--blue-dark);background:#fff;}
  .toc a:active{color:var(--blue-dark);background:#fff;transform:scale(.99);transition:transform 100ms ease-out,color .2s var(--ease),background .2s var(--ease);}
  .toc a.active{
    color:var(--blue-dark);background:#fff;font-weight:600;letter-spacing:.004em;
    box-shadow:0 1px 2px rgba(20,22,43,.05), 0 6px 16px -10px rgba(59,99,245,.5);
  }

  /* Related guides: light "keep going" strip rather than a block of cards */
  section:has(> .container > .next-grid){padding-top:54px;padding-bottom:58px;}
  .section-head{text-align:left;max-width:none;margin:0 0 28px;}
  .section-head .eyebrow{display:none;}
  .section-head h2{font-size:clamp(22px,2.2vw,27px);font-weight:700;letter-spacing:-.015em;line-height:1.25;}
  .section-head p{margin-top:9px;font-size:15.5px;line-height:1.6;color:var(--slate-light);max-width:620px;}

  /* one rule across the whole grid, not one per card */
  .next-grid{
    display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:32px 40px;
    border-top:1px solid transparent;
    border-image:linear-gradient(90deg,rgba(59,99,245,.28),rgba(236,238,246,.9) 42%,rgba(236,238,246,0)) 1;
    padding-top:28px;
  }
  .next-card{display:flex;flex-direction:column;align-items:flex-start;background:transparent;border:0;border-radius:0;padding:0;min-width:0;}
  .next-card .tip-cat{display:none;}
  .next-card h3{font-size:17.5px;font-weight:600;line-height:1.42;letter-spacing:-.01em;color:var(--ink);margin:0 0 9px;transition:color .25s var(--ease);}
  .next-card:hover h3{color:var(--blue);}
  .next-card:active h3{color:var(--blue-dark);}
  .next-card:active{transform:scale(.995);transition:transform 100ms ease-out;}
  .next-card p{font-size:14.5px;color:var(--slate);line-height:1.62;margin:0;flex:1 0 auto;}
  .tip-link{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;margin-top:.875rem;font-size:.844rem;font-weight:600;letter-spacing:.002em;color:var(--blue);}
  .tip-link svg{width:14px;height:14px;flex-shrink:0;transition:transform .25s var(--ease);}
  .next-card:hover .tip-link svg{transform:translateX(5px);}
  .next-card:active .tip-link svg{transform:translateX(3px);}

  @media(max-width:1040px){
    .art-layout{grid-template-columns:minmax(0,1fr);gap:0;}
    .toc{display:none;}
  }
  @media(max-width:900px){
    .art-hero{padding:112px 0 42px;}
    .kv,.plan-grid{grid-template-columns:minmax(0,1fr);}
    .next-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  }
  @media(max-width:640px){ .next-grid{grid-template-columns:minmax(0,1fr);} }
  @media(max-width:520px){
    .art-hero{padding:100px 0 34px;}
    .art-head h1{font-size:26px;}
    .art-standfirst{font-size:16px;}
    .gb{padding:24px 20px;border-radius:16px;}
    .gb-head{gap:11px;margin-bottom:15px;}
    .gb-ico{width:37px;height:37px;border-radius:10px;}
    .gb-head h2{font-size:19px;}
    .gb h3{font-size:16.5px;}
    .gb p{font-size:16px;}
    .gb ul.plain li,.steps-list li{font-size:15.5px;}
    .note{padding:15px 16px;}
    .note p{font-size:15px !important;}
  }

  /* --- apple-design s14: reduced motion is a gentler equivalent, not none --- */
  @media (prefers-reduced-motion: reduce){
    .next-card,.next-card:active,.toc a,.toc a:active,.tip-link svg,
    .next-card:hover .tip-link svg,.next-card:active .tip-link svg,.crumb a,.gb{
      transition-duration:.01ms !important;
      animation-duration:.01ms !important;
      transform:none !important;
    }
    .next-card h3,.toc a{transition:color 120ms ease,background 120ms ease !important;}
  }

  /* --- apple-design s14: frostier, not see-through --- */
  @media (prefers-reduced-transparency: reduce){
    .toc{background:#F9FAFF;border-top-color:var(--line);-webkit-mask-image:none;mask-image:none;}
    .note{background:var(--blue-pale);}
    .note.warn{background:#FFF7ED;}
    .note.good{background:#F0FBF6;}
    .xrow{background:#FFF7F6;}
    .toc,.note,.xrow{backdrop-filter:none;-webkit-backdrop-filter:none;}
  }

  /* --- apple-design s14: near-solid surfaces with defined borders --- */
  @media (prefers-contrast: more){
    .toc{background:#fff;border-color:var(--ink);-webkit-mask-image:none;mask-image:none;}
    .note{background:#fff;border-color:var(--blue-dark);}
    .note.warn{background:#fff;border-color:#B45309;}
    .note.good{background:#fff;border-color:#0B7A55;}
    .xrow{background:#fff;border-color:#B3241C;}
    .toc,.note,.xrow{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;}
    .next-grid{border-image:none;border-top-color:var(--ink);}
    .gb{border-color:var(--slate);background:#fff;box-shadow:none;}
    .tip-link,.next-card h3{color:var(--ink);}
    .next-card:hover h3,.tip-link:hover{color:var(--blue-dark);}
  }

  /* --- apple-design s12: material fallback where backdrop-filter is unsupported --- */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .toc{background:#F9FAFF;}
    .note{background:var(--blue-pale);}
    .note.warn{background:#FFF7ED;}
    .note.good{background:#F0FBF6;}
    .xrow{background:#FFF7F6;}
  }