:root {
  --ink: #16211d;
  --muted: #68726c;
  --paper: #f4f1e8;
  --white: #fffef9;
  --line: #d8d5cb;
  --green: #155c46;
  --lime: #c9f26b;
  --red: #e8614d;
  --blue: #4d79e8;
  --gold: #e5ad42;
  --shadow: 0 26px 70px rgba(25, 39, 33, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 99; padding: .8rem 1rem; background: var(--ink); color: white; }
.skip-link:focus { top: 1rem; }
.site-header, footer { width: min(1180px, calc(100% - 48px)); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.site-header { height: 84px; border-bottom: 1px solid rgba(22, 33, 29, .14); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { width: 29px; height: 29px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; transform: skewY(-8deg); }
.brand-mark i { display: block; border-radius: 2px; }
.brand-mark i:nth-child(1) { background: var(--red); }
.brand-mark i:nth-child(2) { background: var(--blue); }
.brand-mark i:nth-child(3) { background: var(--green); }
.header-link { font-size: .86rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.hero { width: min(1180px, calc(100% - 48px)); min-height: 680px; margin: auto; padding: 80px 0 105px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 72px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--green); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 25px; height: 2px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.055em; line-height: .98; }
h1 { max-width: 660px; margin-bottom: 28px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.4rem, 6.2vw, 6.35rem); font-weight: 500; }
h1 em { color: var(--green); font-weight: 500; }
.hero-text { max-width: 570px; margin-bottom: 34px; color: #4e5953; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 26px; }
.button { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 25px; border: 0; border-radius: 3px; font-weight: 800; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(21, 92, 70, .18); }
.button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.button-primary { color: white; background: var(--green); }
.text-link { font-size: .9rem; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.microcopy { margin: 17px 0 0; color: var(--muted); font-size: .76rem; }

.workspace { position: relative; perspective: 900px; }
.window { overflow: hidden; min-height: 430px; border: 1px solid #d5d3ca; border-radius: 8px; background: var(--white); box-shadow: var(--shadow); transform: rotateY(-2deg) rotateX(1deg); }
.window-bar { height: 54px; display: flex; align-items: center; gap: 17px; padding: 0 17px; border-bottom: 1px solid #e6e3dc; color: #778079; font-size: .7rem; }
.window-bar > span { flex: 1; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d5d6d0; }
.avatar { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: .55rem; font-weight: 800; }
.window-body { min-height: 376px; display: grid; grid-template-columns: 63px 1fr; }
.tool-rail { display: flex; flex-direction: column; align-items: center; gap: 11px; padding-top: 25px; background: #f5f4ef; }
.tool { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 3px; color: #859089; background: white; font-size: .52rem; font-weight: 900; }
.tool.active { color: white; background: var(--blue); box-shadow: 0 4px 12px rgba(77, 121, 232, .24); }
.document { margin: 28px auto; width: min(76%, 380px); padding: 34px 37px; background: #fff; box-shadow: 0 8px 25px rgba(26, 38, 33, .09); }
.doc-label { color: var(--blue); font-size: .47rem; font-weight: 900; letter-spacing: .15em; }
.doc-title { width: 52%; height: 9px; margin: 13px 0 21px; background: #26342e; }
.doc-line { height: 4px; margin: 8px 0; border-radius: 5px; background: #e1e5e1; }
.doc-line.long { width: 95%; }.doc-line.medium { width: 72%; }.doc-line.short { width: 43%; }
.report-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 13px; margin: 25px 0; }
.chart-card, .score-card { min-height: 102px; padding: 14px; border-radius: 3px; background: #f5f7f5; }
.chart-card > span, .score-card span { color: #86908a; font-size: .47rem; }
.bars { height: 57px; display: flex; align-items: flex-end; gap: 8px; padding-top: 10px; }
.bars i { width: 12px; background: var(--blue); opacity: .78; }.bars i:nth-child(1){height:35%}.bars i:nth-child(2){height:72%}.bars i:nth-child(3){height:50%}.bars i:nth-child(4){height:90%}.bars i:nth-child(5){height:66%}
.score-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #edf5e5; }
.score-card strong { color: var(--green); font-family: Georgia, serif; font-size: 1.6rem; }
.float-card { position: absolute; display: grid; padding: 16px 18px; border: 1px solid rgba(22,33,29,.1); border-radius: 5px; background: white; box-shadow: 0 16px 35px rgba(26, 38, 33, .15); }
.float-card b { font-size: .76rem; }.float-card span { color: var(--muted); font-size: .58rem; }
.float-pdf { left: -28px; bottom: 43px; border-left: 4px solid var(--red); }
.float-pdf b { color: var(--red); }
.float-ai { right: -25px; top: 88px; grid-template-columns: auto 1fr; column-gap: 8px; }
.float-ai .spark { grid-row: 1 / 3; align-self: center; color: var(--gold); font-size: 1.4rem; }

.proof { padding: 23px max(24px, calc((100% - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 35px; color: white; background: var(--green); }
.proof p { margin: 0; font-family: Georgia, serif; font-size: 1.1rem; font-style: italic; }
.proof-list { display: flex; gap: 45px; font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.proof-list span::before { content: "✓"; margin-right: 9px; color: var(--lime); }

.section { padding: 130px max(24px, calc((100% - 1180px) / 2)); }
.section-heading { max-width: 680px; margin-bottom: 55px; }
h2 { margin-bottom: 25px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 500; }
.section-heading > p:last-child, .device-copy > p { max-width: 560px; color: var(--muted); font-size: 1.04rem; line-height: 1.7; }
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tool-card { position: relative; overflow: hidden; min-height: 390px; padding: 28px; border: 1px solid var(--line); background: rgba(255,255,255,.38); }
.tool-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 62px; border-radius: 4px; color: white; font-size: .8rem; font-weight: 900; }
.writer .tool-icon { background: var(--blue); }.sheets .tool-icon { background: var(--green); }.slides .tool-icon { background: var(--gold); }.pdf .tool-icon { background: var(--red); }
.card-number { position: absolute; right: 25px; top: 31px; color: #9ba29e; font-family: Georgia, serif; font-size: .72rem; }
.tool-card h3 { margin-bottom: 13px; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 500; }
.tool-card p { color: var(--muted); font-size: .87rem; line-height: 1.6; }
.card-art { position: absolute; left: 28px; right: 28px; bottom: 25px; height: 60px; opacity: .75; }
.text-art i { display: block; width: 100%; height: 4px; margin: 8px 0; background: #b5c3d9; }.text-art i:nth-child(2){width:83%}.text-art i:nth-child(4){width:55%}
.grid-art { display:grid;grid-template-columns:repeat(4,1fr);gap:3px }.grid-art i{border:1px solid #a9c3b8}.grid-art i:nth-child(2),.grid-art i:nth-child(7){background:#8eb9a6}
.slide-art { padding: 9px; border: 1px solid #d6bd87; }.slide-art i{display:block;width:35%;height:100%;background:#e5ad42}.slide-art span{position:absolute;width:42%;height:5px;right:10%;top:45%;background:#d6c7a9}
.pdf-art { display:flex;align-items:center;gap:15px }.pdf-art span{padding:12px;color:white;background:var(--red);font-size:.65rem;font-weight:900}.pdf-art i{width:60%;height:4px;background:#e5b8b1}

.feature-band { display: grid; grid-template-columns: .9fr 1.1fr; gap: 95px; color: white; background: var(--ink); }
.eyebrow.light { color: var(--lime); }
.feature-list article { display: grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.17); }
.feature-list article:last-child { border-bottom: 1px solid rgba(255,255,255,.17); }
.feature-list article > span { color: var(--lime); font-family: Georgia, serif; font-size: .75rem; }
.feature-list h3 { margin-bottom: 9px; font-family: Georgia, serif; font-size: 1.5rem; font-weight: 500; }
.feature-list p { margin: 0; color: #acb5b0; font-size: .88rem; line-height: 1.6; }

.devices { display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 105px; }
.device-art { position: relative; min-height: 430px; display: grid; place-items: center; }
.device-art::before { content:""; position:absolute; width:85%; aspect-ratio:1; border-radius:50%; background:#e1ead4; }
.laptop { position:relative;width:88%;padding:9px 9px 18px;border-radius:9px;background:#2b3732;box-shadow:var(--shadow);transform:rotate(-3deg) }.laptop::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-8px;height:12px;border-radius:2px 2px 15px 15px;background:#708078}.laptop>div{aspect-ratio:16/10;padding:13%;background:#fbfbf7}.laptop span{display:block;width:48%;height:9px;margin-bottom:25px;background:var(--ink)}.laptop i{display:block;width:90%;height:5px;margin:9px 0;background:#d7ddd8}.laptop i:last-child{width:53%}
.phone { position:absolute;right:1%;bottom:4%;width:24%;padding:8px;border:5px solid #303c37;border-radius:19px;background:#fff;box-shadow:0 17px 35px rgba(22,33,29,.22);transform:rotate(5deg) }.phone div{aspect-ratio:9/17;padding:22px 9px;background:#f4f1e8}.phone span{display:block;width:70%;height:5px;margin-bottom:16px;background:var(--green)}.phone i{display:block;height:25%;margin:7px 0;background:#dce6d6}
.platforms { display: flex; flex-wrap: wrap; gap: 8px; margin: 33px 0 0; padding: 0; list-style: none; }
.platforms li { padding: 9px 13px; border: 1px solid var(--line); border-radius: 100px; font-size: .72rem; font-weight: 750; }

.final-cta { padding: 110px 24px; text-align: center; color: white; background: var(--green); }
.final-cta .eyebrow { justify-content:center }.final-cta h2 { margin-bottom:22px }.final-cta > p:not(.eyebrow,.disclosure) { margin-bottom:31px;color:#d4e4dc }.button-light { color: var(--ink); background: var(--lime); }
.disclosure { max-width: 650px; margin: 34px auto 0; color: #b8cec4; font-size: .68rem; line-height: 1.55; }
footer { min-height: 100px; gap: 25px; color: var(--muted); font-size: .7rem; }
footer p { margin: 0; }
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; gap: 65px; padding-top: 65px; }
  .hero-copy { max-width: 720px; }
  .workspace { width: min(680px, 95%); margin: auto; }
  .proof { align-items: flex-start; }
  .proof-list { gap: 14px 28px; flex-wrap: wrap; }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-band, .devices { grid-template-columns: 1fr; gap: 50px; }
  .device-art { width: min(650px, 90%); margin: auto; }
}

@media (max-width: 620px) {
  .site-header, footer, .hero { width: min(100% - 32px, 1180px); }
  .site-header { height: 69px; }.header-link { display:none }
  .hero { min-height:0;padding:55px 0 78px;gap:55px }
  h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .hero-actions { align-items:stretch;flex-direction:column;gap:18px }.button { width:100% }.text-link{text-align:center}
  .window { min-height:330px }.window-body{min-height:276px;grid-template-columns:48px 1fr}.document{margin:18px auto;padding:25px 22px;width:82%}.report-grid{margin:18px 0}.float-ai{right:-8px;top:67px}.float-pdf{left:-8px;bottom:24px}
  .proof { flex-direction:column;padding-top:29px;padding-bottom:29px }.proof-list{display:grid;gap:13px}
  .section { padding-top:85px;padding-bottom:85px }.tool-grid{grid-template-columns:1fr}.tool-card{min-height:340px}.tool-icon{margin-bottom:39px}
  .devices { gap:35px }.device-art{min-height:300px;width:100%}.device-copy{order:-1}
  .final-cta { padding:85px 20px }.final-cta br{display:none}
  footer { min-height:160px;align-items:flex-start;justify-content:center;flex-direction:column;padding:30px 0 }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}