/* Tartan - Website, round 2 (SITE3): version I led by the technology. Loaded after site.css. */

/* the full-sized banner hero (from II), on version I's page */
.w-hero--banner, .w-hero--panel { position: relative; min-height: 700px; display: flex; flex-direction: column; overflow: hidden; }
.w-hero--banner > .w-cloth, .w-hero--panel > .w-cloth, .w-close--cloth > .w-cloth { position: absolute; inset: 0; }
.w-hero--banner .w-veil { background: linear-gradient(180deg, rgba(8,13,26,.62) 0%, rgba(8,13,26,.25) 28%, rgba(8,13,26,.70) 70%, rgba(8,13,26,.92) 100%); }
.w-I .w-nav--over { position: relative; z-index: 3; background: transparent; box-shadow: none; color: var(--t-cream); }
.w-nav--over .w-brand { color: var(--t-cream) !important; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.w-hero--banner .w-words { position: relative; z-index: 2; margin-top: auto; padding: 0 48px 72px; max-width: 1040px; }
.w-hero--banner .w-tag { font: 600 15px/20px var(--t-font-product); color: var(--t-gold); letter-spacing: .08em; text-transform: uppercase; }
.w-hero--banner h1 { font-size: 76px; line-height: 80px; color: var(--t-cream); margin: 18px 0 24px; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.w-hero--banner .w-lede { color: #E2DED3; max-width: 700px; margin: 0 0 32px !important; font-size: 20px; line-height: 31px; }
.w-hero--banner .w-side, .w-close--cloth .w-side { color: var(--t-gold); }
.w-hero--banner .w-free { color: #C9C5BA; margin-top: 18px; }
.w-hero--banner .w-free code, .w-close--cloth code { color: var(--t-cream); }

/* the panel option: the console sign-in's panel, floated on the full banner */
.w-hero--panel .w-veil { background: linear-gradient(90deg, rgba(8,13,26,.25) 0%, rgba(8,13,26,.45) 55%, rgba(8,13,26,.75) 100%); }
.w-heroin { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1fr minmax(440px, 520px); gap: 48px;
  align-items: end; padding: 24px 48px 64px; }
.w-heroin > * { min-width: 0; }
.w-heroin .w-words { padding-bottom: 8px; }
.w-heroin .w-panel { display: grid; gap: 20px; padding: 40px 40px 36px; background: var(--t-surface); border-left: 3px solid var(--t-gold);
  box-shadow: 0 24px 60px rgba(0,0,0,.40); }
.w-heroin .w-panel h1 { font-size: 44px; line-height: 48px; }
.w-heroin .w-panel .w-lede { margin: 0 !important; font-size: 17px; line-height: 27px; }

/* the comparison */
.w-tablewrap { overflow-x: auto; }
.w-cmp { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.w-cmp th, .w-cmp td { text-align: left; padding: 16px 18px; border-top: 1px solid color-mix(in srgb, var(--t-ink) 12%, transparent); vertical-align: top; }
.w-cmp thead th { font: 600 12px/16px var(--t-font-product); letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); border-top: 0; }
.w-cmp tbody th { font: 700 19px/26px var(--t-font-brand); width: 22%; }
.w-cmp td { color: var(--t-muted); width: 39%; }
.w-cmp td:last-child { color: var(--t-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--t-gold); background: color-mix(in srgb, var(--t-surface) 60%, transparent); }

/* control: words beside the console */
.w-split2 { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.w-split2 > * { min-width: 0; }
.w-ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.w-ticks li { padding-left: 26px; position: relative; color: var(--t-muted); }
.w-ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; background: var(--t-gold); transform: rotate(45deg); }
.w-ticks b { color: var(--t-ink); }

/* the close on the cloth */
.w-close--cloth { position: relative; overflow: hidden; color: var(--t-cream); padding: 120px 0; }
.w-close--cloth .w-veil { background: rgba(8,13,26,.62); }
.w-close--cloth .w-wrap { position: relative; z-index: 2; }
.w-close--cloth h2 { font-size: 68px !important; line-height: 72px !important; color: var(--t-cream); text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.w-close--cloth .w-lede { color: #E2DED3; margin: 14px auto 0 !important; }

/* the diagram: every color from the theme tokens */
.w-fig { margin: 0 0 40px; }
.w-figin { overflow-x: auto; background: var(--t-card); border-radius: 12px; padding: 20px; }
.w-fig svg { display: block; width: 100%; min-width: 640px; height: auto; font-family: var(--t-font-product); }
.w-fig .d-site rect { fill: var(--t-surface); stroke: color-mix(in srgb, var(--t-ink) 14%, transparent); stroke-width: 1.5; }
.w-fig .d-cp rect { fill: var(--t-header); }
.w-fig .d-cp .d-t { fill: var(--t-on-header); font: 700 19px var(--t-font-brand); text-anchor: middle; }
.w-fig .d-cp .d-s { fill: var(--t-on-header); opacity: .75; text-anchor: middle; }
.w-fig .d-ctl path { stroke: var(--t-muted); stroke-width: 1.5; stroke-dasharray: 5 6; fill: none; }
.w-fig .d-mesh path { stroke: var(--t-gold); stroke-width: 3; fill: none; }
.w-fig .d-dev rect { fill: var(--t-loch); } .w-fig .d-dev .d-gw { fill: var(--t-forest); }
.w-fig .d-n { fill: #FFFFFF; font-size: 14px; font-weight: 600; text-anchor: middle; }
.w-fig .d-h { fill: var(--t-ink); font: 700 18px var(--t-font-brand); }
.w-fig .d-m { fill: var(--t-muted); font: 12px var(--t-font-mono); }
.w-fig .d-legacy .d-m { text-anchor: middle; }
.w-fig .d-legacy rect { fill: var(--t-card); stroke: var(--t-muted); stroke-width: 1; }
.w-fig .d-legacy path { stroke: var(--t-muted); stroke-width: 1.5; }
.w-fig .d-s { fill: var(--t-muted); font-size: 13px; }
.w-fig figcaption { margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--t-muted); }
.d-k { display: inline-block; width: 22px; height: 0; vertical-align: middle; margin-right: 6px; }
.d-k--mesh { border-top: 3px solid var(--t-gold); } .d-k--ctl { border-top: 2px dashed var(--t-muted); }

/* the selling-points sheet (a view of guidelines/selling-points.md) */
.w-sheet { max-width: 1120px; margin: 0 auto; padding: 48px 48px 72px; display: grid; gap: 14px; }
.w-sheet h1 { font-size: 40px; line-height: 46px; }
.w-sheet h2 { font-size: 26px; line-height: 32px; margin-top: 26px; }
.w-sheet p { color: var(--t-muted); font-size: 16px; line-height: 25px; max-width: 900px; }
.w-sheet p.li { padding-left: 18px; position: relative; }
.w-sheet p.li::before { content: "\2022"; position: absolute; left: 2px; color: var(--t-gold); }
.w-sp { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.w-sp th { text-align: left; font: 600 11px/16px var(--t-font-product); letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); padding: 8px 10px; }
.w-sp td { padding: 10px; border-top: 1px solid color-mix(in srgb, var(--t-ink) 12%, transparent); vertical-align: top; }
.w-sp td:first-child { font-weight: 600; width: 20%; } .w-sp td:nth-child(2) { width: 32%; }
.w-sp td.st { font-weight: 600; }

/* icons (Lucide, ISC): a navy disc with a gold ring, as the console draws its seal */
.w-icobox { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--t-loch);
  color: var(--t-gold); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--t-gold) 55%, transparent); }
.w-ico { width: 26px; height: 26px; }
.w-item--ico { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }

/* the overlay explainer (overlay above, the networks underneath) */
.w-fig .o-band { fill: var(--t-header); } .w-fig .o-edge { stroke: var(--t-gold); stroke-width: 3; }
.w-fig .o-eye { fill: var(--t-gold); font: 700 14px var(--t-font-product); letter-spacing: .16em; }
.w-fig .o-sub { fill: var(--t-on-header); opacity: .8; font-size: 14px; }
.w-fig .o-mono { fill: var(--t-on-header); opacity: .8; font: 13px var(--t-font-mono); }
.w-fig .o-line { stroke: var(--t-gold); stroke-width: 4; }
.w-fig .o-drop { stroke: var(--t-muted); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.w-fig .o-node { fill: var(--t-loch); stroke: var(--t-gold); stroke-width: 2.5; }
.w-fig .o-ic { color: var(--t-cream); stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.w-fig .o-ic * , .w-fig .o-lk *, .w-fig .u-ic *, .w-fig .u-gwi * { vector-effect: non-scaling-stroke; }
.w-fig .o-lock { fill: var(--t-forest); stroke: var(--t-header); stroke-width: 2; }
.w-fig .o-lk { stroke: #FFFFFF; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.w-fig .o-name { fill: var(--t-on-header); font: 600 13px var(--t-font-mono); text-anchor: middle; }
.w-fig .o-pill { fill: var(--t-surface); stroke: var(--t-gold); stroke-width: 1.5; }
.w-fig .o-pt { fill: var(--t-ink); font: 700 16px var(--t-font-brand); text-anchor: middle; }
.w-fig .u-band { fill: var(--t-surface); stroke: color-mix(in srgb, var(--t-ink) 14%, transparent); stroke-width: 1.5; }
.w-fig .u-eye { fill: var(--t-muted); font: 700 14px var(--t-font-product); letter-spacing: .16em; }
.w-fig .u-red { fill: var(--t-error); font: 600 13px var(--t-font-mono); }
.w-fig .u-arc { stroke: var(--t-error); stroke-width: 1.4; fill: none; opacity: .75; }
.w-fig .u-hub { stroke: var(--t-error); stroke-width: 1.2; fill: none; opacity: .45; stroke-dasharray: 4 4; }
.w-fig .u-site { fill: var(--t-card); stroke: color-mix(in srgb, var(--t-ink) 18%, transparent); stroke-width: 1.2; }
.w-fig .u-ic { stroke: var(--t-muted); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.w-fig .u-nm { fill: var(--t-ink); font: 700 14px var(--t-font-product); text-anchor: middle; }
.w-fig .u-net { fill: var(--t-muted); font: 11px var(--t-font-mono); text-anchor: middle; }
.w-fig .u-net.u-clash { fill: var(--t-error); font-weight: 600; }
.w-fig .u-gw { fill: var(--t-surface); stroke: var(--t-error); stroke-width: 2; }
.w-fig .u-gwi { stroke: var(--t-error); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w-fig .u-any { fill: var(--t-muted); font: italic 12px var(--t-font-product); text-anchor: middle; }

@container (max-width: 760px) {
  .w-hero--banner, .w-hero--panel { min-height: 640px; }
  .w-item--ico { grid-template-columns: 44px 1fr; gap: 14px; } .w-item--ico .w-icobox { width: 44px; height: 44px; }
  .w-hero--banner .w-words { padding: 0 20px 44px; }
  .w-hero--banner h1 { font-size: 44px; line-height: 48px; }
  .w-hero--banner .w-lede { font-size: 17px; line-height: 27px; }
  .w-heroin { grid-template-columns: 1fr; padding: 16px 12px 24px; gap: 20px; }
  .w-heroin .w-wordmark { font-size: 52px; }
  .w-heroin .w-panel { padding: 26px 20px; }
  .w-heroin .w-panel h1 { font-size: 32px; line-height: 36px; }
  .w-split2 { grid-template-columns: 1fr; gap: 32px; }
  .w-close--cloth { padding: 72px 0; }
  .w-close--cloth h2 { font-size: 42px !important; line-height: 46px !important; }
  .w-cmp { min-width: 560px; } .w-cmp tbody th { width: auto; }
  .w-sheet { padding: 28px 20px 48px; }
}