/* SkoonMac editorial accordion — the app's interface, on the web.
   Two-level: 3 category columns slide left→right; sub-tools expand downward.
   Faithful to Skoonmac.dc.html (Option A): Bebas/Archivo/Raleway/JetBrains Mono,
   cream canvas + clay accent, full DARK/LIGHT invert, square frames. */

:root{
  --bg:#E8E7E2; --ink:#161616; --ink2:#4A4844; --grey:#8C8A85;
  --line:#D7D5CE; --linedot:#B9B6AE; --accent:#B0593C;
  --col-bg:#FFFFFF; --active-bg:#FCFBF8;
  --btn-bg:#141414; --btn-tx:#FFFFFF;
  --p-dim:#56544F; --p-faint:#9B9A95; --p-line2:rgba(0,0,0,0.10);
  --font-ui:'Archivo',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --font-disp:'Bebas Neue',sans-serif;
}
.sm.dark{
  --bg:#101010; --ink:#F3EFE6; --ink2:#C9C6BE; --grey:#8E8B83;
  --line:rgba(255,255,255,0.13); --linedot:rgba(255,255,255,0.22);
  --col-bg:#101010; --active-bg:#151515;
  --btn-bg:#FFFFFF; --btn-tx:#141414;
  --p-dim:rgba(255,255,255,0.66); --p-faint:rgba(255,255,255,0.5); --p-line2:rgba(255,255,255,0.14);
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html,body{margin:0;padding:0;overflow-x:hidden}
::selection{background:#1A1A1A;color:#fff}
a{text-decoration:none;color:inherit}

.sm{
  display:flex; width:100%; height:100vh; min-height:660px; overflow:hidden;
  background:var(--bg); color:var(--ink); font-family:var(--font-ui);
}

/* Wordmark column */
.sm-wordmark{
  flex:0 0 128px; position:relative; background:var(--col-bg);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:30px 0; overflow:hidden;
}
.sm-mark{display:flex;flex-direction:column;align-items:center;gap:28px}
.sm-word{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:'Raleway',var(--font-ui); font-weight:300; font-size:50px;
  line-height:.86; letter-spacing:.04em; white-space:nowrap; color:var(--ink);
}
.sm-tagline{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:10px; letter-spacing:.34em; color:var(--grey); white-space:nowrap;
}

/* Category columns */
.sm-cat{
  flex-grow:1; flex-shrink:1; flex-basis:0; min-width:0; height:100%; overflow:hidden;
  border-right:1px solid var(--line); background:transparent; cursor:pointer;
  transition:flex-grow .62s cubic-bezier(.65,0,.18,1), background .4s ease;
}
.sm-cat.active{flex-grow:9; background:var(--active-bg); cursor:default}
.sm-cat:hover:not(.active){background:rgba(20,20,20,0.05)}
.sm.dark .sm-cat:hover:not(.active){background:rgba(255,255,255,0.05)}

/* Collapsed spine */
.sm-spine{
  width:100%; height:100%; border:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:30px 0;
}
.sm-cat.active .sm-spine{display:none}
.sm-spine-no,.sm-spine-count{font-family:var(--font-mono);font-size:11px;color:var(--grey)}
.sm-spine-name{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-disp); font-size:36px; letter-spacing:.07em;
  white-space:nowrap; color:var(--ink);
}
.sm-spine-count{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}

/* Active panel */
.sm-panel{display:none; height:100%; overflow-y:auto; padding:44px 48px 64px; min-width:540px}
.sm-cat.active .sm-panel{display:block}
.sm-panel::-webkit-scrollbar{width:8px}
.sm-panel::-webkit-scrollbar-thumb{background:rgba(120,120,120,.25);border-radius:8px}
.sm-panel-head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.sm-panel-head .idx,.sm-panel-head .cnt{font-family:var(--font-mono);font-size:12px;color:var(--grey)}
.sm-panel-head h2{margin:0;font-family:var(--font-disp);font-size:62px;letter-spacing:.03em;line-height:.9;font-weight:400}

/* Sub-tool rows */
.sm-sub{border-top:1px solid var(--line)}
.sm-sub-row{
  width:100%; border:0; background:none; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:14px; padding:20px 4px;
  transition:padding .3s ease; color:var(--ink);
}
.sm-sub-row:hover{padding-left:10px;padding-right:10px}
.sm-sub-no{font-family:var(--font-mono);font-size:13px;color:var(--grey);width:30px;flex:0 0 auto}
.sm-sub-name{font-family:var(--font-disp);font-size:40px;letter-spacing:.03em;line-height:1;flex:0 0 auto;white-space:nowrap}
.sm-leader{flex:1;border-bottom:1px dotted var(--linedot);margin:0 10px 9px;align-self:flex-end;min-width:20px}
.sm-sub-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--grey);flex:0 0 auto;white-space:nowrap}
.sm-sub-size{font-family:var(--font-mono);font-size:15px;color:var(--ink);width:84px;text-align:right;flex:0 0 auto;white-space:nowrap}
.sm-sub-sign{font-family:var(--font-mono);font-size:18px;color:var(--grey);width:24px;text-align:right;flex:0 0 auto}
.sm-sub.open .sm-sub-sign{color:var(--accent)}

.sm-sub-body{max-height:0;opacity:0;overflow:hidden;transition:max-height .52s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.sm-sub.open .sm-sub-body{max-height:640px;opacity:1}
.sm-sub-inner{padding:4px 2px 26px}
.sm-note{margin:0 0 18px;font-size:14.5px;line-height:1.65;max-width:56ch;color:var(--p-dim)}
.sm-items{margin:0 0 4px}
.sm-item{display:flex;align-items:center;gap:16px;padding:13px 0;border-top:1px solid var(--p-line2)}
.sm-item-name{font-size:14px;flex:1;color:var(--ink)}
.sm-item-meta{font-family:var(--font-mono);font-size:13px;color:var(--p-faint);white-space:nowrap}
.sm-action{
  display:inline-block; margin-top:22px; padding:13px 28px; border:0; cursor:pointer;
  font-family:var(--font-disp); font-size:17px; letter-spacing:.06em;
  background:var(--btn-bg); color:var(--btn-tx);
  transition:transform .3s ease,opacity .3s ease;
}
.sm-action:hover{transform:translateY(-2px);opacity:.88}

/* About panel */
.sm-about-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--accent);margin:2px 0 18px}
.sm-about-lead{font-size:19px;line-height:1.55;color:var(--ink);max-width:60ch;margin:0 0 16px;font-weight:600}
.sm-about-body{font-size:15px;line-height:1.72;color:var(--p-dim);max-width:62ch;margin:0 0 16px}
.sm-about-body b{color:var(--ink);font-weight:600}
.sm-video{position:relative;width:100%;max-width:680px;aspect-ratio:16/9;background:var(--col-bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:24px 0 30px;overflow:hidden}
.sm-video-inner{display:flex;flex-direction:column;align-items:center;gap:13px;color:var(--grey)}
.sm-video-play{width:58px;height:58px;border-radius:50%;border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center}
.sm-video-play svg{fill:var(--accent);margin-left:3px}
.sm-video-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.sm-video iframe,.sm-video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.sm-about-cta{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.sm-about-cta a.primary{background:var(--btn-bg);color:var(--btn-tx);font-family:var(--font-disp);font-size:18px;letter-spacing:.06em;padding:13px 30px;transition:transform .3s,opacity .3s}
.sm-about-cta a.primary:hover{transform:translateY(-2px);opacity:.9}
.sm-about-cta a.secondary{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--grey)}
.sm-about-cta a.secondary:hover{color:var(--ink)}

/* Testimonials (inside the ABOUT panel) — filled by accordion.js, hidden until populated */
.sm-reviews{margin:40px 0 6px;border-top:1px solid var(--line);padding-top:30px}
.sm-reviews[hidden]{display:none}
.sm-reviews-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.sm-reviews-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.sm-reviews-stat{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--grey);white-space:nowrap}
.sm-reviews-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:680px}
.sm-review{
  margin:0;border:1px solid var(--line);background:var(--col-bg);
  padding:20px 22px;display:flex;flex-direction:column;gap:11px;
}
.sm-review-stars{display:inline-flex;gap:2px;font-size:14px;line-height:1}
.sm-review-stars .on{color:var(--accent)}
.sm-review-stars .off{color:var(--linedot)}
.sm-review-title{margin:0;font-family:var(--font-ui);font-weight:600;font-size:15px;line-height:1.3;color:var(--ink)}
.sm-review-body{margin:0;font-size:14px;line-height:1.62;color:var(--p-dim);
  overflow-wrap:break-word;word-break:break-word}
.sm-review-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto;padding-top:4px}
.sm-review-who{font-size:13px;color:var(--ink);font-weight:500}
.sm-review-date{font-family:var(--font-mono);font-size:11px;color:var(--p-faint);white-space:nowrap}
@media (max-width:860px){
  .sm-reviews-grid{grid-template-columns:1fr;max-width:100%}
}

/* Corner controls */
.sm-corner{
  position:fixed; top:35px; right:24px; z-index:50;
  display:flex; align-items:center; gap:22px; white-space:nowrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  background:var(--active-bg); padding:9px 18px; border-radius:8px;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
}
.sm-corner a{color:var(--grey);transition:color .2s}
.sm-corner a:hover{color:var(--ink)}
.sm-corner a.buy{
  color:#fff; background:var(--accent); padding:8px 15px; letter-spacing:.06em;
}
.sm-corner a.buy:hover{opacity:.9;color:#fff}
.sm-corner.with-banner{top:56px}   /* clear the demo banner */

/* Bottom of the wordmark column: tagline (lifted) above the DARK/LIGHT switch. */
.sm-foot{display:flex;flex-direction:column;align-items:center;gap:22px}
.sm-invert{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.sm-invert .lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--grey)}
.sm-invert .track{position:relative;width:38px;height:22px;border-radius:20px;background:rgba(20,20,20,.20);transition:background .35s ease}
.sm-invert .knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .35s cubic-bezier(.5,0,.2,1)}
.sm.dark .sm-invert .track{background:var(--accent)}
.sm.dark .sm-invert .knob{left:19px}

/* Mobile — stack the horizontal accordion into a vertical one */
@media (max-width:860px){
  .sm{flex-direction:column;height:auto;min-height:100vh;overflow-x:hidden;padding-bottom:64px}
  .sm-wordmark{flex:none;width:100%;flex-direction:row;justify-content:space-between;align-items:center;padding:18px 22px;border-right:0;border-bottom:1px solid var(--line)}
  .sm-word{writing-mode:horizontal-tb;transform:none;font-size:28px;letter-spacing:.16em}
  .sm-mark{flex-direction:row;gap:14px;align-items:center}
  .sm-tagline{writing-mode:horizontal-tb;transform:none;font-size:9px;letter-spacing:.24em}
  .sm-cat{flex:none !important;width:100%;border-right:0;border-bottom:1px solid var(--line);cursor:pointer}
  .sm-cat .sm-spine{flex-direction:row;justify-content:space-between;align-items:center;padding:20px 22px;height:auto}
  .sm-panel{min-width:0 !important;width:100%;max-width:100%;padding:22px 22px 38px;overflow:visible;height:auto}
  .sm-panel-head{flex-wrap:wrap;gap:10px}
  .sm-panel-head h2{font-size:40px}
  .sm-sub-row{padding:18px 0;gap:10px}
  .sm-sub-name{font-size:27px;white-space:normal}
  .sm-sub-tag,.sm-sub-size{display:none}          /* keep rows inside the viewport */
  .sm-tagline{display:none}                       /* avoid top-bar overflow */
  .sm-note{max-width:100%}
  .sm-sub-inner,.sm-items,.sm-item,.sm-panel{max-width:100%}
  .sm-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sm-leader{margin:0 8px 7px}
  .sm-spine-name{writing-mode:horizontal-tb;transform:none;font-size:28px}
  .sm-spine-count{writing-mode:horizontal-tb;transform:none}
  .sm-action{display:block;text-align:center}
  /* Nav becomes a fixed bottom bar; invert sits just above it */
  .sm-corner,.sm-corner.with-banner{
    top:auto;bottom:0;left:0;right:0;transform:none;gap:16px;white-space:nowrap;
    overflow-x:auto;justify-content:center;
    background:var(--col-bg);border-top:1px solid var(--line);padding:14px 16px;
  }
  /* The switch rides in the wordmark top bar (tagline hidden there) */
  .sm-foot{flex-direction:row;gap:10px}
}

/* Demo preview banner (in normal flow, above the accordion) */
.sm-demo-banner{
  background:var(--accent);color:#fff;text-align:center;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;padding:10px 16px;
}
.sm-demo-banner a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:500}