/* Marketing tools — shared by /tools and the SEO landings */
/* Catalog */
  .tl-hero{padding:36px 0 10px;}
  .tl-hero h1{margin:4px 0 10px;font-size:clamp(28px,3.6vw,42px);letter-spacing:.6px;line-height:1.05;}
  .tl-sub{font-size:16.5px;color:var(--text-muted);max-width:640px;margin:0 0 8px;}
  .tl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:10px 0 64px;}
  .tl-card{appearance:none;display:flex;flex-direction:column;text-align:left;cursor:pointer;
    background:linear-gradient(180deg,rgba(24,28,38,0.78),rgba(14,17,24,0.82));
    border:1px solid var(--border);border-radius:18px;padding:22px 20px 20px;color:inherit;font:inherit;
    box-shadow:var(--shadow-card);transition:border-color .15s,transform .15s;}
  .tl-card:hover,.tl-card:focus-visible{border-color:rgba(232,25,44,0.45);transform:translateY(-2px);outline:none;}
  .tl-card.is-soon{cursor:default;opacity:.55;transform:none;}
  .tl-card.is-soon:hover{border-color:var(--border);transform:none;}
  .tl-card-ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
    font-size:22px;margin-bottom:14px;background:linear-gradient(160deg,rgba(232,25,44,0.18),rgba(14,17,24,0.55));
    border:1px solid rgba(232,25,44,0.30);}
  .tl-card h2{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;letter-spacing:0;margin:0 0 6px;color:var(--text);}
  .tl-card p{margin:0;font-size:14px;color:var(--text-muted);line-height:1.45;flex:1;}
  .tl-card-go{margin-top:14px;font-size:13px;font-weight:600;color:var(--crimson-2);}
  .tl-card.is-soon .tl-card-go{color:var(--text-dim);}

  /* Tool stage — the PAGE scrolls. Editor/preview have their own 15-line panes. */
  body.is-tool{overflow:auto;}
  #tools-work[hidden]{display:none !important;}
  #tools-work:not([hidden]){
    display:flex;flex-direction:column;
    min-height:calc(100svh - 76px);height:auto;max-height:none;
    overflow:visible;background:rgba(8,10,14,0.55);
  }
  .tl-backbar{
    flex:0 0 auto;display:flex;align-items:center;gap:14px;
    padding:10px 22px;border-bottom:1px solid var(--border);
    background:rgba(8,10,14,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .tl-back{
    appearance:none;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:10px;
    color:var(--text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
    padding:8px 12px;display:inline-flex;align-items:center;gap:8px;
  }
  .tl-back:hover{border-color:var(--crimson-border);background:var(--crimson-dim);}
  .tl-backbar-title{font-size:14px;font-weight:600;color:var(--text-muted);}
  .tl-stage{flex:1;min-height:0;overflow:visible;padding:22px 24px 48px;}
  #tool-time[hidden],#tool-message[hidden]{display:none !important;}
  #tool-time:not([hidden]),#tool-message:not([hidden]){
    max-width:1240px;margin:0 auto;width:100%;height:auto;min-height:0;display:flex;flex-direction:column;
  }

  /* Timestamp board — Discord chip is the signature */
  .tl-time-layout{display:grid;grid-template-columns:minmax(280px,0.92fr) minmax(0,1.35fr);gap:22px;align-items:start;flex:none;min-height:0;}
  .tl-clock{
    position:relative;overflow:hidden;
    background:linear-gradient(180deg,#1a1d24 0%,#12141a 100%);
    border:1px solid rgba(255,255,255,0.07);border-radius:20px;padding:22px 22px 20px;
    box-shadow:0 30px 60px -36px #000;
  }
  .tl-clock::before{
    content:"";position:absolute;inset:-40% -20% auto auto;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(88,101,242,0.22),transparent 68%);pointer-events:none;
  }
  .tl-clock-kicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#8b98ff;margin:0 0 10px;}
  .tl-live{position:relative;margin:0 0 18px;}
  .tl-live-chip{
    display:inline-block;max-width:100%;
    background:rgba(88,101,242,0.22);color:#c9cdfb;border-radius:8px;
    padding:10px 14px;font-size:clamp(18px,2.1vw,26px);font-weight:650;line-height:1.25;
    box-shadow:inset 0 0 0 1px rgba(88,101,242,0.28);
  }
  .tl-clock label{display:block;font-size:12px;font-weight:600;color:#949ba4;margin:0 0 8px;}
  .tl-clock input[type=datetime-local]{
    width:100%;background:#0e1014;border:1px solid rgba(255,255,255,0.08);border-radius:12px;
    color:#f2f3f5;font:inherit;font-size:16px;padding:12px 14px;color-scheme:dark;
  }
  .tl-clock input[type=datetime-local]:focus{outline:none;border-color:rgba(88,101,242,0.7);box-shadow:0 0 0 3px rgba(88,101,242,0.18);}
  .tl-tz{margin:8px 0 14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#6d717c;}
  .tl-presets{display:flex;flex-wrap:wrap;gap:7px;}
  .tl-presets button{appearance:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
    color:#dbdee1;background:#2b2d31;border:1px solid #3f4248;border-radius:999px;padding:7px 12px;}
  .tl-presets button:hover{border-color:#5865f2;color:#fff;}
  .tl-rows{display:flex;flex-direction:column;gap:8px;min-height:0;max-height:22.5em;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:4px;}
  .tl-row{appearance:none;display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:10px 14px;align-items:center;
    text-align:left;cursor:pointer;width:100%;font:inherit;
    background:#1e1f22;border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:14px 16px;color:#dbdee1;
    transition:border-color .12s,transform .12s;}
  .tl-row:hover{border-color:rgba(88,101,242,0.55);transform:translateY(-1px);}
  .tl-row-label{font-size:12px;font-weight:600;color:#949ba4;letter-spacing:.2px;}
  .tl-row-preview{grid-column:2;font-size:15px;font-weight:600;color:#c9cdfb;background:rgba(88,101,242,0.18);
    border-radius:6px;padding:4px 9px;justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tl-row-token{grid-column:1 / 3;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#b5bac1;
    background:#111214;border-radius:6px;padding:4px 8px;justify-self:start;}
  .tl-row-copy{grid-column:3;grid-row:1 / 3;font-size:12px;font-weight:700;color:#fff;background:#5865f2;
    border-radius:8px;padding:7px 12px;align-self:center;}
  .tl-row:hover .tl-row-copy{filter:brightness(1.08);}

  /* Plain message — a Discord channel split */
  .tl-msg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;
    flex:none;min-height:0;}
  .tl-editor-wrap,.tl-preview-wrap{
    display:flex;flex-direction:column;min-height:0;
    background:#2b2d31;border:1px solid rgba(255,255,255,0.05);border-radius:16px;padding:14px 14px 16px;
  }
  .tl-preview-wrap{background:#313338;}
  .tl-kicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#949ba4;margin:0 0 10px;}
  .tl-fmtbar{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.06);}
  .tl-fmt-sep{width:1px;align-self:stretch;background:#3f4248;margin:2px 4px;}
  .tl-fmt{appearance:none;cursor:pointer;min-width:32px;height:30px;padding:0 8px;
    background:#1e1f22;border:1px solid #3f4248;border-radius:7px;color:#dbdee1;font:inherit;font-size:12.5px;font-weight:700;}
  .tl-fmt:hover,.tl-fmt:focus-visible{background:#3f4248;color:#f2f3f5;outline:none;border-color:#5865f2;}
  .tl-fmt-time{background:rgba(88,101,242,0.2);border-color:rgba(88,101,242,0.45);color:#c9cdfb;}
  .tl-fmt b,.tl-fmt i,.tl-fmt u,.tl-fmt s{font-size:13px;}
  #tl-editor{
    flex:none;font-size:15px;line-height:1.5;
    height:22.5em;min-height:22.5em;max-height:22.5em; /* 15 lines, then this pane scrolls */
    overflow-x:hidden;overflow-y:auto;outline:none;color:#dbdee1;white-space:pre-wrap;overflow-wrap:anywhere;
    -webkit-overflow-scrolling:touch;
  }
  #tl-editor:empty:before{content:attr(data-ph);color:#6d717c;}
  .tl-msg-actions{display:flex;gap:8px;margin-top:12px;}
  .tl-bubble{display:flex;gap:12px;flex:none;height:22.5em;min-height:22.5em;max-height:22.5em;}
  .tl-avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto;
    background:url('/assets/mascot/slime-logo.png') center/cover no-repeat,#7d1a22;}
  .tl-bubble-body{min-width:0;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .tl-author{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
  .tl-botname{font-weight:600;color:#f2f3f5;font-size:16px;}
  .tl-when{font-size:12px;color:#949ba4;}
  #tl-preview{font-size:15px;color:#dbdee1;line-height:1.5;overflow-wrap:anywhere;}
  #tl-preview-empty{color:#6d717c;font-size:13.5px;margin:8px 0 0;}
  .tl-code{background:#1e1f22;border-radius:4px;padding:1px 4px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#e3e5e8;}
  /* A fenced block keeps its own line breaks — the inline chip above has no
     white-space rule, so a multi-line block used to collapse into one run. */
  .tl-codeblock{background:#1e1f22;border:1px solid #2b2d31;border-radius:4px;padding:8px 10px;margin:4px 0;overflow-x:auto;}
  .tl-codeblock code{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#e3e5e8;white-space:pre;background:none;padding:0;}
  .tl-time{background:rgba(88,101,242,0.16);border-radius:3px;padding:0 4px;color:#c9cdfb;}
  .tl-h1{display:block;font-size:22px;font-weight:700;color:#f2f3f5;margin:8px 0 4px;}
  .tl-h2{display:block;font-size:18px;font-weight:700;color:#f2f3f5;margin:8px 0 4px;}
  .tl-h3{display:block;font-size:16px;font-weight:700;color:#f2f3f5;margin:6px 0 3px;}
  .tl-sub{display:block;font-size:12px;color:#949ba4;}
  .tl-quote{display:block;border-left:4px solid #4e5058;padding-left:8px;margin:2px 0;color:#dbdee1;}
  .tl-li{display:block;padding-left:14px;text-indent:-9px;}
  .tl-li::before{content:'• ';color:#b5bac1;}
  .tl-spoiler{background:#1e1f22;color:transparent;border-radius:4px;padding:0 2px;cursor:pointer;}
  .tl-spoiler:hover{color:#dbdee1;}
  .tl-link{color:#00a8fc;}

  .tl-help{flex:0 0 auto;margin-top:16px;background:#1e1f22;border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:14px 16px;}
  .tl-help h3{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:0;margin:0 0 10px;color:#f2f3f5;}
  .tl-help-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;}
  .tl-ex{display:grid;grid-template-columns:minmax(118px,38%) minmax(0,1fr);align-items:center;gap:10px;
    min-height:30px;padding:5px 10px;background:#2b2d31;border-radius:8px;}
  .tl-ex code{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#e3e5e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tl-ex-out{font-size:13.5px;color:#dbdee1;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tl-ex-out .tl-h1,.tl-ex-out .tl-h2,.tl-ex-out .tl-h3,.tl-ex-out .tl-sub,.tl-ex-out .tl-quote,.tl-ex-out .tl-li{display:inline;margin:0;font-size:13.5px;}
  .tl-ex-out .tl-h1{font-size:16px;font-weight:700;}
  .tl-ex-out .tl-h2{font-size:15px;font-weight:700;}
  .tl-ex-out .tl-h3{font-size:14px;font-weight:700;}
  .tl-ex-out .tl-sub{font-size:12px;color:#949ba4;}
  .tl-ex-out .tl-quote{border-left-width:3px;padding-left:6px;}
  .tl-ex-out .tl-li{padding-left:12px;text-indent:-8px;}

  /* Timestamp popup */
  .tl-pop[hidden]{display:none !important;}
  .tl-pop{
    position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
    padding:24px;background:rgba(4,6,10,0.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .tl-pop-sheet{
    width:min(920px,100%);max-height:min(88vh,900px);overflow:auto;
    background:#12141a;border:1px solid rgba(255,255,255,0.08);border-radius:20px;
    box-shadow:0 40px 90px -30px #000;padding:20px 20px 22px;
  }
  .tl-pop-sheet .tl-time-layout{min-height:0;max-height:none;}
  .tl-pop-sheet .tl-rows{max-height:min(52vh,480px);}
  .tl-pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;}
  .tl-pop-head h2{font-size:clamp(22px,2.4vw,30px);margin:0;}
  .tl-pop-head p{margin:4px 0 0;color:var(--text-muted);font-size:14px;}
  .tl-pop-x{appearance:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);
    background:#1e1f22;color:#fff;font-size:20px;cursor:pointer;flex:0 0 auto;}
  .tl-pop-x:hover{border-color:var(--crimson-border);}

  @media (max-width:980px){
    .tl-grid,.tl-time-layout,.tl-msg,.tl-help-list{grid-template-columns:1fr;}
    .tl-time-layout,.tl-msg,#tool-time,#tool-message{height:auto;min-height:0;flex:none;}
    .tl-rows{max-height:22.5em;}
    .tl-editor-wrap,.tl-preview-wrap{min-height:0;}
    #tl-editor,.tl-bubble{height:22.5em;max-height:22.5em;}
    .tl-row{grid-template-columns:1fr auto;}
    .tl-row-preview{grid-column:1;}
    .tl-row-token{grid-column:1 / -1;}
    .tl-row-copy{grid-column:2;grid-row:1;}
  }
  @media (max-width:640px){
    .tl-grid{grid-template-columns:1fr;}
    .tl-stage{padding:14px 14px 28px;}
  }
  @media (prefers-reduced-motion:reduce){
    .tl-card,.tl-row{transition:none;}
  }

  /* Hub SEO copy under the cards — always in the HTML for crawlers */
  .tl-seo{padding:8px 0 72px;}
  .tl-seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .tl-seo-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 22px 20px;}
  .tl-seo-card h2{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:700;letter-spacing:0;margin:0 0 10px;}
  .tl-seo-card p{margin:0 0 10px;font-size:14.5px;color:var(--text-muted);line-height:1.55;}
  .tl-seo-card a{color:var(--crimson-2);font-weight:600;}

  /* Add-Cyndrix hook inside each tool */
  .tl-hook{
    flex:0 0 auto;margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    background:linear-gradient(135deg,rgba(232,25,44,0.14),rgba(16,19,26,0.9) 42%,rgba(88,101,242,0.12));
    border:1px solid rgba(232,25,44,0.28);border-radius:16px;padding:18px 20px;
  }
  .tl-hook-kicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--crimson-2);margin:0 0 6px;}
  .tl-hook h3{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;letter-spacing:0;margin:0 0 6px;color:var(--text);}
  .tl-hook p{margin:0;max-width:62ch;font-size:14px;color:var(--text-muted);line-height:1.5;}
  .tl-hook-actions{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto;}

  /* Dedicated SEO landings: tool sits on the page, no locked viewport */
  body.tl-landing.is-tool{overflow:auto;}
  body.tl-landing #tools-work:not([hidden]){
    height:auto;max-height:none;overflow:visible;min-height:0;background:transparent;
  }
  body.tl-landing #tool-time:not([hidden]),
  body.tl-landing #tool-message:not([hidden]){height:auto;}
  body.tl-landing .tl-time-layout,body.tl-landing .tl-msg{flex:none;min-height:0;}
  body.tl-landing .tl-rows{max-height:22.5em;}
  body.tl-landing #tl-editor,body.tl-landing .tl-bubble{height:22.5em;max-height:22.5em;min-height:22.5em;}
  .tl-land-hero{padding:28px 0 8px;}
  .tl-land-hero h1{margin:4px 0 10px;font-size:clamp(28px,3.6vw,42px);letter-spacing:.6px;line-height:1.05;}
  .tl-faq{padding:8px 0 56px;}
  .tl-faq h2{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:700;letter-spacing:0;margin:0 0 14px;}
  .tl-faq details{border-top:1px solid var(--border);padding:12px 0;}
  .tl-faq summary{cursor:pointer;font-weight:600;color:var(--text);}
  .tl-faq p{margin:8px 0 0;color:var(--text-muted);font-size:14.5px;}

  @media (max-width:980px){
    .tl-seo-grid{grid-template-columns:1fr;}
    .tl-hook{align-items:flex-start;}
  }