:root{
  color-scheme:light;

  --bg:#fff;
  --paper:#fff;
  --surface:#fff;

  --ink:#161827;
  --muted:#63697d;

  --line:rgba(22,24,39,.11);
  --line-strong:rgba(22,24,39,.16);

  --lime:#dff57a;
  --lime-strong:#c6f135;
  --lime-ink:#34420a;

  --lav:#e7e9ff;
  --peach:#ffe0d8;
  --sky:#d9f2f4;
  --yellow:#fff1b8;

  --red:#ff7a59;
  --focus:#4352db;

  --shadow:0 18px 60px rgba(22,24,39,.10);
  --shadow-sm:0 8px 26px rgba(22,24,39,.08);

  --display:
    'Bricolage Grotesque',
    'Segoe UI',
    system-ui,
    -apple-system,
    sans-serif;

  --body:
    'DM Sans',
    'Segoe UI',
    system-ui,
    -apple-system,
    sans-serif;

  --ease:cubic-bezier(.2,.8,.2,1);

  --radius:24px;

  /* Height of the fixed top navigation.
     Used for consistent page top padding. */
  --nav-h:76px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  tap-highlight-color:transparent;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);

  font-family:var(--body);
  font-size:16px;
  line-height:1.6;

  -webkit-font-smoothing:antialiased;

  overflow-x:hidden;
}

body.info-route{
  background:#fff;
}

/* Global overflow guards: nothing may push the viewport wider.
   Combined with overflow-x:clip on body, this is what prevents
   "text cut off with no way to scroll to it" on mobile. */
img,
video,
canvas,
iframe{
  max-width:100%;
  height:auto;
}

svg{
  max-width:100%;
}

body.route-changing main{
  opacity:.55;
  transform:translateY(4px);
}

main{
  min-height:70vh;

  transition:
    opacity .16s ease,
    transform .35s var(--ease);
}

h1,
h2,
h3,
h4{
  font-family:var(--display);

  letter-spacing:-.035em;
  line-height:1.06;

  margin:0;

  font-weight:750;

  /* Headings must be allowed to break rather than overflow. */
  overflow-wrap:break-word;
}

p{
  margin:0;
}

a{
  color:inherit;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  color:inherit;
  cursor:pointer;
}

button:disabled{
  cursor:not-allowed;
  opacity:.5;
}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:10px;
}

.sr{
  position:absolute;
  width:1px;
  height:1px;

  overflow:hidden;

  clip:rect(0 0 0 0);

  white-space:nowrap;
}

/* ---------------------------------------------------------------
   WRAP
   Now uses side padding + safe-area insets instead of
   "100% - 40px", so content never slides under a notch or the
   screen edge, and never overflows horizontally.
--------------------------------------------------------------- */

.wrap{
  width:min(100%,1240px);
  margin:0 auto;

  padding-left:max(20px, env(safe-area-inset-left, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px));
}

.ic{
  width:1.2em;
  height:1.2em;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;

  flex:none;
}

.hide{
  display:none!important;
}


/* ================================================================
   TOOL ORA LOGO
================================================================ */

.tl{
  --tl-size:36px;
  --tl-fg:#161827;
  --tl-accent:#34420a;

  width:var(--tl-size);
  height:var(--tl-size);

  display:block;

  overflow:visible;

  flex:none;
}

.tl rect,
.tl circle{
  transform-box:fill-box;
  transform-origin:center;
}

.tl .o{
  fill:none;

  stroke:var(--tl-fg);
  stroke-width:2.6;
}

.tl .s{
  fill:var(--tl-fg);
}

.tl .ac{
  fill:var(--tl-accent);
}

@keyframes tl-chase{
  0%{
    opacity:0;
  }

  10%,32%{
    opacity:1;
  }

  48%,100%{
    opacity:0;
  }
}

@keyframes tl-pulse{
  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.5);
  }
}

@keyframes tl-asm{
  0%{
    transform:
      translate(var(--x),var(--y))
      scale(.6);

    opacity:0;
  }

  22%,72%{
    transform:none;
    opacity:1;
  }

  90%,100%{
    transform:
      translate(var(--x),var(--y))
      scale(.6);

    opacity:0;
  }
}

@keyframes tl-dot-asm{
  0%,20%{
    transform:scale(0);
    opacity:0;
  }

  30%{
    transform:scale(1.25);
    opacity:1;
  }

  38%,72%{
    transform:scale(1);
    opacity:1;
  }

  82%,100%{
    transform:scale(0);
    opacity:0;
  }
}

@keyframes tl-rot{
  0%,15%{
    transform:rotate(0) scale(1);
  }

  30%{
    transform:rotate(45deg) scale(.82);
  }

  45%,60%{
    transform:rotate(90deg) scale(1);
  }

  75%{
    transform:rotate(135deg) scale(.82);
  }

  90%,100%{
    transform:rotate(180deg) scale(1);
  }
}

@keyframes tl-swap-a{
  0%,40%{
    opacity:1;
    transform:scale(1);
  }

  50%,90%{
    opacity:0;
    transform:scale(.6);
  }

  100%{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes tl-swap-b{
  0%,40%{
    opacity:0;
    transform:scale(.6);
  }

  50%,90%{
    opacity:1;
    transform:scale(1);
  }

  100%{
    opacity:0;
    transform:scale(.6);
  }
}

@keyframes tl-square{
  0%,40%{
    transform:rotate(0);
  }

  50%,90%{
    transform:rotate(90deg);
  }

  100%{
    transform:rotate(180deg);
  }
}

@keyframes tl-hop-a{
  0%,18%{
    opacity:.28;
  }

  26%,90%{
    opacity:0;
  }

  100%{
    opacity:.28;
  }
}

@keyframes tl-hop-b{
  0%,18%{
    opacity:0;
  }

  26%,42%{
    opacity:.28;
  }

  50%,100%{
    opacity:0;
  }
}

@keyframes tl-hop-d{
  0%,42%{
    opacity:0;
  }

  50%,66%{
    opacity:.28;
  }

  74%,100%{
    opacity:0;
  }
}

@keyframes tl-hop-c{
  0%,66%{
    opacity:0;
  }

  74%,90%{
    opacity:.28;
  }

  98%,100%{
    opacity:0;
  }
}

@keyframes tl-hop-dot{
  0%,18%{
    transform:translate(-13px,-13px);
  }

  25%,43%{
    transform:translate(13px,-13px);
  }

  50%,68%{
    transform:translate(13px,13px);
  }

  75%,93%{
    transform:translate(-13px,13px);
  }

  100%{
    transform:translate(-13px,-13px);
  }
}

@media (prefers-reduced-motion:no-preference){

  .tl-chase .s.b{
    opacity:0;

    animation:
      tl-chase
      3s
      ease-in-out
      infinite;

    animation-delay:var(--d);
  }

  .tl-chase .k{
    animation:
      tl-pulse
      1.5s
      ease-in-out
      infinite;
  }

  .tl-assemble .s.b{
    animation:
      tl-asm
      3.2s
      cubic-bezier(.34,1.3,.64,1)
      infinite;
  }

  .tl-assemble .k{
    animation:
      tl-dot-asm
      3.2s
      ease-in-out
      infinite;
  }

  .tl-rotate .r{
    transform-box:view-box;
    transform-origin:32px 32px;

    animation:
      tl-rot
      4s
      ease-in-out
      infinite;
  }

  .tl-checker .pa{
    animation:
      tl-swap-a
      2.6s
      ease-in-out
      infinite;
  }

  .tl-checker .pb{
    animation:
      tl-swap-b
      2.6s
      ease-in-out
      infinite;
  }

  .tl-checker .q{
    animation:
      tl-square
      2.6s
      ease-in-out
      infinite;
  }

  .tl-hop .ha{
    animation:
      tl-hop-a
      4s
      ease-in-out
      infinite;
  }

  .tl-hop .hb{
    animation:
      tl-hop-b
      4s
      ease-in-out
      infinite;
  }

  .tl-hop .hd{
    animation:
      tl-hop-d
      4s
      ease-in-out
      infinite;
  }

  .tl-hop .hc{
    animation:
      tl-hop-c
      4s
      ease-in-out
      infinite;
  }

  .tl-hop .k{
    animation:
      tl-hop-dot
      4s
      cubic-bezier(.6,0,.3,1)
      infinite;
  }
}

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  body.route-changing main{
    transform:none;
  }

  .float-card{
    animation:none!important;
  }

  .tl *{
    animation:none!important;
  }
}


/* ================================================================
   NAVIGATION
================================================================ */

.nav{
  position:fixed;

  top:0;
  left:0;
  right:0;

  z-index:50;

  display:flex;
  justify-content:center;

  padding:
    env(safe-area-inset-top,0)
    0
    0;

  transition:
    padding .4s var(--ease);
}

.nav.floating{
  padding:
    calc(env(safe-area-inset-top,0) + 10px)
    12px
    0;
}

.pill{
  /* Needed so the mobile dropdown menu anchors to the pill
     instead of spanning the full viewport. */
  position:relative;

  width:100%;
  max-width:1200px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:14px;

  padding:14px 20px;

  border:
    1px solid
    transparent;

  background:rgba(255,255,255,.98);

  transition:
    max-width .45s var(--ease),
    padding .4s var(--ease),
    border-radius .4s var(--ease),
    box-shadow .3s,
    border-color .3s;
}

.nav.floating .pill{
  max-width:830px;

  padding:8px 8px 8px 14px;

  border-radius:999px;

  border-color:var(--line);

  box-shadow:var(--shadow-sm);

  backdrop-filter:blur(16px);
}

.brand{
  display:flex;
  align-items:center;

  gap:10px;

  text-decoration:none;

  font-family:var(--display);

  font-size:1.22rem;
  font-weight:750;

  letter-spacing:-.025em;

  white-space:nowrap;

  min-width:0;
}

.brand-mark{
  display:grid;
  place-items:center;

  width:38px;
  height:38px;

  border-radius:13px;

  background:var(--lime);

  flex:none;
}

.brand-mark .tl{
  --tl-size:30px;
}

/* The animated Tool Ora SVG must stay square. The global overflow guard
   intentionally limits descendants to their parent width, so override it
   only for these two logo mounts to prevent a 52x52 icon becoming 38x52. */
#brandLogo .to-icon,
#footerLogo .to-icon{
  width:38px !important;
  height:38px !important;
  max-width:none !important;
}

.brand > .brand-mark,
.footer-brand > .brand-mark{
  background:transparent;
  border-radius:50%;
}
.brand-dot{
  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--red);

  align-self:flex-start;

  margin-top:7px;

  flex:none;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:6px;

  flex:none;
}

.nav-links{
  display:flex;
  align-items:center;

  gap:2px;

  margin-right:6px;
}

.nav-links a{
  padding:9px 12px;

  border-radius:999px;

  text-decoration:none;

  font-size:.94rem;
  font-weight:600;

  color:#34384d;

  transition:.2s;
}

.nav-links a:hover,
.nav-links a[aria-current="page"]{
  background:var(--paper);
  color:var(--ink);
}

.nav-cta{
  display:inline-flex;
  align-items:center;

  gap:8px;

  padding:11px 15px;

  border-radius:999px;

  background:var(--ink);
  color:#fff;

  text-decoration:none;

  font-weight:700;
  font-size:.9rem;
}

.menu-btn{
  display:none;

  width:44px;
  height:44px;

  place-items:center;

  border:
    1px solid
    var(--line);

  border-radius:50%;

  background:#fff;
}

.menu-btn .ic-close{
  display:none;
}

.menu-btn[aria-expanded="true"] .ic-close{
  display:block;
}

.menu-btn[aria-expanded="true"] .ic-open{
  display:none;
}

.menu-card{
  position:absolute;

  top:calc(100% + 10px);

  left:0;
  right:0;

  padding:10px;

  border:
    1px solid
    var(--line);

  border-radius:26px;

  background:#fff;

  box-shadow:var(--shadow);

  opacity:0;
  visibility:hidden;

  transform:
    translateY(-8px)
    scale(.98);

  transition:
    .25s
    var(--ease);

  /* Never let the menu exceed the screen. */
  max-height:calc(100vh - var(--nav-h) - 24px);
  overflow-y:auto;

  -webkit-overflow-scrolling:touch;
}

.menu-card.open{
  opacity:1;
  visibility:visible;

  transform:none;
}

.menu-item{
  display:flex;
  align-items:center;

  gap:14px;

  padding:11px;

  border-radius:18px;

  text-decoration:none;
}

.menu-item:hover{
  background:var(--paper);
}

.menu-item > span:last-child{
  min-width:0;
}

.menu-item strong{
  display:block;
  line-height:1.2;
}

.menu-item small{
  display:block;

  color:var(--muted);

  font-size:.82rem;

  overflow-wrap:break-word;
}

@media(max-width:820px){

  .nav-links,
  .nav-cta{
    display:none;
  }

  .menu-btn{
    display:grid;
  }

  .pill{
    padding:12px 16px;
  }

  .nav.floating .pill{
    padding:7px 8px 7px 12px;
  }

  .brand{
    font-size:1.1rem;
  }
}


/* ================================================================
   SHARED
================================================================ */

.page{
  padding:
    calc(var(--nav-h) + 54px)
    0
    84px;
}

.page-head{
  max-width:820px;

  margin:
    0
    auto
    44px;

  text-align:center;
}

.kicker{
  display:inline-flex;
  align-items:center;

  gap:8px;

  padding:9px 13px;

  border-radius:999px;

  background:var(--lime);
  color:var(--lime-ink);

  font-size:.88rem;
  font-weight:750;

  max-width:100%;
  text-align:left;
}

.page-head h1{
  font-size:clamp(2.5rem,7vw,5rem);

  margin:
    18px
    0
    16px;

  overflow-wrap:break-word;
}

.page-head p{
  font-size:1.08rem;

  color:var(--muted);

  max-width:58ch;

  margin:
    0
    auto;

  overflow-wrap:break-word;
}

.surface{
  background:#fff;

  border:
    1px solid
    var(--line);

  border-radius:var(--radius);

  box-shadow:var(--shadow-sm);

  min-width:0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:9px;

  border:0;

  border-radius:16px;

  padding:
    13px
    17px;

  font-weight:750;

  text-decoration:none;

  text-align:center;

  max-width:100%;

  transition:
    transform .2s var(--ease),
    box-shadow .2s,
    background .2s;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:var(--ink);
  color:#fff;

  box-shadow:
    0
    12px
    28px
    rgba(22,24,39,.15);
}

.btn-secondary{
  background:#fff;

  border:
    1px solid
    var(--line);

  color:var(--ink);
}

.btn-soft{
  background:var(--paper);
  color:var(--ink);
}

.chip{
  display:inline-flex;
  align-items:center;

  gap:7px;

  padding:7px 10px;

  border-radius:999px;

  background:var(--paper);

  border:
    1px solid
    var(--line);

  font-size:.78rem;
  font-weight:700;
}

.tile{
  display:grid;
  place-items:center;

  width:48px;
  height:48px;

  border-radius:15px;

  flex:none;

  color:var(--ink);
}

.t-lime{
  background:var(--lime);
}

.t-lav{
  background:var(--lav);
}

.t-peach{
  background:var(--peach);
}

.t-sky{
  background:var(--sky);
}

.t-yellow{
  background:var(--yellow);
}

/* CSS-only tool-card icons keep the tiles visible without relying on
   external icon assets or SVG symbol availability. */
.tool-icon{
  position:relative;
  display:block;
  width:25px;
  height:25px;
  color:currentColor;
}

.tool-icon--count::before{
  content:"";
  position:absolute;
  left:4px;
  top:2px;
  width:20px;
  height:3px;
  border-radius:3px;
  background:currentColor;
  box-shadow:0 7px 0 currentColor, 0 14px 0 currentColor;
}

.tool-icon--count::after{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 7px 0 currentColor, 0 14px 0 currentColor;
}

.tool-icon--file{
  border:2px solid currentColor;
  border-radius:4px;
}

.tool-icon--file::before{
  content:"";
  position:absolute;
  top:-2px;
  right:-2px;
  width:8px;
  height:8px;
  background:inherit;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-bottom-left-radius:3px;
}

.tool-icon--file::after{
  content:"";
  position:absolute;
  left:5px;
  right:4px;
  top:11px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  box-shadow:0 5px 0 currentColor;
}

.tool-icon--image{
  border:2px solid currentColor;
  border-radius:5px;
  overflow:hidden;
}

.tool-icon--image::before{
  content:"";
  position:absolute;
  left:4px;
  bottom:3px;
  width:14px;
  height:10px;
  border-left:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:skew(-35deg) rotate(45deg);
}

.tool-icon--image::after{
  content:"";
  position:absolute;
  top:4px;
  right:4px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
}

.tool-icon--play{
  width:27px;
  height:19px;
  margin-top:3px;
  border:2px solid currentColor;
  border-radius:6px;
}

.tool-icon--play::after{
  content:"";
  position:absolute;
  top:3px;
  left:9px;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:8px solid currentColor;
}

.divider{
  height:1px;

  background:var(--line);

  margin:
    44px
    0;
}


/* ================================================================
   HOME
================================================================ */

.hero{
  position:relative;

  padding:
    152px
    0
    78px;

  overflow:hidden;
}

.hero::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      40% 34%
      at 82% 22%,
      #eef1ff
      0%,
      transparent
      72%
    ),
    radial-gradient(
      30% 24%
      at 14% 20%,
      #f4f9d9
      0%,
      transparent
      76%
    );
}

.hero-grid{
  position:relative;

  display:grid;

  grid-template-columns:
    1.08fr
    .92fr;

  align-items:center;

  gap:64px;
}

.hero-copy{
  min-width:0;
}

.hero-copy h1{
  font-size:
    clamp(
      3.1rem,
      7vw,
      6.2rem
    );

  max-width:780px;

  margin:
    20px
    0
    20px;

  overflow-wrap:break-word;
}

.hero-copy p{
  max-width:56ch;

  color:var(--muted);

  font-size:1.13rem;

  line-height:1.75;

  overflow-wrap:break-word;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:11px;

  margin-top:30px;
}

.hero-note{
  display:flex;
  align-items:center;

  gap:9px;

  color:var(--muted);

  font-size:.9rem;

  margin-top:17px;
}

.stage{
  position:relative;

  height:480px;
}

.float-card{
  position:absolute;

  display:flex;
  align-items:center;

  gap:13px;

  padding:
    12px
    17px
    12px
    12px;

  border:
    1px solid
    var(--line);

  border-radius:20px;

  background:#fff;

  box-shadow:var(--shadow);

  text-decoration:none;

  animation:
    bob
    var(--d,6s)
    ease-in-out
    var(--delay,0s)
    infinite;

  max-width:calc(100% - 8px);
}

.float-card > span:last-child{
  min-width:0;
}

.float-card strong{
  display:block;

  font-size:.98rem;

  line-height:1.2;

  overflow-wrap:break-word;
}

.float-card small{
  display:block;

  color:var(--muted);

  font-size:.8rem;

  overflow-wrap:break-word;
}

.fc1{
  top:6%;
  left:2%;

  --d:6.3s;
}

.fc2{
  top:29%;
  right:3%;

  --d:7.4s;
  --delay:-1.7s;
}

.fc3{
  top:53%;
  left:7%;

  --d:6.8s;
  --delay:-2.8s;
}

.fc4{
  top:77%;
  right:8%;

  --d:7.8s;
  --delay:-4s;
}

@keyframes bob{

  0%,100%{
    transform:
      translateY(0)
      rotate(var(--r,0deg));
  }

  50%{
    transform:
      translateY(-10px)
      rotate(var(--r,0deg));
  }
}

.mini-orbit{
  position:absolute;

  inset:
    16%
    11%;

  display:grid;

  place-items:center;
}

.orbit-core{
  width:174px;
  height:174px;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:
    linear-gradient(
      145deg,
      #fff,
      #f7f7f3
    );

  border:
    1px solid
    var(--line);

  box-shadow:
    0
    26px
    70px
    rgba(22,24,39,.10);
}

.orbit-core .brand-mark{
  width:78px;
  height:78px;

  border-radius:25px;
}

.orbit-core .brand-mark .tl{
  --tl-size:62px;
}

.orbit-ring{
  position:absolute;

  width:330px;
  height:330px;

  border:
    1px
    dashed
    rgba(22,24,39,.16);

  border-radius:50%;

  animation:
    spin
    24s
    linear
    infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

@media(max-width:960px){

  .hero{
    padding-top:130px;
  }

  .hero-grid{
    grid-template-columns:1fr;

    gap:30px;
  }

  .stage{
    height:360px;

    max-width:640px;
    width:100%;

    margin:auto;
  }

  .mini-orbit{
    inset:
      8%
      16%;
  }
}

@media(max-width:560px){

  .hero{
    padding:
      116px
      0
      50px;
  }

  .hero-copy h1{
    font-size:
      clamp(
        2.4rem,
        12vw,
        4.2rem
      );
  }

  .stage{
    height:330px;
  }

  .orbit-ring{
    width:250px;
    height:250px;
  }

  .orbit-core{
    width:142px;
    height:142px;
  }

  .orbit-core .brand-mark{
    width:66px;
    height:66px;
  }

  .orbit-core .brand-mark .tl{
    --tl-size:54px;
  }

  .float-card{
    padding:
      9px
      12px
      9px
      9px;
  }

  .float-card .tile{
    width:42px;
    height:42px;
  }

  .fc1{
    left:0;
  }

  .fc2{
    right:0;
  }

  .fc3{
    left:0;
  }

  .fc4{
    right:0;
  }
}


/* ================================================================
   HOME TOOLS
================================================================ */

.home-tools{
  padding:
    44px
    0
    90px;
}

.section-top{
  display:flex;
  align-items:end;
  justify-content:space-between;

  gap:24px;

  margin-bottom:26px;
}

.section-top > div{
  min-width:0;
}

.section-top h2{
  font-size:
    clamp(
      2rem,
      5vw,
      3.4rem
    );

  overflow-wrap:break-word;
}

.section-top p{
  color:var(--muted);

  max-width:50ch;

  overflow-wrap:break-word;
}

.tool-grid{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:14px;
}

.tool-card{
  padding:18px;

  display:flex;
  flex-direction:column;

  min-height:235px;

  min-width:0;
}

.tool-card .tile{
  margin-bottom:38px;
}

.tool-card h3{
  font-size:1.3rem;
  margin-bottom:7px;

  overflow-wrap:break-word;
}

.tool-card p{
  color:var(--muted);

  font-size:.92rem;

  line-height:1.5;

  overflow-wrap:break-word;
}

.tool-card .tool-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-top:auto;

  padding-top:22px;

  gap:10px;

  flex-wrap:wrap;
}

.text-link{
  display:inline-flex;
  align-items:center;

  gap:7px;

  text-decoration:none;

  font-weight:750;
  font-size:.9rem;
}

.text-link:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

@media(max-width:980px){

  .tool-grid{
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }
}

@media(max-width:560px){

  .section-top{
    align-items:start;

    flex-direction:column;
  }

  .tool-grid{
    grid-template-columns:1fr;
  }

  .tool-card{
    min-height:0;
  }

  .tool-card .tile{
    margin-bottom:22px;
  }
}


/* ================================================================
   TOOL PAGE
================================================================ */

.tool-page{
  padding:
    calc(var(--nav-h) + 52px)
    0
    90px;
}

.tool-shell{
  display:grid;

  grid-template-columns:
    1fr
    320px;

  gap:18px;

  align-items:start;
}

/* Grid children must be able to shrink below their content width,
   otherwise long unbreakable strings overflow and get clipped. */
.tool-shell > *{
  min-width:0;
}

.tool-main{
  padding:20px;

  min-width:0;
}

.tool-sidebar{
  padding:20px;

  position:sticky;

  top:102px;

  min-width:0;
}

.tool-title{
  display:flex;

  gap:14px;

  align-items:flex-start;

  margin-bottom:24px;
}

.tool-title > div{
  min-width:0;
}

.tool-title .tile{
  width:56px;
  height:56px;

  border-radius:17px;
}

.tool-title h1{
  font-size:
    clamp(
      2rem,
      4vw,
      3.5rem
    );

  overflow-wrap:break-word;
}

.tool-title p{
  color:var(--muted);

  margin-top:5px;

  overflow-wrap:break-word;
}

.field{
  display:block;

  margin-top:15px;
}

.field label{
  display:block;

  font-weight:750;

  font-size:.92rem;

  margin-bottom:7px;
}

.input,
.select,
.textarea{
  width:100%;

  border:
    1px solid
    var(--line-strong);

  background:#fff;

  border-radius:16px;

  padding:
    13px
    14px;

  color:var(--ink);

  min-width:0;

  transition:
    border-color .2s,
    box-shadow .2s;
}

.input:focus,
.select:focus,
.textarea:focus{
  outline:none;

  border-color:
    rgba(67,82,219,.5);

  box-shadow:
    0
    0
    0
    4px
    rgba(67,82,219,.08);
}

.textarea{
  min-height:330px;

  resize:vertical;

  line-height:1.65;
}

.tool-actions{
  display:flex;

  flex-wrap:wrap;

  gap:9px;

  margin-top:14px;
}

.tool-status{
  margin-top:14px;

  color:var(--muted);

  font-size:.88rem;

  min-height:1.4em;

  overflow-wrap:break-word;
}

.notice{
  padding:
    14px
    16px;

  border-radius:16px;

  background:var(--paper);

  border:
    1px solid
    var(--line);

  font-size:.9rem;

  color:var(--muted);

  overflow-wrap:break-word;
}

.notice code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;
  padding:1px 5px;
  border-radius:6px;
  background:rgba(22,24,39,.06);
  color:var(--ink);
  overflow-wrap:anywhere;
}

.sidebar-title{
  font-size:1rem;

  margin-bottom:12px;
}

.side-list{
  list-style:none;

  padding:0;
  margin:0;
}

.side-list li{
  padding:
    11px
    0;

  border-bottom:
    1px solid
    var(--line);

  font-size:.9rem;
}

.side-list li:last-child{
  border-bottom:0;
}

.side-list a{
  text-decoration:none;
  font-weight:650;
}

.side-list a:hover{
  text-decoration:underline;
}

.dropzone{
  border:
    1.5px
    dashed
    rgba(22,24,39,.2);

  border-radius:20px;

  padding:34px;

  text-align:center;

  background:var(--paper);

  transition:.2s;
}

.dropzone.drag{
  border-color:var(--focus);

  background:#f4f5ff;
}

.preview{
  display:grid;

  grid-template-columns:
    140px
    1fr;

  gap:15px;

  align-items:start;

  margin-top:15px;
}

.preview img{
  width:140px;
  height:140px;

  object-fit:cover;

  border-radius:18px;

  background:#f2f2ed;

  border:
    1px solid
    var(--line);
}

.kv{
  display:grid;

  grid-template-columns:
    auto
    1fr;

  gap:
    6px
    14px;

  font-size:.9rem;

  min-width:0;
}

.kv dt{
  color:var(--muted);
}

.kv dd{
  margin:0;

  font-weight:650;

  min-width:0;

  overflow-wrap:anywhere;
}

.thumbnail-result{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap:12px;

  margin-top:15px;
}

.thumb-card{
  overflow:hidden;

  border:
    1px solid
    var(--line);

  border-radius:18px;

  background:#fff;

  min-width:0;
}

.thumb-card img{
  display:block;

  width:100%;

  aspect-ratio:16/9;

  object-fit:cover;

  background:#f1f1ec;
}

.thumb-meta{
  padding:
    10px
    12px;

  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:8px;

  flex-wrap:wrap;
}

.thumb-meta span{
  font-size:.8rem;

  color:var(--muted);
}

/* ---------------------------------------------------------------
   WORD COUNTER STATS
   Was an inline 4-column grid that overflowed on phones.
   Now a proper responsive component.
--------------------------------------------------------------- */

.wc-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-top:18px;
}

.wc-stat{
  padding:14px;

  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper);

  min-width:0;
}

.wc-stat strong{
  display:block;

  font-family:var(--display);
  font-weight:750;
  font-size:1.75rem;
  line-height:1.1;

  overflow-wrap:anywhere;
}

.wc-stat span{
  color:var(--muted);
  font-size:.82rem;
}

@media(max-width:640px){

  .wc-stats{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:360px){

  .wc-stat strong{
    font-size:1.4rem;
  }
}

@media(max-width:900px){

  .tool-shell{
    grid-template-columns:1fr;
  }

  .tool-sidebar{
    position:static;
  }

  .thumbnail-result{
    grid-template-columns:
      1fr
      1fr;
  }
}

@media(max-width:560px){

  .tool-main,
  .tool-sidebar{
    padding:16px;
  }

  .tool-title{
    gap:11px;
    margin-bottom:18px;
  }

  .tool-title .tile{
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .preview{
    grid-template-columns:1fr;
  }

  .preview img{
    width:100%;
    height:auto;

    max-height:300px;
  }

  .thumbnail-result{
    grid-template-columns:1fr;
  }

  .dropzone{
    padding:22px 16px;
  }

  .textarea{
    min-height:220px;
  }

  /* Stack tool buttons full-width on phones so nothing is clipped. */
  .tool-actions .btn{
    flex:1 1 100%;
    width:100%;
  }

  .divider{
    margin:30px 0;
  }
}


/* ================================================================
   REFERENCE-STYLE INFORMATION PAGES
   About / Privacy / Contact
================================================================ */

.info-page{

  width:100%;

  padding:
    calc(var(--nav-h) + env(safe-area-inset-top,0px))
    0
    env(safe-area-inset-bottom,0px);

  background:#fff;

}

.info-header{

  position:relative;

  width:100%;

  min-height:120px;

  display:flex;

  align-items:flex-end;

  justify-content:center;

  padding:
    0
    80px
    22px;

  background:#fff;

}

.info-back{

  position:absolute;

  left:22px;

  bottom:17px;

  width:50px;
  height:50px;

  padding:0;

  display:flex;

  align-items:center;

  justify-content:center;

  border:
    1px
    solid
    rgba(0,0,0,.08);

  border-radius:50%;

  background:#f2f2f4;

  color:#111;

  box-shadow:
    0
    2px
    8px
    rgba(0,0,0,.08),

    inset
    0
    1px
    1px
    rgba(255,255,255,.8);

  transition:
    transform
    120ms
    ease,

    background
    120ms
    ease;

}

.info-back svg{

  width:26px;
  height:26px;

}

.info-back:active{

  transform:
    scale(.93);

  background:#e6e6ea;

}

.info-header-title{

  width:100%;

  margin:0;

  color:#111;

  text-align:center;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif;

  font-size:23px;

  line-height:1.15;

  font-weight:600;

  letter-spacing:-.35px;

  overflow-wrap:anywhere;

  word-break:normal;

  text-wrap:balance;

}

.info-content{

  width:
    min(
      calc(100% - 40px),
      720px
    );

  margin:0 auto;

  padding:
    28px
    30px
    72px;

  overflow:visible;

}

.info-content,
.info-content *{

  min-width:0;

}

.info-intro{

  margin:0;

  color:#555;

  font-size:16.5px;

  line-height:1.65;

  overflow-wrap:anywhere;

}

.info-section-block{

  margin-top:32px;

  overflow:visible;

}

.info-section-title{

  margin:
    0
    0
    10px;

  color:#111;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif;

  font-size:19px;

  line-height:1.3;

  font-weight:600;

  letter-spacing:-.15px;

  overflow-wrap:anywhere;

}

.info-section-text{

  margin:0;

  color:#666;

  font-size:16.5px;

  line-height:1.65;

  overflow-wrap:anywhere;

  word-break:normal;

}

.info-section-text a{

  overflow-wrap:anywhere;

  word-break:break-word;

}

.info-contact-card{

  margin-top:32px;

  padding:
    20px
    21px;

  border-radius:20px;

  background:#f4f8da;

  border:
    1px
    solid
    rgba(53,66,10,.08);

}

.info-contact-card strong{

  display:block;

  margin-bottom:6px;

  color:#30390e;

  font-size:1.05rem;

}

.info-contact-card span{

  display:block;

  color:#626848;

  line-height:1.6;

  overflow-wrap:anywhere;

}

.info-list{

  margin:
    12px
    0
    0
    19px;

  padding:0;

  color:#666;

}

.info-list li{

  margin:
    7px
    0;

  padding-left:3px;

  line-height:1.62;

  overflow-wrap:anywhere;

}

@media(max-width:430px){

  .info-header{

    min-height:116px;

    padding:
      0
      64px
      21px;

  }

  .info-back{

    left:20px;

    bottom:16px;

    width:48px;
    height:48px;

  }

  .info-back svg{

    width:25px;
    height:25px;

  }

  .info-header-title{

    font-size:22px;

    line-height:1.15;

  }

  .info-content{

    width:100%;

    padding:
      26px
      25px
      55px;

  }

  .info-intro,
  .info-section-text{

    font-size:16px;

  }

  .info-section-title{

    font-size:19px;

  }

}

@media(max-width:350px){

  .info-header{

    min-height:112px;

    padding-left:58px;

    padding-right:58px;

  }

  .info-back{

    left:16px;

    width:46px;
    height:46px;

  }

  .info-back svg{

    width:24px;
    height:24px;

  }

  .info-header-title{

    font-size:20px;

  }

  .info-content{

    padding-left:21px;
    padding-right:21px;

  }

}




/* ================================================================
   FOOTER / TOAST
================================================================ */

footer{
  padding:
    56px
    0
    calc(
      90px +
      env(safe-area-inset-bottom,0)
    );

  border-top:
    1px solid
    var(--line);

  background:var(--paper);
}

.footer-grid{
  display:grid;

  grid-template-columns:
    1.2fr
    .8fr;

  gap:34px;
}

.footer-grid > *{
  min-width:0;
}

.footer-brand{
  display:flex;
  align-items:center;

  gap:10px;

  font-family:var(--display);

  font-weight:750;

  font-size:1.15rem;

  flex-wrap:wrap;
}

.footer-copy{
  color:var(--muted);

  margin-top:10px;

  max-width:46ch;

  font-size:.9rem;

  overflow-wrap:break-word;
}

.footer-nav{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap:
    10px
    22px;

  align-content:start;
}

.footer-nav a{
  color:var(--muted);

  text-decoration:none;

  font-size:.92rem;

  overflow-wrap:break-word;
}

.footer-nav a:hover{
  color:var(--ink);

  text-decoration:underline;
}

.footer-bottom{
  display:flex;

  justify-content:space-between;

  gap:15px;

  margin-top:35px;

  padding-top:18px;

  border-top:
    1px solid
    var(--line);

  font-size:.82rem;

  color:var(--muted);
}

.toast{
  position:fixed;

  left:50%;

  bottom:calc(24px + env(safe-area-inset-bottom,0));

  z-index:70;

  transform:
    translate(
      -50%,
      14px
    );

  padding:
    12px
    16px;

  border-radius:14px;

  background:var(--ink);

  color:#fff;

  box-shadow:var(--shadow);

  font-size:.9rem;

  opacity:0;

  pointer-events:none;

  transition:
    .28s
    var(--ease);

  max-width:
    calc(
      100% -
      28px
    );

  text-align:center;
}

.toast.show{
  opacity:1;

  transform:
    translate(
      -50%,
      0
    );
}

@media(max-width:700px){

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    flex-direction:column;
  }
}

/* ================================================================
   FINAL MOBILE SAFETY NET
   Applied last so it wins over everything above.
================================================================ */

@media(max-width:820px){

  :root{
    --nav-h:66px;
  }

  .page,
  .tool-page,
  .info-page{
    padding-bottom:64px;
  }
}

@media(max-width:560px){

  :root{
    --nav-h:62px;
  }

  .page{
    padding-top:calc(var(--nav-h) + 30px);
  }

  .tool-page{
    padding-top:calc(var(--nav-h) + 24px);
  }

  .hero{
    padding-top:calc(var(--nav-h) + 46px);
  }

  .page-head{
    margin-bottom:30px;
  }

  .page-head h1{
    font-size:clamp(2rem,9.5vw,3rem);
  }

  .page-head p{
    font-size:1rem;
  }
}

/* ---------- FOOTER ---------- */
footer.ft{
  padding:28px 0 calc(40px + env(safe-area-inset-bottom,0px));
  border-top:0;
  background:var(--paper);
}

.ft-card{
  background:linear-gradient(180deg,#f3fbcf 0%,#f9fbef 45%,#ffffff 100%);
  border:1px solid var(--line);
  border-radius:28px;
  padding:28px 22px 20px;
}

.ft-brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--display);
  font-weight:750;
  font-size:1.3rem;
  color:var(--ink);
}

.ft-desc{
  margin:14px 0 0;
  max-width:38ch;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.6;
}

.ft-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:30px;
}

.ft-col{
  display:flex;
  flex-direction:column;
}

.ft-title{
  margin:0 0 8px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}

.ft-col a{
  padding:8px 0;
  color:var(--ink);
  opacity:.8;
  text-decoration:none;
  font-size:.95rem;
}

.ft-col a:hover{
  opacity:1;
  text-decoration:underline;
}

.ft-copy{
  margin:28px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.85rem;
  color:var(--muted);
}

@media(min-width:760px){
  .ft-card{ padding:40px 44px 24px; }
  .ft-top{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:48px;
    align-items:start;
  }
  .ft-links{ margin-top:0; }
}



/* Static SEO content and breadcrumbs */
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:.88rem;margin:0 auto 22px;max-width:1160px;padding:0 20px}.breadcrumbs a{text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}.seo-content{max-width:1160px;margin:0 auto;padding:34px 20px 72px}.seo-content h2{font-size:clamp(1.45rem,3vw,2.1rem);margin:28px 0 12px}.seo-content h3{font-size:1.15rem;margin:22px 0 8px}.seo-content p{max-width:72ch;color:var(--muted);margin:0 0 14px}.seo-content ul{color:var(--muted);padding-left:22px}.seo-content table{border-collapse:collapse;width:100%;margin:18px 0 28px;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}.seo-content th,.seo-content td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}.seo-content th{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.seo-content details{border-top:1px solid var(--line);padding:14px 0}.seo-content summary{font-weight:700;cursor:pointer}.seo-content .seo-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.seo-content .seo-links a{padding:8px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none}.noscript-fallback{max-width:72ch;margin:24px auto;padding:20px;color:var(--muted)}


/* Professional platform polish */
:root{
  --accent:var(--ink);
  --accent-strong:var(--ink);
  --accent-soft:var(--lime);
  --accent-wash:#f9fbef;
}
.btn-primary{background:var(--accent);box-shadow:0 10px 24px rgba(22,24,39,.15)}
.btn-primary:hover{background:var(--accent-strong);box-shadow:0 14px 30px rgba(22,24,39,.15)}
.nav-cta{background:var(--accent);box-shadow:0 10px 24px rgba(22,24,39,.15)}
.nav-cta:hover{background:var(--accent-strong)}
.tool-card,.surface{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s ease}
.tool-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(22,24,39,.12);border-color:rgba(22,24,39,.15)}
.tool-card .tile{box-shadow:none}
.hero-note{color:var(--muted)}
.kicker{border-color:rgba(22,24,39,.15);background:var(--accent-soft);color:var(--accent-strong)}
:focus-visible{outline-color:var(--accent)}
.ft-card{background:linear-gradient(180deg,#f3fbcf 0%,#f9fbef 45%,#ffffff 100%);border-color:var(--line)}
@media(max-width:759px){.hero-grid{gap:28px}.hero-copy h1{font-size:clamp(2.55rem,14vw,4.5rem)}.tool-grid{gap:14px}.seo-content{padding-top:28px}}