.coming-soon{
  --ink:#17211d;
  --muted:#59665e;
  --line:#e3e9e5;
  --frame-height:96px;
  display:flex;flex-direction:column;min-height:100vh;min-height:100svh
}
/* Include decorative borders in their stated size, just like normal elements. */
.coming-soon *::before,.coming-soon *::after{box-sizing:border-box}
.coming-soon .wrap{width:min(1200px,calc(100% - 96px))}
.coming-soon .site-header{position:static;flex:none;height:var(--frame-height);border-bottom:1px solid var(--line)}
.coming-soon .header-inner{height:100%;min-height:0}
.coming-main{display:flex;align-items:center;flex:1;padding-block:72px 88px}
/* The intro and skip link focus this landmark, not an interactive control. */
.coming-main:focus{outline:none}
.coming-footer{flex:none;height:var(--frame-height);border-top:1px solid var(--line)}
.coming-hero{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:center}
.coming-copy{padding-block:8px}
.coming-eyebrow{margin:0 0 22px;color:var(--excel);font-size:12px;font-weight:600;letter-spacing:.04em}
.coming-copy h1{font-size:clamp(52px,4.8vw,72px);font-weight:500;line-height:1.08;letter-spacing:-1.8px;text-wrap:balance}
.coming-intro{max-width:330px;margin:24px 0 14px;font-size:21px;line-height:1.5;color:var(--ink)}
.coming-note{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.coming-platform{display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:fit-content;margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.coming-visual{min-width:0;margin:0;width:100%;max-width:700px;justify-self:end}
/* An abstract teaser, not an image of the product interface. */
.teaser-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:8/5;min-height:320px;border:1px solid #edf2ee;border-radius:8px;background:#f5f8f6}
.teaser-echo{position:absolute;left:-4%;top:42%;width:34%;height:43%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);border:1px solid #e5ece7;background:#f0f5f1;opacity:.65}
.teaser-echo>span{border-right:1px solid #e5ece7;border-bottom:1px solid #e5ece7}
.teaser-workbook{--row-heading-width:26px;--selection-duration:9s;--ui-edge:#d0d0d0;--ui-line:#dedede;--ui-chrome:#f0f0f0;--ui-font:'Segoe UI',Tahoma,sans-serif;position:absolute;left:9%;top:8%;width:88%;height:84%;display:flex;flex-direction:column;background:var(--ui-chrome);border-radius:5px}
/* Match Excel's order: tabs, ribbon, formula bar, column headings, then cells. */
.teaser-tab{height:32px;flex:none;display:flex;align-items:flex-end;padding-left:48%}
.teaser-tab>span{height:100%;display:flex;align-items:center;padding-inline:2px;border-bottom:2px solid #217346;color:#202020;font-family:var(--ui-font);font-size:11px;font-weight:400}
.teaser-ribbon{flex:none;height:60px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,2.4fr) minmax(0,1.8fr) minmax(0,1.6fr);padding:6px 3px 4px;border:1px solid var(--ui-edge);border-bottom:0;border-radius:5px 5px 0 0;background:#fff}
/* Quiet silhouettes suggest Excel's grouped buttons without disclosing commands. */
.teaser-ribbon-group{position:relative;display:flex;align-items:flex-start;gap:clamp(3px,.5vw,7px);min-width:0;padding:0 clamp(4px,.65vw,8px) 10px;border-right:1px solid #e3e5e4}
.teaser-ribbon-group:last-child{border-right:0}
.teaser-ribbon-group::after{content:'';position:absolute;bottom:1px;left:30%;width:40%;height:3px;border-radius:1px;background:#e4e7e5}
.teaser-ribbon-stack{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.teaser-button-placeholder{display:flex;align-items:center;gap:4px;min-width:0;height:10px}
.teaser-button-placeholder::before{content:'';flex:none;width:9px;height:9px;border:1px solid #dde2df;border-radius:2px;background:#e8ece9}
.teaser-button-placeholder::after{content:'';display:block;width:25px;max-width:100%;min-width:5px;height:3px;border-radius:1px;background:#e3e6e4}
.teaser-button-large{flex:1;flex-direction:column;gap:5px;height:auto;padding-top:1px}
.teaser-button-large::before{width:19px;height:19px;background:#e1e7e3}
.teaser-button-large::after{width:23px}
.teaser-formula-bar{flex:none;height:35px;display:flex;align-items:stretch;gap:4px;padding:4px 5px;border:1px solid var(--ui-edge);border-bottom:0;background:var(--ui-chrome);font-family:var(--ui-font);font-size:11px;line-height:1;color:#000}
.teaser-name-box,.teaser-formula-field{display:flex;align-items:center;border:1px solid #d0d0d0;border-radius:4px;background:#fff}
.teaser-name-box{flex:0 0 64px;justify-content:space-between;gap:4px;padding-inline:6px 2px}
/* These small images are unchanged crops of native Excel controls from the supplied screenshot. */
.teaser-dropdown{display:block;flex:0 0 15px;width:15px;height:11px}
.teaser-formula-grip{display:block;align-self:center;flex:0 0 10px;width:10px;height:15px}
.teaser-formula-actions{display:block;flex:0 0 85px;width:85px;height:26px}
.teaser-formula-field{flex:1;min-width:0;overflow:hidden;justify-content:space-between;gap:4px;padding-inline:8px 2px}
.teaser-value-stack{display:grid;font-variant-numeric:tabular-nums}
.teaser-value-stack>span{grid-area:1/1;white-space:nowrap}
.teaser-value-second{opacity:0}
.teaser-columns{flex:none;height:22px;display:grid;grid-template-columns:var(--row-heading-width) repeat(7,minmax(0,1fr));border:1px solid var(--ui-edge);background:var(--ui-chrome)}
.teaser-columns>span,.teaser-row-headings>span{--rest-fill:var(--ui-chrome);--selected-fill:#e1e1e1;--rest-ink:#252525;--selected-ink:#217346;--rest-line:var(--ui-line);--selected-line:#d0d0d0;position:relative;display:flex;align-items:center;background:var(--rest-fill);color:var(--rest-ink);font-family:var(--ui-font);font-size:10px;line-height:1}
.teaser-columns>span{justify-content:center;border-right:1px solid var(--rest-line)}
.teaser-columns>span:last-child{border-right:0}
.teaser-corner img{display:block;width:16px;height:auto;max-height:100%;object-fit:contain}
.teaser-sheet{flex:1;min-height:0;display:grid;grid-template-columns:var(--row-heading-width) minmax(0,1fr);border:1px solid var(--ui-edge);border-top:0;border-radius:0 0 5px 5px;background:#fff}
.teaser-row-headings{min-height:0;display:grid;grid-template-rows:repeat(8,minmax(0,1fr));border-right:1px solid var(--ui-edge);border-bottom-left-radius:4px;background:var(--ui-chrome)}
.teaser-row-headings>span{justify-content:flex-end;padding-right:6px;border-bottom:1px solid var(--rest-line)}
.teaser-row-headings>span:last-child{border-bottom:0}
.teaser-columns>span::after,.teaser-row-headings>span::after{content:'';position:absolute;z-index:1;background:#217346;opacity:0}
.teaser-columns>span::after{left:0;right:0;bottom:-1px;height:1px}
.teaser-row-headings>span::after{left:-1px;top:0;bottom:0;width:1px}
.teaser-grid{min-width:0;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));position:relative}
.teaser-cell{--rest-fill:#fff;--selected-fill:#c6c6c6;--rest-ink:#000;--selected-ink:#000;--rest-line:var(--ui-line);--selected-line:#aeaeae;display:flex;align-items:center;justify-content:flex-end;min-width:0;overflow:hidden;padding-inline:clamp(4px,.6vw,8px);border-right:1px solid var(--rest-line);border-bottom:1px solid var(--rest-line);background:var(--rest-fill);color:var(--rest-ink);font-family:'Aptos Narrow','Arial Narrow',Calibri,Arial,sans-serif;font-size:clamp(11px,1vw,13px);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.teaser-cell:nth-child(7n){border-right:0}
.teaser-cell:nth-child(n+50){border-bottom:0}
/* Excel darkens existing fills under a selection, except for the active cell. */
.teaser-cell-muted{--rest-fill:#f0f3f8;--selected-fill:#babdc1}
.teaser-cell-active{--selected-fill:var(--rest-fill)}
.teaser-workbook .teaser-select-primary{background-color:var(--selected-fill);color:var(--selected-ink);border-color:var(--selected-line)}
.teaser-workbook .teaser-select-primary::after{opacity:1}
/* Gridlines occupy the last pixel of the preceding cell. Cover each perimeter
   gridline and one pixel outside it, then add Excel's white inner edge. */
.teaser-range{position:absolute;z-index:2;left:calc(300% / 7);top:0;width:calc(200% / 7);height:37.5%;color:#217346;overflow:visible;pointer-events:none}
.teaser-range::before{content:'';position:absolute;inset:-2px -1px -1px -2px;border:2px solid currentColor}
.teaser-range-inner{position:absolute;inset:0 1px 1px 0;border:1px solid #fff}
.teaser-range::after{content:'';position:absolute;right:-4px;bottom:-4px;width:7px;height:7px;background:currentColor;border:1px solid #fff}
.site-intro{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#fff}
.site-intro:focus{outline:none}
.intro-centre{width:240px;max-width:calc(100vw - 64px)}
.intro-logo{position:relative;width:100%;aspect-ratio:1592/334;isolation:isolate;animation:intro-logo-position 2600ms cubic-bezier(.4,0,.2,1) both}
/* The original lettering slides behind a fixed clip adjoining the original M.
   Move the whole group by half the revealed width to keep the visible logo centred. */
.intro-mark{position:absolute;z-index:1;left:0;top:0;width:19.0954773869%;height:100%;overflow:hidden;background:#fff}
.intro-mark>img{display:block;width:523.6842105263%;max-width:none;height:auto}
.intro-word-window{position:absolute;left:19.0954773869%;right:0;top:0;height:100%;overflow:hidden}
.intro-wordmark{display:block;width:123.602484472%;max-width:none;height:auto;margin-left:-23.602484472%;animation:intro-word-slide 2600ms cubic-bezier(.4,0,.2,1) both}
.intro-loading .intro-logo,.intro-loading .intro-logo *{visibility:hidden;animation-play-state:paused}
.intro-pending .site-header,.intro-pending .coming-main,.intro-pending .coming-footer{visibility:hidden}
.intro-leaving .site-intro{animation:intro-leave 320ms ease both;pointer-events:none}
@keyframes intro-logo-position{0%,16%{transform:translateX(40.4522613065%)}82%,100%{transform:translateX(0)}}
@keyframes intro-word-slide{0%,16%{transform:translateX(-80.9045226131%)}82%,100%{transform:translateX(0)}}
@keyframes intro-leave{to{opacity:0}}
/* Select a region, extend it, then move to a second region. No command UI is shown. */
@keyframes select-cells{
  0%,24%,100%{left:calc(300% / 7);top:0;width:calc(200% / 7);height:37.5%}
  32%,57%{left:calc(300% / 7);top:0;width:calc(300% / 7);height:37.5%}
  65%,92%{left:calc(100% / 7);top:62.5%;width:calc(200% / 7);height:25%}
}
/* Cells and headings share the selection timeline, including the static first frame. */
@keyframes selection-primary{
  0%,57%,100%{background-color:var(--selected-fill);color:var(--selected-ink);border-color:var(--selected-line)}
  65%,92%{background-color:var(--rest-fill);color:var(--rest-ink);border-color:var(--rest-line)}
}
@keyframes selection-extension{
  0%,24%,65%,92%,100%{background-color:var(--rest-fill);color:var(--rest-ink);border-color:var(--rest-line)}
  32%,57%{background-color:var(--selected-fill);color:var(--selected-ink);border-color:var(--selected-line)}
}
@keyframes selection-secondary{
  0%,57%,100%{background-color:var(--rest-fill);color:var(--rest-ink);border-color:var(--rest-line)}
  65%,92%{background-color:var(--selected-fill);color:var(--selected-ink);border-color:var(--selected-line)}
}
@keyframes edge-primary{0%,57%,100%{opacity:1}65%,92%{opacity:0}}
@keyframes edge-extension{0%,24%,65%,92%,100%{opacity:0}32%,57%{opacity:1}}
@keyframes edge-secondary{0%,57%,100%{opacity:0}65%,92%{opacity:1}}
/* Match the settled selections above. Hide the readouts while moving between cells. */
@keyframes show-first-cell{0%,57%,100%{opacity:1}57.001%,99.999%{opacity:0}}
@keyframes show-second-cell{0%,64.999%,92.001%,100%{opacity:0}65%,92%{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  [data-motion] .teaser-range{animation:select-cells var(--selection-duration) cubic-bezier(.45,0,.55,1) infinite}
  [data-motion] .teaser-select-primary{animation:selection-primary var(--selection-duration) cubic-bezier(.45,0,.55,1) infinite}
  [data-motion] .teaser-select-extension{animation:selection-extension var(--selection-duration) cubic-bezier(.45,0,.55,1) infinite}
  [data-motion] .teaser-select-secondary{animation:selection-secondary var(--selection-duration) cubic-bezier(.45,0,.55,1) infinite}
  [data-motion] .teaser-select-primary::after{animation:edge-primary var(--selection-duration) cubic-bezier(.45,0,.55,1) infinite}
  [data-motion] .teaser-select-extension::after{animation:edge-extension var(--selection-duration) cubic-bezier(.45,0,.55,1) infinite}
  [data-motion] .teaser-select-secondary::after{animation:edge-secondary var(--selection-duration) cubic-bezier(.45,0,.55,1) infinite}
  [data-motion] .teaser-value-first{animation:show-first-cell var(--selection-duration) steps(1,end) infinite}
  [data-motion] .teaser-value-second{animation:show-second-cell var(--selection-duration) steps(1,end) infinite}
  [data-tab-hidden="true"] .teaser-stage *,[data-tab-hidden="true"] .teaser-stage *::after,.intro-pending .teaser-stage *,.intro-pending .teaser-stage *::after{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){
  .site-intro{display:none!important}
  .intro-pending .site-header,.intro-pending .coming-main,.intro-pending .coming-footer{visibility:visible}
  .intro-logo,.intro-logo *{animation:none}
}
@media(max-width:1100px){
  .coming-hero{gap:40px}
}
@media(max-width:900px){
  .coming-soon .wrap{width:calc(100% - 64px)}
  .coming-main{padding-block:64px 72px}
  .coming-hero{grid-template-columns:1fr;gap:48px}
  .coming-copy{padding:0}
  .coming-copy h1{font-size:64px}
  .coming-intro{max-width:380px}
  .coming-visual{width:min(650px,94%)}
}
@media(max-width:560px){
  .coming-soon{--frame-height:84px}
  .coming-soon .wrap{width:calc(100% - 40px)}
  .coming-soon .header-inner{gap:12px 20px;flex-wrap:wrap;padding-block:18px}
  .coming-main{padding-block:50px 56px}
  .coming-hero{gap:36px}
  .coming-eyebrow{font-size:11px;margin-bottom:20px}
  .coming-copy h1{font-size:clamp(46px,13vw,58px);letter-spacing:-1.4px}
  .coming-intro{font-size:20px;max-width:310px;margin-top:22px}
  .coming-note{font-size:13px}
  .coming-platform{margin-top:26px;padding-top:16px;font-size:11px}
  .coming-visual{width:100%}
  .teaser-stage{aspect-ratio:3/2;min-height:280px}
  .teaser-workbook{--row-heading-width:20px;left:3%;width:94%}
  .teaser-tab{height:28px}
  .teaser-tab>span{font-size:10px}
  .teaser-ribbon{height:50px;padding:5px 1px 3px}
  .teaser-ribbon-group{gap:3px;padding-inline:3px;padding-bottom:8px}
  .teaser-ribbon-stack{gap:3px}
  .teaser-button-placeholder{height:8px;gap:3px}
  .teaser-button-placeholder::before{width:7px;height:7px}
  .teaser-button-large{height:auto;gap:4px}
  .teaser-button-large::before{width:15px;height:15px}
  .teaser-formula-bar{height:33px;gap:3px;padding:3px 4px;font-size:10px}
  .teaser-name-box{flex-basis:50px;padding-inline:4px 1px}
  .teaser-columns{height:18px}
  .teaser-cell{padding-inline:3px}
}
/* Keep percentage values readable with wider fallback fonts on small phones. */
@media(max-width:360px){
  .teaser-cell{font-size:10px;padding-inline:1px}
}
