/* ============================================================================
   ARGOS - home.css
   Homepage-only patterns: the tall hero and its privilege-escalation tree, the
   screenshot showcase (stage + node list) and lightbox, and the ROI block.
   Everything else the homepage uses comes from base.css.
   ========================================================================= */

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  /* Full-screen opening: copy and visual centre in the space the fixed header
     leaves, and the trust strip (nested at the section's end) forms the
     viewport's bottom edge. min-height, not height, so short viewports and
     the stacked mobile layout can still grow past one screen. */
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100svh;
  padding:calc(var(--header-h) + 32px) 0 0;
  /* Same decorative accent wash as .page-hero (base.css), so the homepage
     opens on the same ground as every inner page. */
  background:radial-gradient(ellipse at 82% 100%,rgba(var(--accent-rgb),.2),transparent 62%) no-repeat;
}
.hero .hero-grid{flex:1}
/* Inside the hero the strip gives up its raised band: the hero's accent wash
   runs through to the viewport edge and only the hairlines mark the strip.
   Inner pages keep --strip-bg. */
.hero .trust-strip{margin-top:32px;background:transparent}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-col);align-items:center}
.hero-copy p{font-size:var(--fs-lead);line-height:28px;color:var(--text-secondary);max-width:560px;margin-bottom:20px}
.hero-copy p.sub{font-size:var(--fs-body);line-height:24px;color:var(--text-muted);margin-bottom:20px}
/* Lead only. Two columns, it collapses into the h1's 24px; stacked (copy
   dissolved into grid items) it adds 10px between the diagram and the lead. */
.hero-copy h1 + p{margin-top:10px}
.hero h1{margin-bottom:24px;text-wrap:balance}
/* lg and xl (1024-1535): the copy column is ~460-720px, too narrow for the
   53-62px the global h1 clamp gives (four lines at lg, three at xl). 4.3vw
   holds it to two lines, as at 2xl and 3xl; capped at the clamp's 62px. */
@media (min-width:1024px) and (max-width:1535px){.hero h1{font-size:min(4.3vw,62px)}}
/* xs keeps its signed-off greedy wrap; balance applies from sm up, where it
   stops a lone "Minutes" hanging on the last line. */
@media (max-width:639px){.hero h1{text-wrap:wrap}}
/* Landscape lg (1024-1279): the diagram column takes more of the row (.9/1.1,
   40px gutter) so the tree renders ~505px wide instead of ~435px; the h1
   steps down to 3.8vw to stay on two lines in the narrower copy column (its
   second line, "Assessments in Minutes", is the wider one). */
@media (min-width:1024px) and (max-width:1279px) and (orientation:landscape){
  .hero-grid{grid-template-columns:.9fr 1.1fr;gap:40px}
  .hero h1{font-size:3.8vw}
}
.hero h1 em{font-style:normal;color:var(--accent-bright)}

/* The tree is absolutely positioned and so contributes no height. With the
   product shot moved into the screenshot mosaic there is nothing else in this
   column, so the height has to be stated here or the graphic collapses. */
/* The full attack path (.ap-full) is 640x618. aspect-ratio keeps it at natural
   1:1 unit-to-pixel scale at any column width, which is what holds the SVG text
   above the 11px floor - preserveAspectRatio scales type with the viewBox. */
.hero-visual{position:relative;aspect-ratio:640/618;min-height:420px}

/* ---------- Signature: the attack path ---------- */
/* A faithful redraw of ARGOS's own attack-path view: identity -> application ->
   privileged role, with the surrounding tenant and Conditional Access policies
   as context. Vertex and edge names are the product's own.
   Greys were previously rgba(255,255,255,.09) on branches and #141414 on nodes,
   which was all but invisible on the canvas. Context is now legible in its own
   right, and the live path reads as one clear step brighter. */
.attackpath{position:absolute;inset:0;z-index:0;pointer-events:none}
.attackpath svg{width:100%;height:100%;overflow:visible}
/* Two cuts of the diagram (see index.html): the full tree from 768px up, the
   compact one - no tenant tier, no Azure management policy - below. */
.attackpath .ap-compact{display:none}

/* Context: present, readable, deliberately quieter than the live path. */
.attackpath .ctx-edge{fill:none;stroke:rgba(255,255,255,.20);stroke-width:1.25;stroke-linecap:round}
.attackpath .ctx-glyph{fill:none;stroke:var(--text-muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.attackpath .ctx-glyph-fill{fill:var(--text-muted);opacity:.55}
.attackpath .ctx-label{
  font-family:var(--font-body);font-size:var(--fs-label);line-height:1.3;
  text-anchor:middle;fill:var(--text-muted);
  paint-order:stroke fill;stroke:var(--bg-base);stroke-width:4px;stroke-linejoin:round;
}
.attackpath .ctx-plate{fill:var(--bg-raised);stroke:rgba(255,255,255,.10)}

/* The live path - DESIGN-SYSTEM.md "The Light Source Rule". */
.attackpath .live-edge{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:6 8;animation:pathflow 3.2s linear infinite;
}
.attackpath .live-head{fill:var(--accent)}
.attackpath .live-glyph{fill:none;stroke:var(--accent-bright);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.attackpath .live-glyph-fill{fill:var(--accent-bright)}
.attackpath .edge-label{
  font-family:var(--font-body);font-size:var(--fs-label);text-anchor:middle;
  fill:var(--text-secondary);
  paint-order:stroke fill;stroke:var(--bg-base);stroke-width:4px;stroke-linejoin:round;
}

/* The identity the path starts from: a filled chip, as in the product. */
.attackpath .chip{fill:var(--accent);rx:4}
.attackpath .chip-label{
  font-family:var(--font-display);font-size:13px;font-weight:600;
  text-anchor:middle;fill:var(--text-on-light);
}

/* The escalation target. Critical severity is earned here: this is the node
   the whole path exists to reach - DESIGN-SYSTEM.md "The Earned Colour Rule". */
.attackpath .target-plate{fill:rgba(229,72,77,.10);stroke:var(--sev-critical);stroke-width:1.5;rx:4}
.attackpath .target-label{
  font-family:var(--font-display);font-size:12.5px;font-weight:600;
  text-anchor:middle;fill:var(--text-primary);
}
.attackpath .target-glyph{fill:none;stroke:var(--sev-critical);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.attackpath .target-glyph-fill{fill:var(--sev-critical)}
.attackpath .ring{fill:none;stroke:var(--sev-critical);stroke-width:2;opacity:.9}
.attackpath .pulse{fill:var(--sev-critical);animation:pulse 3.2s ease-in-out infinite}

/* Finding-count badges, as the product draws them. */
.attackpath .badge-plate{fill:var(--bg-raised);stroke:rgba(255,255,255,.16);rx:7}
.attackpath .badge-text{
  font-family:var(--font-body);font-size:11px;text-anchor:middle;fill:var(--text-muted);
}
.attackpath .badge-crit{fill:var(--sev-critical)}
.attackpath .badge-crit-text{
  font-family:var(--font-display);font-size:11px;font-weight:700;
  text-anchor:middle;fill:var(--text-primary);
}

@keyframes pathflow{to{stroke-dashoffset:-28}}
@keyframes pulse{0%,100%{opacity:.35;r:3}50%{opacity:.9;r:5}}

/* ---------- Product showcase: stage with node list ---------- */
/* The eight screenshots as a split: one at readable size on a stage, the set
   as numbered rows beside it in the attack path's grammar. home.js turns the
   stage into a carousel and the rows into tabs that scroll it; the numbers are the walk order of an
   assessment, and this is the page's one numbered sequence (Numbering Rule). */
.showcase-split{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--gap-col);align-items:stretch}
.showcase-stage{
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-card);overflow:hidden;
}
.showcase-stage img{
  display:block;width:100%;height:540px;
  object-fit:cover;object-position:top center;background:var(--bg-raised);
}
/* For shots whose content sits centred on whitespace, not along the top. */
.showcase-stage img.crop-center{object-position:center}
/* Wide screenshots (a diagram, a full-width table) are shown whole rather than
   cropped to the stage; the raised ground fills the bands above and below. */
.showcase-stage img.fit-contain{object-fit:contain;object-position:center}
.showcase-stage figcaption{
  padding:12px 14px;font-size:var(--fs-label);line-height:16.8px;color:var(--text-secondary);
  border-top:1px solid var(--border-subtle);
}
/* JS wraps the stage image in this button so the full screenshot is one click
   away in the lightbox. Without JS the stage stays a plain image - no dead
   affordance. Negative outline offset: the ring must survive the stage's
   overflow:hidden. */
.showcase-zoom{
  display:block;width:100%;padding:0;border:0;
  background:none;cursor:zoom-in;
}
.showcase-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.showcase-zoom:disabled{cursor:auto}

/* home.js turns the stage into a carousel: every slide sits in this track and
   native scroll-snap does the swiping. Mandatory snap with snap-stop:always
   so a fling moves one slide, not several. The scrollbar is hidden; the list
   (desktop) and dots (mobile) are the visible controls. */
.showcase-track{
  display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.showcase-track::-webkit-scrollbar{display:none}
.showcase-track > .showcase-zoom{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}

/* Dots: built by home.js, shown only below 768px where the list is hidden. */
.showcase-dots{display:none;justify-content:center;gap:4px;margin-top:12px}
.showcase-dots button{
  /* 24px hit area around an 8px dot */
  width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.showcase-dots button::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--border-subtle-hover);transition:background .3s,transform .3s;
}
.showcase-dots button[aria-current="true"]::before{background:var(--accent-bright);transform:scale(1.25)}
.showcase-dots button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:50%}

/* The rows are plain grid items until home.js wraps their contents in tab
   buttons; .is-live hands the row layout over to the button so the hit area
   is the whole row. */
.showcase-list{
  list-style:none;display:flex;flex-direction:column;justify-content:center;
}
.showcase-list li{
  display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:center;
  padding:14px 8px;border-bottom:1px solid var(--border-subtle);
}
.showcase-list li:first-child{border-top:1px solid var(--border-subtle)}
.showcase-list.is-live li{display:block;padding:0}
.showcase-list button{
  display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:center;width:100%;
  padding:14px 8px;border:0;background:none;color:inherit;font:inherit;
  text-align:left;cursor:pointer;transition:background .3s;
}
.showcase-list button:hover{background:rgba(255,255,255,.022)}
.showcase-list button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.showcase-list .node{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:600;
  color:var(--accent-bright);border:1px solid var(--border-subtle-hover);
  transition:border-color .3s,background .3s;
}
.showcase-list button[aria-selected="true"] .node{
  border-color:var(--accent-bright);background:rgba(var(--accent-rgb),.14);
}
.showcase-list .t{
  font-family:var(--font-display);font-size:var(--fs-body);font-weight:500;
  color:var(--text-secondary);transition:color .3s;
}
.showcase-list button:hover .t,
.showcase-list button[aria-selected="true"] .t{color:var(--text-primary)}

/* ---------- Lightbox ---------- */
.lightbox{
  border:0;padding:0;background:none;max-width:min(1180px,94vw);max-height:94vh;
  color:var(--text-primary);overflow:visible;
  margin:auto;   /* the global reset zeroes the UA margin that centres a modal dialog */
}
.lightbox::backdrop{background:rgba(0,0,0,.88)}
.lightbox figure{
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-card-lg);overflow:hidden;
}
.lightbox img{display:block;width:100%;max-height:80vh;object-fit:contain;background:var(--bg-raised)}
.lightbox figcaption{
  padding:16px 22px;font-size:var(--fs-small);line-height:20px;color:var(--text-secondary);
  border-top:1px solid var(--border-subtle);
}
.lightbox-close,.lightbox-nav{
  position:absolute;width:38px;height:38px;border-radius:50%;
  cursor:pointer;background:var(--bg-raised);border:1px solid var(--border-subtle-hover);
  display:grid;place-items:center;transition:background .3s,border-color .3s;
}
.lightbox-close{top:-14px;right:-14px}
.lightbox-close:hover,.lightbox-nav:hover{background:var(--bg-hover);border-color:var(--border-accent-hover)}
.lightbox-close svg,.lightbox-nav svg{width:18px;height:18px;stroke:var(--text-secondary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lightbox-close:hover svg,.lightbox-nav:hover svg{stroke:var(--accent-bright)}
/* Fixed to the viewport, not to the dialog box: the dialog is sized by whichever
   screenshot is open, so anchoring the arrows to it would move them on every
   slide. Inside a top-layer element, fixed positioning resolves against the
   viewport. */
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%)}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}
.lightbox-count{
  position:absolute;right:22px;bottom:16px;
  font-size:var(--fs-label);line-height:20px;color:var(--text-muted);
}

/* ---------- ROI comparison ---------- */
/* Left-aligned like every other section head - the system treats centring as an
   opt-in modifier, not the default, and one centred section reads as an accident. */
.roi-head{margin-bottom:56px}
.roi-head p{color:var(--text-muted);font-size:var(--fs-body);line-height:24px}
.roi-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.roi-card{
  background:var(--bg-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-panel);padding:36px;
}
/* Tonal elevation, not a glow. */
.roi-card-accent{border-color:rgba(var(--accent-rgb),.35);background:var(--bg-hover)}
.roi-stat{display:flex;gap:18px;align-items:center}
.roi-icon{
  flex:0 0 52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--border-subtle);
}
.roi-icon svg{width:24px;height:24px;stroke:var(--text-secondary);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.roi-icon-accent{background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.25)}
.roi-icon-accent svg{stroke:var(--accent-bright)}
.roi-banner{
  display:flex;align-items:center;gap:18px;
  background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.2);
  border-radius:var(--r-panel);padding:22px 28px;
}
.roi-banner-icon{
  flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-bright);
}
.roi-banner-icon svg{width:22px;height:22px;stroke:var(--text-on-light);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.roi-banner p{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;font-weight:600;color:var(--text-primary)}
.roi-banner b{font-weight:700;color:var(--accent-bright)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .attackpath .live-edge,.attackpath .pulse{animation:none}
}

/* ---------- Responsive ---------- */
/* The hero stacks below lg, and also on portrait screens up to xl (an
   upright 1024x1366 tablet): there the stack gives the diagram ~960px of
   width and readable labels, where two columns left it at ~435px with half
   the screen empty. Landscape lg keeps two columns - stacking a 768px-tall
   screen shrinks the diagram instead. */
@media (max-width:1023px),(max-width:1279px) and (orientation:portrait){
  /* Stacked, the copy block dissolves (display:contents) so the diagram can
     sit between the h1 and the lead: heading first, then the visual, then the
     rest of the copy. gap 0 because each copy element carries its own margin.
     Visual order only - the DOM keeps the copy together, and the graphic is
     decorative (pointer-events:none), so focus order is unaffected. */
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy{display:contents}
  .hero-copy h1{order:-2}
  /* md (768-1023), and lg screens held upright: the same one-screen stack as
     phones, with the full tree.
     The grid is locked to the screen below the header, the diagram's row is
     the only flexible one (1fr) and the SVG fits itself into it (meet), so the
     copy and buttons always land above the fold and the strip follows on its
     own band. The 767px block below overrides every value here for phones. */
  .hero{min-height:0;padding:calc(var(--header-h) + 24px) 0 0}
  .hero-grid{min-height:calc(100svh - var(--header-h) - 24px);grid-template-rows:auto 1fr auto auto auto;padding-bottom:24px}
  .hero .trust-strip{background:var(--strip-bg)}
  .hero h1{margin-bottom:16px}
  .hero-copy p{margin-bottom:20px}
  .hero-copy p.sub{margin-bottom:20px}
  .hero-visual{order:-1;aspect-ratio:auto;align-self:stretch;height:auto;min-height:240px;margin-bottom:24px}
}
@media (max-width:1023px){
  .showcase-split{grid-template-columns:1fr}
  .showcase-stage img{height:380px}
  .roi-cards{grid-template-columns:1fr}
}
@media (max-width:767px){
  .hero{padding:calc(var(--header-h) + 20px) 0 0}
  .showcase-stage figcaption{padding:10px 12px}
  .roi-card{padding:28px}
  .roi-banner{flex-direction:column;text-align:center;gap:12px}
  /* The carousel swipes and the dots navigate, so the list goes. */
  .showcase-list{display:none}
  .showcase-dots{display:flex}
  .showcase-split{gap:0}   /* the column gutter would otherwise push the dots off the stage */
  /* Full screen on phones: the dialog fills the viewport and the frame
     loses its border and rounding; the image takes the height the caption
     leaves, letterboxed by object-fit. */
  .lightbox{width:100%;height:100%;max-width:none;max-height:none}
  .lightbox figure{
    height:100%;display:flex;flex-direction:column;
    border:0;border-radius:0;background:var(--bg-base);
  }
  .lightbox img{flex:1;min-height:0;max-height:none;background:var(--bg-base)}
  /* Negative offsets would sit off-screen, so bring the controls inside. */
  .lightbox-close{top:8px;right:8px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
}

/* Below 768px the hero content - header, h1, diagram, lead, sub, buttons -
   fits a phone screen whole, and the trust strip drops below that first
   screen on its own grey band (desktop keeps it transparent inside the
   100svh hero). The viewport lock moves from the section to the content
   grid, and the diagram's row is the only flexible one (1fr): the copy rows
   shrink to their content and pack at the bottom, and the diagram takes
   whatever height is left, between a 180px floor and a 420px cap; the SVG
   scales to that height, centred. Without the 1fr the grid's min-height
   stretched every row equally and the centred items floated in ~20px of
   padding each, which no margin could remove. Where the height-fit SVG is
   wider than the column it stays centred and spills off both edges equally
   (clipped by the hero's overflow) rather than shrinking. At these sizes the SVG type falls below the Twelve Pixel
   Floor; accepted deliberately (DECISIONS.md 2026-08-25): on mobile the
   diagram is a decorative signature - pointer-events:none, the aria-label
   carries the path - and one-screen fit won over label legibility. The
   policy row is back: it was dropped only because the old 215% zoom left no
   width for five columns, and at whole-canvas scale the complete graph
   fits. */
@media (max-width:767px){
  .hero{min-height:0}
  /* Rows: h1, diagram, lead, sub, buttons (the visual order set above).
     The bottom padding keeps the buttons off the fold. */
  .hero-grid{min-height:calc(100svh - var(--header-h) - 20px);grid-template-rows:auto 1fr auto auto auto;padding-bottom:16px}
  .hero .trust-strip{background:var(--strip-bg)}
  .hero h1{margin-bottom:0}
  .hero-copy p{margin-bottom:12px}
  .hero-copy p.sub{margin-bottom:20px}
  /* Cap: 420px, or more where the screen is wide enough that the compact
     graph's content (406 of its 466 viewBox units) still fits edge to edge -
     sm and tall phones, which otherwise left a gap under a capped graph. */
  .hero-visual{aspect-ratio:auto;align-self:stretch;height:auto;min-height:180px;max-height:max(420px,calc((100vw - 12px) * 440 / 406));margin-bottom:0}
  /* Flex centring, unlike auto margins, keeps centring when the SVG is wider
     than the column, so the overflow splits evenly between both sides. */
  .attackpath{display:flex;justify-content:center}
  .attackpath .ap-full{display:none}
  .attackpath .ap-compact{display:block;flex:none;width:auto;height:100%;aspect-ratio:466/440;margin:0 auto}
}
/* xs only: the hero h1 sits 10px higher than on sm (header + 10px, not + 20px).
   The grid's one-screen height takes the same 10px so the hero still ends at
   the fold; the diagram row absorbs it. */
@media (max-width:639px){
  .hero{padding-top:calc(var(--header-h) + 10px)}
  .hero-grid{min-height:calc(100svh - var(--header-h) - 10px)}
}