/* altiratech.com visual system, thread 19 (16 Oct 2026). Light first; dark blue for product media and one band.
   Colors come from the app's light and dark palettes (apps/web/src/shared/workspace-design.css on master). */
@font-face{font-family:'Altira Inter';font-weight:100 900;font-display:swap;src:url('/site-fonts/InterVariable-4.1.woff2') format('woff2')}
@font-face{font-family:'Altira Open Sans';font-weight:400;font-display:swap;src:url('/site-fonts/open-sans-latin-400-normal.woff2') format('woff2')}

:root{
  /* light: the app's slate light palette */
  --page:#fbfdfe;        /* app input white: the page */
  --panel:#eaf1f5;       /* app form surface: panels that hold diagrams and fragments */
  --panel-2:#e0eaf0;     /* app sidebar: a step deeper */
  --action:#dee8ee;      /* app action fill: secondary button, diagram nodes */
  --rule:#d2dfe7;        /* hairlines between things */
  --edge:#adbfcc;        /* control edges, chips */
  --hair:rgb(23 59 79 / .10);
  --ink:#142530;         /* text, 15.4:1 on page */
  --ink-2:#5a6d7a;       /* second sentence, captions, 5.3:1 on page, 4.7:1 on panel */
  --link:#315d7a;        /* app link */
  /* dark: Ryan's dark blue */
  --navy:#173b4f;        /* the dark band */
  --well:#10293a;        /* product media frames; the flat color thread 17's clips are rendered on */
  --navy-ink:#f1f5f8;
  --navy-ink-2:#b8c9d4;  /* 7.0:1 on navy */
  --navy-rule:#2b576e;
  --navy-line:#9fb6c4;   /* line art on dark */
  /* brand */
  --amber:#cd940d;       /* wordmark brackets; in diagrams, the bracket that marks what decides */
  --sans:'Altira Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1312px; --gut:64px; --sec:128px;
  --r-frame:12px; --r-btn:4px; --r-chip:4px;
}
@media (max-width:1024px){:root{--gut:40px;--sec:104px}}
@media (max-width:600px){:root{--gut:20px;--sec:80px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--page);color:var(--ink);-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--page);color:var(--ink);font:400 16px/24px var(--sans);font-feature-settings:'cv11' 1,'ss03' 1;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,video,svg{display:block;max-width:100%}
.wrap{max-width:calc(var(--wrap) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* hidden always hides, also on controls whose styles reset display (all:unset) */
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}

/* ---------- type: one family, two weights; hierarchy from size and the second tone ---------- */
.t-display{margin:0;font-weight:500;font-size:64px;line-height:68px;letter-spacing:-.024em}
.t-h2{margin:0;font-weight:500;font-size:48px;line-height:52px;letter-spacing:-.021em}
.t-h3{margin:0;font-weight:500;font-size:30px;line-height:36px;letter-spacing:-.016em}
.t-h4{margin:0;font-weight:500;font-size:21px;line-height:28px;letter-spacing:-.011em}
.t-lead{margin:0;font-size:20px;line-height:30px;letter-spacing:-.006em;color:var(--ink-2)}
.t-body{margin:0;font-size:16px;line-height:24px;color:var(--ink-2)}
.t-small{margin:0;font-size:14px;line-height:20px;color:var(--ink-2)}
.t-label{margin:0;font-weight:600;font-size:11.5px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.tone{color:var(--ink-2)}
.dark .tone{color:var(--navy-ink-2)}
@media (max-width:600px){
  .t-display{font-size:40px;line-height:44px;letter-spacing:-.022em}
  .t-h2{font-size:32px;line-height:36px;letter-spacing:-.018em}
  .t-h3{font-size:25px;line-height:30px}
  .t-lead{font-size:18px;line-height:27px}
}

/* ---------- the wordmark: its own Open Sans lettering, amber brackets ---------- */
.wm{position:relative;display:inline-block;font:400 18px/24px 'Altira Open Sans',Arial,sans-serif;letter-spacing:.22em;padding:0 2px 0 10px;text-decoration:none;white-space:nowrap;color:var(--ink)}
.wm::before,.wm::after{content:'';position:absolute;top:0;bottom:0;width:5px;border-top:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber)}
.wm::before{left:0;border-left:1.5px solid var(--amber)}.wm::after{right:0;border-right:1.5px solid var(--amber)}

/* ---------- buttons: the site's own (Ryan, Oct 16: the app's raised look need not carry over). Flat fills, never an outline.
   Buttons drawn inside pictures of the app (.chip.b) stay raised, because that is how the app draws them. ---------- */
.btn{--h:40px;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:var(--h);padding:0 16px;border:0;border-radius:var(--r-btn);
  font:500 15px/1 var(--sans);letter-spacing:-.003em;color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;
  background:#dbe5ec;transition:background-color .15s ease,color .15s ease}
.btn:hover{background:#cddbe5}
.btn:active{background:#c2d3df}
.btn-lg{--h:48px;padding:0 22px;font-size:16px}
.btn-sm{--h:34px;padding:0 13px;font-size:14px}
.btn-primary{color:#fff;background:var(--navy)}
.btn-primary:hover{background:#21506a}
.btn-primary:active{background:#12303f}
.dark .btn,.well .btn{color:var(--navy-ink);background:#2b5d78}
.dark .btn:hover,.well .btn:hover{background:#356b88}
.dark .btn-primary{color:var(--well);background:#f1f5f8}
.dark .btn-primary:hover{background:#ffffff}
.well .btn{background:rgb(16 41 58 / .72)}
.btn svg{width:14px;height:14px;flex:none}
/* the second action is a link, not a second box (Ryan, Oct 16: option 2) */
.lnk{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 2px;font:500 16px/1 var(--sans);color:var(--ink);text-decoration:none;cursor:pointer}
.lnk span{border-bottom:1px solid var(--edge);padding-bottom:2px;transition:border-color .15s ease}
.lnk:hover span{border-color:var(--ink)}
.lnk i{display:grid;place-items:center;width:28px;height:28px;border-radius:4px;background:#dbe5ec}
.lnk i svg{width:11px;height:11px}
.dark .lnk{color:var(--navy-ink)}.dark .lnk span{border-color:var(--navy-rule)}.dark .lnk:hover span{border-color:var(--navy-ink)}.dark .lnk i{background:#2b5d78}
.textlink{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--edge);padding-bottom:1px}
.textlink:hover{border-color:var(--ink)}

/* ---------- surfaces ---------- */
.panel{position:relative;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-frame);overflow:hidden}
.panel.dots{background-image:radial-gradient(circle at 1px 1px,rgb(23 59 79 / .13) 1px,transparent 1.2px);background-size:16px 16px;background-position:8px 8px}
.well{position:relative;margin:0;background:var(--well);border-radius:var(--r-frame);overflow:hidden;box-shadow:0 1px 0 rgb(255 255 255 / .5),0 24px 48px -28px rgb(16 41 58 / .55)}
.well video,.well img{width:100%;height:100%;object-fit:cover}
.dark{background:var(--navy);color:var(--navy-ink)}
.dark .t-lead,.dark .t-body,.dark .t-small{color:var(--navy-ink-2)}
.dark .t-label{color:var(--navy-ink)}

/* ---------- diagram kit ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:var(--r-chip);background:var(--page);border:1px solid var(--edge);
  font-size:13.5px;line-height:1;color:var(--ink);white-space:nowrap}
.chip.quiet{background:transparent;border-color:transparent;color:var(--ink-2);padding:0 2px}
.chip.agree{border-color:#9db8c9}
.chip.agree::before{content:'';width:6px;height:6px;border-radius:50%;background:#2f7a55}
.chip.high{height:22px;padding:0 7px;font-size:11px;font-weight:600;letter-spacing:.05em;color:#8b4800;background:#fff0d9;border-color:#e8b980}
/* an app button drawn in a diagram: raised like the app's, never an outline */
.chip.b{border-color:rgb(23 59 79 / .26) rgb(23 59 79 / .32) rgb(23 59 79 / .46);background:linear-gradient(180deg,rgb(255 255 255 / .72),rgb(255 255 255 / 0)),var(--action);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),0 1px 2px rgb(23 59 79 / .2),0 2px 5px -1px rgb(23 59 79 / .14)}
.chip.pressed{background:var(--panel-2);border-color:#7f9bb0;box-shadow:inset 0 1px 2px rgb(23 59 79 / .2)}
.node{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-chip);background:var(--action);border:1px solid var(--edge);color:#425766;flex:none}
.node svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lock{position:relative}
.lock::before,.lock::after{content:'';position:absolute;top:-5px;bottom:-5px;width:7px;border:1.75px solid var(--amber);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.lock::before{left:-7px;border-right:0}.lock::after{right:-7px;border-left:0}
.cursor{position:absolute;pointer-events:none;width:22px;height:22px;z-index:5}
.cursor .tag{position:absolute;left:18px;top:20px;height:22px;padding:0 8px;border-radius:var(--r-chip);background:var(--navy);color:#fff;font-size:12px;line-height:22px;white-space:nowrap}

/* ---------- small marks for the prototype ---------- */
.ph-badge{position:fixed;left:16px;bottom:16px;z-index:60;padding:6px 10px;border-radius:var(--r-chip);background:var(--ink);color:#fff;font-size:12px;line-height:16px;opacity:.88}
.owner{display:inline-block;padding:2px 7px;border:1px dashed var(--edge);border-radius:var(--r-chip);font-size:11px;line-height:16px;color:var(--ink-2);white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{transition-duration:0s !important;animation-duration:0s !important}}