/* calm.css · the shared page parts we arrived at on /compare (2026-10-03), so other pages can take the same taste: our theme (dark hero, white
   middle, dark close), ElevenLabs' composition and restraint, Cursor's calm type. Scoped to body.elv; loaded after type-calm.css.
   Learnings it carries (user feedback on /compare): keep our colours ("retain our theme but get the aesthetic"); no frame lines; light (300)
   display headings set left, the line and the pills to the right; one-line closing band; clean cards, little copy; a featured surface is
   lifted by tone (an elevated dark surface) or by one of our paintings with the crisp 1:1 grain tile over a smooth field, never by baked grain;
   text at 4.5:1 or better. /compare keeps its own copy of these in compare.css for now (cmp-* names). */
body.elv main>section.cl-dk{background:var(--dk);color:#fff}

/* pills */
body.elv main .btn{height:40px;padding:0 18px;font-size:15px}
body.elv main .btn-primary{background:var(--ink);color:#fff}
body.elv main .btn-primary:hover{background:#34322c}
body.elv main .btn-outline{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
body.elv main .btn-outline:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
body.elv main .btn-white{background:#fff;color:var(--ink)}
body.elv main .btn-white:hover{background:#e9e9e7}
body.elv main .btn-ghost-line{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff}
body.elv main .btn-ghost-line:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}

/* hero: a light headline left, the line and the pills right */
body.elv .cl-hero{padding:72px 0 96px}
body.elv .cl-crumb ol{display:flex;gap:8px;margin:0 0 40px;padding:0;list-style:none;font-size:14px;line-height:20px;color:rgba(255,255,255,.55)}
body.elv .cl-crumb li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.25)}
body.elv .cl-crumb a{transition:color .15s}
body.elv .cl-crumb a:hover{color:#fff}
body.elv .cl-crumb [aria-current]{color:rgba(255,255,255,.75)}
body.elv .cl-hgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:80px;align-items:end}
body.elv .cl-h1{max-width:660px;margin:0;font-size:52px;line-height:58px;font-weight:300;letter-spacing:-.032em;color:#fff}
body.elv .cl-hside{max-width:470px;padding-bottom:4px}
body.elv .cl-lede{margin:0;font-size:17px;line-height:27px;letter-spacing:-.002em;color:rgba(255,255,255,.62)}
body.elv .cl-hside .ctas{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;justify-content:flex-start}

/* sections and heads */
body.elv .cl-sec{padding:104px 0}
body.elv .cl-shead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:80px;align-items:end}
body.elv .cl-h2{margin:0;font-size:38px;line-height:44px;font-weight:300;letter-spacing:-.025em;color:var(--ink)}
body.elv .cl-h2 .dim{display:block;color:var(--ink-60)}
body.elv .cl-p{max-width:470px;margin:0;font-size:16px;line-height:25px;color:var(--ink-60)}
body.elv .cl-dk .cl-h2{color:#fff}
body.elv .cl-dk .cl-h2 .dim{color:rgba(255,255,255,.55)}
body.elv .cl-dk .cl-p{color:rgba(255,255,255,.62)}

/* faq: the heading left, the questions right, a chevron each */
body.elv .cl-faq .faqwrap{grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:64px}
body.elv .cl-faq .links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:28px}
body.elv .faq{border-top:1px solid rgba(0,0,0,.08)}
body.elv .faq details{border-bottom:1px solid rgba(0,0,0,.08)}
body.elv .faq summary{min-height:60px;padding:16px 0;font-size:16px;line-height:24px;color:var(--ink)}
body.elv .faq summary .pm{width:10px;height:10px;color:var(--ink-60)}
body.elv .faq summary .pm::before{display:none}
body.elv .faq summary .pm::after{left:1px;top:0;width:7px;height:7px;background:none;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg)}
body.elv .faq details[open] summary .pm{transform:rotate(180deg) translateY(-3px)}
body.elv .faq details p{font-size:15px;line-height:24px;color:var(--ink-60)}

/* close: one line left, the pill pair right */
body.elv .cl-band{padding:56px 0 64px}
body.elv .cl-band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
body.elv .cl-band h2{margin:0;font-size:30px;line-height:38px;font-weight:300;letter-spacing:-.02em;color:#fff}
body.elv .cl-band h2 span{color:rgba(255,255,255,.55)}
body.elv .cl-band .ctas{display:flex;flex-wrap:wrap;gap:8px}

/* a featured surface on one of our paintings: a smooth field (tools/gen_silk.py, grain=0) with the crisp 1:1 grain tile over it */
body.elv .cl-paint{background:url(/assets/grain-tile.png) 0 0/128px 128px repeat,#07080c var(--cl-paint) var(--cl-pos,50% 50%)/var(--cl-size,cover) no-repeat;color:#fff}

@media (max-width:1100px){
  body.elv .cl-hgrid,body.elv .cl-shead{column-gap:48px}
  body.elv .cl-h1{font-size:46px;line-height:52px}
}
@media (max-width:900px){
  body.elv .cl-hgrid,body.elv .cl-shead{grid-template-columns:minmax(0,1fr);row-gap:24px}
  body.elv .cl-faq .faqwrap{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:760px){
  body.elv .cl-hero{padding:44px 0 64px}
  body.elv .cl-crumb ol{margin-bottom:28px}
  body.elv .cl-h1{font-size:36px;line-height:42px;letter-spacing:-.026em}
  body.elv .cl-sec{padding:72px 0}
  body.elv .cl-h2{font-size:30px;line-height:36px}
  body.elv .cl-band h2{font-size:24px;line-height:31px}
}

/* ---- added with /company (2026-10-04, hawcx-page-layouts components.md) ---- */
/* section head variant: the heading and a prose column top-aligned (mission, statements) */
body.elv .cl-shead.is-top{align-items:start}
body.elv .cl-prose{max-width:560px}
body.elv .cl-prose p{margin:0;font-size:17px;line-height:28px;letter-spacing:-.002em;color:var(--ink-80)}
body.elv .cl-prose p+p{margin-top:16px}

/* cl-tools: stone stages that each hold one asset, the title and a caption under the card (#6; 2-up with --2) */
body.elv .cl-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:56px 0 0;padding:0;list-style:none}
body.elv .cl-tools--2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.elv .cl-tool-stage{position:relative;display:grid;place-items:center;aspect-ratio:16/11;border-radius:18px;background:var(--stone);overflow:hidden}
body.elv .cl-tool>h3{margin:18px 0 0;font-size:17px;line-height:24px;letter-spacing:-.005em;color:var(--ink)}
body.elv .cl-tool>p{margin:4px 0 0;max-width:440px;font-size:15px;line-height:23px;color:var(--ink-60)}
body.elv .cl-tool>.tlink{display:inline-flex;margin-top:12px;color:var(--ink)}

/* cl-fgrid: a two-tone heading left, a 2x2 of short items right on dotted rules; type only, a rest (#9) */
body.elv .cl-fgrid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);column-gap:64px;align-items:start}
body.elv .cl-fgrid dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px;margin:0}
body.elv .cl-fgrid dl>div{padding-top:16px;border-top:1px dotted var(--ink-15)}
body.elv .cl-fgrid dt{font-size:16px;line-height:24px;color:var(--ink)}
body.elv .cl-fgrid dd{margin:6px 0 0;font-size:15px;line-height:23px;color:var(--ink-60)}

/* cl-rows: a list with no cards; the whole row is the link (#1). --dated puts a date column first */
body.elv .cl-rows{margin:0;padding:0;list-style:none;border-top:1px dotted var(--ink-15)}
body.elv .cl-row{display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,1fr) auto;column-gap:32px;align-items:baseline;padding:18px 0;border-bottom:1px dotted var(--ink-15)}
body.elv .cl-row .t{font-size:16px;line-height:24px;color:var(--ink)}
body.elv .cl-row .l{font-size:15px;line-height:23px;color:var(--ink-60)}
body.elv .cl-row .m{font-size:14px;line-height:20px;color:var(--ink-60);white-space:nowrap}
body.elv .cl-row .cl-ar{color:var(--ink-60);transition:transform .2s var(--ease),color .2s}
body.elv a.cl-row:hover .cl-ar{transform:translateX(2px);color:var(--ink)}
body.elv a.cl-row:hover .t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
body.elv .cl-rows--dated .cl-row{grid-template-columns:132px minmax(0,1fr) auto}
body.elv .cl-rows-more{display:flex;justify-content:flex-end;margin-top:20px}
@media (max-width:900px){
  body.elv .cl-fgrid{grid-template-columns:minmax(0,1fr);row-gap:32px}
  body.elv .cl-tools,body.elv .cl-tools--2{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:760px){
  body.elv .cl-fgrid dl{grid-template-columns:minmax(0,1fr);gap:24px}
  body.elv .cl-row,body.elv .cl-rows--dated .cl-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  body.elv .cl-row .l{grid-column:1 / -1;grid-row:2}
  body.elv .cl-tool-stage{aspect-ratio:auto;min-height:260px;padding:48px 0}
  body.elv .cl-rows--dated .cl-row .m{grid-column:1;grid-row:1}
  body.elv .cl-rows--dated .cl-row .t{grid-column:1;grid-row:2}
  body.elv .cl-rows--dated .cl-row .cl-ar{grid-column:2;grid-row:1 / 3;align-self:center}
  body.elv .cl-prose p{font-size:16px;line-height:26px}
}

/* ---- added with /careers (2026-10-04) ---- */
/* cl-elev: the approved highlight on dark, an elevated surface (components.md #4; values from compare's .cmt-panel) */
body.elv .cl-elev{background:#262628;border-radius:18px;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.05),0 30px 60px -30px rgba(0,0,0,.75)}

/* cl-many: name many, explain one (#7). The list names every item as a dim heading; one is open (ink + one line) and the stage beside it
   shows that item's asset. With data-cl-many, calm-many.js advances on its own while in view (a 1px progress rule fills under the open
   item), stops for good once someone clicks, and ?sim=N / reduced motion hold item N (or the first). */
body.elv .cl-many{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:80px;align-items:center;margin-top:56px}
body.elv .cl-many-list{margin:0;padding:0;list-style:none}
body.elv .cl-many-item{position:relative;padding:18px 0;border-top:1px dotted var(--ink-15)}
body.elv .cl-many-item:last-child{border-bottom:1px dotted var(--ink-15)}
body.elv .cl-many-item h3{margin:0;font-size:24px;line-height:32px;font-weight:300;letter-spacing:-.015em}
body.elv .cl-many-btn{display:block;width:100%;padding:0;text-align:left;color:var(--ink-40);cursor:pointer;transition:color .3s var(--ease)}
body.elv .cl-many-btn:hover{color:var(--ink-60)}
body.elv .cl-many-item.is-on .cl-many-btn{color:var(--ink)}
body.elv .cl-many-item>p{margin:0;max-height:0;overflow:hidden;opacity:0;font-size:15px;line-height:23px;color:var(--ink-60);
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin-top .5s var(--ease)}
body.elv .cl-many-item.is-on>p{max-height:92px;margin-top:6px;opacity:1}
body.elv .cl-many-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden}
body.elv .cl-many-bar::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
body.elv .cl-many.is-run .cl-many-item.is-on .cl-many-bar::after{animation:clManyBar var(--dwell,5200ms) linear forwards}
@keyframes clManyBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
body.elv .cl-stage{position:relative;aspect-ratio:5/4;border-radius:18px;background:var(--stone);overflow:hidden}
body.elv .cl-stage>[data-panel]{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
body.elv .cl-stage>[data-panel].is-on{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){body.elv .cl-stage>[data-panel],body.elv .cl-many-item>p{transition:none}}
@media (max-width:900px){
  body.elv .cl-many{grid-template-columns:minmax(0,1fr);row-gap:32px}
  body.elv .cl-many .cl-stage{order:-1}
}
@media (max-width:760px){
  body.elv .cl-many-item h3{font-size:20px;line-height:28px}
}

/* cl-film: a full-width media card that plays its scenes on its own, with caption rails under the scene (components.md #5, the
   progress-caption tray). Driven by calm-many.js like cl-many: the steps are .cl-many-item, the scenes [data-panel]. Sits on cl-elev in
   a dark hero (careers) or on stone in the white middle (.cl-film--stone). */
body.elv .cl-film{position:relative;padding:26px 32px 0;border-radius:24px;overflow:hidden}
body.elv .cl-film-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
body.elv .cl-film-hd h2{margin:0;font-size:20px;line-height:28px;font-weight:300;letter-spacing:-.01em;color:#fff}
body.elv .cl-film-hd p{margin:0;font-size:14px;line-height:20px;color:rgba(255,255,255,.55)}
body.elv .cl-film-scene{position:relative;height:380px}
body.elv .cl-film-scene>[data-panel]{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
body.elv .cl-film-scene>[data-panel].is-on{opacity:1;transform:none}
body.elv .cl-film-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0 0 28px;list-style:none}
body.elv .cl-film .cl-many-item{padding:16px 0 0;border:0}
body.elv .cl-film .cl-many-item::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
body.elv .cl-film .cl-many-bar{top:0;bottom:auto;height:2px;border-radius:2px}
body.elv .cl-film .cl-many-bar::after{background:#fff}
body.elv .cl-film .cl-many-item.is-on .cl-many-bar::after{transform:scaleX(1)}
body.elv .cl-film .cl-many-item h3{font-size:15px;line-height:22px;font-weight:400;letter-spacing:0}
body.elv .cl-film .cl-many-btn{color:rgba(255,255,255,.5)}
body.elv .cl-film .cl-many-btn:hover{color:rgba(255,255,255,.75)}
body.elv .cl-film .cl-many-item.is-on .cl-many-btn{color:#fff}
body.elv .cl-film .cl-many-item>p{max-height:none;margin-top:4px;opacity:1;font-size:13px;line-height:20px;color:rgba(255,255,255,.46);transition:color .3s var(--ease)}
body.elv .cl-film .cl-many-item.is-on>p{color:rgba(255,255,255,.7)}
@media (prefers-reduced-motion:reduce){body.elv .cl-film-scene>[data-panel]{transition:none}}
@media (max-width:900px){body.elv .cl-film-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}}
@media (max-width:760px){
  body.elv .cl-film{padding:20px 18px 0;border-radius:18px}
  body.elv .cl-film-hd p{display:none}
  body.elv .cl-film-scene{height:300px}
  body.elv .cl-film-steps{gap:16px;padding-bottom:20px}
  body.elv .cl-film .cl-many-item>p{display:none}
}

/* cl-icols: icon columns. A square icon box (56px, radius 14, 1px ring, one line icon), a title and one line under it, in 2-4 columns
   separated by space only (no frame lines). User-approved 2026-10-04 ("just have those square boxes", the ElevenLabs outcome columns).
   Works on white and inside dark surfaces (.cl-dk, .cl-elev). */
body.elv .cl-icols{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:40px 32px;margin:0;padding:0;list-style:none}
body.elv .cl-ibox{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 1px 2px rgba(0,0,0,.04);color:var(--ink)}
body.elv .cl-ibox svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.elv .cl-icol h3{margin:28px 0 0;font-size:18px;line-height:26px;font-weight:400;letter-spacing:-.005em;color:var(--ink)}
body.elv .cl-icol p{margin:8px 0 0;max-width:300px;font-size:15px;line-height:23px;color:var(--ink-60)}
body.elv :is(.cl-dk,.cl-elev) .cl-ibox{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff}
body.elv :is(.cl-dk,.cl-elev) .cl-icol h3{color:#fff}
body.elv :is(.cl-dk,.cl-elev) .cl-icol p{color:rgba(255,255,255,.62)}
@media (max-width:1100px){body.elv .cl-icols{grid-template-columns:repeat(min(var(--cols,4),2),minmax(0,1fr))}}
@media (max-width:600px){body.elv .cl-icols{grid-template-columns:minmax(0,1fr);gap:32px}body.elv .cl-icol h3{margin-top:20px}}

/* cl-icols--ruled: the same columns as cells, a hairline over the row and a divider between cells, inside their card only (user,
   2026-10-04: "theres no clear distinction of the areas, when placed beside each other without a divider"). The card's own padding is
   0; its header and the cells carry the padding so the lines run edge to edge inside the card. Never extended to page frame lines. */
body.elv .cl-icols--ruled{--rule:var(--ink-08);gap:0;border-top:1px solid var(--rule)}
body.elv :is(.cl-dk,.cl-elev) .cl-icols--ruled{--rule:rgba(255,255,255,.09)}
body.elv .cl-icols--ruled>.cl-icol{padding:36px 32px 40px}
body.elv .cl-icols--ruled>.cl-icol+.cl-icol{border-left:1px solid var(--rule)}
@media (max-width:1100px){
  body.elv .cl-icols--ruled>.cl-icol:nth-child(odd){border-left:0}
  body.elv .cl-icols--ruled>.cl-icol:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:600px){
  body.elv .cl-icols--ruled>.cl-icol{padding:28px 22px 32px}
  body.elv .cl-icols--ruled>.cl-icol+.cl-icol{border-left:0;border-top:1px solid var(--rule)}
}

/* cl-icols--ruled in three columns over two or more rows (cl-icols--3): dividers between cells in a row, a hairline between rows */
body.elv .cl-icols--ruled.cl-icols--3>.cl-icol:nth-child(3n+1){border-left:0}
body.elv .cl-icols--ruled.cl-icols--3>.cl-icol:nth-child(n+4){border-top:1px solid var(--rule)}
body.elv .cl-icols--ruled.cl-icols--3{border-bottom:1px solid var(--rule)}
@media (max-width:1100px){
  body.elv .cl-icols--ruled.cl-icols--3>.cl-icol{border-left:0;border-top:0}
  body.elv .cl-icols--ruled.cl-icols--3>.cl-icol:nth-child(even){border-left:1px solid var(--rule)}
  body.elv .cl-icols--ruled.cl-icols--3>.cl-icol:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:600px){
  body.elv .cl-icols--ruled.cl-icols--3>.cl-icol:nth-child(even){border-left:0}
  body.elv .cl-icols--ruled.cl-icols--3>.cl-icol+.cl-icol{border-top:1px solid var(--rule)}
}

/* ---- added with /industries/retail v2 (2026-10-04) ---- */
/* cl-tabs: segment tabs over a panel (components.md #8). A quiet stone track with a white active pill; panels use the hidden attribute so
   every panel's headings stay in the DOM; arrow keys move between tabs (calm-tabs.js). Under 760 the track scrolls inside itself. */
body.elv .cl-tabs{display:inline-flex;gap:2px;max-width:100%;padding:4px;border-radius:999px;background:var(--stone);overflow-x:auto;scrollbar-width:none}
body.elv .cl-tabs::-webkit-scrollbar{display:none}
body.elv .cl-tab{flex:none;height:36px;padding:0 16px;border:0;border-radius:999px;background:none;font:400 14px/20px var(--sans);color:var(--ink-60);cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
body.elv .cl-tab:hover{color:var(--ink)}
body.elv .cl-tab[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}
body.elv .cl-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body.elv .cl-tabpanel[hidden]{display:none}
body.elv .cl-tabpanel.is-in{animation:clTabIn .35s var(--ease) both}
@keyframes clTabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.elv .cl-tabpanel.is-in{animation:none}}