/* Software-IP pages: the visual layer.
   Everything here decorates markup that is complete without it. Drawings follow
   the convention of design patent figures: solid lines are the claimed design,
   broken lines are context. Motion is gated on html.sip-js (set by
   /js/software-ip.js) and on prefers-reduced-motion, so with scripts off or
   motion reduced every page shows its final, static state. */

/* ---------- Figures: shared line language ---------- */
.sip-fig { margin:0; }
.sip-fig svg { display:block; width:100%; height:auto; overflow:visible; }
.sip-fig svg * { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sip-fig text { fill:var(--paper-dim); stroke:none; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; }

/* ---------- Hero ---------- */
.sip-hero { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.sip-hero-copy { min-width:0; }
.sip-fig-hero { max-width:540px; justify-self:end; width:100%; }
.sip-fig-hero .sip-plate { fill:#0a1220; stroke:none; }
.sip-fig-hero .o-frame,.sip-fig-hero .o-claim * { stroke:var(--paper); stroke-width:1.4; }
.sip-fig-hero .o-claim polyline { stroke:var(--gold); }
.sip-fig-hero .o-ctx * { stroke:var(--paper-dim); stroke-width:1; stroke-dasharray:4 5; }
.sip-fig-hero .sip-clone * { stroke:var(--steel); stroke-width:1.1; stroke-dasharray:3 5; }
.sip-fig-hero .sip-clone { opacity:.85; }
.sip-fig-hero .sip-cap-clone { fill:var(--steel); }
.sip-fig-hero .sip-scan { stroke:var(--gold); stroke-width:1.2; opacity:0; filter:drop-shadow(0 0 6px rgba(201,162,94,.9)); }
.sip-clone-wipe { transform-box:fill-box; transform-origin:top; }

@media (prefers-reduced-motion:no-preference) {
  /* One orchestrated moment: the original is drawn, then scanned, and the copy prints out beneath the scan line. */
  .sip-js .sip-fig-hero .o-frame,.sip-js .sip-fig-hero .o-claim * { stroke-dasharray:1; stroke-dashoffset:1; animation:sip-draw 1.5s cubic-bezier(.3,.7,.2,1) .15s forwards; }
  .sip-js .sip-fig-hero .o-claim *:nth-child(n+3) { animation-delay:.45s; }
  .sip-js .sip-fig-hero .o-claim *:nth-child(n+6) { animation-delay:.75s; }
  .sip-js .sip-fig-hero .o-ctx { opacity:0; animation:sip-fade .8s ease 1.1s forwards; }
  .sip-js .sip-fig-hero .sip-scan { animation:sip-scan 9s cubic-bezier(.45,0,.2,1) 2s infinite; }
  .sip-js .sip-fig-hero .sip-clone-wipe { transform:scaleY(0); animation:sip-wipe 9s cubic-bezier(.45,0,.2,1) 2.25s infinite; }
  .sip-js .sip-fig-hero .sip-clone { animation:sip-clone 9s linear 2.25s infinite; }
  .sip-js .sip-fig-hero .sip-cap { opacity:0; animation:sip-fade .8s ease 1.4s forwards; }
  .sip-js .sip-fig-hero .sip-cap-clone { animation:sip-capclone 9s linear 2.25s infinite; }
}
@keyframes sip-draw { to { stroke-dashoffset:0; } }
@keyframes sip-fade { to { opacity:1; } }
@keyframes sip-scan { 0% { transform:translateY(0); opacity:0; } 4% { opacity:.95; } 34% { transform:translateY(220px); opacity:.95; } 38%,100% { transform:translateY(220px); opacity:0; } }
@keyframes sip-wipe { 0% { transform:scaleY(0); } 36% { transform:scaleY(1); } 100% { transform:scaleY(1); } }
@keyframes sip-clone { 0%,84% { opacity:.85; } 96%,100% { opacity:0; } }
@keyframes sip-capclone { 0%,20% { opacity:0; } 36%,84% { opacity:1; } 96%,100% { opacity:0; } }

/* ---------- The four layers ---------- */
.sip-layers { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,5rem); align-items:start; }
.sip-stack { position:sticky; top:112px; max-width:460px; width:100%; }
.sip-stack .sip-axis { stroke:var(--line); stroke-width:1; stroke-dasharray:2 6; }
.sip-plane polygon { fill:rgba(15,27,46,.9); stroke:rgba(232,228,218,.5); stroke-width:1.1; transition:fill .45s ease,stroke .45s ease; }
.sip-plane-art * { stroke:rgba(232,228,218,.42); stroke-width:1.2; transition:stroke .45s ease; }
.sip-fig .sip-plane-n { fill:var(--steel); font-size:11px; transition:fill .45s ease; }
.sip-fig .sip-plane-l { fill:#b4bcc9; font-size:10px; transition:fill .45s ease; }
.sip-plane { transition:transform .7s cubic-bezier(.2,.75,.2,1),opacity .45s ease; }
.sip-stack.has-active .sip-plane { opacity:.72; }
.sip-stack .sip-plane.is-active { opacity:1; transform:translateY(-9px); }
.sip-plane.is-active polygon { fill:rgba(28,48,80,.95); stroke:var(--gold); }
.sip-plane.is-active .sip-plane-art * { stroke:var(--paper); }
.sip-plane.is-active .sip-tick { stroke:var(--gold); }
.sip-fig .sip-plane.is-active .sip-plane-n { fill:var(--gold); }
.sip-fig .sip-plane.is-active .sip-plane-l { fill:var(--paper); }
/* Collapsed until the section is reached; the stack then separates. */
.sip-stack.is-collapsed .sip-plane { transform:translateY(calc((2.5 - var(--i)) * 62px)); }
.sip-layers .service-steps { grid-template-columns:1fr; gap:0; }
.sip-layers .service-steps li { padding:1.7rem 0 1.9rem 1.4rem; border-top:1px solid var(--line); border-left:2px solid transparent; transition:border-color .4s ease,background .4s ease; }
.sip-layers .service-steps li.is-active { border-left-color:var(--gold); background:linear-gradient(90deg,rgba(201,162,94,.06),transparent 60%); }
.sip-layers .service-steps li::before { margin-bottom:.7rem; transition:color .4s ease; }
.sip-layers .service-steps li.is-active::before { color:var(--gold); }

/* ---------- Guide cards on the landing page ---------- */
.sip-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; margin-top:2.6rem; }
.sip-card { position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.4rem 1.5rem; background:rgba(12,19,31,.5); transition:border-color .35s ease,transform .35s cubic-bezier(.2,.75,.2,1),background .35s ease; min-width:0; }
.sip-card:hover,.sip-card:focus-within { border-color:rgba(201,162,94,.55); transform:translateY(-4px); background:rgba(15,27,46,.7); }
.sip-card .sip-glyph { width:100%; max-width:150px; height:auto; margin:0 0 1.1rem -6px; }
.sip-card h3 { font-size:1.28rem; line-height:1.2; margin-bottom:.6rem; }
.sip-card h3 a::after { content:""; position:absolute; inset:0; }
.sip-card h3 a:focus-visible { outline:none; }
.sip-card:focus-within { outline:2px solid var(--steel); outline-offset:3px; }
.sip-card p { font-size:.9rem; color:var(--paper-dim); line-height:1.55; }
.sip-card .sip-go { margin-top:auto; padding-top:1.1rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); transition:color .3s ease,letter-spacing .3s ease; }
.sip-card:hover .sip-go { color:var(--gold); letter-spacing:.2em; }

/* Glyphs: same solid-versus-broken convention at small size. */
.sip-glyph * { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sip-glyph .g-solid,.sip-glyph .g-claim * { stroke:var(--paper); stroke-width:1.3; }
.sip-glyph .g-ctx * { stroke:var(--paper-dim); stroke-width:1; stroke-dasharray:3 4; }
.sip-glyph .g-copy * { stroke:var(--steel); stroke-width:1.1; stroke-dasharray:3 4; }
.sip-glyph .g-plate { fill:#0a1220; stroke:none; }
.sip-glyph .g-tick,.sip-glyph .g-claim .g-tick { stroke:var(--gold); stroke-width:1.6; }
.sip-card:hover .g-claim *:not(.g-tick) { stroke:#fff; }

/* ---------- Guide hero figure ---------- */
.sip-guide-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:clamp(2rem,5vw,4rem); align-items:center; }
.sip-guide-hero > div { min-width:0; }
.sip-fig-guide { justify-self:end; width:100%; max-width:300px; }
.sip-fig-guide .sip-glyph-lg { width:100%; height:auto; }
.sip-glyph-lg .g-solid,.sip-glyph-lg .g-claim * { stroke-width:.85; }
.sip-glyph-lg .g-ctx *,.sip-glyph-lg .g-copy * { stroke-width:.7; }
.sip-glyph-lg .g-tick,.sip-glyph-lg .g-claim .g-tick { stroke-width:1.1; }
.sip-fig-guide figcaption { margin-top:.6rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim); }
@media (prefers-reduced-motion:no-preference) {
  .sip-js .sip-fig-guide .g-solid,.sip-js .sip-fig-guide .g-claim * { stroke-dasharray:1; stroke-dashoffset:1; animation:sip-draw 1.3s cubic-bezier(.3,.7,.2,1) .15s forwards; }
  .sip-js .sip-fig-guide .g-claim .g-tick { animation-delay:1.1s; animation-duration:.5s; }
  .sip-js .sip-fig-guide .g-ctx,.sip-js .sip-fig-guide .g-copy { opacity:0; animation:sip-fade .8s ease .9s forwards; }
}

/* ---------- Reading progress, contents tracking, checklist count ---------- */
.sip-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:300; pointer-events:none; background:linear-gradient(90deg,var(--steel),var(--gold)); transform:scaleX(0); transform-origin:left; }
.resource-toc a { border-left:2px solid transparent; padding-left:.8rem; margin-left:-.8rem; transition:color .3s ease,border-color .3s ease; }
.resource-toc a[aria-current="true"] { color:var(--paper); border-left-color:var(--gold); }
.sip-count { margin:0 0 1.2rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.sip-count-n { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); }
.sip-count-n b { color:var(--paper); font-weight:500; }
.sip-count-bar { display:block; height:2px; margin-top:.7rem; background:var(--line); overflow:hidden; }
.sip-count-bar i { display:block; height:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.75,.2,1); }
.sip-count button { margin-top:.8rem; background:none; border:0; padding:0; font:inherit; font-size:.78rem; color:var(--paper-dim); text-decoration:underline; text-underline-offset:.25em; cursor:pointer; }
.sip-count button:hover { color:var(--paper); }
.sip-count button:focus-visible { outline:2px solid var(--steel); outline-offset:3px; }
.resource-checklist label { transition:color .3s ease; }
.resource-checklist li { transition:background .3s ease; }
.resource-checklist li:has(input:checked) { background:linear-gradient(90deg,rgba(201,162,94,.07),transparent 70%); }
.resource-checklist input { accent-color:var(--gold); }

/* ---------- Quiet polish ---------- */
.software-ip .resource-table tbody tr,.resource-page .resource-table tbody tr { transition:background .25s ease; }
.software-ip .resource-table tbody tr:hover,.resource-page .resource-table tbody tr:hover { background:rgba(91,143,208,.06); }
.software-ip .qa-item { transition:border-color .35s ease; }
.software-ip .qa-item:hover { border-top-color:rgba(201,162,94,.5); }

/* Scroll reveal: applied by script only to elements below the fold at load, so nothing visible is ever hidden. */
@media (prefers-reduced-motion:no-preference) {
  .sip-js .sip-reveal { opacity:0; transform:translateY(14px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1); }
  .sip-js .sip-reveal.is-in { opacity:1; transform:none; }
}

/* ---------- Small screens ---------- */
@media (max-width:1000px) {
  .sip-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .sip-hero,.sip-layers,.sip-guide-hero { grid-template-columns:1fr; }
  .sip-fig-hero { justify-self:start; max-width:420px; margin-top:.5rem; }
  .sip-stack { position:static; max-width:380px; margin:0 auto; }
  .sip-stack.is-collapsed .sip-plane { transform:none; }
  .sip-fig-guide { justify-self:start; max-width:220px; }
}
@media (max-width:520px) {
  .sip-cards { grid-template-columns:1fr; }
  .sip-card .sip-glyph { max-width:120px; }
}
@media print {
  .sip-fig,.sip-progress,.sip-count,.sip-cards .sip-glyph { display:none; }
  .sip-hero,.sip-layers,.sip-guide-hero { display:block; }
}

/* =========================================================================
   Practice pages: the same patent-figure language (classes prefixed pf-).
   ========================================================================= */
.pf { margin:0; width:100%; max-width:520px; justify-self:end; }
.pf svg { display:block; width:100%; height:auto; overflow:visible; }
.pf svg * { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.pf svg text { fill:var(--paper-dim); stroke:none !important; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; }
.pf .pf-num { fill:var(--paper); font-size:12px; letter-spacing:.06em; }
.pf .pf-cap-copy { fill:var(--steel); }
.pf .pf-box { fill:var(--paper); font-size:10.5px; }
.pf .pf-solid,.pf .pf-solid * { stroke:var(--paper); stroke-width:1.4; }
.pf .pf-ctx,.pf .pf-ctx * { stroke:var(--paper-dim); stroke-width:1; stroke-dasharray:4 5; }
.pf .pf-copy,.pf .pf-copy * { stroke:var(--steel); stroke-width:1.1; stroke-dasharray:3 5; }
.pf .pf-lead,.pf .pf-lead * { stroke:rgba(232,228,218,.38); stroke-width:.9; }
.pf .pf-gold,.pf .pf-gold * { stroke:var(--gold); stroke-width:1.5; }
.pf .pf-gold text { fill:var(--gold); stroke:none; font-size:12px; letter-spacing:0; }
.pf .pf-tree { stroke:rgba(232,228,218,.5); stroke-width:1; }
.pf .pf-plate { fill:#0b1322; stroke:none; }
.pf .pf-link { stroke:var(--gold); stroke-width:1.2; stroke-dasharray:2 4; }
.pf .pf-mark { fill:var(--gold); stroke:none; }
.pf .pf-pulse { stroke:var(--gold); stroke-width:2.2; stroke-dasharray:.08 1; opacity:0; filter:drop-shadow(0 0 5px rgba(201,162,94,.85)); }
.pf .pf-scan { stroke:var(--gold); stroke-width:1.2; opacity:0; filter:drop-shadow(0 0 6px rgba(201,162,94,.9)); }
.pf .pf-filament { filter:drop-shadow(0 0 4px rgba(201,162,94,.75)); }

@media (prefers-reduced-motion:no-preference) {
  .sip-js .pf .pf-draw { stroke-dasharray:1; stroke-dashoffset:1; animation:sip-draw 1.4s cubic-bezier(.3,.7,.2,1) var(--d,.2s) forwards; }
  .sip-js .pf .pf-ctx,.sip-js .pf .pf-copy,.sip-js .pf .pf-lead,.sip-js .pf text { opacity:0; animation:sip-fade .9s ease 1.2s forwards; }
  .sip-js .pf .pf-gold text { animation-delay:2s; }
  /* Practice: the filament breathes. */
  .sip-js .pf-bulb .pf-filament { animation:sip-draw 1.4s cubic-bezier(.3,.7,.2,1) var(--d) forwards, pf-glow 4.5s ease-in-out 2.8s infinite; }
  /* Litigation: each claim element is mapped in turn. */
  .sip-js .pf-claim .pf-link { opacity:0; animation:sip-fade .8s ease var(--d) forwards, pf-map 9s ease-in-out calc(var(--d) + 2s) infinite; }
  /* Diligence: a scan passes and priority assets are marked. */
  .sip-js .pf-family .pf-scan { animation:pf-scan 8s cubic-bezier(.45,0,.2,1) 2s infinite; }
  .sip-js .pf-family .pf-mark:not(.pf-mark-static) { opacity:0; transform-box:fill-box; transform-origin:center; animation:pf-markin 8s ease calc(2s + var(--m) * 2.6s) infinite; }
  /* Monetization: the path to each outcome, in turn. */
  .sip-js .pf-flow .pf-pulse { animation:pf-pulse 9s ease-in-out calc(2s + var(--k) * 3s) infinite; }
  /* Trademarks: the lookalike arrives after the mark is drawn. */
  .sip-js .pf-marks .pf-lookalike { opacity:0; transform:translate(18px,18px); animation:pf-arrive 1.2s cubic-bezier(.2,.75,.2,1) 1.5s forwards; }
  .sip-js .pf-marks .pf-reg { opacity:0; animation:sip-fade .6s ease 2.4s forwards; }
}
@keyframes pf-glow { 0%,100% { filter:drop-shadow(0 0 3px rgba(201,162,94,.55)); } 50% { filter:drop-shadow(0 0 11px rgba(232,196,120,1)); } }
@keyframes pf-map { 0%,8% { stroke-width:1.2; } 14% { stroke-width:2.4; } 24%,100% { stroke-width:1.2; } }
@keyframes pf-scan { 0% { transform:translateX(0); opacity:0; } 5% { opacity:.9; } 80% { transform:translateX(500px); opacity:.9; } 84%,100% { transform:translateX(500px); opacity:0; } }
@keyframes pf-markin { 0% { opacity:0; transform:scale(.3); } 6% { opacity:1; transform:scale(1); } 70% { opacity:1; } 82%,100% { opacity:0; } }
@keyframes pf-pulse { 0% { opacity:0; stroke-dashoffset:.08; } 3% { opacity:1; } 30% { stroke-dashoffset:-.92; opacity:1; } 34%,100% { stroke-dashoffset:-.92; opacity:0; } }
@keyframes pf-arrive { to { opacity:1; transform:none; } }

/* Hero grid for pages whose hero was a single column. */
.pf-hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.pf-hero-grid > div { min-width:0; }

/* Small figure beside each practice area. */
.pf-mini { margin-top:1.6rem; max-width:170px; }
.pf-mini .sip-glyph { width:100%; height:auto; }
.sip-glyph .g-link { stroke:var(--gold); stroke-width:1.2; stroke-dasharray:2 3; }

@media (prefers-reduced-motion:no-preference) {
  .sip-js .pf-mini .g-solid,.sip-js .pf-mini .g-claim * { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.2,1) .35s; }
  .sip-js .in .pf-mini .g-solid,.sip-js .in .pf-mini .g-claim * { stroke-dashoffset:0; }
  .sip-js .pf-mini .g-ctx,.sip-js .pf-mini .g-copy,.sip-js .pf-mini .g-link { opacity:0; transition:opacity .8s ease 1.1s; }
  .sip-js .in .pf-mini .g-ctx,.sip-js .in .pf-mini .g-copy,.sip-js .in .pf-mini .g-link { opacity:1; }
}

/* Process steps that are a real sequence: the step in view, and those passed. */
.service-steps li { transition:border-color .45s ease; }
.service-steps li::before { transition:color .45s ease; }
.service-steps li.is-active { border-top-color:var(--gold); }
.service-steps li.is-active::before { color:var(--gold); }
.flow-num span { transition:border-color .45s ease,color .45s ease,background .45s ease,box-shadow .45s ease; }
.flow-step.is-active .flow-num span { border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 4px rgba(201,162,94,.08); }
.flow-step:not(:last-child) .flow-num::after { transition:background .6s ease; }
.flow-step.is-passed .flow-num::after,.flow-step.is-active:not(:last-child) .flow-num::after { background:linear-gradient(var(--gold),rgba(201,162,94,.25)); }
.flow-step.is-passed .flow-num span { border-color:rgba(201,162,94,.55); }

@media (max-width:900px) {
  .pf-hero-grid { grid-template-columns:1fr; }
  .pf { justify-self:start; max-width:420px; }
}
@media print { .pf,.pf-mini { display:none; } .pf-hero-grid { display:block; } }
.pf .pf-plate-edge { stroke:rgba(232,228,218,.12); stroke-width:1; }