@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --ink: #292825;
  --muted: #77736b;
  --paper: #f7f5f0;
  --white: #fffdf9;
  --coral: #e87663;
  --coral-dark: #cb5e4d;
  --rose: #f3ded7;
  --sage: #dce7dc;
  --sand: #ede6d8;
  --line: #ded9ce;
  --gold: #b5986e;
  --mono: 'DM Mono', monospace;
  --sans: 'DM Sans', sans-serif;
  --display: 'Calistoga', Georgia, serif;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: hidden; }
body { overflow-x: hidden; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid rgba(203, 94, 77, .55); outline-offset: 4px; }

.announcement { min-height: 38px; background: #2e302a; color: #f5f1e8; display: flex; justify-content: center; align-items: center; gap: 11px; font-size: 12px; letter-spacing: .01em; }
.announcement a { color: #f6bd9f; margin-left: 4px; border-bottom: 1px solid rgba(246, 189, 159, .45); }
.announcement-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #a9c7a6; box-shadow: 0 0 0 3px rgba(169, 199, 166, .15); }
.site-header { height: 78px; max-width: var(--max); padding: 0 32px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.055em; }
.brand-mark { width: 24px; height: 24px; display: grid; place-items: center; color: var(--coral); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-slash { color: var(--coral); font-weight: 400; margin: 0 1px; }
.desktop-nav { display: flex; gap: 31px; margin-left: 50px; font-size: 13px; color: #615d56; }
.desktop-nav a, .footer-links a { transition: color .2s ease; }
.desktop-nav a:hover, .footer-links a:hover { color: var(--coral-dark); }
.header-actions { display: flex; align-items: center; gap: 19px; }
.text-button { background: transparent; color: #615d56; padding: 9px 0; font-size: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 13px; font-weight: 700; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(41, 40, 37, .12); }
.button-dark { background: var(--ink); color: #fffdf9; }
.button-dark:hover { background: #45433e; }
.button-coral { background: var(--coral); color: #fffdf9; }
.button-coral:hover { background: var(--coral-dark); }
.resume-plan { display: flex; align-items: center; gap: 11px; width: min(100%, 430px); margin-top: 17px; padding: 11px 12px; border: 1px solid #ead6c9; border-radius: 9px; background: #fffaf5; box-shadow: 0 8px 20px rgba(68, 47, 31, .05); }
.resume-plan-mark { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border-radius: 50%; background: #f7ddd4; color: var(--coral-dark); font-size: 14px; }
.resume-plan-copy { min-width: 0; flex: 1; }
.resume-plan-copy strong, .resume-plan-copy small { display: block; }
.resume-plan-copy strong { color: var(--ink); font-size: 11px; font-weight: 700; }
.resume-plan-copy small { margin-top: 3px; overflow: hidden; color: #958b80; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.resume-plan-link { flex: none; color: var(--coral-dark); font-size: 10px; font-weight: 700; white-space: nowrap; }
.resume-plan-link:hover { color: var(--ink); }
.button-outline { border: 1px solid #cfc7bb; background: transparent; color: var(--ink); }
.button-outline:hover { background: #fffdf9; border-color: var(--coral); }
.button-light { background: #fff9f2; color: var(--ink); }
.button-small { min-height: 40px; padding: 0 17px; font-size: 12px; }
.menu-toggle, .mobile-nav { display: none; }

.section-shell { width: min(var(--max), calc(100% - 64px)); margin-inline: auto; }
.hero { min-height: 660px; padding: 77px 0 65px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 45px; align-items: center; position: relative; }
.hero-copy { padding-left: clamp(0px, 5vw, 67px); position: relative; z-index: 2; }
.eyebrow { margin: 0 0 20px; color: var(--coral-dark); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; }
.eyebrow-line { display: inline-block; width: 30px; height: 1px; margin: 0 10px 3px 0; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.045em; line-height: 1.08; }
h1 { font-size: clamp(52px, 5.7vw, 82px); max-width: 620px; margin: 0 0 26px; }
h1 em, h2 em, h3 em { color: var(--coral); font-style: normal; }
.hero-lede { max-width: 430px; color: var(--muted); font-size: 17px; line-height: 1.65; margin-bottom: 31px; }
.hero-actions { display: flex; gap: 23px; align-items: center; flex-wrap: wrap; }
.hero-actions-dual { gap: 10px; margin-bottom: 17px; }
.hero-actions-dual .button { min-height: 45px; padding-inline: 17px; font-size: 11px; }
.play-link { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 12px; font-weight: 600; }
.play-icon { width: 26px; height: 26px; border: 1px solid #c8c1b6; border-radius: 50%; display: grid; place-items: center; font-size: 8px; padding-left: 2px; transition: border .2s ease, background .2s ease; }
.play-link:hover .play-icon { background: var(--white); border-color: var(--coral); }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 27px; color: #858077; font-family: var(--mono); font-size: 9px; letter-spacing: .02em; }
.check-icon { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #c7d9c8; color: #517355; font-size: 10px; font-weight: 700; }
.note-divider { width: 1px; height: 13px; background: #cbc5ba; margin: 0 3px; }

.hero-visual { min-width: 0; position: relative; padding: 20px 0 48px; }
.hero-orbit { position: absolute; border: 1px solid rgba(181, 152, 110, .27); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 560px; height: 560px; right: -110px; top: -70px; }
.orbit-two { width: 355px; height: 355px; right: -5px; top: 27px; border-color: rgba(232, 118, 99, .18); }
.editor-window { position: relative; z-index: 1; width: 100%; overflow: hidden; border: 1px solid rgba(39, 39, 34, .13); border-radius: 14px; background: var(--white); box-shadow: 0 25px 55px rgba(70, 57, 44, .13), 0 5px 12px rgba(70, 57, 44, .07); }
.editor-topbar { height: 46px; padding: 0 16px; border-bottom: 1px solid #ebe6dd; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.window-dots { display: flex; gap: 5px; width: 70px; }.window-dots span { width: 6px; height: 6px; border-radius: 50%; background: #d5d0c6; }.window-dots span:first-child { background: #e99c83; }.window-dots span:nth-child(2) { background: #dec889; }
.editor-title { font-weight: 700; color: #4d4a45; letter-spacing: -.02em; }.editor-title small { color: #aea89e; padding: 0 4px; }.save-state { width: 70px; color: #819683; font-size: 10px; }.save-state i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: #93b99b; border-radius: 50%; }
.editor-toolbar { height: 48px; padding: 0 18px; border-bottom: 1px solid #ebe6dd; display: flex; align-items: center; justify-content: space-between; }.toolbar-tabs { display: flex; gap: 17px; }.toolbar-tab { padding: 7px 0; color: #a29b90; background: transparent; font-size: 10px; }.toolbar-tab.active { color: var(--ink); border-bottom: 1px solid var(--coral); }.toolbar-actions { display: flex; gap: 8px; align-items: center; }.icon-button { width: 25px; height: 25px; background: transparent; color: #a29b90; font-size: 18px; }.toolbar-divider { height: 18px; width: 1px; background: #e5e0d8; margin: 0 3px; }.progress-pill { padding: 5px 8px; border-radius: 6px; background: #f5efe9; color: #867c6d; font-family: var(--mono); font-size: 8px; }.progress-pill strong { color: var(--coral-dark); }
.editor-body { display: grid; grid-template-columns: 155px 1fr; min-height: 348px; }.editor-sidebar { padding: 16px 12px; border-right: 1px solid #eee9e1; background: #fcfaf6; }.sidebar-heading { display: flex; align-items: center; justify-content: space-between; color: #9f978b; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }.sidebar-heading button { color: var(--coral); background: transparent; font-size: 20px; line-height: 1; }.guest-search { display: flex; align-items: center; gap: 6px; height: 27px; padding: 0 8px; margin: 12px 0 9px; color: #a8a198; border: 1px solid #e8e2d8; border-radius: 5px; font-size: 9px; }.guest-list { display: grid; gap: 5px; }.guest-row { min-width: 0; display: grid; grid-template-columns: 24px 1fr 9px; gap: 7px; align-items: center; padding: 6px 5px; border-radius: 6px; }.guest-row:hover { background: #f1ece4; }.guest-row strong, .guest-row small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.guest-row strong { color: #565149; font-size: 9px; font-weight: 600; }.guest-row small { color: #aaa197; font-size: 8px; }.avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-family: var(--mono); font-size: 7px; font-weight: 500; }.avatar-peach { background: #d99a82; }.avatar-blue { background: #98b2c6; }.avatar-yellow { background: #d1b27f; }.avatar-lilac { background: #ad9fc1; }.avatar-dark { background: #575c55; }.drag-dots { color: #c4bcb0; font-size: 14px; }.import-link { padding: 18px 0 0; background: transparent; color: var(--coral-dark); font-size: 9px; }.import-link span { font-size: 12px; margin-left: 4px; }
.chart-canvas { padding: 14px 17px 11px; background: #fffefa; }.canvas-label, .canvas-footer { display: flex; justify-content: space-between; color: #aea79b; font-family: var(--mono); font-size: 8px; letter-spacing: .03em; }.canvas-label span:first-child { color: #777167; font-weight: 500; }.floor-plan { height: 276px; margin: 13px 0 10px; border: 1px dashed #e0d7ca; background: radial-gradient(#e5ded2 1px, transparent 1px); background-size: 13px 13px; position: relative; overflow: hidden; }.floor-plan:before, .floor-plan:after { content: ''; position: absolute; background: #f1e8dc; border-radius: 50%; opacity: .55; }.floor-plan:before { width: 170px; height: 48px; top: 73px; left: 105px; }.floor-plan:after { width: 125px; height: 40px; bottom: 41px; left: 127px; }.room-label { position: absolute; left: 50%; transform: translateX(-50%); color: #c3b8aa; font-family: var(--mono); font-size: 7px; letter-spacing: .14em; }.room-label-top { top: 22px; }.table { width: 58px; height: 58px; position: absolute; display: grid; place-items: center; border: 1px solid #bea98f; border-radius: 50%; background: #f8f0e5; color: #8b755d; font-family: var(--mono); font-size: 8px; box-shadow: 0 0 0 4px rgba(255, 253, 249, .85); }.table small { position: absolute; top: -6px; right: -5px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: #af9271; font-size: 7px; }.table.selected { border: 2px solid var(--coral); background: #fbdfd8; box-shadow: 0 0 0 4px rgba(232, 118, 99, .11); }.table-one { top: 61px; left: 40px; }.table-two { top: 61px; right: 40px; }.table-three { bottom: 36px; left: 50px; }.table-four { bottom: 36px; right: 50px; }.stage { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); width: 100px; height: 26px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #c8d4c3; border-radius: 4px; background: #edf4eb; color: #81937c; font-family: var(--mono); font-size: 7px; }.stage span { color: #b59b73; font-size: 11px; }.floor-tag { position: absolute; left: 10px; bottom: 8px; display: flex; align-items: center; gap: 5px; color: #a9a093; font-size: 8px; }.floor-dot { width: 7px; height: 7px; border-radius: 50%; background: #b4c5ae; }.collab-cursor { position: absolute; top: 145px; left: 58%; display: flex; align-items: center; color: var(--coral-dark); font-size: 9px; transform: rotate(-4deg); }.cursor-arrow { font-size: 22px; line-height: 1; }.collab-cursor span:last-child { padding: 3px 7px; border-radius: 4px; background: var(--coral); color: #fff; font-size: 8px; }.zoom-icon { display: inline-grid; place-items: center; width: 15px; height: 15px; margin: 0 4px; border: 1px solid #e1dcd2; border-radius: 3px; color: #9d9488; }
.floating-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: rgba(255, 253, 249, .94); border: 1px solid rgba(41, 40, 37, .11); border-radius: 8px; box-shadow: 0 14px 30px rgba(70, 57, 44, .13); }.floating-card strong, .floating-card small { display: block; }.floating-card strong { color: #5f5a50; font-size: 10px; }.floating-card small { color: #aaa197; font-size: 8px; }.floating-card-top { top: 0; right: -22px; }.floating-card-bottom { bottom: 0; left: -27px; }.float-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; }.float-icon-green { background: #dbe9dc; color: #648269; }.float-check { display: grid; place-items: center; width: 17px; height: 17px; margin-left: 7px; border-radius: 50%; color: #5f8465; background: #dbe9dc; font-size: 10px; }

.proof-strip { padding: 19px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #958f84; }.proof-strip p { margin: 0; font-size: 11px; }.proof-items { display: flex; align-items: center; gap: 23px; color: #a6a095; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }.proof-items i { width: 4px; height: 4px; border-radius: 50%; background: #c7beb2; }
.manifesto { padding: 145px 10% 120px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 60px; }.manifesto h2, .section-heading h2 { font-size: clamp(41px, 4.6vw, 64px); margin: 0; }.manifesto-copy { max-width: 345px; padding-bottom: 5px; }.manifesto-copy p { color: var(--muted); font-size: 17px; line-height: 1.65; margin-bottom: 25px; }.arrow-link { display: inline-flex; gap: 10px; align-items: center; color: var(--coral-dark); font-size: 12px; font-weight: 700; }.arrow-link span, .card-link span { transition: transform .2s ease; }.arrow-link:hover span, .card-link:hover span { transform: translate(3px, -3px); }
.workflow-section { padding-bottom: 145px; }.workflow-section .section-heading { margin-bottom: 33px; }.workflow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.workflow-card { min-height: 405px; padding: 25px 27px 27px; border-radius: 10px; position: relative; overflow: hidden; }.workflow-card-template { background: #e2ebe1; }.workflow-card-diy { background: #f2e1d8; }.workflow-card:after { content: ''; position: absolute; right: -55px; bottom: -86px; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; }.workflow-card-top { display: flex; align-items: center; gap: 9px; position: relative; z-index: 1; }.workflow-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; background: rgba(255,255,255,.57); color: var(--coral-dark); font-size: 17px; }.workflow-kicker, .workflow-time { color: rgba(41,40,37,.55); font: 9px var(--mono); letter-spacing: .12em; }.workflow-time { margin-left: auto; font-size: 8px; letter-spacing: .04em; }.workflow-card h3 { position: relative; z-index: 1; margin: 42px 0 12px; font: 400 30px/1.1 var(--display); letter-spacing: -.04em; }.workflow-card h3 em { color: var(--coral); font-style: normal; }.workflow-card p { position: relative; z-index: 1; max-width: 385px; color: rgba(65,62,56,.7); font-size: 13px; line-height: 1.6; }.workflow-card ol { position: relative; z-index: 1; display: flex; gap: 18px; padding: 0; margin: 27px 0 27px; list-style: none; color: #6d7f6c; font-size: 10px; }.workflow-card-diy ol { color: #9c6f5d; }.workflow-card li { display: flex; gap: 5px; align-items: center; }.workflow-card li span { color: rgba(41,40,37,.42); font: 8px var(--mono); }.workflow-button { position: relative; z-index: 1; min-height: 40px; padding-inline: 15px; font-size: 11px; }.workflow-output { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: #7b766d; }.workflow-output-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--sage); color: var(--sage-dark); }.workflow-output strong, .workflow-output small { display: block; }.workflow-output strong { color: #5e5a52; font-size: 11px; }.workflow-output small { margin-top: 2px; font-size: 10px; }.workflow-output-arrow { margin-left: auto; color: var(--coral-dark); font-size: 16px; }
.feature-section { padding-bottom: 145px; }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.feature-card { min-height: 528px; padding: 22px 24px 25px; border-radius: 11px; position: relative; display: flex; flex-direction: column; overflow: hidden; }.feature-card-rose { background: var(--rose); }.feature-card-sage { background: var(--sage); }.feature-card-sand { background: var(--sand); }.feature-number { font-family: var(--mono); font-size: 10px; color: rgba(41, 40, 37, .5); }.feature-card h3 { margin: auto 0 11px; font-family: var(--display); font-size: 28px; font-weight: 400; line-height: 1.12; letter-spacing: -.04em; }.feature-card p { max-width: 285px; color: rgba(65, 62, 56, .7); font-size: 13px; line-height: 1.6; margin: 0 0 22px; }.card-link { display: inline-flex; gap: 9px; color: var(--ink); font-size: 11px; font-weight: 700; }.feature-illustration { height: 240px; position: relative; margin: 5px 0 10px; }.guest-illustration { background: rgba(255,255,255,.28); border-radius: 7px; transform: rotate(-2deg); }.illustration-card { position: absolute; display: grid; place-items: center; width: 67px; height: 86px; border-radius: 7px; color: #68615a; background: #fffaf2; box-shadow: 0 8px 16px rgba(91, 69, 58, .09); font-family: var(--mono); font-size: 11px; }.illustration-card:after { content: ''; width: 27px; height: 1px; background: #dfcfc0; position: absolute; bottom: 22px; }.card-a { top: 50px; left: 26%; transform: rotate(-11deg); }.card-b { top: 29px; left: 45%; z-index: 1; transform: rotate(4deg); background: #f8eee8; }.card-c { top: 58px; left: 63%; transform: rotate(10deg); }.illustration-line { position: absolute; width: 1px; height: 34px; background: #c5a39c; transform: rotate(42deg); }.line-a { top: 25px; left: 31%; }.line-b { top: 26px; left: 69%; transform: rotate(-45deg); }.table-illustration { background: rgba(255,255,255,.22); border-radius: 7px; }.mini-table { position: absolute; display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(97, 127, 105, .45); background: rgba(255,255,255,.35); border-radius: 50%; color: #718876; font-family: var(--mono); font-size: 10px; }.mini-one { top: 55px; left: 21%; }.mini-two { top: 80px; left: 49%; background: #eef5ea; border: 2px solid #8dac8e; }.mini-three { top: 137px; left: 35%; }.move-cursor { position: absolute; left: 56%; top: 63px; color: #5f8465; font-size: 31px; transform: rotate(-16deg); }.move-label { position: absolute; left: 61%; top: 58px; padding: 3px 6px; border-radius: 4px; background: #719174; color: #fff; font-size: 8px; }.print-illustration { background: rgba(255,255,255,.25); border-radius: 7px; }.paper-sheet { position: absolute; left: 29%; top: 20px; width: 145px; height: 200px; padding: 21px 14px; background: #fffaf2; color: #9c765a; box-shadow: 12px 12px 0 rgba(126, 100, 70, .09); transform: rotate(6deg); text-align: center; }.paper-sheet span { font-family: var(--mono); font-size: 8px; letter-spacing: .15em; }.paper-sheet span small { font-size: 9px; color: var(--coral); }.paper-sheet b { display: block; margin: 45px 0 40px; font-family: var(--display); font-size: 23px; line-height: .92; font-weight: 400; letter-spacing: -.05em; }.paper-sheet i { display: block; width: 34px; height: 1px; margin: -22px auto 18px; background: #d9bca6; }.paper-sheet > small { font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }.paper-shadow { position: absolute; top: 44px; left: 34%; width: 145px; height: 200px; border: 1px solid rgba(156, 118, 90, .2); transform: rotate(-4deg); }

.templates-section { padding: 10px 0 145px; }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 42px; }.section-heading h2 { margin-top: 0; }.template-tabs { display: flex; gap: 26px; margin-bottom: 19px; border-bottom: 1px solid var(--line); }.template-tab { padding: 0 0 13px; background: transparent; color: #a19a90; font-size: 12px; }.template-tab.active { color: var(--ink); border-bottom: 2px solid var(--coral); margin-bottom: -1px; }.template-grid { display: grid; grid-template-columns: 1.3fr .85fr .85fr; grid-template-rows: 196px 196px; gap: 12px; }.template-card { position: relative; padding: 24px; color: var(--ink); text-align: left; border-radius: 9px; overflow: hidden; transition: transform .24s ease, box-shadow .24s ease, opacity .2s ease; }.template-card:hover { transform: translateY(-4px); box-shadow: 0 15px 24px rgba(60, 51, 42, .1); }.template-card-main { grid-row: 1 / 3; background: #d9e2da; }.template-card-garden { background: #ead9ca; }.template-card-editorial { background: #d9d2e1; }.template-card-night { grid-column: 2 / 4; background: #d5dce1; }.template-card:before, .template-card:after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.48); }.template-card-main:before { width: 270px; height: 270px; right: -58px; top: -67px; }.template-card-main:after { width: 190px; height: 190px; right: -18px; top: -27px; }.template-card-garden:before { width: 150px; height: 150px; right: -30px; bottom: -50px; background: rgba(179, 143, 111, .15); }.template-card-garden:after { width: 58px; height: 58px; right: 52px; top: 28px; background: rgba(255, 249, 235, .45); }.template-card-editorial:before { width: 190px; height: 190px; right: -15px; top: -64px; background: rgba(255,255,255,.23); }.template-card-night:before { width: 280px; height: 110px; right: 45px; bottom: -76px; background: rgba(255,255,255,.27); }.template-card-title { position: relative; z-index: 1; display: block; font-family: var(--display); font-size: 31px; line-height: .98; letter-spacing: -.05em; }.template-card-title em { color: var(--coral-dark); font-style: normal; }.template-card-garden .template-card-title em { color: #6f8067; }.template-card-editorial .template-card-title em { color: #746584; }.template-card-night .template-card-title em { color: #718991; }.template-chip { position: absolute; top: 22px; right: 20px; z-index: 2; padding: 5px 8px; border: 1px solid rgba(69, 94, 74, .2); border-radius: 4px; color: #6b836f; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }.template-card-meta { position: absolute; z-index: 1; left: 24px; bottom: 21px; color: rgba(41,40,37,.63); font-size: 10px; }.template-card-meta span { margin-left: 10px; }.template-preview-note { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: #747066; }.preview-swatch { width: 12px; height: 12px; border-radius: 50%; background: #d9e2da; border: 1px solid rgba(41,40,37,.13); }.template-preview-note strong, .template-preview-note small { display: block; }.template-preview-note strong { font-size: 11px; }.template-preview-note small { color: #aaa398; font-size: 10px; }

.quote-section { padding: 33px 55px; margin-bottom: 145px; display: grid; grid-template-columns: 100px 1fr auto; gap: 28px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.quote-mark { color: var(--coral); font-family: Georgia, serif; font-size: 94px; line-height: .7; }.quote-content { max-width: 600px; }.quote-text { margin: 0 0 18px; font-family: var(--display); font-size: 25px; line-height: 1.2; letter-spacing: -.025em; }.quote-person { display: flex; align-items: center; gap: 10px; }.quote-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--rose); color: var(--coral-dark); font-family: var(--mono); font-size: 8px; }.quote-person strong, .quote-person small { display: block; }.quote-person strong { font-size: 11px; }.quote-person small { color: #9e978c; font-size: 10px; }.quote-controls { display: flex; align-items: center; gap: 7px; color: #9e978c; font-family: var(--mono); font-size: 9px; }.round-control { display: grid; place-items: center; width: 31px; height: 31px; margin-left: 2px; border: 1px solid #d6d0c5; border-radius: 50%; background: transparent; color: var(--ink); transition: background .2s ease, border .2s ease; }.round-control:hover { background: #fffdf9; border-color: var(--coral); }
.cta-section { min-height: 460px; margin-bottom: 145px; padding: 77px 11% 68px; position: relative; overflow: hidden; border-radius: 11px; background: #3d4a3d; color: #fff9ef; }.cta-copy { position: relative; z-index: 1; }.eyebrow-light { color: #b6ceb5; }.cta-section h2 { margin: 0 0 31px; font-size: clamp(37px, 4.2vw, 58px); }.cta-section h2 em { color: #f4b098; }.cta-note { margin: 14px 0 0; color: #b8c6b4; font-size: 10px; }.cta-flower { position: absolute; right: 7%; bottom: -7px; width: 275px; height: 275px; color: #aabda6; opacity: .64; transform: rotate(-10deg); }.cta-flower svg { width: 100%; height: 100%; }
.faq-section { padding-bottom: 145px; }.heading-side-note { margin: 0 0 6px; color: #8a847b; font-size: 12px; }.heading-side-note a { color: var(--coral-dark); font-weight: 600; }.faq-list { max-width: 850px; margin-left: auto; border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { min-height: 76px; padding: 0 5px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-family: var(--display); font-size: 22px; letter-spacing: -.025em; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { position: relative; width: 20px; height: 20px; }.faq-list summary span:before, .faq-list summary span:after { content: ''; position: absolute; left: 4px; top: 9px; width: 13px; height: 1px; background: var(--coral); transition: transform .2s ease; }.faq-list summary span:after { transform: rotate(90deg); }.faq-list details[open] summary span:after { transform: rotate(0); }.faq-list details p { max-width: 610px; padding: 0 50px 23px 5px; margin: -5px 0 0; color: var(--muted); font-size: 13px; }
.site-footer { background: #2e302a; color: #f3eee4; }.footer-top { min-height: 175px; padding-top: 46px; padding-bottom: 40px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; }.brand-footer { color: #f3eee4; }.footer-top > p { margin: 3px 0 0; color: #a9aa9e; font-size: 12px; }.footer-links { display: flex; justify-content: flex-end; gap: 20px; color: #bdc0b3; font-size: 11px; }.footer-bottom { min-height: 58px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; color: #888d82; font-family: var(--mono); font-size: 9px; }.footer-bottom a { margin-left: 14px; color: #a9aa9e; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(39, 36, 31, .48); backdrop-filter: blur(6px); }.modal-backdrop[hidden] { display: none; }.modal-card { width: min(100%, 420px); position: relative; padding: 37px; border-radius: 12px; background: var(--white); box-shadow: 0 24px 70px rgba(30, 27, 23, .25); }.modal-close { position: absolute; top: 13px; right: 16px; width: 30px; height: 30px; background: transparent; color: #8f887d; font-size: 25px; }.modal-kicker { color: var(--coral-dark); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; }.modal-card h2 { margin: 14px 0 12px; font-size: 40px; }.modal-card p { color: var(--muted); font-size: 13px; margin-bottom: 23px; }.modal-card label { display: block; color: #777067; font-size: 11px; font-weight: 600; }.modal-card input { width: 100%; height: 46px; margin-top: 7px; padding: 0 13px; border: 1px solid #d9d2c7; border-radius: 6px; outline: none; background: #fffcf8; color: var(--ink); font-size: 13px; }.modal-card input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(232,118,99,.12); }.modal-options { display: flex; gap: 7px; margin: 14px 0 22px; }.modal-option { padding: 8px 11px; border: 1px solid #ded8cc; border-radius: 999px; background: transparent; color: #777067; font-size: 10px; }.modal-option.active { border-color: var(--coral); background: var(--rose); color: var(--coral-dark); }.modal-submit { width: 100%; }.modal-footnote { display: block; margin-top: 14px; color: #aaa297; text-align: center; font-size: 10px; }.toast { position: fixed; left: 50%; bottom: 26px; z-index: 60; padding: 11px 17px; border-radius: 999px; background: #2e302a; color: #fff; font-size: 12px; box-shadow: 0 10px 22px rgba(0,0,0,.16); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .25s ease, transform .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }.reveal-delay { transition-delay: .12s; }.reveal-delay-2 { transition-delay: .22s; }

@media (max-width: 900px) {
  .site-header { padding-inline: 22px; }.desktop-nav { gap: 15px; margin-left: 20px; }.header-actions .text-button { display: none; }.hero { grid-template-columns: 1fr; padding-top: 55px; }.hero-copy { padding-left: 0; }.hero-visual { width: min(100%, 650px); margin: 0 auto; }.orbit-one { right: -30px; }.manifesto { padding-inline: 0; }.feature-grid { gap: 10px; }.feature-card { padding-inline: 19px; }.workflow-card { padding-inline: 21px; }.template-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 210px 170px 170px; }.template-card-main { grid-row: 1 / 3; }.template-card-night { grid-column: 1 / 3; }.quote-section { padding-inline: 25px; }.cta-section { padding-inline: 8%; }.cta-flower { right: -30px; opacity: .4; }
}
@media (max-width: 640px) {
  .announcement { padding: 8px 12px; gap: 7px; text-align: center; flex-wrap: wrap; line-height: 1.3; }.announcement a { margin-left: 0; }.site-header { height: 68px; padding-inline: 20px; }.desktop-nav, .header-actions .button-small { display: none; }.menu-toggle { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border-radius: 50%; background: transparent; }.menu-toggle span { width: 18px; height: 1px; background: var(--ink); transition: transform .2s ease; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }.mobile-nav { position: absolute; top: 61px; left: 15px; right: 15px; padding: 16px; display: none; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 15px 30px rgba(45, 36, 25, .14); }.mobile-nav.open { display: flex; }.mobile-nav a { padding: 12px 8px; border-bottom: 1px solid #eee9e1; font-size: 14px; }.mobile-nav .button { margin-top: 10px; }.section-shell { width: min(100% - 40px, var(--max)); }.hero { padding: 43px 0 60px; min-height: auto; }.hero h1 { font-size: clamp(47px, 14vw, 68px); }.hero-lede { font-size: 15px; }.hero-actions { gap: 15px; }.hero-actions-dual { display: grid; grid-template-columns: 1fr; gap: 9px; }.hero-actions-dual .button { width: 100%; }.hero-note { flex-wrap: wrap; font-size: 8px; }.hero-visual { padding-top: 10px; }.editor-body { grid-template-columns: 1fr; }.editor-sidebar { display: none; }.editor-toolbar { padding-inline: 13px; }.toolbar-actions .icon-button, .toolbar-divider { display: none; }.editor-title { font-size: 10px; }.chart-canvas { padding: 13px 12px 10px; }.floor-plan { height: 250px; }.table-one { left: 25px; }.table-two { right: 25px; }.table-three { left: 35px; }.table-four { right: 35px; }.collab-cursor { left: 56%; }.floating-card-top { right: -8px; top: -3px; transform: scale(.82); transform-origin: right top; }.floating-card-bottom { left: -8px; bottom: -4px; transform: scale(.82); transform-origin: left bottom; }.orbit-one { width: 350px; height: 350px; right: -20px; top: 8px; }.orbit-two { width: 240px; height: 240px; right: 20px; top: 58px; }.proof-strip { display: block; padding: 18px 0; }.proof-strip p { margin-bottom: 12px; }.proof-items { flex-wrap: wrap; gap: 12px; font-size: 8px; }.proof-items i { display: none; }.manifesto { display: block; padding: 90px 0 75px; }.manifesto h2, .section-heading h2 { font-size: 44px; }.manifesto-copy { margin-top: 27px; }.manifesto-copy p { font-size: 15px; }.workflow-section { padding-bottom: 90px; }.workflow-grid { grid-template-columns: 1fr; gap: 12px; }.workflow-card { min-height: 390px; padding: 22px 20px 22px; }.workflow-card h3 { margin-top: 34px; font-size: 28px; }.workflow-card ol { flex-wrap: wrap; gap: 10px 16px; margin: 22px 0; }.workflow-output { align-items: flex-start; }.workflow-output small { line-height: 1.5; }.feature-section { padding-bottom: 85px; }.feature-grid { grid-template-columns: 1fr; gap: 12px; }.feature-card { min-height: 480px; }.feature-illustration { height: 225px; }.templates-section { padding-bottom: 90px; }.section-heading { display: block; margin-bottom: 31px; }.desktop-only, .heading-side-note { display: none; }.template-tabs { gap: 14px; overflow-x: auto; white-space: nowrap; }.template-tab { flex: 0 0 auto; font-size: 11px; }.template-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 210px 150px 150px; gap: 9px; }.template-card { padding: 16px; }.template-card-main { grid-column: 1 / 3; grid-row: auto; }.template-card-night { grid-column: 1 / 3; }.template-card-title { font-size: 25px; }.template-card-meta { left: 16px; bottom: 15px; font-size: 8px; }.template-chip { top: 15px; right: 14px; font-size: 7px; }.quote-section { padding: 30px 0; grid-template-columns: 36px 1fr; gap: 12px; margin-bottom: 90px; }.quote-mark { font-size: 62px; }.quote-text { font-size: 21px; }.quote-controls { grid-column: 2; justify-content: flex-end; margin-top: 12px; }.cta-section { min-height: 420px; margin-bottom: 90px; padding: 58px 28px; }.cta-section h2 { font-size: 39px; }.cta-flower { width: 210px; height: 210px; bottom: -10px; right: -55px; }.faq-section { padding-bottom: 90px; }.faq-list summary { min-height: 68px; font-size: 19px; }.faq-list details p { padding-right: 20px; font-size: 12px; }.footer-top { min-height: auto; padding: 37px 0 29px; display: block; }.footer-top > p { margin: 15px 0 23px; }.footer-links { justify-content: flex-start; flex-wrap: wrap; gap: 15px; }.footer-bottom { min-height: auto; padding: 18px 0; display: grid; gap: 10px; }.modal-card { padding: 30px 23px; }.modal-card h2 { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; } }

/* Photo-led education sections inspired by the benchmark's content flow. */
.seating-intro { padding: 20px 0 135px; display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(42px, 7vw, 105px); align-items: center; }
.photo-frame { position: relative; min-height: 510px; overflow: hidden; border-radius: 10px; background: #ded8cc; box-shadow: 0 20px 45px rgba(70, 57, 44, .12); }
.photo-frame:after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.58); border-radius: 6px; pointer-events: none; }
.photo-frame img { width: 100%; height: 100%; min-height: 510px; display: block; object-fit: cover; filter: saturate(.83) sepia(.08); }
.photo-caption { position: absolute; left: 24px; bottom: 22px; z-index: 1; padding: 7px 10px; background: rgba(48, 48, 40, .72); color: #fffaf2; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; }
.seating-intro-copy { max-width: 500px; padding-right: 5%; }
.seating-intro-copy h2 { margin: 20px 0 22px; font-size: clamp(42px, 4.6vw, 65px); line-height: .98; }
.seating-intro-copy > p:not(.eyebrow) { color: var(--muted); font-size: 16px; line-height: 1.7; }
.seating-checklist { display: grid; gap: 12px; margin: 28px 0 29px; padding: 0; list-style: none; color: #5e5a52; font-size: 12px; }
.seating-checklist li { display: flex; align-items: center; gap: 10px; }
.seating-checklist li span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #dbe9dc; color: #638267; font-size: 11px; }
.seating-intro-actions { display: flex; flex-wrap: wrap; gap: 22px; }
.tutorial-section { padding-bottom: 140px; }
.tutorial-section .section-heading { margin-bottom: 35px; }
.tutorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tutorial-card { min-height: 218px; padding: 25px 25px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbf8f2; }
.tutorial-number { display: block; margin-bottom: 31px; color: var(--coral-dark); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.tutorial-card h3 { margin: 0 0 11px; color: #46443e; font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.tutorial-card p { max-width: 260px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.tutorial-card-accent { background: #e2ebe1; }
.tutorial-card-accent .tutorial-number { color: #658166; }
.scene-section { padding-bottom: 145px; }
.scene-intro { max-width: 560px; margin-bottom: 34px; }
.scene-intro h2 { margin: 19px 0 15px; font-size: clamp(42px, 4.5vw, 62px); line-height: .98; }
.scene-intro > p:last-child { max-width: 475px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.scene-grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 265px 265px; gap: 13px; }
.scene-card { position: relative; overflow: hidden; min-height: 265px; border-radius: 10px; background: #d8d2c6; }
.scene-card img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.8) sepia(.08); transition: transform .45s ease; }
.scene-card:hover img { transform: scale(1.04); }
.scene-card:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,29,24,0) 35%, rgba(27,29,24,.72) 100%); pointer-events: none; }
.scene-card-wide { grid-row: 1 / 3; }
.scene-card-wide img { object-position: 56% center; }
.scene-card > div:not(.scene-note-mark) { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; color: #fffaf2; }
.scene-card span { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; }
.scene-card h3 { max-width: 390px; margin: 8px 0 0; font-family: var(--display); font-size: 25px; font-weight: 500; line-height: 1.05; }
.scene-card-note { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: center; padding: 22px 25px; background: #f2e1d8; color: #5c4f47; }
.scene-card-note:after { display: none; }
.scene-card-note .scene-note-mark { color: var(--coral); font-size: 23px; line-height: 1; }
.scene-card-note > span { display: block; margin-top: 14px; color: #a46e5d; }
.scene-card-note h3 { margin-top: 7px; color: #4d403a; font-size: 27px; line-height: 1.02; }
.scene-card-note p { max-width: 280px; margin: 10px 0 12px; color: #806e65; font-size: 11px; line-height: 1.45; }
.scene-card-note .arrow-link { font-size: 11px; }

@media (max-width: 900px) {
  .seating-intro { gap: 40px; }
  .photo-frame, .photo-frame img { min-height: 420px; }
  .tutorial-card { padding-inline: 18px; }
  .scene-grid { grid-template-rows: 230px 230px; }
}
@media (max-width: 640px) {
  .seating-intro { display: block; padding: 8px 0 90px; }
  .photo-frame, .photo-frame img { min-height: 360px; }
  .photo-frame { margin-bottom: 34px; }
  .seating-intro-copy { padding-right: 0; }
  .seating-intro-copy h2 { font-size: 43px; }
  .seating-intro-copy > p:not(.eyebrow) { font-size: 14px; }
  .seating-intro-actions { display: grid; gap: 13px; }
  .tutorial-section { padding-bottom: 90px; }
  .tutorial-grid { grid-template-columns: 1fr; }
  .tutorial-card { min-height: 0; padding: 22px 20px 24px; }
  .tutorial-number { margin-bottom: 19px; }
  .scene-section { padding-bottom: 90px; }
  .scene-intro h2 { font-size: 43px; }
  .scene-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: 245px 190px auto; gap: 10px; }
  .scene-card-wide { grid-row: auto; }
  .scene-card-note { grid-column: auto; grid-row: auto; min-height: 280px; }
}

.workspace-showcase { padding-bottom: 145px; }
.workspace-showcase .section-heading { margin-bottom: 35px; }
.workspace-showcase-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; }
.tool-shot { min-width: 0; overflow: hidden; border: 1px solid rgba(39,39,34,.12); border-radius: 11px; background: #fffefa; box-shadow: 0 13px 28px rgba(70,57,44,.07); }
.tool-shot-wide { grid-column: 1 / 3; }
.shot-toolbar { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid #ebe6dd; color: #656057; font-size: 10px; }
.shot-toolbar strong { font-weight: 700; letter-spacing: -.01em; }
.shot-dots { display: flex; gap: 4px; margin-right: 2px; }
.shot-dots i { width: 6px; height: 6px; display: block; border-radius: 50%; background: #d6d0c6; }.shot-dots i:first-child { background: #e99c83; }.shot-dots i:nth-child(2) { background: #dec889; }
.shot-status { margin-left: auto; padding: 5px 7px; border-radius: 5px; background: #f5efe9; color: #9d8e7d; font-family: var(--mono); font-size: 8px; }.shot-status-green { color: #648269; background: #e8f0e6; }.shot-status-coral { color: #a36c5d; background: #f7e3dc; }
.shot-body { min-height: 285px; display: grid; grid-template-columns: minmax(0, 1fr) 160px; }.shot-body-compact { min-height: 245px; }.shot-body-export { min-height: 245px; grid-template-columns: 1fr 160px; }
.shot-canvas { position: relative; overflow: hidden; background-color: #fffefa; background-image: radial-gradient(#e6dfd4 1px, transparent 1px); background-size: 12px 12px; }.shot-canvas:after { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(171,157,140,.28); pointer-events: none; }.shot-canvas-label { position: absolute; top: 12px; left: 15px; z-index: 2; color: #9e9588; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }.shot-room-label { position: absolute; z-index: 1; color: #b5aa9b; font-family: var(--mono); font-size: 7px; letter-spacing: .09em; }.shot-room-label-top { top: 30px; left: 50%; transform: translateX(-50%); }.shot-room-label-center { left: 50%; top: 59%; transform: translate(-50%, -50%); }
.shot-arch { position: absolute; top: 43px; left: 50%; width: 110px; height: 35px; display: grid; place-items: center; transform: translateX(-50%); border: 1px solid #cfbda9; border-bottom: 0; border-radius: 60px 60px 0 0; background: #f5ede4; color: #a38d78; font-family: var(--mono); font-size: 7px; }.shot-dance { position: absolute; left: 50%; top: 56%; width: 120px; height: 50px; transform: translate(-50%, -50%) rotate(-7deg); border: 1px dashed #dfcbbf; border-radius: 50%; background: rgba(253,245,237,.62); }
.shot-table { position: absolute; z-index: 2; width: 55px; height: 55px; display: grid; place-items: center; border: 1px solid #bda98f; border-radius: 50%; background: #f7efe4; color: #8e765b; font-family: var(--mono); font-size: 9px; box-shadow: 0 0 0 5px rgba(255,255,255,.74); }.shot-table b { font-weight: 500; }.shot-table-a { left: 20%; top: 32%; }.shot-table-b { right: 19%; top: 32%; }.shot-table-c { left: 44%; bottom: 17%; }.shot-table i { position: absolute; width: 11px; height: 11px; border: 1px solid #d8c9b9; border-radius: 50%; background: #d9e2d7; }.shot-table i:nth-of-type(1) { top: -8px; left: 22px; }.shot-table i:nth-of-type(2) { right: -7px; top: 21px; }.shot-table i:nth-of-type(3) { bottom: -7px; left: 22px; }.shot-table i:nth-of-type(4) { left: -7px; top: 21px; }.shot-table i:nth-of-type(5) { top: 1px; right: 1px; }
.shot-tree { position: absolute; z-index: 1; color: #8ca48a; font-size: 39px; line-height: 1; }.shot-tree-one { left: 8%; bottom: 12%; }.shot-tree-two { right: 6%; top: 18%; transform: scale(.8); }.shot-cursor { position: absolute; z-index: 3; right: 24%; top: 30%; color: var(--coral-dark); font-size: 18px; transform: rotate(-10deg); }.shot-cursor small { display: block; margin: -2px 0 0 10px; padding: 3px 6px; border-radius: 4px; background: var(--coral); color: white; font-family: var(--mono); font-size: 7px; white-space: nowrap; }
.shot-sidebar { padding: 15px 11px; border-left: 1px solid #ebe6dd; background: #fcfaf6; }.shot-sidebar-kicker { display: block; color: #aaa196; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }.shot-add { width: 100%; margin: 11px 0 12px; padding: 6px 0; border: 1px dashed #d7ccc0; border-radius: 4px; background: #fffcf8; color: var(--coral-dark); font-size: 8px; }.shot-sidebar-row { display: grid; grid-template-columns: 24px 1fr 8px; gap: 7px; align-items: center; padding: 7px 4px; border-radius: 5px; color: #a39a8e; }.shot-sidebar-row.is-selected { background: #f6e5dc; }.shot-mini-table { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #cbb79f; border-radius: 50%; background: #f8f0e5; color: #92775d; font-family: var(--mono); font-size: 7px; }.shot-sidebar-row b, .shot-sidebar-row small { display: block; }.shot-sidebar-row b { color: #5e5a52; font-size: 8px; font-weight: 600; }.shot-sidebar-row small { margin-top: 2px; color: #aaa197; font-size: 7px; }.shot-sidebar-tip { margin-top: 21px; padding-top: 11px; border-top: 1px solid #ebe4da; color: #afa79c; font-size: 8px; line-height: 1.5; }
.shot-caption { display: flex; gap: 13px; align-items: flex-start; padding: 16px 18px 18px; border-top: 1px solid #ebe6dd; }.shot-caption > span { color: var(--coral-dark); font-family: var(--mono); font-size: 9px; }.shot-caption b, .shot-caption small { display: block; }.shot-caption b { color: #5b574f; font-family: var(--display); font-size: 18px; font-weight: 500; }.shot-caption small { margin-top: 3px; color: #9b9388; font-size: 9px; line-height: 1.5; }
.shot-canvas-guests { background-color: #fffdfa; }.shot-table-focus { width: 98px; height: 98px; left: 50%; top: 55%; transform: translate(-50%, -50%); border-color: #e69a88; background: #fae6dd; box-shadow: 0 0 0 7px rgba(232,118,99,.1); }.shot-table-focus i { width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid #fffefa; color: #fff; font-family: var(--mono); font-size: 6px; font-style: normal; box-shadow: 0 2px 5px rgba(70,57,44,.12); }.shot-table-focus i:nth-of-type(1) { top: -15px; left: 35px; }.shot-table-focus i:nth-of-type(2) { right: -15px; top: 36px; }.shot-table-focus i:nth-of-type(3) { bottom: -15px; left: 35px; }.shot-table-focus i:nth-of-type(4) { left: -15px; top: 36px; }.shot-table-focus i:nth-of-type(5) { top: 2px; right: 2px; }.avatar-pink { background: #d7988c; }.avatar-blue { background: #8aaabc; }.avatar-sand { background: #c9aa78; }.avatar-lilac { background: #a99dbb; }.avatar-coral { background: #dfad93; }.shot-drop-hint { position: absolute; left: 50%; top: 85%; transform: translateX(-50%); color: #b7a99b; font-family: var(--mono); font-size: 7px; white-space: nowrap; }.shot-drag-pill { position: absolute; z-index: 4; left: 19%; top: 25%; padding: 6px 8px; border: 1px solid rgba(232,118,99,.4); border-radius: 5px; background: #fff; color: #9b7063; font-size: 8px; box-shadow: 0 7px 13px rgba(70,57,44,.11); transform: rotate(-5deg); }.shot-search { margin-bottom: 16px; padding: 7px 7px; border: 1px solid #e7e0d6; border-radius: 4px; color: #aaa197; font-size: 8px; }.shot-sidebar-guests { padding-top: 12px; }.shot-guest { display: grid; grid-template-columns: 23px 1fr 9px; gap: 6px; align-items: center; padding: 9px 1px; border-bottom: 1px solid #eee8df; }.shot-guest > i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-family: var(--mono); font-size: 6px; font-style: normal; }.shot-guest b, .shot-guest small { display: block; }.shot-guest b { color: #5e5a52; font-size: 8px; }.shot-guest small { margin-top: 2px; color: #aaa197; font-size: 7px; }.shot-guest em { color: var(--coral-dark); font-size: 13px; font-style: normal; }
.shot-body-export { background: #fbf7f0; }.shot-export-poster { width: 128px; height: 164px; margin: 34px auto; padding: 24px 10px 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border: 1px solid #cdbca6; background: #f8f0e5; color: #8f765d; box-shadow: 7px 8px 0 #e8ddd0; text-align: center; }.shot-export-poster > span { font-family: var(--mono); font-size: 7px; letter-spacing: .13em; }.shot-export-poster > span small { font-size: 9px; }.shot-export-poster b { color: #625a51; font-family: var(--display); font-size: 20px; font-weight: 500; line-height: .95; }.shot-export-poster i { width: 35px; height: 1px; background: #c9ad93; }.shot-export-poster > small { font-family: var(--mono); font-size: 7px; }.shot-export-list { padding: 18px 12px; border-left: 1px solid #ebe1d6; background: #fffefa; }.shot-export-list > div { display: flex; align-items: flex-start; gap: 7px; padding: 11px 0; border-bottom: 1px solid #eee8df; }.shot-export-list > div > i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #dbe9dc; color: #648269; font-size: 9px; font-style: normal; }.shot-export-list b, .shot-export-list small { display: block; }.shot-export-list b { color: #5e5a52; font-size: 8px; }.shot-export-list small { margin-top: 3px; color: #aaa197; font-family: var(--mono); font-size: 6px; }.shot-export-note { display: block; margin-top: 17px; color: var(--coral); font-family: var(--mono); font-size: 7px; text-align: center; }

@media (max-width: 900px) {
  .workspace-showcase-grid { grid-template-columns: 1fr 1fr; }.tool-shot-wide { grid-column: 1 / 3; }.shot-body { grid-template-columns: minmax(0, 1fr) 145px; }.shot-body-export { grid-template-columns: 1fr 145px; }
}
@media (max-width: 640px) {
  .workspace-showcase { padding-bottom: 90px; }.workspace-showcase-grid { grid-template-columns: 1fr; gap: 12px; }.tool-shot-wide { grid-column: auto; }.shot-body, .shot-body-export { grid-template-columns: minmax(0, 1fr) 132px; }.shot-body { min-height: 275px; }.shot-body-compact, .shot-body-export { min-height: 240px; }.shot-caption { padding-inline: 14px; }.shot-caption b { font-size: 16px; }.shot-caption small { font-size: 8px; }.shot-table-a { left: 17%; }.shot-table-b { right: 15%; }.shot-cursor { right: 19%; }.shot-export-poster { width: 112px; height: 145px; margin-top: 34px; }.shot-export-poster b { font-size: 17px; }
}
.templates-intro { max-width: 760px; margin: -21px 0 28px; color: #777066; font-size: 14px; line-height: 1.7; }
.templates-section .template-grid { grid-template-columns: 1.12fr .94fr .94fr; grid-template-rows: 212px 212px; gap: 12px; }
.templates-section .template-card { min-height: 0; padding: 20px; border: 1px solid rgba(79, 69, 57, .08); background: #f0e6d9; }
.templates-section .template-card-main { grid-row: 1 / 3; background: #d9e2da; }
.templates-section .template-card-garden { background: #ead9ca; }
.templates-section .template-card-editorial { background: #d9d2e1; }
.templates-section .template-card-night { grid-column: 2 / 4; background: #d5dce1; }
.templates-section .template-card:before, .templates-section .template-card:after { display: none; }
.template-card-art { position: absolute; inset: 0 0 auto; height: 56%; padding: 18px 18px 0; opacity: .96; }
.template-card-main .template-card-art { height: 62%; padding: 24px 28px 0; }
.template-card-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.templates-section .template-card-title { position: absolute; left: 22px; bottom: 48px; font-size: 27px; }
.templates-section .template-card-main .template-card-title { left: 26px; bottom: 48px; font-size: 34px; }
.templates-section .template-card-title em { color: var(--coral-dark); }
.templates-section .template-card-garden .template-card-title em { color: #7d6c5a; }
.templates-section .template-card-editorial .template-card-title em { color: #746584; }
.templates-section .template-card-night .template-card-title em { color: #718991; }
.templates-section .template-card-meta { left: 22px; bottom: 20px; font-size: 10px; }
.templates-section .template-card-main .template-card-meta { left: 26px; }
.templates-section .template-chip { top: 18px; right: 18px; }
.templates-section .template-preview-note { gap: 12px; }
.templates-section .template-preview-note .arrow-link { margin-left: auto; color: var(--coral-dark); }

@media (max-width: 900px) {
  .templates-intro { margin-top: -15px; }
  .templates-section .template-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 270px 190px 190px; }
  .templates-section .template-card-main { grid-column: 1 / 3; grid-row: auto; }
  .templates-section .template-card-night { grid-column: 1 / 3; }
  .templates-section .template-card-main .template-card-art { height: 62%; }
}

@media (max-width: 560px) {
  .templates-section .template-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 245px); }
  .templates-section .template-card-main, .templates-section .template-card-night { grid-column: auto; }
  .template-card-art, .template-card-main .template-card-art { height: 57%; padding: 16px 18px 0; }
  .templates-section .template-card-title, .templates-section .template-card-main .template-card-title { left: 18px; bottom: 45px; font-size: 26px; }
  .templates-section .template-card-meta, .templates-section .template-card-main .template-card-meta { left: 18px; font-size: 9px; }
  .templates-section .template-preview-note { align-items: flex-start; flex-wrap: wrap; }
  .templates-section .template-preview-note .arrow-link { width: 100%; margin-left: 24px; }
}